skills.rest
rakibulism
rakibulismCOMMUNITY
Explore all skills by this author →
Website𝕏@rakibulismGitHub

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
One-click install
npx skills add https://github.com/rakibulism/agent-skills-os --skill design-system-rakibulism
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
Project-N-E-K-OProject-N-E-K-O
2.4k

🎨 UI 设计规范

Codifies a reusable UI design system for N.E.K.O capsule interfaces and brand-blue tokens.

Official
Basic
boparaiamritboparaiamrit
5

ui-ux-redesign

Audit frontend UI and generate a token-driven redesign plan.

Community
Advanced
alo-expalo-exp
6

design-handoff

Generate developer handoff specs with layout, tokens, component props, states, breakpoints, and accessibility notes from Figma URLs or descriptions.

Official
Advanced
alex-voloshin-devalex-voloshin-dev
2

ui-ux-design

Standardize UI/UX design systems and WCAG 2.2 AA accessibility compliance through structured auditing and documentation workflows.

Community
Advanced