design-system
Skill1 starsChanged 44 days agoMITView on GitHub
Builds a design system for a codebase and keeps it enforced, by running five phases in order: measure the spacing, type and color values in use, settle the design decisions with the user, write them as tokens, update the code to use the tokens, and install a linter. Use when the user wants a design system, says their UI is inconsistent, or asks to standardize spacing, type or color.
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 repository9 other files it gives its agents.
- apply-transitionsSkill
- beautifySkill
- choose-iconsSkill
- design-applySkill
- design-enforceSkill
- design-extractSkill
- design-grillSkill
- design-ratifySkill
- empty-statesSkill
The file
We split this skill into the rules it gives an agent
3 rules. 0 are common, 3 are distinctive, and 0 are very specific to this project.
0
Common
Most of the 175 edited versions we read keep these.
3
Distinctive
This author's own choices. Worth a look.
0
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 20
Check for progress from an earlier run:
- Distinctive: line 26
Start at the first phase whose output file is missing, and tell the user which phase that is.
- Distinctive: line 28
Call the Skill tool for each phase in order.
“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
Design System
Runs the five Motif phases in order. Each phase reads the file the previous phase wrote, so none of them can run without the one before it.
| Phase | Skill | What it does | Writes |
| 1 | design-extract | Measures the values the code uses today | .design/drift.json |
| 2 | design-grill | Asks the user to settle each design decision | .design/decisions.json |
| 3 | design-ratify | Turns the decisions into tokens and docs | tokens, DESIGN.md, .design/records/ |
| 4 | design-apply | Updates the code to use the tokens | one commit per batch |
| 5 | design-enforce | Installs a linter so the code stays consistent | scripts/design-lint.mjs |
Steps
Check for progress from an earlier run:
ls .design/ 2>/dev/null && cat .design/state.json 2>/dev/nullStart at the first phase whose output file is missing, and tell the user which phase that is. This lets an interrupted run pick up where it stopped.
Call the Skill tool for each phase in order. Do not skip a phase.
Never make up a value
Phases 1 to 3 decide what the system is. Phases 4 and 5 change the code to match it.
During phases 4 and 5, if the code needs a value that no token covers, stop and note it. Do not pick a substitute. At the end of the phase, show the user every value you noted, as questions. Each one is either a gap in the system or a value that shouldn't exist, and the user decides which.
Passes to run afterwards
These four skills use the finished system. Each needs DESIGN.md and will not run without it.
| Skill | What it does |
beautify | Fixes spacing, font sizes, line length, alignment and overflow without redesigning anything |
apply-transitions | Adds transitions to things that currently appear or change instantly |
choose-icons | Picks one icon library that covers what the product needs, and uses it everywhere |
empty-states | Adds a proper empty state to anything that shows nothing when it has no data |
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
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.