skills.rest
hulusi-tunc
hulusi-tuncCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/hulusi-tunc/unicorn-skills --skill vercel-web-design-guidelines
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
naporin0624naporin0624
3

seo-a11y-analyzer

Analyze HTML, JSX, and TSX files for SEO and accessibility issues.

Community
Advanced
Srain021Srain021

kestrel-mcp-role-code-reviewer

Identify code-quality issues with file:line pointers and severity labels.

Community
Advanced
kennedym-dskennedym-ds
14

accessibility-wcag

Evaluate and implement WCAG 2.1 AA accessibility patterns for frontend web development.

Community
Advanced
wredziowredzio

accessibility

Identify and remediate WCAG 2.1 AA accessibility issues in web pages.

Community
Advanced