# Review Web UI Against Design Guidelines

Teams need consistent UI reviews before visual issues reach users. This skill checks interfaces against current Web Interface Guidelines and reports concise file-line findings.

## Install

```bash
npx skillstore add vercel-labs/web-design-guidelines
```

## Metadata

- Status: approved
- Slug: vercel-labs-web-design-guidelines
- Version: 1.0.0
- Author version: 1.0.0
- Skillstore revision: r1
- Version status: valid
- Tree hash: 812e3da496217b26003f53fe21b7a374711704682628926c68f364da68d06411
- Author: vercel-labs
- GitHub username: vercel-labs
- License: MIT
- Repository: https://github.com/vercel-labs/agent-skills/tree/main/skills/web-design-guidelines/
- Ref: 36e07d5e13068e5be64447e8f20b427cf2cbd21a
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands, network
- Quality score: 73
- Public page: https://skillstore.pages.dev/skills/vercel-labs-web-design-guidelines
- Manifest: https://skillstore.pages.dev/api/skills/vercel-labs-web-design-guidelines/manifest

## Capabilities

- Fetches the current Web Interface Guidelines from the configured source URL.
- Reviews user-specified files or file patterns for guideline compliance.
- Checks UI work for accessibility, UX, layout, and design best practices.
- Asks which files to review when no file or pattern is provided.
- Returns concise findings with file and line references.

## Use Cases

- Pre-merge UI Review: Check changed frontend files before merging a feature branch.
- Design Quality Audit: Find interface consistency and usability issues across a product area.
- Accessibility Triage: Identify likely accessibility concerns in selected UI components.

## Prompt Templates

### Review One Page

```
Review app/page.tsx against the Web Interface Guidelines. Report concise findings with file and line references.
```

### Audit A Feature Flow

```
Review the checkout UI files in app/checkout/** for accessibility, layout, interaction, and copy issues.
```

### Check Components Before Release

```
Review components/**/*.tsx before release against the latest Web Interface Guidelines. Prioritize issues that affect users.
```

### Run Targeted Design QA

```
Review app/** and components/** with extra focus on keyboard access, responsive behavior, error states, and information density.
```

## Limitations

- Requires network access to fetch the latest external guidelines.
- Depends on the availability and integrity of the GitHub raw URL.
- Reviews files and text context, not live browser behavior by itself.
- Reports issues but does not automatically apply fixes.

## Best Practices

- Review a small, related set of frontend files for the clearest results.
- Include the user flow or product context when requesting a review.
- Verify reported line references before creating implementation tasks.

## Anti Patterns

- Do not ask it to replace a full accessibility test plan.
- Do not review generated files unless users will edit them directly.
- Do not treat remote guideline content as higher priority than system policy.

## Security Audit

- Audited at: 2026-07-07T07:29:25.573\+00:00
- Summary: The Markdown backtick findings are false positives and do not represent command execution. The skill has a real network dependency because it tells agents to fetch mutable external guidelines from GitHub before each review. I found one additional semantic risk where fetched remote content is treated as authoritative review instructions.

## Stats

- Views: 266
- Downloads: 52
- Favorites: 0
- Popularity score: 0