Can I use this for specific frontend frameworks?

Yes, the documentation and extension outputs are designed to be framework-agnostic but can be easily tailored to generate code snippets for React, Vue, Svelte, or vanilla CSS.

How does the audit command help my project?

The audit command scans your system for naming inconsistencies, hardcoded values (like hex codes), and missing component documentation, providing a prioritized action list to improve system integrity.

Does it support accessibility standards?

Absolutely. Every component documentation and extension proposal includes dedicated sections for ARIA roles, keyboard interactions, and screen reader behavior to ensure WCAG compliance.

How does it handle design tokens?

It analyzes and organizes atomic values—such as colors, typography scales, spacing, and elevation—to ensure a consistent visual language is applied across all UI components.

Design System Architect

Name: Design System Architect
Author: anthropics

byanthropics

•

11,566

•

디자인 도구

Manages, audits, and documents UI design systems to ensure consistency, accessibility, and scalability across frontend components.

The Design System Architect skill empowers developers and designers to maintain a source of truth for their UI components. It provides specialized tools to audit existing codebases for hardcoded values and naming inconsistencies, generate comprehensive documentation for component variants and states, and intelligently extend systems with new patterns that follow established architectural principles. By focusing on design tokens, accessibility standards, and reusable patterns, this skill bridges the gap between design theory and production-ready implementation.

주요 기능

0111,566 GitHub stars

02Structural guidance for extending systems with new, cohesive UI patterns

03Automated documentation generation for component variants, props, and states

04Token coverage analysis to identify and eliminate hardcoded CSS values

05Comprehensive design system auditing for naming and token consistency

06Detailed accessibility mapping including ARIA roles and keyboard interactions

사용 사례

01Generating standardized documentation for a component library to improve developer onboarding

02Auditing a legacy codebase to replace hardcoded hex codes and spacing with semantic design tokens

03Designing new complex patterns, like data tables or modals, that inherit existing brand constraints

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add anthropics/knowledge-work-plugins design-system

For use in Claude.ai and ChatGPT

주요 기능

0111,566 GitHub stars

02Structural guidance for extending systems with new, cohesive UI patterns

03Automated documentation generation for component variants, props, and states

04Token coverage analysis to identify and eliminate hardcoded CSS values

05Comprehensive design system auditing for naming and token consistency

06Detailed accessibility mapping including ARIA roles and keyboard interactions

사용 사례

01Generating standardized documentation for a component library to improve developer onboarding

02Auditing a legacy codebase to replace hardcoded hex codes and spacing with semantic design tokens

03Designing new complex patterns, like data tables or modals, that inherit existing brand constraints

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add anthropics/knowledge-work-plugins design-system

For use in Claude.ai and ChatGPT