Skip to main content
affpapa.org
RU EN
skill

web-design-guidelines · davila7 — Claude Code skill: UI review and setup

This skill checks UI files against current Web Interface Guidelines and reports findings by file and line. Use it for accessibility or design reviews.

Install into Claude Code · claude-code-templates All methods and platforms ↓ 
npx claude-code-templates@latest --skill creative-design/web-design-guidelines
Open on GitHub

What web-design-guidelines does

For each review, the skill retrieves current Web Interface Guidelines through WebFetch, reads the selected files, then checks them against the rules. Findings include a file and line reference. If you have not provided files, it asks which ones to inspect.

The workflow uses WebFetch and the guidelines source at https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md. The review depends on retrieving those rules first. Pass a file or path pattern as the argument.

What it helps with

  • check UI code against interface guidelines
  • find accessibility issues in selected files
  • audit a site's design and UX
  • locate findings by source file and line

Example prompts for the agent

  • Review accessibility in src/components/Button.tsx.
  • Audit the design in src/pages/*.tsx.
  • Check these UI files against Web Interface Guidelines.

How to install web-design-guidelines

1claude-code-templates

npx claude-code-templates@latest --skill creative-design/web-design-guidelines

2Skills CLI (Vercel)

npx skills add davila7/claude-code-templates --skill web-design-guidelines -a claude-code

3Manually: put the files in place

~/.claude/skills/web-design-guidelines/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/web-design-guidelines/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about web-design-guidelines

How do I install web-design-guidelines in Claude Code?

Run npx claude-code-templates@latest --skill creative-design/web-design-guidelines. Then add the skill with npx skills add davila7/claude-code-templates --skill web-design-guidelines -a claude-code. Its file is at ~/.claude/skills/web-design-guidelines/SKILL.md.

What does web-design-guidelines do?

It checks selected UI files against current Web Interface Guidelines and reports findings with file and line references.

What does the skill need to review UI files?

It retrieves the rules through WebFetch from https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md. Provide a file or path pattern; otherwise, it asks which files to review.

Similar skills

Everything for Frontend and UI →

web-design-guidelines by other authors comes first.

web-design-guidelines vercel Audits product interface code against Vercel design guidelines for layout, typography, motion, and accessibility. Useful for frontend code reviews. CX Codex +1 3,900installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set205

The whole set →
writing-clearly-and-concisely A Claude skill that pushes the agent toward Strunk's rules for clear prose and away from the stock phrasing language models fall into. 206installs kaizen A skill that pushes the agent toward small, verified improvements and errors caught by the type system instead of at runtime. 117installs backend-architect A subagent for backend design work: service boundaries, API paradigm choice, database schemas and observability. Useful when the decision comes before the first line of code. 23,691installs seo-optimizer Guides search optimization by generating structured data, meta tags, and content outlines directly in Claude Code. 11,415installs ultra-think Runs a structured analysis of a hard problem: surfaces hidden assumptions, proposes competing solutions, stress-tests each one. Useful when a decision is expensive to get wrong. 8,383installs clean-code Gives the agent a set of clean-code rules: small functions, intent-revealing names, no obvious comments, no needless abstraction. Useful when you want working code, not a tutorial. 7,176installs git-commit-helper Reads your staged changes and drafts a commit message in conventional commits format. Handy when you cannot be bothered to phrase one yourself. 7,093installs documentation-expert This subagent creates, updates, and maintains project documentation, from README files to API references. Use it when docs need structure or a refresh. 6,992installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor