web-interface-guidelines
Checklist for reviewing UI code for compliance with comprehensive web interface, accessibility, performance, and content guidelines — based on Vercel's Web Interface Guidelines.
Best use case
web-interface-guidelines is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Checklist for reviewing UI code for compliance with comprehensive web interface, accessibility, performance, and content guidelines — based on Vercel's Web Interface Guidelines.
Teams using web-interface-guidelines should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/web-interface-guidelines/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How web-interface-guidelines Compares
| Feature / Agent | web-interface-guidelines | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Checklist for reviewing UI code for compliance with comprehensive web interface, accessibility, performance, and content guidelines — based on Vercel's Web Interface Guidelines.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Web Interface Guidelines Skill ## When to use - Reviewing UI implementations for best practices - Auditing web interfaces for accessibility compliance - Ensuring performance and content quality standards ## Interface checklist ### Layout & Structure - [ ] Semantic HTML elements used (`<nav>`, `<main>`, `<article>`, `<aside>`) - [ ] Single `<h1>` per page with proper heading hierarchy - [ ] Logical tab order matching visual layout - [ ] Skip-to-content link for keyboard users ### Accessibility - [ ] Color contrast ≥ 4.5:1 (text), ≥ 3:1 (large text, UI components) - [ ] All images have descriptive `alt` text - [ ] Form inputs have associated `<label>` elements - [ ] ARIA attributes used correctly (not overused) - [ ] Focus indicators visible on all interactive elements - [ ] Screen reader tested (VoiceOver, NVDA) ### Performance - [ ] Images optimized (WebP/AVIF, lazy loaded, responsive `srcset`) - [ ] Fonts: `font-display: swap`, subset, preloaded - [ ] Critical CSS inlined, non-critical deferred - [ ] No layout shift (CLS < 0.1) - [ ] LCP element loads within 2.5s ### Content - [ ] Clear, action-oriented copy - [ ] Error messages explain what happened and what to do - [ ] Loading states for all async operations - [ ] Empty states guide users to next action ### Interaction - [ ] Touch targets ≥ 44×44px - [ ] Hover states never hide critical information - [ ] Animations respect `prefers-reduced-motion` - [ ] Form validation with inline feedback - [ ] Destructive actions require confirmation ### Dark mode - [ ] Colors tested in both light and dark modes - [ ] Images/icons work in both modes - [ ] No hardcoded colors that break in dark mode ## Tips for AI Agents - Use this as a review checklist after implementing UI changes. - Run through each section systematically. - Flag items that fail and provide specific fixes.
Related Skills
PentAGI Orchestrator Interface
Instructions for managing the PentAGI autonomous AI agent system for complex penetration testing tasks.
web-design-guidelines
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".
youtube-growth
Act as an expert YouTube Strategy Consultant. Apply the Creator Unlock N.I.C.E.R. Framework for conducting channel audits, niche validation, and data-backed video ideation/thumbnail generation.
xyops-automate
Build and manage automation pipelines using xyOps at {{XYOPS_HOST}}:{{XYOPS_PORT}}.
xml-parse
Parse and transform XML/HTML documents using command-line tools in the shared volume at {{SHARED_VOLUME}}.
woodpecker-ci
Lightweight container-native CI/CD with Woodpecker
whisper-transcribe
Transcribe audio and video files to text using the Whisper speech-to-text API at {{WHISPER_HOST}}:{{WHISPER_PORT}}.
web-design-reviewer
Inspect web interfaces for layout, responsive, accessibility, and visual issues, then apply targeted source code fixes and re-verify results.
weaviate-search
Perform hybrid vector and keyword search using Weaviate at {{WEAVIATE_HOST}}:{{WEAVIATE_PORT}}.
watchtower-update
Auto-update Docker containers using Watchtower.
vaultwarden-manage
Self-hosted password management with Vaultwarden
vault-secrets
Secrets management with HashiCorp Vault