design-system

Audit design systems for token, component, and naming consistency.

4|4|Updated Dec 15, 2024
One-click install
npx skills add https://github.com/adrianliechti/wingman-chat --skill design-system-adrianliechti
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/adrianliechti/wingman-chat/tree/main/skills/design/design-system
Command: npx skills add https://github.com/adrianliechti/wingman-chat --skill design-system-adrianliechti

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Audit, document, or extend your design system to prevent naming inconsistencies and hardcoded values, while documenting component variants, states, and accessibility notes, or designing new patterns that fit the system.

Core Features & Use Cases

  • Audit for consistency across design tokens, components, and patterns
  • Document components, variants, states, and accessibility notes
  • Design new patterns that fit the existing system
  • Provide templates and guidelines to maintain versioning and migration

Quick Start

Review your design system to identify inconsistencies and update documentation using the provided templates.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I audit my design system for naming inconsistencies and hardcoded values?

To audit a design system for naming inconsistencies and hardcoded values, review your components and tokens against structured templates. This process identifies non-standard patterns and ensures consistency across your project's design infrastructure.

What is the best way to document component variants and accessibility notes?

The best way to document component variants and accessibility notes is to apply structured documentation templates. This captures component states, variants, and accessibility guidelines systematically across your design system.

How do I design new patterns that fit my existing design system?

To design new patterns that fit an existing design system, evaluate your current tokens and components. Extend the system by mapping migration paths and ensuring the new patterns adhere to established naming conventions.

Can I use this approach to maintain versioning and migration paths for design tokens?

Yes, you can maintain versioning and migration paths for design tokens. The process provides specific guidelines and templates to track token evolution, ensuring smooth transitions and consistent updates across projects.

What do I need to check design token usage across multiple projects?

To check design token usage across multiple projects, you need structured audit templates. These templates guide the review process, helping you detect inconsistencies and document variant states effectively throughout your design system.

Why should I audit design tokens instead of just updating components directly?

Auditing design tokens prevents hardcoded values and naming inconsistencies before updating components directly. This systematic review ensures your design system remains scalable, accessible, and consistent across all component variants and states.