Guide · Agent skill
How to use the Web Interface Guidelines Review agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Web Interface Guidelines Review skill is a reusable instruction set for an AI agent that checks your user interface code against a published list of web interface rules. It is aimed at front-end developers, designers and product people who want a quick checklist-style review of a page or component. After this guide you will know what the skill does, how to install it, how to ask for a review in plain language, and what to check before trusting the results.
Web Interface Guidelines Reviewbytedance/deer-flow · MIT Download the skill Quick start
- 1Download the ZIP. Download the web-design-guidelines skill ZIP from this page and unzip it.
- 2Place the folder. Move the unzipped folder into ~/.claude/skills/ for all projects, or into a project's .claude/skills/ folder for one project.
- 3Or upload in the apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the skill instead.
- 4Confirm the agent can fetch the web. Make sure your agent has a WebFetch tool, since the skill downloads the current rules before each review.
- 5Ask for a review. Request a review in plain language and name the files, for example: review my UI in src/components/Header.tsx.
- 6Read the file:line findings. Go through each reported problem, jump to the cited file and line, and decide which fixes to make.
- 7Rerun after fixes. Run the review again on the same files to confirm the problems are resolved.
What an agent skill is and what this one does
An agent skill is a folder containing a SKILL.md file with instructions that an AI agent loads when a request matches the skill's description. This skill is named web-design-guidelines and is listed under bytedance/deer-flow in the public skills folder.
When you ask the agent to review a user interface, the skill tells it to fetch the current list of web interface rules, read the files you specify, and check them against every rule. The agent then returns a compact list of problems, each pointing to a file and line number. The skill's description says it covers accessibility, usability and general best practices for websites.
- Fetches the latest guidelines from a source URL before each review
- Reads the files you name, or asks you which files to review if none are given
- Outputs findings in a terse file:line format
- Only checks interface guidelines; it does not examine security vulnerabilities
Install the skill from the ZIP download
Download the ZIP for this skill from this page and unzip it. You can install it in one of two places depending on how you work.
For all of your projects, place the unzipped folder inside ~/.claude/skills/. To limit it to a single project, place it inside that project's .claude/skills/ folder.
In the Claude apps you can instead upload the skill under Settings → Capabilities → Skills.
- Personal install: ~/.claude/skills/
- Project install: .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills
~/.claude/skills/web-design-guidelines/SKILL.mdCheck what the skill needs before you start
The skill requires an agent with a WebFetch tool, because it must download the rules each time. It also needs read access to the files being reviewed. Without internet access the agent cannot fetch the guidelines, so the review cannot run as designed.
The skill does not run scripts. It does use the network, and it fetches its rules from a raw GitHub URL in the vercel-labs web-interface-guidelines repository.
- Agent with WebFetch tool (internet access)
- Read access to the files you want reviewed
- Runs scripts: no
- Uses network: yes
Trigger the review with natural requests
You do not need a special command. The skill's description lists phrases that should activate it, so ask in ordinary language and name the files or pattern to review. The skill's argument hint is a file or pattern.
If you do not name any files, the agent is instructed to ask you which files to review, so it is best to include them in the request.
- "Review my UI in src/components/Header.tsx"
- "Check accessibility on the signup form in app/signup/page.tsx"
- "Audit design of the pages in src/pages/*.html"
- "Review UX of the checkout flow in components/Checkout.tsx"
- "Check my site against best practices: public/index.html"
Read and act on the findings
Each finding names a file and line number, so you can jump straight to the code. The skill's own format comes from the guidelines it fetches, so the wording and structure can change when the rules change.
Treat findings as a checklist to review, not as final verdicts. Check each one against your design intent before editing code, and rerun the review after fixes.
- Start with the findings in the files you changed most recently
- Fix accessibility items first, since they affect the most users
- Rerun the review on the same files to confirm the fixes
Tips for repeatable reviews
Because the rules are fetched live before every review, the same files can produce different results over time if the published guidelines change. Keep that in mind when comparing reports from different dates.
For a team, a repeatable pass means everyone runs the skill on the same files and gets the current published rules. If you need a fixed offline rule set or strict compliance certification, this skill is not the right tool, because the rules are not bundled with it.
- Review one page or component at a time for shorter, clearer output
- Note the date of each review if you compare results later
- Do not rely on it as a security audit
What people use it for
- Checking a signup form for accessibility issues before release
- Auditing a marketing page's design and usability against common guidelines
- Running a repeatable review pass across a team's component library
- Doing a quick checklist review of a single component during development
Frequently asked questions
How do I install the web-design-guidelines skill?
Download the ZIP from this page and unzip it. Place the folder in ~/.claude/skills/ for all projects, or in a project's .claude/skills/ folder for one project. In the Claude apps you can upload it under Settings → Capabilities → Skills.
What does the web-design-guidelines skill require?
It requires an agent with a WebFetch tool for internet access and read access to the files being reviewed. It does not run scripts, but it does use the network to fetch its rules.
Is the web-design-guidelines skill free?
The skill is published under the MIT licence, as listed on this page. This page does not state pricing for the agent or apps you use to run it.
Does this skill check security vulnerabilities?
No. It only checks interface guidelines, so it does not examine vulnerabilities. Use a dedicated security tool or a professional penetration test for security work.
Why do my review results differ from last time?
The skill fetches the latest guidelines before each review, so results can change when the published rules change. It is not a fixed offline rule set.
What should I try if the review does not run?
Check that your agent has a WebFetch tool and internet access, and that the files you named are readable. If no files are given, the agent will ask which files to review, so include file names or a pattern in your request.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are a front-end developer, designer or product person who wants a quick, repeatable checklist review of accessibility, usability and best practices for a page or component. Pick something else if you need a security audit, a fixed offline rule set, or strict compliance certification, since the rules are fetched live and results may vary between runs.
Download the skill