design-catalog
Design catalog
A vibe-coded app has a design language; it just was never written down, so every generation drifted a little: four greys for secondary text, three button shapes, a 10px radius here and 16px there. This skill measures what the app actually renders, asks the owner a handful of decisions about what was intended, and makes the app, its tokens, a catalog page and DESIGN.md agree.
running app ──measure──▶ snapshots ──analyse──▶ ~10 decisions ──the owner answers──▶ tokens in the app's CSS
source ──scan──▶ where each value lives ▶ screens migrated, verified by re-measuring
▶ /design-catalog page + DESIGN.md + AGENTS.md rules
Preserve, do not redesign. The most-used value wins by default; nothing is made "nicer". The one exception is legibility: text that fails WCAG AA contrast on its background is its own decision, with the closest value that passes. Measure, do not guess. Colours are judged from computed styles, not class names. Ask about intent, decide about accident. Consistent across screens is intent; varying without reason is accident, and the owner confirms. The code is the catalog. The page renders the real components; no Storybook, no copies. Small verified steps. Every change is re-measured and compared before the next.
Optimised for React + Tailwind (+ shadcn), the usual vibe-coding stack. Measurement works on any web app; token and component steps adapt to the styling system found (references/tokens.md).