vs-roast-ui

name	vs-roast-ui
description	Use when user asks to design, redesign, critique, polish, or improve frontend UI. Covers websites, dashboards, product screens, components, forms, onboarding, empty states, and visual fidelity checks.
argument-hint	[command] [target]
user-invocable	true
allowed-tools	["Bash(node *)"]
license	Apache 2.0

Designs and iterates production-grade frontend interfaces. Real working code, committed design choices, exceptional craft.

This skill is copied and adapted from Paul Bakaus' Apache-2.0 licensed impeccable skill: https://github.com/pbakaus/impeccable/blob/main/skill/SKILL.src.md

The copied upstream license is included at LICENSE.impeccable.

When running bundled scripts, first resolve this skill directory and use it as $ROAST_UI_SKILL_DIR. In this repository the source path is plugins/vs/skills/vs-roast-ui; in an installed agent runtime, use the installed skill directory exposed by that runtime.

Setup

Use this setup before acting on a design task:

1. Run node "$ROAST_UI_SKILL_DIR/scripts/context.mjs" once per session. If you've already seen its output in this conversation, do not re-run it. The script either prints the project's PRODUCT.md (and DESIGN.md when present) as a markdown block, or tells you it's missing. Follow whatever it prints. If it reports NO_PRODUCT_MD, follow references/init.md before continuing the design task. If the output ends with an UPDATE_AVAILABLE directive, follow it (ask the user once about updating, then continue). It never blocks the current task.
2. If the user invoked a sub-command (craft, shape, audit, polish, ...), read the matching command file under references/ next. That reference defines the command's expected flow.
3. Familiarize yourself with any existing design system, conventions, and components in the code. Read at least one project file (CSS / tokens / theme / a representative component or page). Required even when you've loaded a sub-command reference in step 2. Don't reinvent the wheel; use what's there when it works, branch out when the UX wins.
4. Read the matching register reference so the output does not become generic. If the project is marketing, a landing page, a campaign, long-form content, or a portfolio (design IS the product), read references/brand.md. If it is app UI, admin, a dashboard, or a tool (design SERVES the product), read references/product.md. Pick by first match: (1) task cue ("landing page" vs "dashboard"); (2) surface in focus (the page, file, or route being worked on); (3) register field in PRODUCT.md.
5. If the project is brand-new (no existing CSS tokens / theme / committed brand colors found in step 3), run node "$ROAST_UI_SKILL_DIR/scripts/palette.mjs" to receive a brand seed color and composition guidance. This is the anchor for your primary brand color. Compose the rest of the palette (bg, surface, ink, accent, muted) around it per the script's instructions. Use OKLCH throughout. Skip this step only if step 3 found committed brand colors in existing tokens; in that case identity-preservation wins.

Design guidance

Produce ready-to-ship, production-grade code, not prototypes or starting points. Take no shortcuts unless the user asks for them (when in doubt, ask). Don't stop until arriving at a complete implementation (beautiful, responsive, fast, precise, bug-free, on brand). You take attention to detail seriously: every page, section or component crafted is battle tested using the tools available to you (browser screenshotting, computer use, etc). Don't hold back.

General rules

Color

• Verify contrast. Body text must hit ≥4.5:1 against its background; large text (≥18px or bold ≥14px) needs ≥3:1. Placeholder text needs the same 4.5:1, not the muted-gray default. The most common failure: muted gray body text on a tinted near-white. If the contrast is even close, bump the body color toward the ink end of the ramp; light gray "for elegance" is the single biggest reason AI designs feel hard to read.
• Gray text on a colored background looks washed out. Use a darker shade of the background's own hue, or a transparency of the text color.

Typography

• Cap body line length at 65–75ch.
• Don't pair fonts that are similar but not identical (two geometric sans-serifs, two humanist sans-serifs). Pair on a contrast axis (serif + sans, geometric + humanist) or use one family in multiple weights.
• Hero / display heading ceiling: clamp() max ≤ 6rem (~96px). Above that the page is shouting, not designing.
• Display heading letter-spacing floor: ≥ -0.04em. Anything tighter and letters touch; cramped, not "designed".
• Use text-wrap: balance on h1–h3 for even line lengths; text-wrap: pretty on long prose to reduce orphans.

One hard typographic ceiling you currently miss: - Display letter-spacing ≥ -0.04em. Your default of -0.05 to -0.085em on display H1s makes the letters touch and reads as cramped. -0.02 to -0.03em is plenty for tight grotesque display; -0.04em is the floor.

Layout

• Vary spacing for rhythm.
• Cards are the lazy answer. Use them only when they're truly the best affordance. Nested cards are always wrong.
• Flexbox for 1D, Grid for 2D. Don't default to Grid when flex-wrap would be simpler.
• For responsive grids without breakpoints: repeat(auto-fit, minmax(280px, 1fr)).
• Build a semantic z-index scale (dropdown → sticky → modal-backdrop → modal → toast → tooltip). Never arbitrary values like 999 or 9999.

Motion

• Motion should be intentional, and not be an afterthought. consider it as part of the build.
• Don't animate CSS layout properties unless truly needed.
• Ease out with exponential curves (ease-out-quart / quint / expo). No bounce, no elastic.
• Use libraries for more advanced motion needs (e.g. motion, gsap, anime.js, lenis etc)
• Reduced motion is not optional. Every animation needs a @media (prefers-reduced-motion: reduce) alternative: typically a crossfade or instant transition.
• Staggering the items within one list is legitimate. The tell is the uniform reflex (one identical entrance applied to every section), not motion itself; each reveal should fit what it reveals. Suppressing the reflex is never a reason to ship a page with no motion at all.
• Reveal animations must enhance an already-visible default. Don't gate content visibility on a class-triggered transition; transitions pause on hidden tabs and headless renderers, so the reveal never fires and the section ships blank.
• Premium motion materials are not just transform/opacity. Blur, backdrop-filter, clip-path, mask, and shadow/glow are part of the palette when they materially improve the effect and stay smooth.

Interaction

• Dropdowns rendered with position: absolute inside an overflow: hidden or overflow: auto container will be clipped. Use the native <dialog> / popover API, position: fixed, or a portal to escape the stacking context.

**Gemini-specific defect: hard ban.** Never animate `` elements on hover. This includes any `transform` on `:hover` of an image, AND `.group:hover .group-hover\:scale` / `.group:hover .group-hover\:rotate` / `.group:hover .group-hover\:translate` patterns from Tailwind that animate a child image via a parent hover. This is your single most common motion tell; it adds no information (the image isn't an action target) and reads as "AI animated this because it could". If a card needs hover feedback, animate the card's background, border, or shadow. Never the image, never via the image's parent.

New projects only (when no prior work exists)

Color & Theme

• Use OKLCH.
• The cream / sand / beige body bg is the saturated AI default of 2026. The whole warm-neutral band (OKLCH L 0.84-0.97, C < 0.06, hue 40-100) reads as cream/sand/paper/parchment regardless of what you call it. Token names like --paper, --cream, --sand, --bone, --flour, --linen, --parchment, --wheat, --biscuit, --ivory are tells in themselves. If the brief is "warm, traditional, family-coastal-Italian" or "magazine-warm" or "editorial-restraint", DO NOT translate that into a near-white warm-tinted bg; that's the AI move. Pick: (a) a saturated brand color as the body (terracotta, oxblood, deep ochre, near-black), (b) a true off-white at chroma 0 (or chroma toward the brand's own hue, not toward warmth-by-default), or (c) a darker mid-tone tinted neutral that's clearly the brand's own. "Warmth" in the brand is carried by accent + typography + imagery, not by body bg.
• Tinted neutrals: add 0.005–0.015 chroma toward the brand's hue. Don't default-tint toward warm or cool "because the brand feels that way"; that's the cross-project monoculture move.
• When picking a theme: Dark vs. light is never a default. Not dark "because tools look cool dark." Not light "to be safe.".Before choosing, write one sentence of physical scene: who uses this, where, under what ambient light, in what mood. If the sentence doesn't force the answer, it's not concrete enough. Add detail until it does.
• Pick a color strategy before picking colors. Four steps on the commitment axis:
  • Restrained: tinted neutrals + one accent ≤10%. Product default; brand minimalism.
  • Committed: one saturated color carries 30–60% of the surface. Brand default for identity-driven pages.
  • Full palette: 3–4 named roles, each used deliberately. Brand campaigns; product data viz.
  • Drenched: the surface IS the color. Brand heroes, campaign pages.

Absolute bans

Match-and-refuse. If you're about to write any of these, rewrite the element with different structure.

• Side-stripe borders. border-left or border-right greater than 1px as a colored accent on cards, list items, callouts, or alerts. Never intentional. Rewrite with full borders, background tints, leading numbers/icons, or nothing.
• Gradient text. background-clip: text combined with a gradient background. Decorative, never meaningful. Use a single solid color. Emphasis via weight or size.
• Glassmorphism as default. Blurs and glass cards used decoratively. Rare and purposeful, or nothing.
• The hero-metric template. Big number, small label, supporting stats, gradient accent. SaaS cliché.
• Identical card grids. Same-sized cards with icon + heading + text, repeated endlessly.
• Tiny uppercase tracked eyebrow above every section. The 2023-era kicker (small all-caps text with wide tracking, "ABOUT" "PROCESS" "PRICING" above each heading) is now the saturated AI scaffold; it appears on 55-95% of generations regardless of brief, which is the definition of a tell. One named kicker as a deliberate brand system is voice; an eyebrow on every section is AI grammar. Choose a different cadence.
• Numbered section markers as default scaffolding (01 / 02 / 03). Putting 01 · About / 02 · Process / 03 · Pricing above every section is the eyebrow trope one tier deeper: reach for it because "landing pages do this" and you're scaffolding by reflex. Numbers earn their place when the section actually IS a sequence (a real 3-step process, an ordered flow, a typed timeline) and the order carries information the reader needs. One deliberate numbered sequence on one page is voice; numbered eyebrows on every section across the site is AI grammar.
• Text that overflows its container. Long heading words plus large clamp scales plus narrow grids cause headline overflow on tablet/mobile. Test the heading copy at every breakpoint; if it overflows, reduce the clamp max or rewrite the copy. The viewport is part of the design.

**Codex-specific defects** (your most-frequent giveaways; refuse-and-rewrite):

• border: 1px solid X + box-shadow: 0 Npx Mpx ... with M ≥ 16px on the same element. The "ghost-card" pattern: 1px border plus soft wide drop shadow on buttons and cards. Don't pair them. Pick one (a single solid border at the brand color, OR a defined shadow at no more than 8px blur), never both as decoration.
• border-radius: 32px+ on cards / sections / inputs. You over-round. Cards top out at 12–16px; full-pill is fine for tags/buttons. Picking 24/28/32/40px on a card is the codex tell; no brand wants "insanely rounded".
• Hand-drawn / sketchy SVG illustrations. Class names like loose-sketch, *-sketch, doodle, wavy; feTurbulence / feDisplacementMap "paper grain" filters; 5-to-30 path crude scenes meant to depict a tangible subject (an otter, a table-and-fork, an album cover). All of these read as amateurish, not whimsical. If you can't render the scene with real assets, ship no illustration. Don't attempt sketchy SVG as a fallback.
• repeating-linear-gradient(...) stripe backgrounds. Diagonal stripes in body:before or section backgrounds are pure codex decoration. Don't.
• Meta-criticism copy. Naming a concept then layering an ironic modifier, or staging a strawman to "correct" it. Make the specific claim instead.

The AI slop test

If someone could look at this interface and say "AI made that" without doubt, it's failed. Cross-register failures are the absolute bans above. Register-specific failures live in each reference.

Category-reflex check. Run at two altitudes; the second one catches what the first one misses.

• First-order: if someone could guess the theme + palette from the category alone, it's the first training-data reflex. Rework the scene sentence and color strategy until the answer isn't obvious from the domain.
• Second-order: if someone could guess the aesthetic family from category-plus-anti-references ("AI workflow tool that's not SaaS-cream → editorial-typographic", "fintech that's not navy-and-gold → terminal-native dark mode"), it's the trap one tier deeper. The first reflex was avoided; the second wasn't. Rework until both answers are not obvious. The brand register's reflex-reject aesthetic lanes list catches the currently-saturated families.

Distinctiveness gate

Before building or materially reshaping a UI, write the design thesis in one sentence: what subject world, audience context, and single remembered visual move make this surface specific. If the same thesis could apply to three similar products, revise the direction before coding. This gate is especially important for shape, craft, bolder, delight, and freeform requests.

Commands

Command	Category	Description	Reference
craft [feature]	Build	Shape, then build a feature end-to-end	references/craft.md
shape [feature]	Build	Plan UX/UI before writing code	references/shape.md
init	Build	Set up project context: PRODUCT.md, DESIGN.md, live config, next steps	references/init.md
document	Build	Generate DESIGN.md from existing project code	references/document.md
extract [target]	Build	Pull reusable tokens and components into design system	references/extract.md
critique [target]	Evaluate	UX design review with heuristic scoring	references/critique.md
audit [target]	Evaluate	Technical quality checks (a11y, perf, responsive)	references/audit.md
verdict [generated] [reference...]	Evaluate	Strict screenshot-to-reference visual fidelity verdict	references/verdict.md
polish [target]	Refine	Final quality pass before shipping	references/polish.md
bolder [target]	Refine	Amplify safe or bland designs	references/bolder.md
quieter [target]	Refine	Tone down aggressive or overstimulating designs	references/quieter.md
distill [target]	Refine	Strip to essence, remove complexity	references/distill.md
harden [target]	Refine	Production-ready: errors, i18n, edge cases	references/harden.md
onboard [target]	Refine	Design first-run flows, empty states, activation	references/onboard.md
animate [target]	Enhance	Add purposeful animations and motion	references/animate.md
colorize [target]	Enhance	Add strategic color to monochromatic UIs	references/colorize.md
typeset [target]	Enhance	Improve typography hierarchy and fonts	references/typeset.md
layout [target]	Enhance	Fix spacing, rhythm, and visual hierarchy	references/layout.md
delight [target]	Enhance	Add personality and memorable touches	references/delight.md
overdrive [target]	Enhance	Push past conventional limits	references/overdrive.md
clarify [target]	Fix	Improve UX copy, labels, and error messages	references/clarify.md
adapt [target]	Fix	Adapt for different devices and screen sizes	references/adapt.md
optimize [target]	Fix	Diagnose and fix UI performance	references/optimize.md
live	Iterate	Visual variant mode: pick elements in the browser, generate alternatives	references/live.md

Plus three management commands: pin <command>, unpin <command>, and hooks <on|off|status|...>, detailed below.

Routing rules

1. No argument: the user is asking "what should I do?" Make the menu context-aware instead of static. Setup has already run context.mjs; if that reported NO_PRODUCT_MD you are already in init (setup), so finish that and skip this. Otherwise run node "$ROAST_UI_SKILL_DIR/scripts/context-signals.mjs" once and read its JSON, then lead with the 2-3 highest-value next commands, each with a one-line reason pulled from the signals, followed by the full menu (the table above, grouped by category). Treat recommendations as suggestions for the user to confirm before running a command.

   Reason over the signals; there is no score to obey:

   • setup.hasDesign false while setup.hasCode true → document (capture the visual system).
   • critique.latest is null → the project has never been critiqued; for a set-up project with a real surface, offering /vs-roast-ui critique <surface> is a strong default.
   • critique.latest with a low score or non-zero p0 / p1 → polish (it reads that snapshot as its backlog), or re-run critique if the snapshot looks stale.
   • git.changedFiles pointing at one surface → scope audit or polish to those files specifically, naming them.
   • devServer.running true → live is available for in-browser iteration; if false, don't lead with live.
   • Otherwise group by intent exactly as init's "Recommend starting points" step does (build new / improve what's there / iterate visually), tailored to setup.register.

   If scan.targets is non-empty, run node "$ROAST_UI_SKILL_DIR/scripts/detect.mjs" --json <scan.targets joined by spaces> once (the bundled detector over local files: no network, no npx). scan.via tells you what they are: git-changes (the markup/style files in your dirty tree, the most relevant set), source-dir (e.g. src, app), html, or root. Fold the hits into your picks: many quality / contrast hits → audit or polish; a specific slop family → the matching command (gradient text or eyebrows → quieter / typeset, flat or gray palette → colorize, and so on). It's a real, current signal that beats guessing. If detect errors or the tree is large and slow, skip it and recommend the user run audit themselves; do not block the suggestion on it.

   Keep it to 2-3 pointed picks with the exact command to type. The menu stays the fallback; the recommendation is the lede.

2. First word matches a command (table above OR pin / unpin / hooks): load its reference file and follow its instructions. Everything after the command name is the target.

3. First word doesn't match, but the intent clearly maps to one command (e.g. "fix the spacing" → layout, "rewrite this error message" → clarify, "compare this screenshot to the mock" → verdict, "the colors feel flat" → colorize): load that command's reference and proceed as if invoked. If two commands could fit, ask once which.

4. No clear command match: general design invocation. Apply the setup steps, the General rules, and the loaded register reference, using the full argument as context.

Setup (context gathering, register) is already loaded by then; sub-commands don't re-invoke /vs-roast-ui.

If the first word is craft, setup still runs first, but references/craft.md owns the rest of the flow. If setup invokes init as a blocker, finish init, refresh context, then resume the original command and target.

teach is a deprecated alias for init: if the user types it, load references/init.md and proceed as if they ran init.

Pin / Unpin

Pin creates a standalone shortcut so <command> invokes /vs-roast-ui <command> directly. Unpin removes it. The script writes to every harness directory present in the project.

node "$ROAST_UI_SKILL_DIR/scripts/pin.mjs" <pin|unpin> <command>

Valid <command> is any command from the table above. Report the script's result concisely. Confirm the new shortcut on success, relay stderr verbatim on error.

Hooks

/vs-roast-ui hooks <on|off|status|ignore-rule|ignore-file|ignore-value|reset> manages the design detector hook for this project. The hook auto-runs the detector after direct UI file edits and surfaces findings as system reminders. Full flow is in references/hooks.md; load it when the user invokes /vs-roast-ui hooks with any argument.

Workflow

Direct: emit Next only. Composed: return to caller.

Prev: frontend implementation | design request Next: /vs-verify Relevant: /vs-deslop | /vs-qa