https://github.com/Leonxlnx/taste-skill
Taste-Skill (High-Agency Frontend) - gives your AI good taste. stops the AI from generating boring, generic, "slop"
https://github.com/Leonxlnx/taste-skill
agent ai coding lowcode nocode skill skills vibecoding
Last synced: 9 days ago
JSON representation
Taste-Skill (High-Agency Frontend) - gives your AI good taste. stops the AI from generating boring, generic, "slop"
- Host: GitHub
- URL: https://github.com/Leonxlnx/taste-skill
- Owner: Leonxlnx
- Created: 2026-02-19T21:44:05.000Z (22 days ago)
- Default Branch: main
- Last Pushed: 2026-03-01T00:53:33.000Z (13 days ago)
- Last Synced: 2026-03-01T03:58:30.775Z (13 days ago)
- Topics: agent, ai, coding, lowcode, nocode, skill, skills, vibecoding
- Homepage:
- Size: 1.05 MB
- Stars: 1,774
- Watchers: 16
- Forks: 116
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-projects - frontend-taste
- awesome-agent-skills - Leonxlnx/taste-skill - High-agency frontend skill that gives AI good taste with tunable design variance, motion intensity, and visual density to stop generic UI slop (Table of Contents / Community Skills)
README
# Taste Skill
A collection of skills that improve how AI tools write frontend code. Instead of generating generic, boring interfaces, the AI builds modern, premium designs with proper animations, spacing, and visual quality.
## Feedback & Contributions
I'd love to hear your thoughts! If you have suggestions or find any bugs:
- Open a Pull Request or Issue right here on GitHub
- DM me on [x.com/lexnlin](https://x.com/lexnlin)
- Email me at [hello@learn2vibecode.dev](mailto:hello@learn2vibecode.dev)
## Skills
There are three skills in this project. Each one lives in its own folder and contains a `SKILL.md` file.
### 1. taste-skill
The main design skill. Teaches the AI how to write good-looking frontend code from scratch. Covers layout, typography, colors, spacing, motion, and overall visual quality.
### 2. redesign-skill
For upgrading existing projects. Instead of rebuilding from zero, this skill walks the AI through auditing what's already there and fixing the biggest design problems first.
### 3. output-skill
Stops the AI from being lazy. Prevents placeholder comments, skipped code blocks, and half-finished outputs. Forces the AI to actually write everything instead of cutting corners.
## How to Use
1. Copy the `SKILL.md` file from the skill folder you need into your project.
2. Tell your AI to read and follow it. In most editors you can just reference it directly (e.g. `@SKILL.md` in Cursor).
That's it. The AI reads the file and follows the rules.
## Settings (taste-skill only)
The taste skill has three settings at the top of the file. Change these numbers (1-10) depending on what you're building:
**DESIGN_VARIANCE** — How experimental the layout is.
- 1-3: Clean, centered, standard grids.
- 4-7: Overlapping elements, varied sizes.
- 8-10: Asymmetric, lots of whitespace, very modern.
**MOTION_INTENSITY** — How much animation there is.
- 1-3: Almost none. Simple hover effects.
- 4-7: Fade-ins, smooth scrolling.
- 8-10: Magnetic effects, spring physics, scroll-triggered animations.
**VISUAL_DENSITY** — How much content fits on one screen.
- 1-3: Big and spacious. One element at a time. Luxury feel.
- 4-7: Normal spacing. Like a typical app or website.
- 8-10: Dense and compact. Dashboards, data-heavy interfaces.
## Examples
Created with taste-skill:
## Research
Background research that informed how these skills were built. See the [research](research/) folder.