skills.rest
toobutta
toobuttaCOMMUNITY
Explore all skills by this author →
GitHub

ui-audit

Audit frontend UI code against Vercel's Web Interface Guidelines.

Updated Dec 14, 2025
Search Tags:#typography#ui#accessibility#audit#forms#internationalization#dark-mode
One-click install
npx skills add https://github.com/toobutta/maptelli --skill ui-audit-toobutta
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-audit
Source: https://github.com/toobutta/maptelli/tree/main/.claude/skills/ui-audit
Command: npx skills add https://github.com/toobutta/maptelli --skill ui-audit-toobutta

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Audit UI code against Vercel's Web Interface Guidelines to ensure accessibility, typography, forms, animation, dark mode, touch interactions, and internationalization.

Core Features & Use Cases

  • Enforces 100+ UI guidelines across accessibility, typography, forms, animation, dark mode, touch interactions, and internationalization.
  • Provides a structured review process for frontend components in frontend/components and pages in frontend/app.
  • Generates actionable feedback during PR reviews and UI reviews to improve conformance.

Quick Start

Invoke /ui-audit on the relevant frontend files or components to start a guideline-compliance audit.

Frequently Asked Questions about ui-audit

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

FAQPage Schema
How do I audit frontend components for accessibility and dark mode issues?▼

To audit frontend components for accessibility and dark mode issues, this skill checks your files against Vercel's Web Interface Guidelines, identifying violations and providing actionable recommendations per file.

What is the best way to check UI code for internationalization and typography compliance?▼

Checking UI code for internationalization and typography compliance involves applying over 100 rules from Vercel's official guidelines to your frontend files, generating a structured report of any violations.

Can I use this to review forms and touch interactions during a PR review?▼

Yes, you can use this to review forms and touch interactions during a PR review by invoking the audit on the relevant frontend app and component files to ensure they meet interface guidelines.

Does the UI audit work with files outside of the frontend/app and frontend/components directories?▼

No, the UI audit specifically applies to frontend files located under the frontend/app and frontend/components directories, targeting development, PR reviews, and UI inquiries.

Why does my UI review report show animation and touch interaction violations?▼

Your UI review report shows animation and touch interaction violations because the audit fetches the official command.md file and evaluates your code against strict interface guidelines to flag non-compliant patterns.

Do I need to install dependencies to run a UI audit against Vercel guidelines?▼

No, you do not need to install dependencies to run a UI audit against Vercel guidelines, as the skill fetches the official command.md file directly to apply its 100+ rules.

Related Skills

Explore More Design & Creative Skills→
omanjayaomanjaya

frontend-design

Provide typography, color, spacing, and motion guidelines for web UI design.

Community
Intermediate
hulusi-tunchulusi-tunc
3

vercel-web-design-guidelines

Review TSX/JSX/HTML/CSS code for Vercel Web Interface Guidelines compliance.

Community
Intermediate
pavegpaveg
2

ui-design-standards

Enforce UI design standards across frontend projects with theme tokens and component architecture.

Community
Advanced
samuelross99samuelross99
1

web-design-guidelines

Review UI code against Web Interface Guidelines and output file:line findings.

Community
Intermediate