How does this skill differ from a standard visual UI audit?

The audit identifies deep architectural flaws, such as 'leaky' token structures and inconsistent component APIs, that lead to UI drift and slow development cycles, providing a prioritized technical debt payoff plan.

Which AI agents and design platforms are compatible with this skill?

This skill is compatible with major AI agents that support code and file analysis, working across platforms like Figma, Storybook, and various CSS-in-JS or utility-first frameworks.

What is included with the purchase of the Design System Audit skill?

You receive the comprehensive auditing engine, a set of diagnostic protocols for various frameworks, and a structured template for generating multi-layer maturity roadmaps.

What level of access or documentation is required for the audit to be effective?

To get the most accurate results, you should provide the agent with access to your design token JSON files, component documentation (like Storybook), and representative production code samples.

Can this skill help prepare our system for WCAG compliance?

Yes, the skill is specifically designed to identify gaps in keyboard behavior, ARIA attributes, and semantic structures to ensure your system meets enterprise accessibility standards.

Are updates included if my tech stack or design token standards change?

Yes, as W3C Design Token standards evolve and new frontend frameworks emerge, the skill receives periodic logic updates to ensure its diagnostic criteria remain industry-leading.

Works with the AI tools you already use

+22 more

+18 agents

Design system Audit

Audit, score, and diagnose design systems and token architectures to fix UI drift and accessibility gaps.

$5.99

/mo

Subscription · cancel anytime

Secure checkout via Stripe

Always the latest version
Delivered live to your agent via MCP
Cancel anytime, access ends at period end

Security scanned

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 :focus with outline: none without 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-500 while code uses primary-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 BaseButton contract 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

Generated

Example file from a real run - the skill writes it into your workspace.

$5.99/mo

Subscription · always the latest version

Secure checkout via Stripe
Cancel anytime
Delivered live via MCP (optional)

What you get

Identify the source of visual drift between design files and production code.Diagnose accessibility failures in core component primitives.Evaluate the maturity of design-ops and contribution governance.Create a sequenced roadmap for migrating to a semantic token architecture.

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.

~30 seconds

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

Needs access to

Shopify

Gov

Digital

Carbondesignsystem

Adobe

Microsoft

Material

Apple

Atlassian

Designtokens

Listed2 days ago

Design system Audit