// Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
| name | web-design-guidelines |
| description | Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices". |
| metadata | {"author":"vercel","version":"1.0.0","argument-hint":"<file-or-pattern>"} |
| license | MIT |
Review files for compliance with Web Interface Guidelines.
file:line formatFetch fresh guidelines before each review:
references/web-interface-guidelines.md
Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.
When a user provides a file or pattern argument:
If no files specified, ask the user which files to review.
This skill should be used when user asks to "fetch overleaf review comments", "address overleaf reviews", "apply overleaf comments", "review my overleaf paper", "sync overleaf feedback to local", "what comments are on my overleaf doc", or wants to act on Overleaf reviewer feedback in a local git-tracked LaTeX repo.
This skill should be used when user asks to "set up overleaf", "configure overleaf cookie", "overleaf auth failed", "overleaf 401", "overleaf session expired", "overleaf unauthorized", or needs to install or refresh their Overleaf session cookie for the overleaf-skills plugin.
This skill should be used when user asks to "deploy with Dokploy", "use Dokploy Cloud", "manage self-hosted Dokploy", "deploy Docker Compose on Dokploy", "manage Dokploy databases", "configure Dokploy domains", or "look up Dokploy CLI commands".
Guides Stripe integration decisions — API selection (Checkout Sessions vs PaymentIntents), Connect platform setup (Accounts v2, controller properties), billing/subscriptions, Treasury financial accounts, integration surfaces (Checkout, Payment Element), migrating from deprecated Stripe APIs, and security best practices (API key management, restricted keys, webhooks, OAuth). Use when building, modifying, or reviewing any Stripe integration — including accepting payments, building marketplaces, integrating Stripe, processing payments, setting up subscriptions, creating connected accounts, or implementing secure key handling.
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.
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.