Does it support accessibility standards?

Absolutely. The skill includes accessibility templates and generates documentation for ARIA roles, keyboard interactions, and screen reader support.

Can this skill help migrate legacy CSS to tokens?

Yes, the 'Validate' action scans your codebase to identify hardcoded colors or spacing and suggests the corresponding design tokens to ensure consistency.

Can I customize the design token structure?

Yes, the skill follows a standardized tokens.ts structure that can be expanded or modified to match your specific brand requirements and layout constraints.

What frameworks are supported?

While the skill is configured for modern TypeScript/CSS environments, it is framework-agnostic and can be used to manage design systems for React, Vue, Svelte, or Vanilla JS.

How does it handle component documentation?

The skill automatically generates structured Markdown documentation including props tables, variant descriptions, and live code examples for every component created.

Design System Architect

Name: Design System Architect
Author: xarlord

byxarlord

0•

デザインツール

Manages design tokens, builds standardized component libraries, and ensures UI consistency through automated compliance audits.

The Design System Architect skill empowers Claude to act as a dedicated maintainer for your application's visual language and component architecture. It automates the creation and updating of design tokens—such as colors, typography, and spacing—while generating standardized, accessible UI components complete with documentation and test coverage. By providing automated compliance reports, this skill identifies hardcoded values and non-standard layouts, ensuring your frontend code remains consistent with project-wide design guidelines and accessibility standards.

主な機能

01Dynamic documentation generation for components, variants, and usage patterns

02Automated design system compliance audits for identifying UI debt

030 GitHub stars

04Automated design token management for colors, spacing, and typography

05Standardized UI component scaffolding with full TypeScript and CSS integration

06Built-in accessibility (A11y) validation and ARIA documentation

ユースケース

01Scaffolding a new reusable component library with consistent styling and testing

02Auditing legacy frontend pages to replace hardcoded hex values with design tokens

03Onboarding new developers by generating comprehensive usage guides and code examples

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add xarlord/devflow-enforcer design-system

For use in Claude.ai and ChatGPT

主な機能

01Dynamic documentation generation for components, variants, and usage patterns

02Automated design system compliance audits for identifying UI debt

030 GitHub stars

04Automated design token management for colors, spacing, and typography

05Standardized UI component scaffolding with full TypeScript and CSS integration

06Built-in accessibility (A11y) validation and ARIA documentation

ユースケース

01Scaffolding a new reusable component library with consistent styling and testing

02Auditing legacy frontend pages to replace hardcoded hex values with design tokens

03Onboarding new developers by generating comprehensive usage guides and code examples

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add xarlord/devflow-enforcer design-system

For use in Claude.ai and ChatGPT