taste-skill: The Bias Correction File for AI Frontend

TL;DR

What it solves: LLMs default to the statistical median of every frontend project they trained on - Inter font, centered hero, three equal-width cards, purple-to-blue gradient. taste-skill overrides those defaults by committing a SKILL.md instruction file into the project.
Why it matters: An AI-generated UI that looks like every other AI-generated UI ships without a design review and stays that way. taste-skill intercepts that loop at the generation step, not at the code review.
Best for: Frontend developers using Cursor, Claude Code, Copilot, or Windsurf as primary code generation who want consistent, deliberate design without re-pasting style instructions in every session.
Best use case: Starting a SaaS marketing page or consumer product where the first visual impression carries real weight. Three equal-width cards do not carry weight.
Main differentiator: Style instructions die when the chat session ends. taste-skill lives in the repository and survives every git clone.

I asked Cursor to build a landing page. It came back with Inter font, a centered hero, three equal-width feature cards with rounded corners, and a purple-to-blue gradient. Technically correct. Visually, I had seen this page approximately three hundred times before. I reloaded the tab, as if the second render would be different.

It was not different. The AI did not fail. It succeeded at its actual job: predicting the statistically most likely frontend code for that prompt. Most repositories use Inter. Most landing pages center the hero. Most feature sections use three equal cards. The output was perfect median output.

The problem is not the model. The problem is that median is the default.

Why Re-Prompting Does Not Scale

The obvious fix is to add design instructions to every prompt. “Use Outfit font. Offset the hero left. No three-column equal cards.” It works for one session. The next session, chat history is gone and the defaults come back.

A SKILL.md file is a portable instruction set that AI coding agents detect and apply at context-load time. The agent reads the file when it opens the workspace and those rules apply to every subsequent generation in the project: layout decisions, banned fonts, animation depth, placeholder content patterns, forbidden CSS approaches.

One sentence: taste-skill ships a SKILL.md for frontend development so every AI-generated component in the project obeys a shared aesthetic standard, without re-pasting style instructions in the chat.

The file is versioned. The rules travel with the repository. A new team member clones the project and the AI agent inherits the same constraints. Which is either reassuring or alarming, depending on what the constraints say.

Real-World Use Cases

Consumer product where investors see the landing page before they schedule the call
SaaS marketing site where “three equal cards” is the competitor’s aesthetic
Portfolio where the developer knows good design but not enough to correct the AI every time
Internal tool migrating from Bootstrap defaults to a deliberate minimal aesthetic
Redesigning a client site where taste-skill’s redesign-skill audits before touching code

The clearest before/after is a SaaS feature section. Without taste-skill at DESIGN_VARIANCE=3, the AI generates three equal w-1/3 columns with a centered icon, text-xl font-semibold, and p-6 padding. You know this section. It ships on ninety-four SaaS websites every week.

At DESIGN_VARIANCE=8, the same prompt generates grid-template-columns: 2fr 1fr 1fr, the primary feature in the left column, secondary features stacking on the right. The hero shifts to left-aligned text with padding-left: 20vw on desktop. On mobile, everything collapses to a single column. The skill enforces that mobile fallback rule explicitly - asymmetric layouts above md: must always fall back to single-column below 768px.

Markdy animation

The scene moves faster than the explanation does, which is roughly how the tool feels in practice.

How to Use It

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

The command writes a SKILL.md into the project directory. Compatible agents - Cursor, Antigravity, Claude Code, Codex, Windsurf, GitHub Copilot - detect the file automatically. No additional configuration required.

The main SKILL.md declares three numeric parameters at the top. These are the dials:

DESIGN_VARIANCE - structural asymmetry and layout experimentation (default: 8)
MOTION_INTENSITY - animation depth and tooling requirements (default: 6)
VISUAL_DENSITY - whitespace philosophy and information density (default: 4)

Edit the values directly in the file, or override them in the prompt. The SKILL.md instructs the agent to always follow the user’s direction; the dials are the starting assumption.

DESIGN_VARIANCE=8 means the AI starts with asymmetric layouts: fractional CSS Grid like grid-template-columns: 2fr 1fr 1fr, large empty zones, and padding-left: 20vw for structural whitespace. Drop it to 3 and the centered hero returns. You were warned.

MOTION_INTENSITY=8 means scroll-triggered reveals, magnetic buttons using Framer Motion’s useMotionValue and useTransform, and continuous micro-animations on status indicators. The skill mandates those specific hooks at level 8 because useState on mouse position triggers a full re-render on every pixel of movement, which destroys mobile performance. That detail is in the SKILL.md, which is where the AI reads it.

VISUAL_DENSITY=9 means trading terminal density: font-mono on all numeric data, divide-y border-slate-200 dividers instead of card containers, and generic card boxes banned outright. Bloomberg Terminal aesthetics without the Bloomberg invoice.

Seven skill files ship in the repository. The useful routing table:

Skill	Use When
`taste-skill`	Any new premium component or page - the default
`soft-skill`	Luxury consumer apps, generous whitespace, premium fonts
`minimalist-skill`	Productivity tools, internal dashboards - Notion or Linear aesthetic
`redesign-skill`	Taking over a project with design problems; audits before generating
`output-skill`	Agent skips code or produces `// TODO` stubs - enforces completeness
`brutalist-skill`	Experimental portfolios, agencies (beta)
`stitch-skill`	Google Stitch AI generation handoffs

💡 Set VISUAL_DENSITY=9 on any fintech dashboard and the AI will default to font-mono for numbers and divide-y borders instead of card UI - matching the cockpit-style density of tools like Vercel’s deployment panel, without asking for it explicitly.

Where It Fits (And Where It Doesn’t)

The README names compatible agents: Cursor, Antigravity, Claude Code, Codex, Windsurf, and GitHub Copilot. Any agent that reads SKILL.md files from the workspace directory will apply the rules. Agents that do not read SKILL.md files will ignore it silently.

The skill file assumes React and Next.js throughout. Architecture defaults target Server Components. Any interactive component using motion hooks must be isolated as a Client Component with 'use client'. Hero sections default to min-h-[100dvh], not h-screen - which is the fix for the iOS Safari viewport height jump that every team discovers on a launch day. Grids use CSS Grid, not flexbox percentage math.

For Vue, Svelte, or plain HTML projects, the layout bans and typography rules are partially portable. The architecture defaults are not. The skill is useful but requires manual editing to strip Next.js-specific patterns before those agents interpret it correctly.

For backend, API, and database prompts, the skill is silent. It does nothing outside the frontend generation context - clean separation or coverage gap, depending on your project.

The Rough Edges

The repository ships without a license. Rights are reserved by default. Using the SKILL.md files in personal projects is unambiguous. Bundling them inside a commercial scaffold generator is not.

v2 is in progress and in beta. The stable API is v1. The three-dial system exists exclusively in taste-skill - the other six skill files have fixed rules with no dials. Dial values have no validation; setting DESIGN_VARIANCE=11 does not throw an error, it silently applies the 8-10 behavior.

⚠️ The SKILL.md bans Inter font as the “premium or creative” default. If your existing project uses Inter as a brand font, the first generation after install will fight the font rules you already have. Edit the banned-fonts section before committing the file to the repository.

The full AI Tells section in the SKILL.md reads like an inventory of decisions that ship invisibly in AI-generated UI:

Category	Banned Pattern	Required Alternative
Font	Inter as the distinctive creative choice	Geist, Outfit, Cabinet Grotesk, Satoshi
Color	`#000000` pure black	Zinc-950, off-black, charcoal
Effects	Neon outer `box-shadow` glows	Inner borders at `border-white/10`
Layout	Centered hero when `DESIGN_VARIANCE > 4`	Split-screen or left-aligned with asymmetric whitespace
Layout	Three equal-width card feature section	2-column zig-zag, asymmetric grid, or horizontal scroll
Typography	Oversized H1 for visual hierarchy	Weight and color contrast, not raw scale
Content	Round fake numbers: `99.99%`, `50%`, `1234567`	Organic values: `47.2%`, `+1 (312) 847-1928`
Content	”Acme”, “Nexus”, “SmartFlow” brand placeholders	Contextual invented names
Images	Unsplash URLs (they break in production)	`picsum.photos/seed/{string}/800/600`

When I first read this list, I sat quietly for a moment. Several of those patterns had shipped in the last project.

Getting Started

# Install the default skill
npx skills add https://github.com/Leonxlnx/taste-skill

# Install a specific variant
npx skills add https://github.com/Leonxlnx/taste-skill/soft-skill

Open the installed SKILL.md. Set the three dials at the top to match the project’s aesthetic target. Use the AI agent normally. No additional prompting required. The rules apply to every generation in that workspace until you change the file.

Common Questions

What AI agents does taste-skill support? From the README: Cursor, Antigravity, Claude Code, Codex, Windsurf, and GitHub Copilot. Any agent that reads SKILL.md files from the workspace directory will apply the rules without further configuration.

Will adding a SKILL.md slow down my AI agent? The file adds to the context window on every request. On models with large context windows, this is not measurable in normal use. On smaller models or long sessions with many open files, it modestly reduces available generation context.

Can I use taste-skill with Vue or Svelte? The layout bans, typography rules, and content anti-patterns translate reasonably well to any framework. The architecture defaults - Server Components, Framer Motion hook requirements - are React/Next.js specific and need manual editing before they apply correctly outside the React ecosystem.

What happens if I set a dial to a value outside 1-10? Nothing breaks. Values above the documented maximum are treated as the highest bracket. Values below 1 apply the lowest-bracket behavior. The dials have no runtime validation.

Is there a way to share dial settings across a team? The SKILL.md is a versioned file in the repository. Commit it with specific dial values and every team member who opens the project in a compatible agent inherits the same constraints. That is the entire sharing mechanism.

Final Thoughts

I asked for a landing page and got Inter, three equal cards, and a gradient. At the time I blamed the prompt. Reading the AI Tells list later, I realized the output was not a mistake - it was the correct answer to what the model had been trained to assume the question meant.

8,096 developers apparently had that same moment of recognition, which tells you more about how universal the pattern is than about how clever the solution is. The three-dial system earns its praise: it translates design philosophy into a number an AI can follow precisely. “Make it feel premium” generates slop. VISUAL_DENSITY=9 generates a trading-terminal density layout with font-mono on every number and not a card container in sight.

The missing license puts a ceiling on commercial redistribution. But as a personal constitution for every new project’s AI agent - the way you commit a .prettierrc and stop arguing about formatting - taste-skill is worth the one-line install.

Leonxlnx/taste-skill · no license · ★ 8,096 · tasteskill.dev