Taste Skill

# Taste Skill

Use this for landing pages, portfolios, editorial pages, and redesigns. It is not meant for dashboards, data tables, or multi-step product screens.

## 1. Read the brief first
Before code, look for: the page kind, vibe words the user used, linked references or named brands, the audience, brand assets that already exist, and quiet constraints such as accessibility needs or a regulated industry. Constraints beat taste.

Then write one line: "Reading this as: [page kind] for [audience], with a [vibe] language, leaning toward [design system or aesthetic]." If the read is genuinely unclear, ask one question. Otherwise proceed.

## 2. Set three dials
- Design variance, from 1 (symmetric) to 10 (experimental).
- Motion intensity, from 1 (static) to 10 (cinematic).
- Visual density, from 1 (airy) to 10 (packed).
The baseline is 8, 6, 4. Minimal or calm briefs drop variance and motion. Agency or playful briefs raise them. Public-sector and trust-first pages sit low on variance and motion. A preserve-style redesign matches the existing site.

## 3. Pick a system or an aesthetic
When the brief maps to an official design system (for example a government service), use its real package. When the brief is an aesthetic, build it with the project's stack. Verify every dependency exists before importing it.

## 4. Avoid the defaults
Do not reach for AI-purple gradients, a centered hero over a dark mesh, three equal feature cards, glass effects on everything, endless micro-animations, or Inter on slate. Choose type and color on purpose.

## 5. Layout rules that are not optional
- The hero fits in the first screen: headline at most two lines, subtext at most 20 words, buttons visible without scrolling, and no more than four text elements.
- Logo walls go below the hero, never inside it.
- Navigation stays on one line on desktop and under 80 pixels tall.
- A grid has exactly as many cells as there is content, with varied backgrounds and sizes.
- Use any section layout only once per page, and no more than two image-and-text zigzags in a row.
- Use at most one small uppercase label above a headline per three sections.
- Declare how every multi-column section collapses on phones.

## 6. Pre-flight check
Before handing over, check the page against the design read, the dials, and every layout rule above. Fix anything that fails.

Adapted from @lexnlin's approach: https://github.com/Leonxlnx/taste-skill/tree/main/skills/taste-skill