Use when defining or extending design tokens and the shared component library — by product-designer when writing docs/13-design-tokens.md and docs/14-components.md, and by any IC about to add a component. Triggers the moment a value would be hardcoded instead of named, or a one-off component would be created instead of composed.
Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.
What the file says
# Design system
A design system is not a document, it is a **constraint that holds at build time**. Tokens nobody is
forced to use are a colour list.
## Three layers, in this order
1. **Primitive** — the raw values. `blue-600 #2563EB`, `space-4 16`, `dur-fast 150ms`. No screen
ever references a primitive directly.
2. **Semantic** — what it means. `text/primary`, `surface/elevated`, `semantic/error`,
`motion/enter`. Screens reference these and only these.
3. **Component** — what a component uses. `button/primary/background` → `semantic/action`.
Skipping layer 2 is the failure: a dark mode, a rebrand or a contrast fix then edits every screen.
## The rules
- **A hardcoded colour, spacing, radius, duration or font size in a screen is a defect**, not a
style preference. Name it or use the token that already exists.
- **Every semantic token names its dark-mode value at the same time.** A token added light-only is a
dark-mode bug already merged.
- **A new component needs a reason the existing ones cannot compose it.** Write the reason in
`docs/14-components.md`. "It looked different in the mock" is not one.
…
The line at the top of this page pins the label git:20260729.071181e, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.
GET https://markdownregistry.com/api/v1/artifacts/art_d225i7mdye2lzjyh
GET https://markdownregistry.com/api/v1/resolve?ref=vmobifystudio/app-dev-team/design-system
GET https://markdownregistry.com/api/v1/blob/f5bd945b638cb6ab8aab5f1f3aafd2e2d86311e6cebc94b1afb098a5c4986808
Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
vmobifystudio/app-dev-team · skills/accessibility-gate/SKILL.md · Use as a pass/fail gate on any diff with a user-facing surface — by code-reviewer during review, by qa-engineer during…
vmobifystudio/app-dev-team · skills/agent-isolation/SKILL.md · Use before spawning any agent that writes files, and by every developer/fixer agent as its first and last action. Gives…
vmobifystudio/app-dev-team · skills/architecture-builder/SKILL.md · Use to produce the technical architecture doc and engineering principles for a mobile app. Used primarily by the CTO…
vmobifystudio/app-dev-team · skills/board-doctor/SKILL.md · Use to validate docs/31-board.md before spawning any agent, and to verify a developer's "DONE" claim before moving a…
vmobifystudio/app-dev-team · skills/brownfield-onboarding/SKILL.md · Use when pointing the team at an EXISTING, already-built app instead of a blank project — detects the stack…
vmobifystudio/app-dev-team · skills/business-model/SKILL.md · Use when deciding or revisiting how the product makes money — pricing, tiers, trial shape, ad load, unit economics — by…
vmobifystudio/app-dev-team · skills/content-design/SKILL.md · Use when writing or reviewing any string a user reads — labels, buttons, empty states, errors, permission prompts…
vmobifystudio/app-dev-team · skills/context-preflight/SKILL.md · Run before changing a repository to verify branch, worktree, ticket, dependencies, source-of-truth documents, and…
vmobifystudio/app-dev-team · skills/database-migration/SKILL.md · Use before changing any persisted schema — by backend-developer on a server store, by web-developer on a client or…
vmobifystudio/app-dev-team · skills/defect-hunting/SKILL.md · Use when reviewing code, auditing an app, writing a guard rule or test, or certifying any threshold/constant/formula…
cbrock84/headcount · plugins/product/skills/design-system/SKILL.md · Builds and maintains the design system a product is assembled from — tokens for color, type, spacing and elevation…
microsoft/power-platform-skills · plugins/mobile-apps/skills/design-system/SKILL.md · Creates the Tamagui brand system for an Expo/React Native Power Apps mobile app, including design-system.md, tokens.ts…
borghei/claude-skills · markdown-html/design-system/SKILL.md · Design tokens, light/dark theming, and WCAG contrast validation for HTML documents and decks, compiled into one…
rampstackco/claude-skills · skills/design-system/SKILL.md · Build or audit a design system including component library, design tokens, naming conventions, contribution model, and…
rshankras/claude-code-apple-skills · skills/design/design-system/SKILL.md · Build-time design-system rules that keep an Apple app cheap to restyle — role-named tokens, text styles that carry case…
