design-system
Skill2 starsChanged 36 days agoMITView on GitHub
Enforces the project's design system on every UI component, page, and style decision. Always apply this skill when writing any frontend code — components, layouts, pages, CSS, Tailwind classes, or inline styles. Trigger when the user asks to build a page, component, UI, screen, layout, or anything visual. Also trigger when the user says "make it look like the design", "follow the design system", "use our colors", or "style this properly". Never use arbitrary colors, spacing, or typography that are not defined in the design system. Part of the PRD → Production pack (always on during feature work).
192 other projects use a version of this.
Adopted by
Most recently taken up by
- Rojios/everything-claude-codetheir own version, first seen Nov 8, 2026
- caidanw/skillstheir own version, first seen Nov 8, 2026
- Adelie-Squad/solosquadtheir own version, first seen Nov 8, 2026
- darkweb19/skillstheir own version, first seen Nov 8, 2026
- dmoreq/agent-grimoiretheir own version, first seen Nov 8, 2026
- ahmadvahidi/skill-atlastheir own version, first seen Nov 8, 2026
Used with
Projects with it also use setup-engine, team-level and 10 more.
Other files people use alongside this one.
Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
CoralGameSkillsetup-engine
Configure the project's game engine and version. Pins the engine in CLAUDE.md, detects knowledge gaps, and populates engine reference docs via WebSearch when the version is beyond the LLM's training data.
Also in 13 projects that use this
- CoralGameSkill
team-level
Orchestrate level design team: level-designer + narrative-director + world-builder + art-director + systems-designer + qa-tester for complete area/level creation.
Also in 12 projects that use this
lilangMaxSkillcreate-stories
Break a single epic into implementable story files. Reads the epic, its GDD, governing ADRs, and control manifest. Each story embeds its GDD requirement TR-ID, ADR guidance, acceptance criteria, story type, and test evidence path. Run after /create-epics for each epic.
Also in 11 projects that use this
- lilangMaxSkill
story-done
End-of-story completion review. Reads the story file, verifies each acceptance criterion against the implementation, checks for GDD/ADR deviations, prompts code review, updates story status to Complete, and surfaces the next ready story from the sprint.
Also in 11 projects that use this
- +2 more from CoralGame
- +6 more from lilangMax
Other versions192 projects use a version of this.
Word for word · 0
None found.
Edited · 0
None found.
Wrote their own version · 192
- nextlevelbuilder/ui-ux-pro-max-skill★ 147ksame name
- getsentry/sentry★ 46ksame name
- anthropics/knowledge-work-plugins★ 35ksame name
- Donchitos/Claude-Code-Game-Studios★ 27ksame name
- ethereum/ethereum-org-website★ 6ksame name
- langwatch/langwatch★ 5ksame name
- joye61/pic-smaller★ 2.9ksame name
- daveebbelaar/bama★ 1.7ksame name
- reatom/reatom★ 1.4ksame name
- microsoft/power-platform-skills★ 1.1ksame name
182 more not listed
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository21 other files it gives its agents.
- analytics-question-framingSkill
- clinical-ai-evaluation-designSkill
- cohort-retentionSkill
- engineering-plannerSkill
- experiment-designSkill
- frontend-setupSkill
- gxp-part11-checkerSkill
- implementation-specsSkill
- insight-storytellerSkill
- market-researchSkill
- metric-root-causeSkill
- opportunity-finderSkill
- opportunity-sizingSkill
- prd-evaluatorSkill
- prd-writerSkill
- product-strategy-canvasSkill
- security-foundationSkill
- strategy-sprintSkill
- trial-eligibility-matcherSkill
- trial-failure-investigatorSkill
- user-researchSkill
The file
We split this skill into the rules it gives an agent
8 rules. 0 are common, 2 are distinctive, and 6 are very specific to this project.
0
Common
Most of the 175 edited versions we read keep these.
2
Distinctive
This author's own choices. Worth a look.
6
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 19
All design tokens, colors, typography, spacing, components, and rules live in:
- Very specific: line 23
Before writing any UI code, read docs/design.md in full.
- Very specific: line 25
If docs/design.md does not exist yet, create it by asking the user the following questions with AskUserQuestion, then write the file:
- Very specific: line 38
Never use colors, spacing, or fonts not defined in docs/design.md
- Distinctive: line 39
Never hardcode hex values — always reference the named token
- Very specific: line 40
Always use the component specs from docs/design.md for buttons, cards, forms, and tables
- Very specific: line 41
Always use the icon library and size specified in docs/design.md
- Very specific: line 42
Always keep transitions at the duration and easing defined in docs/design.md
“Common” is measured: kept by at least 6 in 10 of the 175 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
PRD → Production pack · always on. Apply this skill whenever UI code is written, from Stage 4 (
frontend-setup) onward.
Design System Source of Truth
All design tokens, colors, typography, spacing, components, and rules live in:
docs/design.md
Before writing any UI code, read docs/design.md in full. Every decision — colors, spacing, fonts, component styles, layout — must come from that file.
If docs/design.md does not exist yet, create it by asking the user the following questions with AskUserQuestion, then write the file:
- What is the product name and visual personality? (e.g. "enterprise SaaS", "consumer app", "developer tool")
- What are the primary brand colors? (provide hex values if known, or describe the mood)
- What fonts should be used? (or should we default to Inter for UI and JetBrains Mono for code?)
- Are there any existing designs, Figma files, or brand guidelines to reference?
Once you have the answers, generate docs/design.md with the full design system — including color tokens (brand, semantic, surface, text), typography scale, spacing scale, layout zones, component specs (buttons, cards, inputs, tables), icon library, motion, and accessibility rules.
Rules (always apply, regardless of project)
- Never use colors, spacing, or fonts not defined in
docs/design.md - Never hardcode hex values — always reference the named token
- Always use the component specs from
docs/design.mdfor buttons, cards, forms, and tables - Always use the icon library and size specified in
docs/design.md - Always keep transitions at the duration and easing defined in
docs/design.md - WCAG AA compliance minimum — maintain 4.5:1 text contrast ratio
- Keyboard navigation and visible focus states on all interactive elements
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
Reviews can't be read right now.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.