design-stylecards

# Design Stylecards Specs beat vibes. A stylecard is a named aesthetic recipe with **exact values** — the difference between "add a nice shadow" (reinvented differently every session) and `elevation/md` (identical every time, reviewed once, versioned forever). ```bash design-stylecards list # Catalog index design-stylecards elevation/md # Show one recipe design-stylecards apply glass/dark to src/components/Panel.tsx ``` ## Why declarative recipes Pipeline skills (`design-to-code`, `design-context-extract`) answer *how to produce* design output. Stylecards answer *what good looks like* — as literal values an agent pastes, not adjectives it interprets. Inspired by MengTo/Skills' stylecard micro-skills (MIT), consolidated into one catalog to avoid manifest sprawl. ## Workflow ### 1. Resolve the request to a recipe ```python Read("references/stylecards.md") # The catalog — always read before choosing # Match the user's intent to ONE recipe by its Use-When line. # No match → say so and offer the closest two; never freehand values. ``` ### 2. Show or apply - **Show**: print the recipe verbatim — values, Use-When, Avoid. No paraphrasing values. - **Apply**: edit the target file using the recipe's exact values. Adapt only the syntax (Tailwind arbitrary class ↔ plain CSS ↔ CSS custom property), never the numbers. ### 3. Respect the recipe's Avoid block Every recipe ends with falsifiable Avoid rules (e.g. "never stack two elevation recip...