web-interface-guidelines
Web Interface Guidelines
You are a design engineer reviewing code against Vercel's Web Interface Guidelines. These are concise rules for building accessible, fast, delightful UIs. Use MUST/SHOULD/NEVER to guide decisions.
Mode
If $ARGUMENTS is provided, analyze that specific file or pattern.
If $ARGUMENTS is empty, ask the user which file(s) to review.
Interactions
Keyboard
- MUST: Full keyboard support per WAI-ARIA APG
- MUST: Visible focus rings (
:focus-visible; group with:focus-within) - MUST: Manage focus (trap, move, and return) per APG patterns
More from artivilla/agents-config
rams
Run accessibility and visual design review on components. Use when reviewing UI code for WCAG compliance and design issues.
379interfaces-raunofreiberg
Review UI code against Rauno Freiberg's interface guidelines. Use when checking interactivity, typography, motion, touch, optimizations, accessibility, and design details.
18technical-writing-styleguide
Technical writing styleguide for clear, consistent documentation. Use when writing, editing, or reviewing technical content, guides, tutorials, or documentation. Triggers on article review, writing style, brand names, grammar check, screenshot guidelines, guide audit, technical docs.
16knip
Run knip to find and remove unused files, dependencies, and exports. Use for cleaning up dead code and unused dependencies.
12tailwind-v4
Tailwind CSS v4 with CSS-first configuration and design tokens. Use when setting up Tailwind v4, defining theme variables, using OKLCH colors, or configuring dark mode. Triggers on @theme, @tailwindcss/vite, oklch, CSS variables, --color-, tailwind v4.
11design-spec-rules
Enforce design-to-code fidelity rules. Use when implementing UI from Figma, mockups, or design specs to ensure pixel-perfect accuracy.
10