skills.rest
zm2231
zm2231COMMUNITY
Explore all skills by this author →
GitHub

design-system

Create and maintain design systems with tokens, component specs, and migration plans.

Updated Apr 8, 2026
Search Tags:#documentation#accessibility#migration#governance#design-system#design-tokens#component-library
One-click install
npx skills add https://github.com/zm2231/personal-os-cowork --skill design-system-zm2231
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/zm2231/personal-os-cowork/tree/main/.claude/skills/design-system
Command: npx skills add https://github.com/zm2231/personal-os-cowork --skill design-system-zm2231

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams and product organizations struggle to keep UIs consistent and maintainable as products grow, causing duplicated work, fragmented components, and slow developer handoffs. This Skill streamlines the creation, maintenance, and evolution of design systems so teams deliver consistent interfaces faster and with fewer errors.

Core Features & Use Cases

  • Design tokens: Define and organize colors, typography, spacing, and shadow systems for cross-product consistency.
  • Component library specification: Document reusable components, states, variants, and developer handoff details.
  • Accessibility & compliance: Build WCAG checks and accessibility guidance into component standards.
  • Migration & governance: Plan migrations, version control, contribution workflows, and ownership models.
  • Analytics & adoption: Track component usage and prioritize design debt remediation.
  • Use Case: Audit an existing UI library to find inconsistencies, produce a prioritized migration plan, and generate onboarding docs for new teams.

Quick Start

Ask the design-system skill to audit your current component library and produce a prioritized migration plan with token definitions and developer-ready specs.

Frequently Asked Questions about design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit an existing component library for design inconsistencies?▼

To audit a component library for design inconsistencies, evaluate current UI elements against standardized design tokens, document missing variants, and produce a prioritized migration plan to resolve design debt.

What is the best way to structure design tokens for cross-platform alignment?▼

Structuring design tokens for cross-platform alignment requires defining and organizing colors, typography, spacing, and shadow systems into a centralized, documented repository to ensure a consistent visual language across web and mobile products.

How do I plan a design system migration and establish governance workflows?▼

Plan a design system migration by mapping component dependencies and creating a phased rollout, while establishing governance workflows through defined contribution models, version control strategies, and clear ownership documentation.

Can I integrate WCAG accessibility checks into my component library specifications?▼

You can integrate WCAG accessibility checks into component library specifications by embedding accessibility guidance and compliance rules directly into component standards, states, and developer handoff documentation.

How do I document component states and variants for developer handoff?▼

Document component states and variants for developer handoff by detailing reusable component specifications, interaction states, and implementation guidelines to streamline cross-functional development and reduce integration errors.

How do I track component usage analytics to prioritize design debt remediation?▼

Track component usage analytics to prioritize design debt remediation by integrating usage metrics into your governance workflow, identifying duplicated or fragmented components, and targeting high-impact areas for refactoring.

Related Skills

Explore More Design & Creative Skills→
felvieirafelvieira
22

asset-librarian

Inventory repository visual assets and generate a reusable catalog in docs/repo-audit/assets.md.

Community
Intermediate
librefanglibrefang
10

figma-expert

Create scalable Figma design systems with tokens and handoff-ready specs.

Official
Advanced
zm2231zm2231

style-guide-generator

Generate markdown style guides with token documentation and component catalogs.

Community
Advanced
LeoTechProLeoTechPro
1

shadcn-ui

Integrate and manage shadcn/ui components in React applications via CLI.

Community
Intermediate