design-design-system

Audit, document, and extend design systems with structured component templates.

Updated May 26, 2026
One-click install
npx skills add https://github.com/avel123111/triplanio --skill design-design-system-avel123111
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-design-system
Source: https://github.com/avel123111/triplanio/tree/main/.claude/skills/design-design-system
Command: npx skills add https://github.com/avel123111/triplanio --skill design-design-system-avel123111

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Design systems drift over time: naming becomes inconsistent, hardcoded values replace tokens, and components ship without documentation. This Skill provides structured workflows to audit consistency, document components, and design new patterns that fit the existing system. ## Core Features & Use Cases - System Audit: Review naming consistency, token coverage, and component completeness, producing a scored report with prioritized actions. - Component Documentation: Generate documentation covering variants, props, states, accessibility (ARIA roles, keyboard behavior), and do's/don'ts. - Pattern Extension: Design new components with proposed APIs, variants, states, token usage, and open questions for design review. - Use Case: A team notices buttons use three different naming conventions and hardcoded hex colors. Run an audit to get a token coverage table and a prioritized list of fixes, then document the Button component's states and accessibility notes. ## Quick Start Ask the assistant to audit the design system for naming inconsistencies and hardcoded color values across components.

Frequently Asked Questions about design-design-system

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

FAQPage Schema
How do I audit a design system for inconsistencies?

Run the audit workflow to review naming consistency, token coverage, and component completeness. It produces a scored report listing hardcoded values, inconsistent naming, and prioritized improvement actions.

How to document a UI component's variants and states?

Use the document workflow with a component name to generate documentation covering variants, props, states (default, hover, active, disabled, loading), accessibility details, and do's and don'ts in a structured Markdown template.

What should design system documentation include for accessibility?

Component documentation should include the ARIA role, keyboard interaction behavior (Tab, Enter, Escape), and screen reader announcements. The document template includes a dedicated accessibility section for these details.

Can this audit components in Figma directly?

Yes, if a design tool connector is connected, the audit can check naming, variants, and token usage directly in Figma and pull component properties for documentation. Without connectors, it works from code and existing documentation.

When should I extend a design system instead of reusing components?

Extend the system when existing components share similarities with your need but miss required behavior. The extend workflow compares related components, identifies gaps, and proposes a new design with API, variants, and token usage.