--- name: taste description: Run a visual taste audit on any HTML file or URL. 10 binary evals + constitution sweep. Reports PASS/FAIL table with specific violations and optional auto-fix. Use when user says "/taste", "taste audit", "taste check", or "run taste on this". argument-hint: [file.html or URL] allowed-tools: Bash(python3 *), Bash(npx *), Bash(test *), Bash(ls *), Read, Edit, Write, mcp__playwright__browser_navigate, mcp__playwright__browser_take_screenshot, mcp__playwright__browser_snapshot, mcp__playwright__browser_resize, mcp__playwright__browser_close --- # /taste, Visual Taste Audit Run 10 binary taste evaluations + a 34-principle constitution sweep against any HTML file or URL. Produces a scored report with specific violations and optional auto-fix. > **Customize this template before installing.** The customize prompt that came with this file walks you through 6 questions about your voice, references, banned patterns, and viewport defaults. ## Input From `$ARGUMENTS[0]`, detect: - **File path** (ends in .html or starts with /), open as `file://` URL - **URL** (starts with http), navigate directly - **No argument**, look for the most recently modified .html file in the current project's `.tmp/` directory ## Process ### Step 1: Screenshot Using Playwright MCP tools: > FILL IN: your viewport defaults. Mine are 1440x900 (desktop) and 375x812 (mobile). > If you ship to TVs, kiosks, or odd form factors, change accordingly. 1. `browser_navigate` to the file/URL 2. `browser_resize` to **{{DESKTOP_VIEWPORT}}** (default: 1440x900) 3. `browser_take_screenshot`, save to `{project}/.tmp/taste-desktop.png` 4. `browser_resize` to **{{MOBILE_VIEWPORT}}** (default: 375x812) 5. `browser_take_screenshot`, save to `{project}/.tmp/taste-mobile.png` Read both screenshots to evaluate visually. ### Step 2: Read the Source Read the HTML file to evaluate CSS properties directly. Extract: - All `font-size` values - All `letter-spacing` values - All `line-height` values - All `max-width` / `ch` constraints on text - All `transition` / `animation` properties - All easing curves (`ease`, `ease-in-out`, `cubic-bezier`) - Background color values (count surface depth levels) - Accent color usage (count elements using the accent) - Font weights in use - Grid/flex composition patterns per section ### Step 3: Run T1-T10 Binary Evaluations Score each 0 or 1. No partial credit. | # | Check | PASS (1) | FAIL (0) | |---|-------|----------|----------| | T1 | **Heading tightening** | `letter-spacing` negative (-0.02em+) on headings 32px+ | Default or positive spacing on large text | | T2 | **Line-height variation** | Decreases as font size increases (body 1.5+, headings 1.1-1.3, display 1.0) | Same line-height everywhere | | T3 | **Measure constraint** | Body text < 75 chars per line (`max-width: 65ch` or similar) | Text runs full-width on desktop | | T4 | **Spacing hierarchy** | Space ABOVE headings > space BELOW (1.5-3x ratio) | Equal or inverted spacing | | T5 | **Three weight minimum** | 3+ distinct font weights used (400, 500/600, 700+) | Only Regular and Bold | | T6 | **Accent restraint** | Accent color on < 15% of elements. Count: CTAs + overlines + hero accent + icons. | Accent on labels, tags, badges, icons, headings, AND CTAs | | T7 | **Surface depth** | 2+ background lightness levels beyond the base and accent | Single flat background | | T8 | **Custom easing** | `cubic-bezier()` curves used, NOT `ease`/`ease-in-out`/`linear` | Default CSS easing keywords | | T9 | **Animation restraint** | < 5 animated properties total, all `transform`/`opacity` for interactive elements | Layout properties animated, `transition-all`, everything moves | | T10 | **Intentional asymmetry** | At least one deliberate grid break, uneven spacing, or composition shift | Perfect uniform grid throughout | ### Step 4: Constitution Sweep Evaluate against these 34 principles. Name specific violations. > Customize this section. Keep the principles that match your taste, edit ones that need re-aiming, strip ones you don't care about, add your own from corrections you've given Claude in the past. #### Domain 1: Visual Design 1. **Grayscale-to-color reveal on images.** Portrait photos, team shots, hero images get `grayscale hover:grayscale-0` with expo easing. Premium reveal moment. 2. **Real photos, never gradient placeholders by default.** Source 4-8 relevant images matching the project mood. Gradients are fallback, not default. 3. **Accent color is medicine, not seasoning.** Below 15% of visible surface area. Count: CTAs + overlines + hero accent text + icon backgrounds. 4. **Surface depth requires 2+ background lightness levels** beyond white and accent. Flat single backgrounds feel generated. 5. **No two adjacent sections share the same composition type.** This is the #1 difference between template and custom. 6. **Every site has one signature moment**, a mid-page visual beat that breaks the established pattern. Not the hero. This is what people screenshot. 7. **Spacing above headings exceeds spacing below.** Forward momentum, not symmetry. H2 gets `mt-16 mb-4` not `my-8`. 8. **Multi-sentence subheaders get `
` between sentences.** Editorial pacing, breathing room. 9. **Never use one font on everything with no hierarchy.** 2 distinctive fonts minimum, contrast between heading and body. 10. **Never default-AI palette.** > FILL IN: your specific banned palettes. Examples: purple-blue gradient on everything; sage + cream + lavender wellness quartet; dark void + cyan + grid agentic look. Pick palettes that say "AI generated this." Banned because they leak into every vibe-coded site. 11. **Never uniform border-radius.** Vary by role: buttons full, cards xl, some elements sharp. 12. **Never three identical feature cards in a row.** Bento grid, asymmetric sizing, lead with one large. 13. **Never uniform hover (`hover:opacity-80` on everything).** 4 hover types: text links (underline reveal), cards (lift + shadow), CTAs (bg shift + glow), nav items (weight/opacity shift). #### Domain 2: Code Architecture 14. **Three similar lines beat a premature abstraction.** Only abstract when the pattern appears 4+ times with identical structure. 15. **Validate at system boundaries only.** User input, external APIs. Internal function calls trust their callers. 16. **If it can be done in CSS, do it in CSS.** React islands only for: focus trapping, complex state, drag-and-drop, rich forms. 17. **Compositor-only transitions.** Button, card, nav transitions use ONLY `transform` and `opacity`. Shadow/color changes snap. Never `transition-all` or `transition-colors`. 18. **Custom easing curves, never CSS defaults.** `ease`, `ease-in-out`, `linear` are tells. Use `cubic-bezier(0.16, 1, 0.3, 1)` (expo) or `cubic-bezier(0.25, 1, 0.5, 1)` (quart). #### Domain 3: UX Interaction 19. **Every element that looks interactive must be interactive.** Dead `href="#"` links are a build failure. Buttons that don't do anything are a build failure. 20. **Google Maps embed, not OpenStreetMap.** OSM tiles look low-quality. Whole map area must be clickable. 21. **Mobile is not desktop-stacked.** At 375px, images lead, data swipes, text goes full-width. Mobile layout is a separate design, not a collapsed desktop. 22. **Hero entrance choreography is mandatory.** Staggered fade-in-up on hero children with 0.1-0.8s delays. Total sequence under 1.0s. 23. **Four distinct hover vocabularies.** Text links: underline reveal. Cards: lift + shadow deepen. CTAs: bg shift + glow + lift. Nav items: weight shift or opacity. Never uniform. #### Domain 4: Content Quality 24. **Specificity ladder: number > process > claim > adjective.** Level 3 (claim) minimum. "Helped 200+ restaurants" beats "Trusted by many." 25. **The strongest line in each section is the most visible element.** If the best copy is buried in a paragraph, the layout is wrong. 26. **Vague headlines are a build failure.** "Build the Future" / "Empower Your Workflow" / "Comprehensive Solutions", these are tells. 27. **Footer depth signals business maturity.** 4+ distinct info groups minimum. Copyright line only = amateur. 28. **Portfolio polish checklist runs alongside taste evals.** Custom favicon, OG meta tags, custom 404, about/story section, social proof. 29. **No comma-chain adjective headers.** "Premium, handcrafted, authentic, traditional" is filler. One strong image beats four weak adjectives. 30. **Build-Break-Build structure in professional content.** Validate what works → name the contradiction → show the path forward. 31. **CTAs are zero on social content.** Reddit, LinkedIn, X posts never include explicit calls to action. Newsletter: soft frame at bottom only. 32. **Section headings must be position-specific.** If you can swap two section headings without breaking the page, both are too generic. 33. **Real testimonials with names and roles beat anonymous quotes.** 34. **Credibility markers appear 2+ times in different contexts.** Stats, testimonials, logos, certifications, never just one type of proof. #### Banned Punctuation > FILL IN: your banned punctuation list. Mine bans em dashes (U+2014), en dashes (U+2013), Unicode minus (U+2212), and smart quotes (U+201C/D, U+2018/9). Reason: em dashes are the single most reliable AI-generation tell on the modern web. Smart quotes betray copy-paste from Word. > > Replacements: > - em dash → ` - ` or `.` or `:` > - en dash + Unicode minus → `-` > - smart quotes → `"` or `'` > > If you don't have an opinion here, leave the defaults in. They catch real failures. ### Step 5: Report Output this format: ``` TASTE AUDIT {file or URL} Desktop: .tmp/taste-desktop.png | Mobile: .tmp/taste-mobile.png BINARY EVALS T1 Heading tightening PASS/FAIL [detail] T2 Line-height variation PASS/FAIL [detail] T3 Measure constraint PASS/FAIL [detail] T4 Spacing hierarchy PASS/FAIL [detail] T5 Three weight minimum PASS/FAIL [detail] T6 Accent restraint PASS/FAIL [detail] T7 Surface depth PASS/FAIL [detail] T8 Custom easing PASS/FAIL [detail] T9 Animation restraint PASS/FAIL [detail] T10 Intentional asymmetry PASS/FAIL [detail] Score: X/10 CONSTITUTION VIOLATIONS - VD-X: [specific violation and where] - UX-X: [specific violation and where] - CQ-X: [specific violation and where] COMPOSITION MAP 1. Hero → [type: centered/split/full-bleed/editorial/statement] 2. Section 2 → [type] 3. Section 3 → [type] ... Adjacent duplicates flagged. VERDICT [7+: ship-ready | 5-6: fix gaps listed above | <5: significant rework needed] ``` ### Step 6: Auto-Fix (Optional) After presenting the report, ask: > Fix the failures? (y/n) If yes: 1. Fix T1-T10 failures first (these are usually CSS tweaks) 2. Address constitution violations in priority order 3. Re-run the evaluation to confirm score improved 4. Report the delta **Fix priority:** 1. T3 (measure), add `max-width: 55ch` to text containers 2. T8 (easing), replace CSS defaults with custom cubic-bezier 3. T6 (accent), demote non-essential accent uses to `--dim` or surface colors 4. T4 (spacing), increase margin-top on headings relative to margin-bottom 5. T10 (asymmetry), break one grid, offset one element, vary one section width 6. Composition (Domain 1, principle 5), restructure adjacent same-type sections 7. Signature moment (Domain 1, principle 6), add one full-bleed or oversized visual break mid-page 8. Hero choreography (Domain 3, principle 22), add staggered fade-in classes ## Scoring Guide | Score | Verdict | Action | |-------|---------|--------| | 9-10 | Production-ready | Ship it | | 7-8 | Clean with minor polish | Fix flagged items, quick pass | | 5-6 | Decent bones, needs enrichment | One focused pass on the failures | | 3-4 | Template-level | Significant rework, consider archetype mismatch | | 0-2 | Start over | Fundamental design issues | ## Notes - This audit applies to ANY visual HTML, AI-generated pages, hand-built sites, framework scaffolds, landing pages. - Screenshots are the primary evaluation source for visual checks. CSS source confirms specific property values. - The constitution evolves. Every correction adds a principle. Every "that's clean" reinforces one. - Run this on your own portfolio first. Uncomfortable. Useful.