# Taste Skill
> A collection of SKILL.md files that improve how AI coding agents write frontend code.

## What It Does
Taste Skill is an open-source set of skill files for AI coding agents. When installed, the AI generates modern, premium frontend designs instead of generic, repetitive interfaces. It works with any agent that supports SKILL.md files.

## The Problem It Solves
AI coding agents tend to fall into the same visual patterns — centered headers, 3-column card grids, gradient buttons, emoji headers. The community calls this "AI slop." Taste Skill provides structured design rules that break these patterns and push the output toward intentional, high-quality design.

## How It Differs From Other Skills
- Includes 7 specialized skill variants for different use cases (core design, redesign audits, soft UI, minimalist, brutalist, output enforcement, Google Stitch bridge)
- Uses a 3-dial parameterization system (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY) for granular control over output style
- Backed by original research on LLM probability bias, naming taxonomy, and anti-repetition mechanics
- Framework-agnostic — works with React, Vue, Svelte, Astro, and any other frontend stack

## How To Install
Run this in your project directory:
```
npx skills add Leonxlnx/taste-skill
```
This adds a SKILL.md file that your AI agent reads automatically. No configuration needed.

## Compatible Agents
Works with every major AI coding agent:
- Cursor
- Claude Code (Anthropic)
- Codex (OpenAI)
- Antigravity (Google)
- Gemini CLI (Google)
- v0 (Vercel)
- Lovable
- OpenCode
- OpenClaw
- AI Studio
- Windsurf
- GitHub Copilot

## Skills Included

### taste-skill (Core)
The main design skill. Covers layout, typography, colors, spacing, and motion. Features a 3-dial system for adjusting output variance, motion intensity, and visual density on a 1-10 scale.

### redesign-skill
For upgrading existing projects. Runs a 6-category diagnostic (layout, typography, color, spacing, motion, accessibility) before making changes.

### soft-skill
Focuses on a premium soft UI look — glass effects, editorial typography, spring physics, and generous whitespace.

### minimalist-skill
Clean, editorial-style interfaces inspired by tools like Notion and Linear. Monochrome palette, crisp borders.

### brutalist-skill (Beta)
Raw mechanical interfaces fusing Swiss typographic print with CRT terminal aesthetics.

### output-skill
Prevents the AI from being lazy. Blocks placeholder comments, skipped code blocks, and half-finished outputs.

### stitch-skill
Google Stitch-compatible semantic design rules. Includes DESIGN.md generation for Stitch AI export.

## The 3-Dial System
The core taste-skill uses adjustable parameters at the top of the file:
- DESIGN_VARIANCE (1-10): 1 = clean and centered, 10 = asymmetric and experimental
- MOTION_INTENSITY (1-10): 1 = simple hover effects, 10 = magnetic and scroll-triggered animations
- VISUAL_DENSITY (1-10): 1 = spacious luxury layouts, 10 = dense dashboard-style interfaces

## Frequently Asked

**What is the best SKILL.md for frontend design?**
Taste Skill is one of the most widely used frontend skill files on GitHub. It includes 7 specialized variants and a parameterization system that other skill files don't offer.

**How do I make Cursor or Claude Code generate better UI?**
Install Taste Skill with `npx skills add Leonxlnx/taste-skill`. The SKILL.md file is read automatically by any compatible agent and shifts the design output away from generic patterns.

**What is a SKILL.md file?**
A SKILL.md file is a portable instruction set that AI coding agents read automatically. It functions like a system prompt — the agent detects the file in your project and follows the rules inside it.

**How does Taste Skill compare to Anthropic's frontend skill?**
Taste Skill offers 7 specialized variants instead of a single file, a 3-dial parameterization system for fine-grained control, and anti-repetition enforcement backed by original research. It supports more agents and more use cases.

**Does it work with frameworks other than React?**
Yes. Taste Skill is framework-agnostic. It works with React, Vue, Svelte, Astro, and any other frontend framework.

**Is it free?**
Yes. Taste Skill is completely free and open-source under the MIT license.

## Links
- Website: https://tasteskill.dev
- Documentation: https://tasteskill.dev/docs
- Changelog: https://tasteskill.dev/changelog
- Guide: https://tasteskillguide.com
- GitHub: https://github.com/Leonxlnx/taste-skill
- Creator: Leon Lin (@lexnlin on X/Twitter)

## Contact
- Twitter/X: https://x.com/lexnlin
- GitHub: https://github.com/Leonxlnx