Agent skill · design visual · yonatangross
design-stylecards
Catalog of named aesthetic recipes: shadow stacks, glass, gradients, type scales as copy-paste values. Use for polished elevation, glassmorphism, mesh backgrounds or any make-it-look-like-X ask.
Why this skill is useful
Provides a catalog of aesthetic recipes with exact values for design elements that the AI wouldn't reliably generate on its own.
What it needs
About 3k tokens when loaded. Last updated 2026-08-06. 215 stars on the source repository.
What this skill does
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). 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 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 recipes on one element"). Violating an Avoid rule to satisfy a user request requires saying so explicitly. Catalog index Full recipes with exact values: references/stylecards.md. Recipe Use when -------- ---------- elevation/sm md lg Layered neutral shadows — compact controls / cards / hero surfaces glass/dark Frosted glass panel on a dark backdrop border/gradient 1px gradient border without a wrapper hack background/mesh 2–3 hue radial mesh page background type/editorial Display + body + mono role split with tracking values motion/budget The four allowed durations + the one-signature-moment rule Authoring a new stylecard Add to references/stylecards.md following the contract — a recipe without all three parts is not shippable: 1. Use when — one line, concrete surfaces ("cards, panels, popovers"), not adjectives. 2. Values — copy-paste-ready code. Numbers, not descriptions. 3. Avoid — falsifiable don'ts observed from real misuse. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills yonatangross/design-stylecards--548418