TL;DR

Taste Skill is a collection of SKILL.md files that plug into AI coding agents (Cursor, Claude Code, Codex, Antigravity, Windsurf, Copilot) and force them to write better-looking frontend code. Key facts:

  • 7,896 GitHub stars (created Feb 19, 2026 — under 2 months old)
  • Portable skills format: compatible with the emerging Agent Skills standard — no lock-in
  • 7 variants: taste, redesign, soft, output, minimalist, brutalist, stitch
  • One-command install: npx skills add https://github.com/Leonxlnx/taste-skill
  • Framework-agnostic: works with React, Next.js, Vue, Svelte, plain HTML
  • Opinionated: bans Inter for “creative” vibes, bans purple/blue “AI aesthetic”, bans centered hero sections
  • Tunable: three dials (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY) on a 1–10 scale
  • Free & open: MIT-style repo, donations via GitHub Sponsors

If you’ve ever looked at something an LLM generated and thought “why does every AI-built site look like the same 3-column landing page with a purple gradient button?” — this is the skill built specifically to fix that.

Quick Reference

FieldValue
RepoLeonxlnx/taste-skill
Websitetasteskill.dev
Installnpx skills add https://github.com/Leonxlnx/taste-skill
Compatible agentsCursor, Claude Code, Codex, Antigravity, Windsurf, Copilot
Default stackReact / Next.js + Tailwind + Framer Motion
Icons@phosphor-icons/react or @radix-ui/react-icons (enforced)
LicenseOpen source (no SPDX on repo)
CreatedFebruary 19, 2026

What Taste Skill Actually Is

Taste Skill is not a library, not a component kit, and not a CLI tool in the traditional sense. It is a bundle of portable instruction files — SKILL.md files — that AI coding agents detect and automatically load into their context.

The core idea: large language models have statistical biases. When you ask Claude or GPT to “build me a SaaS landing page”, you get a centered hero, a 3-column feature grid, a pricing table, emoji icons, and probably a purple gradient somewhere. It’s not wrong, it’s just average. Every vibe-coded app looks like every other vibe-coded app.

Taste Skill attacks this by injecting ~800 lines of highly opinionated design rules directly into the agent’s system prompt. Rules like:

  • Ban Inter for “Premium” vibes. Use Geist, Outfit, Cabinet Grotesk, or Satoshi instead.
  • Ban the “AI Purple/Blue” aesthetic. No purple glows, no neon gradients. One accent color, saturation under 80%.
  • Ban centered hero sections when layout variance is high. Force split-screen, left-aligned-content / right-aligned-asset, or asymmetric whitespace layouts.
  • Ban h-screen for full-height hero sections (use min-h-[100dvh] — prevents iOS Safari’s catastrophic layout jumps).
  • Ban width/height animation. Only animate transform and opacity for hardware-accelerated motion.
  • Ban emojis in code. Replace with Phosphor or Radix icons.

It treats the LLM like a junior frontend dev with bad taste — and drills the opinions of a senior design engineer directly into its context window.

Three things pushed Taste Skill from zero to ~8K stars in under two months:

  1. The “AI slop” backlash hit frontend. Through early 2026, Twitter/X has been flooded with screenshots mocking AI-generated UIs — the same blue buttons, the same Lucide icons, the same bento grid. A skill that names the slop and bans it was perfectly timed.

  2. The Agent Skills standard started working. Vercel, Anthropic, and others converged on a portable SKILL.md format that most major agents now auto-load. Taste Skill was one of the first high-quality skills outside the official registry. Check the awesome-agent-skills list — Taste Skill is the headline frontend entry.

  3. It’s not another component library. Frameworks like shadcn/ui give you pre-built components. Taste Skill gives the AI judgment — it teaches the agent to choose, not just to copy. That’s more durable as models improve.

Key Features (With Real Code)

Feature 1: Three-Dial Tuning System

Every run, the skill reads three numeric parameters from its header:

## 1. ACTIVE BASELINE CONFIGURATION
* DESIGN_VARIANCE: 8  (1=Perfect Symmetry, 10=Artsy Chaos)
* MOTION_INTENSITY: 6 (1=Static, 10=Cinematic/Magic Physics)
* VISUAL_DENSITY: 4   (1=Art Gallery/Airy, 10=Pilot Cockpit/Packed Data)

You can override them per-prompt: “Build a dashboard, VISUAL_DENSITY 9, MOTION_INTENSITY 2” and the agent will branch its generation logic accordingly. For a dense dashboard, it ditches cards entirely in favor of divide-y rows and negative-space grouping. For a marketing site at variance 9, it avoids symmetry like the plague.

Feature 2: Deterministic Typography Rules

Instead of hoping the AI picks a good font, Taste Skill hardcodes defaults:

// Generated with taste-skill active
<h1 className="text-4xl md:text-6xl tracking-tighter leading-none font-geist">
  Build interfaces that do not look like every other AI project.
</h1>
<p className="text-base text-gray-600 leading-relaxed max-w-[65ch]">
  Premium type, single accent color, asymmetric layout — by default.
</p>

Note the details: tracking-tighter leading-none for display text, max-w-[65ch] for body copy (the classically correct reading measure), and a banned-serif rule specifically for dashboard/software UIs.

Feature 3: Safer Motion With Framer

The skill has an entire section on performance pitfalls, and the rules are specific enough to prevent real bugs:

// GOOD — runs outside React render cycle, stays 60fps on mobile
'use client'
import { motion, useMotionValue, useTransform } from 'framer-motion'

export function MagneticButton({ children }: { children: React.ReactNode }) {
  const x = useMotionValue(0)
  const y = useMotionValue(0)
  const rotateX = useTransform(y, [-50, 50], [10, -10])
  const rotateY = useTransform(x, [-50, 50], [-10, 10])

  return (
    <motion.button
      style={{ x, y, rotateX, rotateY }}
      onMouseMove={(e) => {
        const rect = e.currentTarget.getBoundingClientRect()
        x.set((e.clientX - rect.left - rect.width / 2) * 0.3)
        y.set((e.clientY - rect.top - rect.height / 2) * 0.3)
      }}
      onMouseLeave={() => { x.set(0); y.set(0) }}
      transition={{ type: 'spring', stiffness: 150, damping: 15 }}
      className="px-6 py-3 bg-zinc-900 text-white rounded-full active:scale-[0.98]"
    >
      {children}
    </motion.button>
  )
}

The SKILL.md explicitly warns: “NEVER use React useState for magnetic hover or continuous animations. Use exclusively Framer Motion’s useMotionValue and useTransform outside the React render cycle.” This is the kind of thing juniors (and LLMs) get wrong, and it murders mobile performance.

Feature 4: Mandatory Interaction States

One of my favorite rules forces the agent to generate the states it usually forgets:

  • Loading: skeletal loaders that match the layout, not generic spinners
  • Empty: composed empty states that teach users how to populate data
  • Error: inline error reporting below inputs, not toast-blasted alerts
  • Tactile: -translate-y-[1px] or scale-[0.98] on :active so clicks feel physical

This alone is worth installing the skill. LLMs will happily ship a form that has no empty state, no loading state, and no error state. Taste Skill makes skipping them a hard violation.

Feature 5: The output-skill Variant

Bundled alongside is output-skill, which isn’t about visuals at all — it bans lazy patterns like // ... rest of code, // TODO: implement here, and “the remaining items follow the same pattern”. If you’ve ever asked Claude for 5 components and received 2 plus a description of the other 3, this skill makes that a hard failure. I’d argue this one is worth installing on its own.

Installing and Running It

Prerequisite: an agent that supports the skills CLI — that currently means Cursor, Claude Code, Codex, Antigravity, Windsurf, or Copilot with skills enabled.

# Install the full Taste Skill bundle
npx skills add https://github.com/Leonxlnx/taste-skill

# Or install a specific skill
npx skills add https://github.com/Leonxlnx/taste-skill --skill design-taste-frontend
npx skills add https://github.com/Leonxlnx/taste-skill --skill full-output-enforcement
npx skills add https://github.com/Leonxlnx/taste-skill --skill minimalist-skill

After install, open your project in your agent and the skill auto-activates on frontend tasks. No config file, no extra setup. To verify it loaded, ask your agent: “What are your current DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY values?” — if Taste Skill is active, you’ll get numbers back.

To tune the baseline, edit the first block of skills/taste-skill/SKILL.md in your project’s skills directory. Change the three integers and commit — your whole team now shares the same design baseline.

Who Should Use This (And Who Shouldn’t)

Good fit:

  • Solo devs and small teams building SaaS landing pages, dashboards, or marketing sites with AI agents
  • Designers who want AI output that doesn’t embarrass them in front of clients
  • Anyone tired of debugging h-screen jumps on iOS Safari
  • Teams standardizing on React + Tailwind + Framer Motion (the enforced stack)

Bad fit:

  • Vue, Svelte, or SolidJS shops — the rules work framework-agnostically for design but the code examples lean hard on React conventions (RSC, 'use client', Next.js Server Components)
  • Projects already using a strict design system (Material, Fluent, Ant Design) — Taste Skill will fight your tokens
  • Anyone who likes centered hero sections and purple gradients (there is no turning those back on without forking)
  • Teams that don’t use one of the supported agent harnesses

Alternatives Comparison

Skill / ToolApproachFit
Taste SkillOpinionated anti-slop rules in SKILL.mdBest for premium marketing sites and dashboards
shadcn/ui MCPPre-built accessible components via MCPBest when you want consistency, not novelty
v0.devHosted AI generator with Vercel house styleBest for rapid prototyping, less portable
Official Agent Skills (vercel-labs)Framework-specific skills (Next.js, Tailwind)Best as a baseline; pair with Taste Skill
Playwright-skillTest generation rules, unrelated to visualsComplementary, not competing

Taste Skill and shadcn/ui are not competitors — they’re stacked. Most practitioners install shadcn components for accessibility and pair Taste Skill for layout, typography, and motion taste.

First Impressions From the Community

From GitHub issues, the tasteskill.dev site, and the agent-skills ecosystem:

  • Headlining the awesome-agent-skills list. VoltAgent’s curated registry describes it as “the high-agency frontend skill that gives AI good taste with tunable design variance, motion intensity, and visual density to stop generic UI slop” — unusually specific praise for a curated list.
  • Consistent demand for v2. The repo’s beta waitlist (at tasteskillv2.vercel.app) has been filling up since launch, suggesting a strong early user base that wants more.
  • Framework-agnostic claim holds up in practice. Users running the skill on Svelte projects report that the design decisions (typography, color, layout) apply cleanly, even though the code examples are React-first.
  • The output-skill variant is a sleeper hit. Several users on X have reported installing just full-output-enforcement as an antidote to Claude Code and Codex truncating their files mid-generation.

Honest Limitations

This isn’t a perfect skill and the author is upfront about some of it:

  1. No official license file. The repo doesn’t ship an SPDX license header. For open-source purists and compliance teams, that’s a blocker until it’s clarified.
  2. React/Next.js lock-in in examples. The rules claim framework-agnosticism but the concrete code snippets assume RSC, 'use client', and Tailwind v3/v4. Porting the spirit to Svelte or Vue works; porting the letter doesn’t.
  3. Opinions are very strong. “Inter is banned for creative vibes” is a defensible opinion, but it is an opinion. If you love Inter, you’ll be editing the skill file constantly.
  4. Requires a compatible agent. If your team uses an IDE without skills support, you get nothing. Copying the SKILL.md content into a custom prompt works but loses auto-activation.
  5. No automated tests or visual regression. There’s no way to verify the agent actually followed the rules short of reading the output. A future “taste-lint” tool would be a killer addition.
  6. The three-dial system is under-documented in examples. It’s not always obvious what DESIGN_VARIANCE: 8 + VISUAL_DENSITY: 9 looks like vs 6 + 4 — the skill could benefit from a gallery keyed to each dial combination.

FAQ

Q: Does Taste Skill work with Cursor? Yes. Cursor is a first-class target — the install command npx skills add https://github.com/Leonxlnx/taste-skill drops the skill files into your project and Cursor auto-detects them on frontend tasks. Same story for Claude Code, Codex, Antigravity, Windsurf, and Copilot with skills enabled.

Q: Does it work without Tailwind CSS? Partially. The design principles (banned fonts, banned colors, forced asymmetry, required interaction states) are framework-agnostic. The code examples are Tailwind-first and assume v3 or v4. If you use vanilla CSS, CSS Modules, or styled-components, the agent will adapt the rules but you lose the direct class-name guidance.

Q: Can I use it with Vue, Svelte, or SolidJS? Yes for the taste rules, with caveats for the code. The typography, color, layout, and motion rules apply universally. The React-specific rules ('use client', RSC isolation, Framer Motion) become suggestions rather than mandates. You’ll get “good taste” outputs but the boilerplate needs translation.

Q: How is this different from shadcn/ui or Aceternity UI? shadcn/ui gives you components — accessible, copy-paste building blocks. Taste Skill gives the AI judgment on how to compose those components into non-generic layouts. They complement each other: install shadcn for the primitives, install Taste Skill to stop the AI from arranging them like every other SaaS page.

Q: What is a SKILL.md file and why does it matter? A SKILL.md file is a portable instruction file that AI coding agents detect and automatically load into their context. It’s the emerging open standard for sharing agent behavior without writing custom prompts. Install one file, every compatible agent on the team gets the same rules.

Q: Is Taste Skill free? Yes. The repo is free and open source, with development funded via GitHub Sponsors. A paid v2 is in beta but v1 remains free.

Q: Will it fight my existing design system? Probably. Taste Skill has opinions about fonts, colors, spacing, and motion. If you already use Material, Fluent, Ant Design, or a corporate design system, the skill will generate outputs that conflict with your tokens. Either pick one or fork Taste Skill and align its rules to your system.

Bottom Line

Taste Skill is the first frontend skill that treats “AI slop” as a solvable engineering problem rather than a vibes problem. Seven thousand stars in two months says the frustration it targets is real, and the ruleset is specific enough to actually ship different-looking code — not just marketing copy.

It won’t replace your design system, won’t fit every stack, and has some real gaps (license, Vue/Svelte examples, tests). But if you’re shipping React + Tailwind + Framer and your AI-generated UIs all look like the same landing page, this is the highest-leverage install you can make today. One command, one commit, different output tomorrow.

Next steps: run npx skills add https://github.com/Leonxlnx/taste-skill on a scratch branch, ask your agent to rebuild a page, and compare. If the diff makes you smile, keep it. If not, it’s one git revert away.