skills.rest
marcoguillermaz
marcoguillermazCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-audit

Automated audits ensuring consistent UI implementation across your entire project.

3|Updated Mar 17, 2026
Search Tags:#ui#audit#grep#design-system#design-tokens#component-adoption
One-click install
npx skills add https://github.com/marcoguillermaz/claude-dev-kit --skill ui-audit-marcoguillermaz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-audit
Source: https://github.com/marcoguillermaz/claude-dev-kit/tree/main/packages/cli/templates/tier-m/.claude/skills/ui-audit
Command: npx skills add https://github.com/marcoguillermaz/claude-dev-kit --skill ui-audit-marcoguillermaz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI teams struggle to enforce design-token usage and ensure component adoption across pages, leading to visual drift and reduced design-system fidelity.

Core Features & Use Cases

  • Static grep-based audit against sitemap-defined pages and components to verify design-token usage and component adoption.
  • Generates a structured report highlighting violations for design-system alignment and actionable follow-ups.
  • Use Case: A design team wants to quickly validate UI pages against tokens before release.

Quick Start

Invoke the ui-audit skill and specify the target scope as needed to begin the audit.

Frequently Asked Questions about ui-audit

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

FAQPage Schema
What is a design-token audit and how does it enforce UI consistency?▼

A design-token audit checks your UI codebase for hardcoded values, verifying that pages and components use semantic design tokens to prevent visual drift and maintain design-system fidelity.

How do I audit my app's routes for design-token usage and component adoption?▼

You can audit your app's routes by running a static grep-based scan against sitemap-defined pages and components, with a fallback to app source glob patterns when the sitemap is incomplete.

Do I need a semantic-token design system to run a UI audit?▼

Yes, the UI audit requires a semantic-token design system in your codebase to accurately report findings and identify violations where components or pages bypass established tokens.

Can I check UI pages for design-system compliance before a release?▼

Yes, you can validate UI pages against design tokens before release by performing a static grep audit, which generates a structured report highlighting violations for actionable follow-ups.

What happens if my sitemap is missing routes during a design-token audit?▼

If your sitemap is incomplete, the UI audit falls back to app source glob patterns to identify components and routes, ensuring comprehensive design-token usage verification across your application.

Related Skills

Explore More Design & Creative Skills→
ZiadNagarZiadNagar

animation-systems

Define motion tokens, choreography patterns, and reduced-motion support for design systems.

Community
Advanced
ev3rlitev3rlit

normalize

Audit and normalize UI spacing, typography, colors, and component usage.

Community
Advanced
ExpeditoJExpeditoJ

aiox-ux-design-expert

Automate UX/UI design tasks from research to quality assurance.

Community
Advanced
dachentdachent
18

frontend-design-codex

Validate frontend UI components through browser rendering and screenshot analysis.

Community
Advanced