Design System
This is the skill you want when "our UI feels inconsistent" but you're not sure if you need new components, tokens, or just better rules. It forces you to classify the problem first (foundations, cross-surface alignment, primitive governance, or handoff) before generating examples or writing code. The core discipline is routing work out early: keep system-level token and naming decisions here, but send component API design to ui-component-patterns, layout fixes to responsive-design, and accessibility remediation to web-accessibility. It's opinionated about rules before examples and includes reference docs on token governance, scope boundaries, and system modes. Best for teams that keep redesigning the same surface because they never decided what stays consistent across products.
- skills.sh installs
- 177
- GitHub stars
- 22
- last updated
- Jun 3, 2026
Install
$ npx -y skills add akillness/oh-my-skills --skill design-system --agent claude-codeInstalls into .claude/skills of the current project.
Files
Design System
Use this skill when the main question is "what shared UI rules should govern this product or product family before we design or refactor individual screens?"
This is the repo's canonical frontend UI-system anchor. It should:
- classify the system problem,
- choose the right design-system mode,
- route neighboring frontend work out early,
- define a compact system packet another human or agent can execute.
Read references/system-modes.md before choosing an approach.
Read references/token-and-governance-checklist.md before changing shared tokens, primitives, or naming rules.
Read references/scope-boundaries.md when deciding whether the work belongs here, responsive-design, or web-accessibility.
Read references/design-system-packet-template.md before writing the final handoff.
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/akillness/oh-my-skills
- Category
- Design & UI/UX
- First seen
- Jun 3, 2026
More from akillness/oh-my-skills
All 81- Google Workspace177
- Log Analysis177
- Performance Optimization175
- Api Design174
- Api Documentation174
- Plannotator173
- Playwriter173
- Testing Strategies173
- Database Schema Design172
- React Best Practices172
- Agentation171
- Bmad Idea171
- Code Review171
- Marketing Automation171
- Obsidian Plugin171
- Opencontext171
- Standup Meeting171
- Task Estimation171
- Ui Component Patterns171
- Changelog Maintenance170
- Monitoring Observability170
- Sprint Retrospective170
- Deployment Automation169
- Ohmg169
Recommended
More Design & UI/UX
web-prototype-taste-editorialnexu-io/open-designEditorial-minimalist web prototype. Warm monochrome canvas, serif display + grotesque body, 1px hairline borders, muted pastel chips, generous macro-whitespace,171skills.sh installs
figma-generate-designfigma/mcp-server-guideUse this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma',6.4Kskills.sh installs
tailwind-design-systemgiuseppe-trisciuoglio/developer-kitSkill for creating and managing a Design System using Tailwind CSS and shadcn/ui. Use when defining design tokens, setting up theming with CSS variables, buildi4.7Kskills.sh installsfigma-generate-designnexu-io/open-designBuild or update screens in Figma from code or description using design system components. Translate app pages into Figma using design tokens.2.9Kskills.sh installs