web-design-guidelines
Audit UI code against Vercel's Web Interface Guidelines for design and accessibility compliance.
- Fetches the latest guidelines from a remote source before each review, ensuring rules stay current
- Accepts file paths or patterns as arguments; prompts for files if none provided
- Outputs findings in a terse
file:lineformat for quick scanning and remediation - Covers design, accessibility, and UX best practices as defined in the guidelines repository
Web Interface Guidelines
Review files for compliance with Web Interface Guidelines.
How It Works
- Fetch the latest guidelines from the source URL below
- Read the specified files (or prompt user for files/pattern)
- Check against all rules in the fetched guidelines
- Output findings in the terse
file:lineformat
Guidelines Source
Fetch fresh guidelines before each review:
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
More from vercel-labs/agent-skills
vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
392.2Kvercel-composition-patterns
React composition patterns that scale. Use when refactoring components with
170.2Kvercel-react-native-skills
React Native and Expo best practices for building performant mobile apps. Use
114.9Kdeploy-to-vercel
Deploy applications and websites to Vercel. Use when the user requests deployment actions like "deploy my app", "deploy and give me the link", "push this live", or "create a preview deployment".
48.8Kvercel-react-view-transitions
Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.
31.9Kvercel-cli-with-tokens
Deploy and manage projects on Vercel using token-based authentication. Use when working with Vercel CLI using access tokens rather than interactive login — e.g. "deploy to vercel", "set up vercel", "add environment variables to vercel".
31.4K
More in Design & UI
frontend-design
Comprehensive frontend design patterns and visual polish guidance
anthropics/skillsui-ux-pro-max
Advanced UI/UX patterns for complex interfaces and interaction design
nextlevelbuilder/ui-ux-pro-max-skillsleek-design-mobile-apps
Mobile-first design principles for iOS and Android app interfaces
sleekdotdesign/agent-skillscanvas-design
Design generation and iteration in canvas-based environments
anthropics/skillspolish
Final-pass visual refinement: tighten spacing, sharpen type, clean edges
pbakaus/impeccable