Works with the AI tools you already use
Claude Code
Cursor
Codex CLI
GitHub Copilot
Gemini CLI+20 moreClaude CodeCursorCodex CLIGitHub CopilotGemini CLI
OpenClaw
Manus
Grok+17 agentsDesign system Audit
Audit, score, and diagnose design systems and token architectures to fix UI drift and accessibility gaps.
$5.99
/moSubscription · cancel anytime
Secure checkout via Stripe
- Always the latest version
- Delivered live to your agent via MCP
- Cancel anytime, access ends at period end
Design system Audit
Example session with this skill installed
Audit our 'Phoenix' design system. We have a React component library and a Figma file using tokens. We're seeing drift in button styles and inaccessible focus states across three products.
- Read your context and instructions
- Compiled the design system audit
- Generated the UI component
I have audited the Phoenix design system based on the provided React library and Figma token structures. The primary issue is a lack of a semantic alias layer, leading developers to bypass tokens for hardcoded values.
Design System Health Audit
| Layer | Health | Strong Evidence | Main Risk | Confidence |
|---|---|---|---|---|
| Semantic Tokens | At Risk | JSON Token Export | Products bypass aliases for primitives | High |
| Components | Systemic | React Component Source | Inconsistent focus-visible implementation | High |
| Documentation | Local | Storybook MDX | Props documented but lack usage context | Medium |
| Governance | Opportunity | Git History | Ad-hoc updates without versioning | Medium |
Prioritized Findings
Finding 1: Focus State Suppression
- Evidence: 3/5 button variants override
:focuswithoutline: nonewithout a replacement. - Product Impact: Critical accessibility blocker for keyboard navigation users.
- System Cause: Focus is treated as an optional style rather than a base invariant.
- Recommended Decision: Move focus logic to the BaseButton primitive; remove all overrides.
- Migration Path: Update
@phoenix/core, run codemod to remove local CSS overrides.
Finding 2: Semantic Token Drift
- Evidence: Figma uses
brand-500while code usesprimary-main. - Product Impact: Visual inconsistency in brand-critical touchpoints.
- System Cause: Lack of a shared source-of-truth for token naming.
- Recommended Decision: Implement W3C standard naming across both platforms.
Sequence
- Stabilize (Week 1-2): Fix focus-visible logic in the base component. Sync Figma and React primary color naming.
Consolidate (Week 3-4): Audit all wrappers for CSS-in-JS overrides. Update Storybook with accessibility testing addon.
3. Adopt (Week 5+): Implement a contribution RFC process for new token requests.
Next steps
- Review the proposed
BaseButtoncontract to ensure it meets the needs of all three products. - Establish a single source of truth for tokens (e.g., a central JSON repo) to prevent future naming drift.
- Schedule a review of the contribution flow to reduce ad-hoc overrides.
design-system-audit.tsx
TSX · React component
Example file from a real run - the skill writes it into your workspace.
Subscription · always the latest version
- Secure checkout via Stripe
- Cancel anytime
- Delivered live via MCP (optional)
What you get
About this skill
Fragmented design systems slow down development and cause visual drift. This skill audits your component libraries, design tokens, and Storybook setups to identify systemic failures rather than just surface-level UI bugs. It traces the path from semantic tokens to production code to find where your architecture is leaking.
What it does
- Foundation audit evaluates semantic naming, primitive separation, and theme aliases.
- Component contract review inspects API boundaries, keyboard behavior, and responsive states.
- Drift diagnosis traces inconsistencies back to their source, whether in Figma or CSS.
- Governance assessment reviews contribution flows, release cycles, and adoption metrics.
- Prioritized roadmaps delivers a sequenced plan to stabilize, consolidate, and evolve.
How it works
- System framing defines the scope of products, platforms, and current maturity stage.
- Evidence inventory samples real product usage alongside documentation to find gaps.
- Multi-layer analysis audits foundations, components, tooling, and governance models.
- Sequencing generates a technical debt payoff plan starting with accessibility and broken contracts.
Frameworks & tools
Works with Figma libraries, Storybook, React/Vue/Web Component libraries, Styled Components, Tailwind, CSS Modules, and W3C Design Token standards.
Why this beats prompting it yourself
Generic prompts often focus on visual aesthetics. This skill treats a design system as an operating model, identifying deep-seated architectural issues like overloaded component APIs or missing semantic layers that standard audits miss.
Use cases
- Audit a legacy UI kit before migrating to a new tech stack.
- Resolve token drift between design assets and production code.
- Prepare a component library for multi-brand or multi-theme support.
- Standardize accessibility defaults across an enterprise system.
Known limitations
Does not create visual branding or logos from scratch. Requires access to representative code samples or documentation to provide high-confidence diagnoses.
How to install
Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.
- 1
Download the ZIP
Free skills download straight away. Paid skills unlock right after purchase.
- 2
Unzip into your skills folder
Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.
- 3
Ask your agent to use it
Restart the agent if it was already running. It picks the skill up automatically - no config needed.
Skills folder by agent
Click the path to copy it. Create the folder if it does not exist yet.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
Fresh listing
Recently published to Agensi
Free forever
No account required to browse
Trust & safety
Security scanned
Verified clean 2 days ago