Vercel Design Guidelines Auditor

소개

This skill empowers Claude to perform comprehensive design reviews by fetching and applying the latest Vercel design guidelines directly to your codebase. It analyzes your project's interactions, animations, layout, and content to identify violations in areas such as keyboard accessibility, GPU acceleration, and copywriting clarity. By providing specific line references and concrete code fixes, it ensures your React and Next.js applications meet professional, high-performance standards while adhering to modern accessibility patterns like WAI-ARIA and APCA contrast requirements.

주요 기능

• Automated UI/UX audits against Vercel's living design system
• Performance optimization for layout shifts and re-renders
• Real-time guideline fetching for up-to-date compliance
• Accessibility checking for keyboard navigation and focus management
• Context-aware code suggestions with line-by-line fixes
• 1 GitHub stars

사용 사례

• Optimizing interactive components for better performance and reduced motion
• Standardizing design language and copywriting across complex frontend projects
• Pre-deployment UI/UX and accessibility reviews for Next.js sites