bytedance avatar

Web Design Guidelines

This one hooks into Vercel's living web interface guidelines and runs them against your code. Instead of manually checking accessibility, responsive design, or UX patterns, you just point it at your files and it fetches the latest rules from GitHub, then outputs violations in a clean file:line format. It's meant for those "review my UI" or "check this against best practices" moments. The smart bit is that it pulls fresh guidelines every time, so you're not auditing against stale rules. Useful if you're shipping web interfaces and want a second pair of eyes that knows what Vercel considers good practice, especially around the details that are easy to miss in a PR.

skills.sh installs
2.3K
GitHub stars
85.2K
last updated
Aug 21, 2026

Install

$ npx -y skills add bytedance/deer-flow --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.

Sponsors

Details

Repository
github.com/bytedance/deer-flow
Categories
Git & Pull Requests, Code Review & Quality, Design & UI/UX
First seen
May 16, 2026

More from bytedance/deer-flow

All 21
1yoshiko-pg avatardifityoshiko-pg/difitAsk the user for a code review through difit after code changes.2.3Kskills.sh installs
2cursor avatarloop-on-cicursor/pluginsMonitor PR checks and fix failures until green. Uses gh pr checks as the source of truth for PR-attached checks.2.3Kskills.sh installs
3cursor avatarthermoscursor/pluginsLaunch both thermo-nuclear review subagents in parallel, then synthesize their findings.2.3Kskills.sh installs
4vinvcn avatarqavinvcn/mattpocock-skills-zh-cn交互式 QA 会话,用户以对话方式报告缺陷或问题,代理创建 GitHub issues。后台探索代码库以获取上下文和领域语言。适用于用户想报告缺陷、执行 QA、以对话方式提交 issues,或提到 “QA session” 时。2.1Kskills.sh installs
5k-dense-ai avatarwhat-if-oraclek-dense-ai/scientific-agent-skillsRun structured What-If scenario analysis with 4–6 branch possibility exploration (best, likely, worst, wild card, contrarian, second-order). Use when the user a2.1Kskills.sh installs
6nvidia avatarnemo-rl-session-memorynvidia/skillsManage durable working-session memory for coding agents. Use when a user asks to preserve or recover agent context across disconnects, VS Code restarts, long-ru2.1Kskills.sh installs