design-system

Audit design-system naming, tokens, components, and patterns across a codebase.

46|11|Updated Mar 29, 2026
One-click install
npx skills add https://github.com/clawpod-app/awesome-openclaw-agent-packs --skill design-system-clawpod-app
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/clawpod-app/awesome-openclaw-agent-packs/tree/main/packs/design/skills/design-system
Command: npx skills add https://github.com/clawpod-app/awesome-openclaw-agent-packs --skill design-system-clawpod-app

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Audit and improve design-system consistency by auditing naming, tokens, components, and patterns across a codebase.

Core Features & Use Cases

  • Audit for naming consistency and token coverage across components
  • Document component variants, states, tokens, and accessibility notes
  • Extend the system by proposing new patterns that fit existing design rules
  • Use Case: a design team maintaining a shared library across web and mobile can keep tokens aligned and documentation up to date

Quick Start

Run the design-system audit to begin a comprehensive system health check.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I audit my design system for naming consistency and token coverage?

To audit design system consistency, run an audit check across your codebase to evaluate naming conventions and verify token coverage across all components. This identifies inconsistencies and missing tokens for immediate correction.

How do I document component variants and accessibility notes for a shared UI library?

Document component variants, states, and tokens by generating structured documentation that captures accessibility notes and design rules. This ensures your shared library documentation remains current and aligned across web and mobile platforms.

Can I use a design system audit for both web and mobile projects?

Yes, a design system audit applies to teams maintaining shared libraries across both web and mobile projects. It keeps design tokens aligned and documentation up to date across different platforms during ongoing governance.

What is the best way to extend a design system with new UI patterns?

The best way to extend a design system is to propose new patterns that fit existing design rules and naming conventions. This ensures new components integrate smoothly without breaking token alignment or established system architecture.

What does a design system health check include for component states?

A design system health check includes auditing component states, verifying token coverage, checking naming conventions, and reviewing extensible design rules. It provides a comprehensive system health check for ongoing governance and pattern alignment.