How do I install the Web Design Guidelines skill?

Run npx skillmds@latest add quaylabshq/web-design-guidelines in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Web Design Guidelines safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Web Design Guidelines?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Web Design Guidelines free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Web Design Guidelines?

quaylabshq (@quaylabshq) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Web Design Guidelines by quaylabshq

Name: Web Design Guidelines
Author: quaylabshq

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.

quaylabshq Updated Sep 22, 2026

File contents

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
Output format for findings	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
Accessibility & focus	references/guidelines/accessibility.md
Form design	references/guidelines/forms.md
Animation	references/guidelines/animation.md
Typography & content	references/guidelines/typography-content.md
Images & performance	references/guidelines/images-performance.md
Navigation & state	references/guidelines/navigation-state.md
Mobile & layout	references/guidelines/mobile-layout.md
Theming & i18n	references/guidelines/theming-i18n.md
Hydration & interactivity	references/guidelines/hydration.md
Copy & writing standards	references/guidelines/copy-standards.md

Quick Reference

Topic	Reference
Anti-patterns to flag	references/anti-patterns.md

Extensions

See references/extensions.md for planned capabilities.

---name: web-design-guidelinesdescription: 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.---# Web Design GuidelinesA 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) |## GuidelinesComprehensive 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) |## ExtensionsSee [references/extensions.md](references/extensions.md) for planned capabilities.

Frequently asked questions

Web Design Guidelines

File contents

Web Design Guidelines

Review Process

Guidelines

Quick Reference

Extensions

Related skills

Frequently asked questions

How do I install the Web Design Guidelines skill?

What does the Web Design Guidelines skill do?

Is Web Design Guidelines safe to use?

Which AI agents work with Web Design Guidelines?

Is Web Design Guidelines free to use?

Who published Web Design Guidelines?