Skill Wiki
design-system
Domain inferred from 10 atoms across the corpora.
Atom counts by kind
| Kind | Count |
|---|---|
| type | 4 |
| anti-pattern | 2 |
| counter-example | 2 |
| provocation | 1 |
| tool | 1 |
Sample atoms
Hardcoded Pixel Values
Writing raw pixel values (`padding: 16px`, `font-size: 14px`, `border-radius: 8px`) directly into component CSS instead of referencing CSS custom properties or design tokens.…
Magic Numbers
Numeric values that have no traceable origin: `padding: 13px`, `top: 47px`, `width: calc(100% - 73px)`, `transform: translateY(-2.5rem)`.…
Counter Example Hardcoded Pixel Padding
A typical card component CSS where every dimension — padding, margin, radius, gap — is written as a raw pixel literal. Looks fine in isolation but represents the failure to extract a token layer.
Counter Example Magic Number Padding
A header layout that uses off-grid pixel values and a `calc()` expression with a bare numeric constant. The values were nudged into place visually with no underlying system.
Provocation Design System As Product
@community/provocation-design-system-as-product
Tool Figma Tokens Plugin
Tokens Studio for Figma is the de-facto plugin for managing design tokens inside Figma and syncing them with code repositories (GitHub, GitLab, JSON files, Style Dictionary).…
Type Color Token Shape
Schema for a color token in a design system. A color token is more than its raw value — it carries semantic meaning, mode variants (light/dark), accessibility metadata (computed contrast), and provenance (primitive vs se…
Type Component Prop Shape
Schema for a design-system component's prop API. Captures variant + size + state dimensions, polymorphic 'as' support, accessibility props, and slot composition.…
Type Design Token
Schema for a design token — a named, typed design decision that is stored as data and consumed by design tools and code. Based on the W3C Design Tokens Community Group format (draft).
Type Spacing Scale
Schema for a spacing scale — the canonical set of distance values used for padding, margin, gap, and inset across the design system.…