vercel-web-design-guidelines

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

3|Updated Mar 28, 2026

Search Tags:#accessibility #a11y #frontend #code-review #ui-review #vercel-guidelines

Ready to run

npx skills add https://github.com/hulusi-tunc/unicorn-skills --skill vercel-web-design-guidelines

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vercel-web-design-guidelines
Source: https://github.com/hulusi-tunc/unicorn-skills/tree/main/.claude/skills/vercel-web-design-guidelines
Command: npx skills add https://github.com/hulusi-tunc/unicorn-skills --skill vercel-web-design-guidelines

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Review UI/frontend code for compliance with the Vercel Web Interface Guidelines, focusing on accessibility, focus management, forms, animation, typography, performance, hydration, dark mode, i18n, and ship-grade UX.

Core Features & Use Cases

Assess TSX/JSX/HTML/CSS for guideline conformance against accessibility and UX quality criteria.
Identify accessibility issues, semantic HTML usage, focus states, labeling, alt text, keyboard navigation, and ARIA attributes.
Provide concise, file:line style findings suitable for code review, and guidance for remediation.

Quick Start

Ask me to review the target UI codebase against the guidelines to produce terse findings.

Frequently Asked Questions about vercel-web-design-guidelines

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

FAQPage Schema

How do I audit my React frontend code for accessibility compliance?▼

To audit frontend code for accessibility compliance, this Skill reviews TSX and JSX files to identify semantic HTML issues, missing ARIA attributes, and keyboard navigation gaps, reporting findings in a terse file:line format.

What does a Vercel web interface guidelines UI review check for?▼

A Vercel web interface guidelines UI review checks frontend code for focus management, form labeling, typography consistency, dark mode support, internationalization, and hydration performance to ensure ship-grade UX quality.

Can I use this to check HTML and CSS files for design guideline violations?▼

Yes, you can use this to check HTML and CSS files for design guideline violations, as it evaluates semantic HTML structure, consistent typography, and accessibility patterns across TSX, JSX, HTML, and CSS projects.

How do I review my UI code for dark mode and i18n verification?▼

To review UI code for dark mode and i18n verification, the Skill analyzes your frontend components to validate internationalization patterns and dark mode compliance against Vercel guidelines, outputting actionable remediation guidance.

What is the best way to find ARIA attribute and focus state issues in TSX files?▼

The best way to find ARIA attribute and focus state issues in TSX files is to run a UI audit that enforces Vercel guidelines, checking keyboard interactions and focus management to produce a file:line style findings report.