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".
npx skills add Infrasity-Labs/dev-gtm-claude-skills --skill web-design-guidelines --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Web Interface Guidelines Review files for compliance with Web Interface Guidelines. ## How It Works 1. Fetch the latest guidelines from the source URL below 2. Read the specified files (or prompt user for files/pattern) 3. Check against all rules in the fetched guidelines 4. Output findings in the terse `file:line` format ## Guidelines Source Fetch fresh guidelines before each review: ``` https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md ``` Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions. ## Usage When a user provides a file or pattern argument: 1. Fetch guidelines from the source URL above 2. Read the specified files 3. Apply all rules from the fetched guidelines 4. Output findings using the format specified in the guidelines If no files specified, ask the user which files to review. ## Remediating Findings After identifying issues, use `ui-ux-pro-max` to get deeper remediation guidance per category: ```bash # Accessibility findings python3 skills/ui-ux-pro-max/scripts/search.py "accessibility contrast aria keyboard" --domain ux # Form UX findings python3 skills/ui-ux-pro-m
- How It Works
- Guidelines Source
- Usage
- Remediating Findings
- Related Skills
Accessibility findings python3 skills/ui-ux-pro-max/scripts/search.py "accessibility contrast aria keyboard" --domain ux Form UX findings python3 skills/ui-ux-pro-max/scripts/search.py "forms validation error feedback" --domain ux Animation / motion findings python3 skills/ui-ux-pro-max/scripts/search.py "animation reduced-motion timing" --domain ux Navigation findings python3 skills/ui-ux-pro-max/scripts/search.py "navigation breadcrumb back behavior" --domain ux Performance / layout findings python3 skills/ui-ux-pro-max/scripts/search.py "layout shift lazy loading performance" --domain ux
What does the web-design-guidelines skill do?
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".
How do I install it?
Run `npx skills add Infrasity-Labs/dev-gtm-claude-skills --skill web-design-guidelines --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From Infrasity-Labs/dev-gtm-claude-skills, a repository with 97 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.