Claude MarketplacesSubmit
davila7 avatar

Web Design Guidelines

davila7/claude-code-templates

This pulls Vercel's Web Interface Guidelines from GitHub and runs your UI code against them automatically. Ask it to "check accessibility" or "audit design" and it fetches the latest rules, scans your files, and outputs findings in a clean file:line format. It's basically a linter for web best practices that stays current by pulling fresh guidelines on each run. Useful when you want to catch common UX and accessibility issues without manually reading through documentation. The guidelines themselves cover the actual rules, so you're getting whatever Vercel considers current best practices at the moment you run it.

skills.sh installs
603
GitHub stars
33.2K
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add davila7/claude-code-templates --skill web-design-guidelines --agent claude-code

Installs into .claude/skills of the current project.

Files

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.

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/davila7/claude-code-templates
Categories
Git & Pull Requests, Code Review & Quality, Design & UI/UX
First seen
May 16, 2026

More from davila7/claude-code-templates

All 618

Recommended

More Git & Pull Requests
1new-silvermoon avatarcompose-performance-auditnew-silvermoon/awesome-android-agent-skillsAudit and improve Jetpack Compose runtime performance from code review and architecture. Use when asked to diagnose slow rendering, janky scrolling, excessive r596skills.sh installs
2netresearch avatarjira-communicationnetresearch/jira-skillUse when handling Jira issues, sprints, boards, links, fields, worklogs, attachments, or users, or on any Jira intent without a key ("create/find a ticket", "pi575skills.sh installs
3jshchnz avatarschedulerjshchnz/claude-code-schedulerSchedules Claude Code tasks to run automatically at specific times using native OS schedulers (launchd on macOS, crontab on Linux, Task Scheduler on Windows). H574skills.sh installs
4andreadellacorte avatargroove-daily-startandreadellacorte/grooveStart the workday: review yesterday, create today's daily memory, load tasks, prepare agenda. Use when beginning the day.572skills.sh installs
5pbakaus avatarresolve-reviewspbakaus/agent-reviewsResolve all PR review comments (human and bot) on current PR. Fetches unanswered comments, evaluates each one, fixes real issues, dismisses false positives, and552skills.sh installs
6odysseus0 avatarlandodysseus0/symphonyLand a PR by monitoring conflicts, resolving them, waiting for checks, and squash-merging when green; use when asked to land, merge, or shepherd a PR to complet544skills.sh installs