web design guidelines

Name: web design guidelines
Author: vercel-labs

by vercel-labs·18d ago

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit…

Claude CodeMedium risk · 中风险open source · 开源

Editor's verdict· 编辑结论

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".
— Editorial team · 编辑团队

Install via Skills CLI

Use npx skills add to install this skill into the selected agent. Phase 0 commands are generated from source rules, not verified.

Codex

npx skills add https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md -g -a codex -y

Drop `-g` to install project-locally

✓

Best for适合什么场景

提示词优化
Agent 行为约束
上下文管理

✗

Not for不适合什么场景

Workflows that require stronger human review than this catalog entry documents.需要比当前目录条目更严格人工复核的工作流。

vs alternativesvs 其他选择

Full compare table完整对比表 →

#1Anthropic Skill Creator

Create, test, and improve skills in an eval loop.

★ 4.9·122k stars

diff · 差异Best first pick for teams getting serious about authoring reusable skills. The workflow is built around an eval loop: describe the workflow, write trigger examples and expected outputs, then iterate until the skill fires only when it should. Official Anthropic provenance means trigger-description quality and frontmatter format match what Claude actually loads. Not for one-off automation — the eval setup overhead doesn't pay off unless the skill ships to other people.

#2Nuwa Skill

Distill how a person thinks into a reusable skill.

★ 4.7·14k stars

diff · 差异Best when the skill you want to ship is really a captured way of thinking — a researcher's framing, a senior engineer's review checklist, a designer's heuristics. Walks through source material in a research-first loop, extracts mental models, then encodes them into a triggerable skill. Slow and material-hungry on purpose. Skip it for quick automation; use anthropic-skill-creator for that.

#3everything-claude-code-conventions

Development conventions and patterns for everything-claude-code. JavaScript project with conventional commits.

187k stars

diff · 差异Development conventions and patterns for everything-claude-code. JavaScript project with conventional commits.

Side-by-side compare维度对比

Key differences with same-lane alternatives

	this skill · 当前web design guidelines	Anthropic Skill Creator	Nuwa Skill	everything-claude-code-conventions
Rating · 评分	—	4.9	4.7	—
Stars · 星标	26k	122k	14k	187k
Risk · 风险	Medium risk · 中风险	Medium risk · 中风险	Medium risk · 中风险	Medium risk · 中风险
Best for · 最适合	提示词优化	New skill creation	Distill how a person thinks into a reusable skill.	Development conventions and patterns for everything-claude-code. JavaScript project with conventional commits.
Not for · 不适合	Workflows that require stronger human review than this catalog entry documents.	One-off task automation	Workflows that require stronger human review than this catalog entry documents.	Workflows that require stronger human review than this catalog entry documents.

Audit notes审计备注

last reviewed 2026-06-03 · 复查

Source源码open on GitHub · 公开✓

Author作者community · 社区!

Network网络访问network access · 需联网✓

Filesystem文件写入writes to repo · 写入仓库!

Dependencies依赖many deps · 依赖较多✓

Telemetry遥测none · 无✓