Agent skill · software engineering · sickn33
design-system
Mechanical implementation invariants for frontend design: token architecture, typography hierarchy, loading order, FOUT prevention, chrome stability, motion timing, color semantics. Use with design when building components, pages, or design systems.
Why this skill is useful
Provides specific mechanical implementation guidelines for frontend design that the AI wouldn't reliably generate on its own.
What it needs
About 9k tokens when loaded. Last updated 2026-08-07. 44,571 stars on the source repository.
What this skill does
Design system When to Use Use this skill when you need mechanical implementation invariants for frontend design: token architecture, typography hierarchy, loading order, FOUT prevention, chrome stability, motion timing, color semantics. Use with design when building components, pages, or design systems. (Aesthetic direction lives in... Apply with design when implementing UI: components, pages, or design systems. Every color, type, and motion choice should trace back to these rules. Token architecture All colors map to a small set of primitives. No random hex values. Foreground: Text hierarchy (primary, secondary, muted). Background: Surface elevation (base, raised, overlay). Border: Separation hierarchy (subtle, default, emphasis). Brand: Identity and primary accent. Semantic: Destructive, warning, success (and optional info). Use tokens in code (CSS variables, theme objects); never hardcode hex for UI. Typography Hierarchy: Headlines — heavier weight, tighter letter-spacing for presence. Body — comfortable weight for readability. Labels/UI — medium weight, works at smaller sizes. Data — monospace, tabular-nums for alignment. Combine size, weight, and letter-spacing so hierarchy is clear at a glance. If you squint and can't tell headline from body, hierarchy is too weak. Fonts: pair a display font with a body font; keep hierarchy legible at a glance. Which fonts is direction, not mechanics — pick from the domain and push off your first/default instinct (the mean); see design-spatial §2. Data (functional only): real aligned numbers, IDs, timestamps in monospace with tabular-nums — mono earns its place when values line up in a column. Do NOT sprinkle mono on decorative eyebrow/metadata microtext ("35MM · DEVELOP · SCAN", fake spec captions) for a "technical" look — that's the current trend-slop, not data. See design-spatial §2. Loading order — first seen, first loaded The first viewport must paint complete and correct, fast. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills sickn33/design-system