taste-skill v2: the anti-slop frontend skill with 3 dials and a 60-item preflight check

taste-skill v2: the anti-slop frontend skill with 3 dials and a 60-item preflight check

`taste-skill v2` (Leonxlnx/taste-skill, 33K stars, MIT, ~190K total installs) is the most-adopted independent frontend design agent skill — banning Inter, purple gradients, and centered hero sections via three numeric dials (DESIGN_VARIANCE / MOTION_INTENSITY / VISUAL_DENSITY) and a 60-item Pre-Flight Check. The article covers the 3-dial control system, the mandatory §0 Brief Inference declaration, all 13 sub-skills in the collection, four install paths, real community feedback from @marchelfah / @JeffKazzee / @Govind755, and six concrete limitations including the 87KB/~20K token overhead, experimental v2 status, React/Next.js + Tailwind v4 only stack, excluded UI categories (dashboards, data tables, forms), missing a11y subsystem, and single-maintainer bus factor.

Today's Trending Agent Skills
June 5, 2026 · 2:34 AM
5 subscriptions · 18 items

Research Brief

taste-skill v2: anti-slop frontend for AI agents

Your AI agent has a tell. Ask it to build a landing page and you get Inter, a purple glow, three equal-width feature cards, and a centered hero section. Every time, everywhere. Not because the model lacks design knowledge (it has plenty), but because without explicit constraints it statistically defaults to the most probable output, and "probable" in training data means generic.
taste-skill v2 (Leonxlnx/taste-skill, 33K stars, MIT) 1 takes a different approach from Anthropic's own frontend-design skill. Rather than telling the agent to "be creative" or "pick an extreme aesthetic," it encodes design quality as numbered dials, hard bans, and a 60-item preflight checklist the agent must pass before outputting any code. The SKILL.md weighs in at 87 KB and consumes roughly 20,000 tokens per session load. For the right use case, that overhead buys you a frontend that doesn't look like it came off an AI assembly line.
taste-skill "Less slop, designs pop" hero preview with "Taste Skill applied" badge
Official preview from tasteskill.dev, showing a split-hero layout and the "Taste Skill applied" confirmation badge 2

The 3-dial control system

Everything in taste-skill v2 flows from three numeric variables, each on a 1-10 scale. 3
DialWhat it controlsDefault
DESIGN_VARIANCEHow experimental the layout is: grid breakouts, asymmetry, off-canvas elements8
MOTION_INTENSITYAnimation depth: scroll triggers, pinned sections, magnetic hover, GSAP sequences6
VISUAL_DENSITYInformation density on screen at any one point4
The defaults (8 / 6 / 4) target a mainstream SaaS landing page or portfolio. Before generating any code, v2 requires the agent to declare a one-line design read:
"Reading this as: B2B SaaS landing for technical buyers, with a Linear-style minimalist language, leaning toward Tailwind utilities + Geist + restrained motion." 3
That declaration happens in the new §0 Brief Inference section. It forces the agent to commit to a direction before touching layout, catching the "start coding, figure out the vibe later" failure mode that produces the Inter-plus-purple result.
The dials then gate every downstream decision. Centered hero sections are banned when DESIGN_VARIANCE > 4. Three equal-width feature cards are banned regardless of dial values. Setting MOTION_INTENSITY > 4 requires real animations: you cannot output a static page with a high motion dial. Every animation also needs a one-line justification: "If you cannot articulate the reason in one sentence, drop the animation." 3

What v2 added beyond v1

v2 is a complete rewrite, expanding from roughly 500 lines to 25,000+ words across 14 sections plus three appendices. 4 The sections with the most day-to-day impact:
  • §0 Brief Inference: reads the project brief and maps it to a design direction before generating
  • §2 Design System Map: routes the inferred direction to an existing system (Material, Fluent, Carbon, Polaris) as a reference anchor
  • §8 Dark Mode Protocol: explicit rules for dark-mode color handling, not left to agent judgment
  • §13 Out of Scope: lists what taste-skill will not handle (details below)
  • §14 Pre-Flight Check: 60+ boolean checks covering dial values, hero CTA visibility, color consistency, animation motivation, and more
The hardest new rule is §9.G: the em-dash is completely banned from all visible text, including headlines, body copy, alt text, attribution, and quotes. The SKILL.md calls it "the LLM's signature stylistic crutch and the #1 visual Tell in production tests." 3 The premium-consumer color palette (beige + brass + oxblood) is similarly banned; v2 identifies it as the second most common AI tell on projects involving kitchenware, craft brands, or luxury goods.

13 sub-skills at a glance

The repo ships 13 skills total: 10 that output code and 3 that generate reference images. 1
Skill nameInstall nameBest for
taste-skill (v2)design-taste-frontendDefault: landing pages, portfolios, SaaS marketing
taste-skill-v1design-taste-frontend-v1Pin to stable v1 behavior while v2 iterates
gpt-tasteskillgpt-tasteGPT/Codex: higher layout variance, more aggressive anti-slop
image-to-code-skillimage-to-codeGenerate a reference image first, then code from it
redesign-skillredesign-existing-projectsAudit and fix layout/spacing/hierarchy on existing projects
soft-skillhigh-end-visual-designHigh-end, expensive-feeling UI with generous whitespace
output-skillfull-output-enforcementStops agents from producing placeholder or partial output
minimalist-skillminimalist-uiNotion/Linear-style editor-product UI
brutalist-skillindustrial-brutalist-uiSwiss typography, sharp contrast, industrial visual language
stitch-skillstitch-design-tasteGoogle Stitch-compatible rules with a DESIGN.md export
imagegen-frontend-webimagegen-frontend-webWebsite design reference images (hero, landing, multi-section)
imagegen-frontend-mobileimagegen-frontend-mobileMobile UI concept images
brandkitbrandkitLogo direction, color palette, typography, brand applications
The README recommends starting with taste-skill as the default: "Start with taste-skill for the safest general default." 1

Install paths

# Full collection (all 13 skills)
npx skills add https://github.com/Leonxlnx/taste-skill

# Single skill — specify by install name
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

# Upgrade from v1 to v2 — same command, install name unchanged, SKILL.md replaces in place
npx skills add https://github.com/Leonxlnx/taste-skill

# Pin to v1 if you need stable behavior
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend-v1"
Compatible agents: Claude Code, Cursor, Codex, Gemini CLI, v0, Lovable, OpenCode, AI Studio. 2 No API key or runtime dependencies required.
As an alternative to the CLI, you can paste the SKILL.md content directly into any Claude Code or ChatGPT session. The npx skills CLI (part of vercel-labs/agent-skills) handles the disk install, but the content itself is a Markdown file. 1

How to invoke it with real prompts

Once installed, reference the skill name or dial values explicitly:
Build a landing page for a productivity tool targeting indie developers.
Use the taste-skill. DESIGN_VARIANCE 7, MOTION_INTENSITY 4, VISUAL_DENSITY 3.
For the redesign sub-skill:
/redesign-existing-projects — audit this homepage and fix the layout/spacing hierarchy.
Do not change colors or content, only structural issues.
The community has converged on a three-skill frontend stack: 5 6
  1. taste-skill: sets the overall design direction and layout rules
  2. Impeccable (an agent skill with 23 design directives): polishes typography and spacing details
  3. Emil Kowalski (an animation-focused agent skill): adds motion depth
For Claude Code, the three install under .claude/ and activate via separate slash commands.

Real output: the Floria demo

The official showcase is Floria, a floral brand landing page built with taste-skill and deployed to Vercel. 7
Floria landing page with dark background, large serif headline "Botanic Architecture", asymmetric layout, and floral photography
Floria demo: dark botanical brand, left-aligned hero, asymmetric nav, three different layout families across the scroll 7
The design choices visible in Floria trace directly back to the dial system: the hero is left-aligned rather than centered (DESIGN_VARIANCE > 4 bans the centered default), the heading uses a display serif instead of Inter, and the page rotates through at least three layout families on scroll. A second showcase, Collective OS, applies the same skill to a technical product UI.

Community reception

On skills.sh, seven taste-skill sub-skills all rank in the top 255 globally. design-taste-frontend sits at #222 with 31,700 installs, and the full collection totals roughly 190,000 installs across all sub-skills. 6 For context, Anthropic's frontend-design skill sits at #3 with 341,400 installs, so taste-skill reaches about 55% of that volume as an independent project.
User feedback is positive for the core use case. @marchelfah, a founder who ran production tests, wrote: "Outputs are noticeably cleaner when the model knows what to avoid." 5 @JeffKazzee, an independent researcher, called it the "new design meta" for Codex and Claude Code. 5
Loading content card…
The sharper critique comes from professional designers. A thread in Reddit r/UI_Design argued that the concept is "kind of silly" because real aesthetic judgment is the core of design work and cannot be compressed into a Markdown file. Developers Digest put a more practical frame on it: "The mistake is treating these files as magic prompts. They are not. The useful version is stricter: a taste skill is a review checklist, a style contract, and a calibration artifact." 8
That framing captures what taste-skill v2 actually delivers. It does not generate novel aesthetics. It eliminates the worst defaults and raises the floor, as Davide Volpato put it: "taste-skill doesn't magically give you great design. But it kills the worst defaults. Which is already a huge win." 9

Limitations and when to skip it

Token cost. The v2 SKILL.md is 87 KB, loading roughly 20,000-22,000 tokens per session. 3 On large codebases where context is already constrained, this is a real overhead. GitHub Issue #38 proposes splitting the appendices into reference/ files to allow selective loading, but it remains open. 10
v2 is still experimental. The CHANGELOG is explicit: "This is a pre-release. It is the new default install because it is genuinely better than v1, but it is still iterating." 4 Issue #36 documents a naming inconsistency where the anti-center-bias rule uses LAYOUT_VARIANCE in one place instead of DESIGN_VARIANCE. 10 Pin to design-taste-frontend-v1 if you need stable behavior across a long project.
Scope is narrow by design. §13 explicitly excludes six categories: 3
  • Dashboards and BI pages
  • Data tables
  • Multi-step forms
  • Code editors
  • Native mobile apps
  • Realtime collaboration UIs
For anything on that list, a design system component library (Fluent, Carbon, shadcn/ui defaults) is the right tool.
React/Next.js + Tailwind v4 only. The SKILL.md hardcodes @phosphor-icons/react, Radix UI icons, and Motion (formerly Framer Motion) imports. 3 Svelte, Vue, Angular, and Solid.js have no first-party variant. A community issue (#35) requesting a Svelte 5 port has not shipped. 10
No accessibility subsystem. Issue #32 requesting an a11y skill has been open since May 26 without closure. 10 For accessibility-first work, pair with a dedicated skill or manual auditing.
Single-maintainer bus factor. Leon Lin (GitHub: Leonxlnx), the sole primary author, is a 16-year-old student working with two co-contributors. The project has no formal release tags and v2 carries no version number yet. 11 The 33K stars and ~190K total installs suggest the project has moved well beyond a personal experiment, but long-term maintenance continuity depends on one person.

Install: npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend" Repo: github.com/Leonxlnx/taste-skill | Site: tasteskill.dev
Cover: taste-skill project banner from github.com/Leonxlnx/taste-skill (MIT)

Add more perspectives or context around this Post.

  • Sign in to comment.