suede-design

Render the page and capture screenshots instead of trusting code inspection. The skill uses npx playwright screenshot with viewport sizes of 1280px for desktop and 390px for mobile, then compares the render against the intended design before reporting completion.

Run a source-to-implementation visual QA pass: capture the rendered implementation at the same viewport as the source target and compare both in a single pass, never from memory. Save findings in visual-qa-report.md ordered by P0/P1/P2/P3 severity with a final passed or blocked result.

It bans gradient text, decorative glass panels, generic gradient-mesh backgrounds, icon-card grids as page structure, first-order category palettes, and fake metrics or testimonials. The first five allow scoped exceptions for source fidelity, platform convention, accessibility, brand systems, or direct user requests; fake metrics allow none.

Yes. It defines specific dark mode laws: surface lightness between 10-18 OKLCH, border-based elevation instead of shadows, 7:1 contrast for body text, and 15-25% chroma reduction for saturated colors. Semantic tokens must define both light and dark values at design time.

Do not use it for full design-plus-copy builds or reference-to-target restyles (routed to johnny-suede-design), conversion funnel architecture (suede-site-alchemy), or writing copy itself (suede-copy). It focuses on visual design, tokens, and rendered QA only.

Yes, through a vetted registry table covering shadcn/ui, beUI, Rare UI, and Transitions.dev. Each import must pass an adoption checklist: local-first check, retokenization to local tokens, motion law compliance, license verification, and a rendered proof at desktop and mobile widths.