Does it provide performance optimization tips?

Absolutely. It flags issues like missing image dimensions that cause layout shifts and recommends efficient animation properties like transform and opacity.

Can it help with web accessibility (A11y)?

Yes, it identifies missing ARIA labels, improper semantic tags, and ensures interactive elements are keyboard-accessible.

What standards does this skill use for reviews?

The skill is based on the Vercel Web Interface Guidelines, which emphasize accessibility, performance, and clean interactive patterns.

How do I use this skill in Claude Code?

Simply trigger it with commands like 'Review my UI code' or 'Check design guidelines' followed by the file names you want to audit.

Web Design Reviewer

Name: Web Design Reviewer
Author: eburairu

byeburairu

•

Design Tools

Reviews UI code for compliance with Vercel Web Interface Guidelines and industry-best practices for accessibility, performance, and UX.

The Web Design Reviewer skill enables Claude to perform rigorous audits of your frontend code based on the Vercel Web Interface Guidelines. It meticulously checks for accessibility gaps, performance bottlenecks, animation anti-patterns, and typography inconsistencies. By analyzing your components against professional standards for touch interactions, focus states, and semantic HTML, this skill ensures your web applications are inclusive, high-performing, and polished to production-grade quality.

Key Features

01Typography and copywriting validation for professional content standards

021 GitHub stars

03Performance optimization checks for Core Web Vitals and CLS prevention

04Form UX auditing including focus management and autocomplete configuration

05Animation and interaction review for reduced motion and touch safety

06Automated accessibility (A11y) audits for ARIA labels and semantic HTML

Use Cases

01Performing a final UI/UX audit before merging frontend pull requests

02Ensuring accessibility compliance for interactive components and forms

03Optimizing web performance by identifying layout shifts and rendering issues

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add eburairu/squat-tracker web-design-guidelines

For use in Claude.ai and ChatGPT

Download Skill