From senior-dev-squad
Design system catalog, selection, theming, token generation from brand, and cross-system mapping/migration. Use when selecting, adopting, migrating, or tokenizing a design system.
How this skill is triggered — by the user, by Claude, or both
Slash command
/senior-dev-squad:design-system-managerThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Instead of writing a design system from scratch for every project, this skill catalogs and matches 72+ open-source design systems based on project type, and guides you through every step from initial setup to theming and migration. Adhering to the Open Design approach (e.g., nexu-io/open-design — 46K★), it manages component inventory, design tokens, framework adapters, accessibility compliance,...
Instead of writing a design system from scratch for every project, this skill catalogs and matches 72+ open-source design systems based on project type, and guides you through every step from initial setup to theming and migration. Adhering to the Open Design approach (e.g., nexu-io/open-design — 46K★), it manages component inventory, design tokens, framework adapters, accessibility compliance, bundle size, license compatibility, and dark mode support from a single source.
Core principle: SELECTING A DESIGN SYSTEM IS NOT JUST A TECHNICAL DECISION — IT IS THE INTERSECTION OF PRODUCT, PERFORMANCE, TEAM, AND LICENSE STRATEGY. IT MUST NEVER BE CHOSEN ARBITRARILY.
SELECT EXACTLY ONE DESIGN SYSTEM FOR EVERY PROJECT. IF YOU MUST MIGRATE LATER, ENSURE YOU HAVE A DOCUMENTED MIGRATION PLAN.
Never say "let's throw in Bootstrap now, we'll migrate to shadcn/ui later." Without calculating migration costs, token structures, theme APIs, and component compatibility upfront, half the project will end up being rewritten.
When it must be used:
ESPECIALLY when:
Never skip when:
Work through the six phases in order. Each gate must be confirmed before proceeding.
Phase 1 — Scan the catalog. Identify project type, framework, team size, performance budget, and WCAG target. See REFERENCE.md for the full catalog of 72+ design systems organized by category.
Phase 2 — Select. Pick the top 3 candidates using the project-type mapping, then eliminate via bundle size, WCAG level, dark mode support, and license. See REFERENCE.md for all four comparison tables (project-type map, bundle sizes, WCAG levels, dark mode, license matrix).
Phase 3 — Install and configure. Confirm Phase 1-2 are done, verify framework version requirements, and check for existing systems that need a transition plan. See REFERENCE.md for per-system install commands and provider wrapper patterns.
Phase 4 — Theme and tokens. Collect the brand kit (color palette, typography, spacing, border radius) and map values to the chosen system's token API. See REFERENCE.md for the cross-system token mapping table and theme customization code for MUI, Chakra, Ant Design, Mantine, and DaisyUI, including dark mode wiring.
Phase 5 — Component inventory. List every component the project needs, identify gaps in the chosen system, and size the effort to build any missing components. See REFERENCE.md for the full component comparison matrix (19 component types across 6 systems).
Phase 6 — Migration plan (if applicable). Choose Big Bang, Gradual, or Strangler Fig based on project size. See REFERENCE.md for strategy descriptions, a worked Bootstrap → Mantine example, and a token migration mapping table.
If you find yourself rationalizing like this, STOP:
ANY OF THESE MEAN: STOP. Go back to the selection phase and justify decisions with data.
| Rationalization | Reality |
|---|---|
| "Everyone uses Bootstrap, it's the standard." | Bootstrap is popular but not universally optimal. A complex data dashboard is better served by MUI or Ant Design. |
| "Bundle size doesn't matter; everyone has fast connections." | At least 15% of global users operate on constrained mobile networks. Every kilobyte counts. |
| "We will implement dark mode later." | Retrofitting dark mode onto a design system that doesn't support it natively can require rewriting up to 30% of your frontend. |
| "Migrating is easy since the concepts are identical." | MUI to Mantine: Token architectures, API properties, state hooks, and Providers are completely different. Expect a 2-4 week effort. |
| "There's no need to analyze licenses." | Permissive licenses like MIT, Apache 2.0, and BSD have distinct conditions regarding patents and liabilities. Enterprise usage requires compliance. |
| "This is a small project, no design system needed." | Small projects grow. Failing to implement tokens and modular components early makes refactoring painful within 6 months. |
| "shadcn/ui is copy-paste, so updates aren't an issue." | Custom component overrides make subsequent automatic updates via CLI highly prone to merge conflicts. |
| "Ant Design is only for Chinese regional projects." | Ant Design is developed by global contributors, fully localized to English, and deployed in enterprise apps worldwide. |
| "Carbon is an IBM product, so we'll be vendor-locked." | Carbon is fully open-source (MIT/BSD-licensed) with massive community contributions. IBM dependency is non-existent. |
Watch for these feedback indicators:
When you receive these signals: STOP. Return to the relevant phase: decision validation, component inventory, bundle auditing, or licensing verification.
Phase 4 (theming) may require generating tokens from scratch or mapping them across systems before customizing the chosen design system. Two extended workflows are in REFERENCE.md:
base_size × scale_ratio, spacing from base_unit, shadow/radius/animation from personality flags, WCAG-verified dark mode overrides, and multi-format export (CSS / Tailwind / MUI / Chakra).Run the relevant sub-checklist at the end of each workflow before returning to the main Phase 5.
After completing this process, verify:
Final checklist before marking complete:
npx claudepluginhub haj1t/senior-dev-squad-skills --plugin senior-dev-squadGuides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.