# Web Design Guidelines

> Review React/Next.js UI code for compliance with web interface design guidelines. Triggers on requests like "review my UI", "check accessibility", "audit design", "review UX", "check my site against best practices", "review this component", or "audit web interface". Works with JSX, TSX, HTML, and CSS files.

- Skill: `quaylabshq/web-design-guidelines` (Agent Skill, multi-file: 18 files)
- Install (CLI): `npx skillmds@latest add quaylabshq/web-design-guidelines`
- Raw SKILL.md: https://api.skillmd.com/api/skills/quaylabshq/web-design-guidelines/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: quaylabshq (https://skillmd.com/u/quaylabshq)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/quaylabshq/web-design-guidelines

---


# Web Design Guidelines

A navigable reference graph for auditing React/Next.js UI code against web interface best practices. Based on Vercel's Web Interface Guidelines.

## Review Process

| Topic | Reference |
|-------|-----------|
| How to conduct a review | [references/review-process.md](references/review-process.md) |
| Output format for findings | [references/output-format.md](references/output-format.md) |

## Guidelines

Comprehensive rules organized by category. Start at the hub for an overview of all categories.

| Topic | Reference |
|-------|-----------|
| All categories (hub) | [references/guidelines/overview.md](references/guidelines/overview.md) |
| Accessibility & focus | [references/guidelines/accessibility.md](references/guidelines/accessibility.md) |
| Form design | [references/guidelines/forms.md](references/guidelines/forms.md) |
| Animation | [references/guidelines/animation.md](references/guidelines/animation.md) |
| Typography & content | [references/guidelines/typography-content.md](references/guidelines/typography-content.md) |
| Images & performance | [references/guidelines/images-performance.md](references/guidelines/images-performance.md) |
| Navigation & state | [references/guidelines/navigation-state.md](references/guidelines/navigation-state.md) |
| Mobile & layout | [references/guidelines/mobile-layout.md](references/guidelines/mobile-layout.md) |
| Theming & i18n | [references/guidelines/theming-i18n.md](references/guidelines/theming-i18n.md) |
| Hydration & interactivity | [references/guidelines/hydration.md](references/guidelines/hydration.md) |
| Copy & writing standards | [references/guidelines/copy-standards.md](references/guidelines/copy-standards.md) |

## Quick Reference

| Topic | Reference |
|-------|-----------|
| Anti-patterns to flag | [references/anti-patterns.md](references/anti-patterns.md) |

## Extensions

See [references/extensions.md](references/extensions.md) for planned capabilities.