skills.rest
kiryteo
kiryteoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-system-management

Organize design tokens, components, and patterns into a cohesive design system.

1|Updated Mar 9, 2026
Search Tags:#documentation#accessibility#design-system#design-tokens#pattern-library#component-library#ui-consistency
One-click install
npx skills add https://github.com/kiryteo/opencode-setup --skill design-system-management-kiryteo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-management
Source: https://github.com/kiryteo/opencode-setup/tree/main/skills/design-system-management
Command: npx skills add https://github.com/kiryteo/opencode-setup --skill design-system-management-kiryteo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Manage design tokens, component libraries, and pattern documentation to maintain consistency and accelerate product delivery.

Core Features & Use Cases

  • Design Tokens: centralized tokens for colors, typography, spacing, borders, and motion.
  • Components: reusable UI elements with variants, states, sizes, and accessibility considerations.
  • Patterns: common UI solutions like forms, navigation, data display, and feedback.
  • Use Case: A team standardizes visuals across apps by publishing a token library and shared components, ensuring consistent UI.

Quick Start

Outline the initial tokens, components, and patterns for a new design system.

Frequently Asked Questions about design-system-management

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

FAQPage Schema
How do I manage design tokens and component libraries to maintain UI consistency?▼

Manage design tokens and component libraries by centralizing colors, typography, and spacing into a cohesive design system. This standardizes UI development across product teams, ensuring consistent visuals and scalable design decisions across projects.

What is the best way to document design system patterns and accessibility considerations?▼

Document design system patterns by defining common UI solutions like forms and navigation alongside their specific accessibility considerations. This creates traceable changes in tokens and components, accelerating team onboarding and satisfying governance requirements.

How do I organize design tokens for colors, typography, and spacing for a new design system?▼

Organize design tokens by centralizing definitions for colors, typography, spacing, borders, and motion into a single library. Publishing this token library allows teams to standardize visuals across multiple applications effectively.

Can I apply a design system across multiple product teams to enable scalable design decisions?▼

Yes, you can apply a design system across multiple product teams to enable scalable design decisions. It organizes components and patterns cohesively, maintaining UI consistency and accelerating product delivery throughout the organization.

Does a design system need to include governance and versioning for traceable component changes?▼

A design system needs governance and versioning to maintain traceable changes in tokens and components. This ensures that updates to reusable UI elements and their variants are controlled, satisfying accessibility considerations and long-term consistency.

Related Skills

Explore More Design & Creative Skills→
mrodrigues1mrodrigues1

visual-design-foundations

Define visual design systems using typography, color, spacing, and iconography.

Community
Intermediate
bacchus-labsbacchus-labs
4

ai-ds-composer

Compose UI components from design system metadata with variant selection.

Official
Advanced
carayacaraya
1

vue-ui

Guide Vue SFC and Composition API implementation with WCAG compliance checks.

Community
Advanced
dralgorhythmdralgorhythm
111

design-systems

Standardize UI components and design tokens across projects.

Community
Advanced