Taste Skill: The Anti-Slop Frontend Skill Library

You can spot an AI-generated landing page in a second: the purple-to-blue gradient, the three equal feature cards, the 001 · Capabilities eyebrow, the em-dash in every headline, the fake dashboard built out of styled divs. The model does not have bad taste. It has average taste, and average is exactly the failure mode — it regresses to the most common pattern in its training data on every decision.

Taste Skill attacks that from the front. It is a library of portable SKILL.md files that load design constraints into the agent’s context before it writes a line of markup, so the generation is steered instead of the output being cleaned up afterward. Its tagline: “Less slop, designs pop.”

Research snapshot

Verified on July 21, 2026 against Leonxlnx/taste-skill (MIT, roughly 65,700 GitHub stars and 4,500 forks, created February 2026), the project site, and each skill’s SKILL.md frontmatter fetched from source. The flagship skill is on v2 (experimental) — a substantial 2026 rewrite that is the default install but still iterating. Treat the version your harness actually installs as authoritative.

The short version

• Taste Skill is a set of instruction files, not a model, an MCP server, or a CLI. It plugs into any harness that reads skill files.
• The flagship (design-taste-frontend) reads your brief, infers a design direction, sets three dials, maps to a real design system when one applies, generates, then runs a hard pre-flight checklist.
• Its power is a long, specific ban list of “AI Tells” — the concrete patterns that make generated UI look generated.
• It is scoped to marketing surfaces: landing pages, portfolios, redesigns. It is explicitly not for dashboards, data tables, multi-step product UI, or native mobile.
• The bundle ships 13 skills — soft, minimalist, brutalist, redesign, image-to-code, and image-generation variants — so you can install one aesthetic instead of the whole thing.
• It is opinionated to the point of overriding your house style unless you tell it otherwise, and v2 is a pre-release that changes in place. Adopt it deliberately.

Where it sits next to Impeccable

The docs already cover Impeccable, and the two solve the same problem from opposite ends. Impeccable gives you and your agent a shared vocabulary — 23 commands (typeset, quieter, colorize) that refine code you already have and inherit your existing tokens. Taste Skill instead constrains generation up front: it does not learn your design system, it imposes one direction with hard rules and a pre-flight gate.

Use Taste Skill when you are generating a new surface from a brief and want it to not look templated on the first pass. Use Impeccable when you have working UI and want to direct specific, named improvements without art-directing in prose. They compose: generate with taste, then polish with vocabulary.

What you’ll walk away with

• How the v2 pipeline works: brief inference, the three dials, the design-system map, and the pre-flight check
• The install command for your harness, and which of the 13 skills to reach for
• The anti-slop ban list, and one rule in it that will bite you
• Where Taste Skill helps, where it does not, and how to override it when it fights your house style

Install

Taste Skill installs through the skills CLI, the same tool used for every other skill in this section. There is nothing to configure — the agent reads the file at the start of a session.

Claude Code

Install the flagship v2 skill (the default) from the terminal:

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

Or install the whole bundle (all 13 skills):

npx skills add Leonxlnx/taste-skill

Project skills land in .claude/skills/<name>/SKILL.md; personal skills go to ~/.claude/skills/. Claude Code loads the full SKILL.md only when it decides the skill is relevant.

The repo also ships a Claude Code plugin manifest, so you can add it as a marketplace instead:

/plugin marketplace add Leonxlnx/taste-skill

Cursor

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

Project skills install into the shared open-standard directory .agents/skills/<name>/SKILL.md; global skills go to ~/.cursor/skills/. Cursor reads both.

Codex

Target Codex explicitly with -a codex:

npx skills add Leonxlnx/taste-skill -a codex

Codex shares Cursor’s .agents/skills/ directory and reads personal skills from ~/.codex/skills/. If you are on Codex specifically, the gpt-taste variant is tuned for it.

Tip

The install name: in a skill’s frontmatter is not the repo directory name. The flagship lives at skills/taste-skill/ but installs as design-taste-frontend. Use the install names from the table below, not the folder names, with --skill.

To pin the original v1 (byte-identical to the pre-rewrite release), pass its install name:

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend-v1"

Beyond Claude Code, Cursor, and Codex, the project lists compatibility with Gemini CLI, Antigravity, AI Studio, v0, Lovable, OpenCode, OpenClaw, Windsurf, and Copilot — anything that reads SKILL.md.

How v2 works

The v2 flagship is a 1,200-line SKILL.md organized as a pipeline the agent runs in order. The stages that matter:

1. Brief inference (§0). Before any code, the agent reads signals from your request — page kind, vibe words, references, audience, constraints — and emits a one-line “Design Read.” If the brief is ambiguous it asks one question rather than guessing. This is the anti-default discipline: name a direction before generating, so the output is not the statistical average.

2. Set the three dials (§1). Every layout, motion, and density decision downstream is gated by three values.

3. Map the brief to a design system (§2). If the brief reads as a named system, use the official package. If it reads as an aesthetic, use web standards and label the implementation honestly.

4. Generate against the stack defaults, layout discipline, and ban list.

5. Run the pre-flight check (§14). A hard checklist. Every box must honestly pass before the work is called done — consistency locks, contrast, hero discipline, motion-claimed-motion-shown.

The three dials

The dials are the core configuration. Baseline is 8 / 6 / 4, overridden conversationally (you do not edit the file):

• DESIGN_VARIANCE (1-10) — 1 = perfect symmetry, 10 = artsy chaos
• MOTION_INTENSITY (1-10) — 1 = static, 10 = cinematic / physics
• VISUAL_DENSITY (1-10) — 1 = art gallery, 10 = cockpit / packed data

The skill infers dial values from the brief:

Signal in the brief	VARIANCE	MOTION	DENSITY
minimalist / clean / calm / editorial / Linear-style	5-6	3-4	2-3
premium consumer / Apple-y / luxury / brand	7-8	5-7	3-4
playful / wild / Dribbble / Awwwards / experimental	9-10	8-10	3-4
landing page / portfolio / marketing site (default)	7-9	6-8	3-5
trust-first / public-sector / regulated / a11y-critical	3-4	2-3	4-5

And keeps a use-case preset table for common surfaces:

Use case	VARIANCE	MOTION	DENSITY
Landing (SaaS, mainstream)	7	6	4
Landing (agency / creative)	9	8	3
Portfolio (designer / studio)	8	7	3
Portfolio (developer)	6	5	4
Editorial / blog	6	4	3
Public-sector service	3	2	5

The design-system map

Rather than invent a look for every brief, §2 routes to real systems. When the brief names or implies Material, Fluent, Carbon, Polaris, Atlassian, Primer, GOV.UK, USWDS, Bootstrap, Radix, shadcn, or Tailwind, the skill reaches for the official package and points at canonical docs (an appendix lists install commands and sources per system). When the brief is an aesthetic instead — glassmorphism, bento, brutalism, editorial, aurora, kinetic type — it builds on web standards and labels the implementation honestly. Apple’s Liquid Glass, notably, is documented as a web approximation, not an official package, so the agent does not claim fidelity it cannot deliver.

The anti-slop ban list

Section 9, “AI Tells,” is where the skill earns its name. It bans the concrete patterns that mark generated UI, grouped by category. A representative slice:

• Visual: AI-purple and mesh gradients, dark glows on cards, decorative status dots, hand-rolled decorative SVG illustrations.
• Layout: three-equal-card feature rows, border-t + border-b on every row of a long list, repeating the same left/right layout across sections (it requires at least 4 different layout families across 8 sections).
• Content: numbered section eyebrows (001 · Capabilities), hero version labels (BETA, V0.6) unless it is a real product launch, fake photo-credit captions, locale/weather strips (Lisbon, working with founders), scroll cues (↓ scroll).
• Fakery: div-based fake product UI — styled-div task lists, dashboards, and terminals presented as real.

It also imposes consistency locks: one accent color for the whole page, one corner-radius system, one page theme (no mid-page light/dark flips). Hero discipline is hard: headline ≤ 2 lines, subtext ≤ 20 words, primary CTA visible without scrolling, nav a single line ≤ 80px tall.

The em-dash ban will surprise you

v2’s most-enforced rule (§9.G) is a complete ban on em-dashes and en-dashes anywhere on the page — headlines, body, captions, alt text, button labels. In the project’s own testing this was the single most-violated Tell, because models reach for — constantly. Use a hyphen or restructure the sentence.

Worth knowing: this collides with common house styles (including this site’s, which uses --). If your brand voice uses em-dashes deliberately, you will need to override this rule — see When it fights your house style.

Motion discipline

For animation, v2 standardizes on Motion (motion/react, the rebrand of Framer Motion) and ships three canonical code skeletons the agent copies instead of improvising:

• Sticky-stack — pinned cards that stack as you scroll (GSAP ScrollTrigger, pin: true, scrub: true).
• Horizontal-pan — pinned horizontal scroll over a fixed distance.
• Scroll-reveal stagger — a lighter Motion-only whileInView reveal for simple cases.

It bans the patterns that make scroll animation janky and unmaintainable in React: raw window.addEventListener('scroll'), scroll math held in React state, and requestAnimationFrame loops that touch state. useReducedMotion() is mandatory for anything above MOTION_INTENSITY 3, and there is a “motion claimed, motion shown” rule — if a page advertises high motion but does not actually animate, drop the dial and ship clean static instead. Performance guardrails restrict animation to transform and opacity only.

The 13 skills

The bundle is a family. Install the whole thing, or pick one aesthetic. Note the install name differs from the folder name:

Install name (use with --skill)	Status	What it is
design-taste-frontend	v2 experimental (default)	The flagship: brief inference, dials, design-system map, pre-flight
design-taste-frontend-v1	legacy	The original, preserved byte-identical for backward compatibility
gpt-taste	stable	Stricter GPT/Codex variant: AIDA structure, forced layout variance, GSAP
redesign-existing-projects	stable	Audit-first modernization of an existing site (any CSS framework)
high-end-visual-design	stable	”Soft”: expensive-looking UI, softer contrast, spring motion
minimalist-ui	stable	Editorial, Notion/Linear style: warm monochrome, flat bento, no gradients
industrial-brutalist-ui	stable	Swiss type + terminal aesthetics, rigid grids, extreme scale contrast
full-output-enforcement	stable	Anti-truncation: bans placeholder code, forces complete generation
stitch-design-taste	stable	Google Stitch bridge: exports an agent-friendly DESIGN.md
image-to-code	stable	Image-first: generate reference frames, analyze, then implement to match
imagegen-frontend-web	stable	Reference frames — one separate image per section, never a compressed board
imagegen-frontend-mobile	stable	iOS/Android screen concepts in phone mockups (images only, no code)
brandkit	stable	Brand-identity boards: logo systems, palettes, type systems

Tip

Copy-paste prompt after installing the flagship:

“Using the taste-skill (design-taste-frontend), build a landing page for [product]. Start by giving me your one-line Design Read and the three dial values you’re setting, and tell me which design system (if any) the brief maps to. Then generate the page and run the §14 pre-flight check, reporting each item as pass or fail before you finish.”

Redesign Protocol

For existing sites, redesign-existing-projects (and §11 of the flagship) opens with mode detection — Greenfield, Preserve, or Overhaul — and audits before touching anything. Its most useful contribution is the “never changes silently” list: URL structure, navigation labels, form field names, the brand wordmark, and legal copy are off-limits to a redesign unless you ask explicitly. That is the guardrail that keeps a “make it prettier” prompt from quietly breaking your routing or your compliance text.

When it fights your house style

SKILL.md is a plain markdown file in your project. To override a rule — the em-dash ban, an icon-set preference, a dial default — paste a short project style guide at the top of the file; instructions higher in the file take precedence. This is also how you tell it your brand voice, your accent color, or that a specific section is exempt.

Two honest limits to plan around:

• v2 is a pre-release that iterates in place. Refinements land in any experimental release, and there is no version pin beyond the v1 escape hatch. Pin design-taste-frontend-v1 if you need stable, unchanging behavior.
• It is scoped to marketing surfaces. §13 explicitly puts dashboards, data tables, multi-step forms, code editors, native mobile, and realtime-collaboration UIs out of scope. Point it at those and you are outside what it was written for.

Taste Skill vs Impeccable vs the design pipeline

	Taste Skill	Impeccable	Design pipeline
Shape	Skill files	Skill + CLI + Live Mode	A four-stage model workflow
When	Generating a new surface	Refining UI you already have	Full brief-to-code, new product surface
Mechanism	Constraints loaded before generation	Named commands + a CI detect gate	Image model -> reasoning -> design tool -> coding agent
Learns your system?	No — imposes a direction	Yes — inherits your tokens	Produces a system as a side effect
Best for	”Don’t let it look templated"	"Fix this specific thing"	"Compress design + build into one session”

They stack: run the pipeline to shape and build, generate the frontend with Taste Skill’s constraints, then polish with Impeccable’s vocabulary.

Where to go next

Impeccable: a design vocabulary The audit-and-refine counterpart -- 23 commands that improve code you already have and inherit your tokens.

The design pipeline The four-stage mockup -> prototype -> system -> code workflow Taste Skill's generation step slots into.

Best skills for frontend Pair Taste Skill with framework skills so the AI also writes current, idiomatic React, Vue, or Svelte.

Installing and managing skills The full skills CLI: install, update, list, remove, and where files live for each agent.