How do I install the Web Design Guidelines skill?

Run npx skillmds@latest add anhvu1107/web-design-guidelines in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Web Design Guidelines skill do?

--- It is listed under AI & ML on SkillMD.

Is Web Design Guidelines safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Web Design Guidelines?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Web Design Guidelines free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Web Design Guidelines?

anhvu1107 (@anhvu1107) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Web Design Guidelines by anhvu1107 — Agent Skill

Name: Web Design Guidelines
Author: anhvu1107

File contents

--- name: web-design-guidelines description: ALWAYS use this when designing or reviewing website layout, structure, interaction patterns, accessibility, or production-facing web presentation.

Web Interface Guidelines

Selective Reading Rule

Start with:

references/senior-master-standard.md
references/usage-routing.md
references/quality-checklist.md

Then load only the inherited docs, scripts, assets, or examples that match the user's actual task.

Review files for compliance with Web Interface Guidelines.

How It Works

Fetch the latest guidelines from the source URL below
Read the specified files (or prompt user for files/pattern)
Check against all rules in the fetched guidelines
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:

Fetch guidelines from the source URL above
Read the specified files
Apply all rules from the fetched guidelines
Output findings using the format specified in the guidelines

If no files specified, ask the user which files to review.

Related Skills

Skill	When to Use
frontend-design	Before coding - Learn design principles (color, typography, UX psychology)
web-design-guidelines (this)	After coding - Audit for accessibility, performance, and best practices

Design Workflow

1. DESIGN   â†’ Read frontend-design principles
2. CODE     â†’ Implement the design
3. AUDIT    â†’ Run web-design-guidelines review â† YOU ARE HERE
4. FIX      â†’ Address findings from audit

---name: web-design-guidelinesdescription: ---------name: web-design-guidelinesdescription: ALWAYS use this when designing or reviewing website layout, structure, interaction patterns, accessibility, or production-facing web presentation.---# Web Interface Guidelines## Selective Reading RuleStart with:- `references/senior-master-standard.md`- `references/usage-routing.md`- `references/quality-checklist.md`Then load only the inherited docs, scripts, assets, or examples that match the user's actual task.Review files for compliance with Web Interface Guidelines.## How It Works1. Fetch the latest guidelines from the source URL below2. Read the specified files (or prompt user for files/pattern)3. Check against all rules in the fetched guidelines4. Output findings in the terse `file:line` format## Guidelines SourceFetch 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.## UsageWhen a user provides a file or pattern argument:1. Fetch guidelines from the source URL above2. Read the specified files3. Apply all rules from the fetched guidelines4. Output findings using the format specified in the guidelinesIf no files specified, ask the user which files to review.---## Related Skills| Skill | When to Use ||-------|-------------|| **[frontend-design](../frontend-design/SKILL.md)** | Before coding - Learn design principles (color, typography, UX psychology) || **web-design-guidelines** (this) | After coding - Audit for accessibility, performance, and best practices |## Design Workflow```1. DESIGN â†’ Read frontend-design principles2. CODE â†’ Implement the design3. AUDIT â†’ Run web-design-guidelines review â† YOU ARE HERE4. FIX â†’ Address findings from audit```

Frequently asked questions

Web Design Guidelines