design-system

Audit design system components for naming, tokens, states, and accessibility.

2|1|Updated May 17, 2026

Search Tags:#accessibility #design system #design tokens #pattern design #component documentation #ui audit

Ready to run

npx skills add https://github.com/rakibulism/agent-skills-os --skill design-system-rakibulism

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/rakibulism/agent-skills-os/tree/main/skills/design-design-system
Command: npx skills add https://github.com/rakibulism/agent-skills-os --skill design-system-rakibulism

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams keep a design system consistent, well-documented, and ready to extend by auditing naming, token usage, component states, and accessibility details.

Core Features & Use Cases

Design System Audit: Find naming inconsistencies, hardcoded values, missing states, and documentation gaps across components.
Component Documentation: Create clear component docs covering variants, props, behaviors, accessibility, and do's and don'ts.
Pattern Extension: Design new components or patterns that align with existing tokens, states, and interaction rules.
Use Case: A product team wants to add a new button pattern and verify that it matches existing spacing, color tokens, and accessibility expectations before rollout.

Quick Start

Ask the agent to audit, document, or extend a specific component or pattern in your design system.

Frequently Asked Questions about design-system

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

FAQPage Schema

How do I audit a design system for consistency and missing component states?▼

To audit a design system, analyze components for naming inconsistencies, hardcoded values, missing states, and documentation gaps. This process reviews design tokens, states, variants, and props to ensure structural completeness and identify areas needing alignment before extending the UI system.

What is the best way to document design tokens and component variants?▼

Documenting design tokens and component variants requires structuring clear documentation that covers props, behaviors, accessibility notes, and do's and don'ts. This ensures components are well-documented for completeness and ready for future pattern extensions within the UI system.

How do I design new UI patterns that match existing design tokens and accessibility rules?▼

Designing new UI patterns involves analyzing existing tokens, states, and interaction rules to propose migration-aware recommendations. This ensures any new component or pattern aligns seamlessly with the current design system before rollout.

Can I check my component variants for hardcoded values and accessibility gaps?▼

Yes, you can check component variants by performing a structured analysis of design tokens and states. This identifies hardcoded values, missing accessibility details, and naming inconsistencies to maintain system quality and compliance.

When do I need to perform a UI audit on my component documentation?▼

You need a UI audit when adding new patterns, verifying component variants, or preparing for migration. It helps find documentation gaps, checks token usage, and ensures your design system remains extensible and consistent across all components.