What does this skill do?

The Web Design Guidelines skill reviews front-end UI code against Web Interface Guidelines, covering accessibility, UX, and design best practices.

It fetches the latest guidelines fresh before each review, reads the specified files, compares them against every rule, and reports findings in a terse file:line format.

It is a review-and-audit skill: point it at UI files and it flags where the code diverges from current interface best practices.

  • Reviews UI code for interface-guideline compliance

  • Checks accessibility and UX best practices

  • Fetches the latest guidelines before each review

  • Reports issues concisely in file:line format

How it works

1

Fetch the guidelines

The agent retrieves the latest Web Interface Guidelines from the source before each review.

2

Read the files

It reads the specified UI files, or asks which files or pattern to review if none are provided.

3

Compare against rules

It compares the code against every rule in the fetched guidelines.

4

Report findings

It reports issues using the guidelines' prescribed terse file:line format.

Best use cases for this skill

  • UI review: Review front-end UI code against interface guidelines.

  • Accessibility audit: Check a component or page for accessibility issues.

  • UX review: Audit a design against UX best practices.

  • Pre-merge checks: Flag guideline violations before shipping UI changes.

Frequently asked questions

What does the Web Design Guidelines skill do?

It reviews front-end UI code for Web Interface Guidelines compliance — accessibility, UX, and design best practices — and reports findings in a terse file:line format.

When should an agent use it?

Use it to review UI, check accessibility, audit design, review UX, or check a site against best practices.

Where do the guidelines come from?

It fetches the latest Web Interface Guidelines fresh before each review, so the rules reflect the current source.

What does it output?

Findings in the guidelines' prescribed terse file:line format, pointing to where the UI code diverges from the rules.

Use from source

Ask your Buda agent to install this community skill.

Copy this prompt into your own Buda agent. It includes the source repository and install command so the agent can complete the setup in natural language.

Prompt to send to your Buda agent
Please install the "Web Design Guidelines Skill" skill into this Buda agent.

Source repository: https://github.com/vercel-labs/agent-skills
Install command: npx skills add vercel-labs/agent-skills --skill web-design-guidelines -y -a universal

Please run the install command, verify the skill is available, and tell me any setup notes or follow-up steps from the source repository.
Explore marketplace

Install workflow

  1. 1Copy the prompt
  2. 2Send it to your Buda agent
  3. 3Done