web-design-guidelines

---
name: web-design-guidelines
description: "Use when reviewing UI code against Vercel's Web Interface Guidelines for accessibility, forms, focus, motion, layout, content handling, performance, and interaction details."
source: https://github.com/vercel-labs/agent-skills/tree/main/skills/web-design-guidelines
generated: 2026-05-25T02:44:06.711Z
category: tool
audience: engineers
---

## When to use

- Running a focused UI review over files or patterns before a frontend change lands
- Checking accessibility basics such as labels, semantic actions, image alt text, focus states, and live updates
- Auditing form, navigation, touch, dark mode, localization, and hydration details that often get missed in visual polish
- Finding design-code anti-patterns like transition-all, click handlers on divs, hardcoded locale formatting, or unlabeled icon buttons

## Key concepts

### Fresh guidelines fetch

The skill itself is intentionally small. Before each review it fetches the current Web Interface Guidelines document, then checks the requested files against that source.

### Semantic accessibility baseline

The guidelines prefer native semantics before ARIA: buttons for actions, links for navigation, labels for controls, heading hierarchy, alternate text, keyboard handling, and visible focus treatment.

### Interaction details

Focus-visible states, paste behavior, submit timing, drag behavior, touch action, safe areas, hover feedback, and destructive action confirmation are treated as interface requirements rather than optional polish.

### Content and localization resilience

Long text, empty states, truncation, numeric columns, copy clarity, date and number formatting, translation boundaries, and unsaved changes all appear in the checklist.

### Performance-aware UI review

The guidelines catch UI-level performance issues such as layout reads in render, large unvirtualized lists, uncontrolled animation properties, missing image dimensions, and critical asset loading mistakes.

### Terse findings format

Review output is grouped by file with file:line findings and passes. That keeps the skill useful during code review instead of returning a generic style essay.

## API reference

```
npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines
```

Install the Vercel Web Interface Guidelines review skill.

```
npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines
```

```
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
```

Fetch the fresh review rules before checking UI files.

```
Fetch fresh guidelines before each review, then apply them to the requested files.
```

```
file:line finding output
```

Report code review issues by file with terse, actionable locations.

```
src/Button.tsx:42 - icon button missing aria-label
src/Modal.tsx:12 - missing overscroll-behavior: contain
```

## Gotchas

- The installed skill is a review driver; the live rules come from the fetched guidelines document
- Use it on concrete files or patterns so findings point to code locations
- It flags many correctness details that visual screenshots cannot prove, including labels, locale formatting, and hydration safety
- A pass from this checklist does not replace product QA or browser verification for the actual flow
- Some findings need product context, especially autofocus, destructive action handling, and URL-state depth

---
Generated by SkillMake from https://github.com/vercel-labs/agent-skills/tree/main/skills/web-design-guidelines on 2026-05-25T02:44:06.711Z.
Verify against source before relying on details.

File: ~/.claude/skills/web-design-guidelines/SKILL.md