Can it help improve my site's Core Web Vitals?

Yes, it identifies issues like missing image dimensions that cause Cumulative Layout Shift (CLS) and flags expensive DOM operations that impact performance.

How does it handle accessibility (a11y)?

It checks for semantic elements, ensures interactive components have keyboard handlers, validates ARIA labels on icon-buttons, and ensures focus states are visible and logical.

Is this skill limited to Vercel-hosted projects?

No, while it uses Vercel's public guidelines, the rules are applicable to any modern frontend project using HTML, CSS, and JavaScript frameworks like React or Vue.

What specifically does this skill audit in my code?

It reviews files for accessibility compliance (ARIA, semantic HTML), performance (CLS, DOM reads), animation best practices, form patterns, and typography standards.

What format does the feedback come in?

The skill provides a terse, high-signal output that lists the file and line number (clickable in VS Code) followed by a brief description of the violation.

Vercel Web Interface Guidelines

Name: Vercel Web Interface Guidelines
Author: jjeremycai

byjjeremycai

0•

デザインツール

Reviews and optimizes frontend code for accessibility, performance, and UX based on Vercel's industry-leading best practices.

This skill implements a rigorous set of rules based on Vercel's Web Interface Guidelines to ensure your frontend code meets the highest standards of production-grade quality. It automates the review process by scanning components for accessibility gaps, inefficient animations, poor focus management, and performance anti-patterns. By providing high-signal, terse feedback, it helps developers quickly identify and fix issues like Cumulative Layout Shift (CLS), missing ARIA attributes, and non-semantic HTML, resulting in faster, more inclusive, and more polished web applications.

主な機能

01Performance checks for image layout shifts, virtualization, and DOM read/write batching.

02Form pattern enforcement including autocomplete, input types, and error handling.

030 GitHub stars

04Typography and content-handling rules for professional UI polish and i18n safety.

05Automated accessibility audits for ARIA labels, semantic HTML, and keyboard navigation.

06Animation validation for compositor-friendly properties and prefers-reduced-motion support.

ユースケース

01Standardizing UX behaviors across a large frontend codebase to match Vercel's design standards.

02Identifying and fixing performance bottlenecks related to layout shifts and inefficient rendering.

03Performing a pre-commit audit on React or Next.js components to ensure a11y compliance.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jjeremycai/claudekit web-interface-guidelines

For use in Claude.ai and ChatGPT

Download Skill