Run any Skill in Manus with one click

web-design-guidelines

Stars7

Forks1

UpdatedMarch 7, 2026 at 10:34

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.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

quaylabshq

quaylabshq/skill-graph

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

File Explorer

18 files

SKILL.md

readonly

name	web-design-guidelines
description	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 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.

More from this repository

same repository

implementation-plan

quaylabshq/skill-graph

Structured implementation planning skill that enhances Claude's plan mode with mandatory questioning, research, problem decomposition, goal-driven criteria-first planning, and multi-agent verification before any implementation begins. Use when the user asks to plan a task, create an implementation plan, think through an approach, or when Claude enters plan mode. Plans are goal-driven: for code tasks, every step follows TDD (tests specified before implementation); for non-code tasks, every step has observable acceptance criteria defined before the approach. Plans are held to Google/NASA- grade quality standards and must pass independent verification by 3+ specialized sub-agents (requirements traceability, technical rigor, security & threat analysis) before presentation. Handles any domain — software engineering, design, business, research, content — by adapting its questioning depth, research strategy, and plan detail to the task's complexity and type. Always explores the codebase for code tasks; uses web rese

2026-03-207

plan-advisor

quaylabshq/skill-graph

General-purpose plan advisor that assesses any plan file, launches a sub-agent to evaluate it, and auto-answers questions during planning and implementation workflows. Answers are displayed transparently showing both Q and A. Follows senior/lead engineer quality standards across front-end, back-end, and product decisions. Manual activation only via phrases like 'use plan-advisor' or 'activate plan-advisor'. State persisted in project memory directory.

2026-03-077

chat-ui

quaylabshq/skill-graph

Chat UI building blocks for React/Next.js from ui.inference.sh. Components: ChatContainer, ChatMessages, ChatInput, MessageBubble, MessageContent, MessageReasoning, MessageStatusIndicator, Markdown. Capabilities: chat interfaces, message lists, input handling, streaming, file uploads, drag-and-drop, auto-scroll, reasoning/thinking blocks, markdown rendering with code highlighting. Use for: building custom chat UIs, messaging interfaces, AI agent frontends, conversational apps. Triggers: chat ui, chat component, message list, chat input, shadcn chat, react chat, chat interface, messaging ui, conversation ui, chat building blocks, inference.sh chat, agent chat ui, streaming chat

2026-03-077

design-md

quaylabshq/skill-graph

Analyze Stitch projects via MCP Server and synthesize semantic design systems into DESIGN.md files. Use when creating a DESIGN.md to capture an existing Stitch project's visual language — colors, typography, component styles, layout principles — in descriptive, designer-friendly prose with exact hex values. Requires access to Stitch MCP Server. Produces a single DESIGN.md that serves as the source of truth for prompting Stitch to generate new screens aligned with the existing design language.

2026-03-077

vercel-react-best-practices

quaylabshq/skill-graph

React and Next.js performance optimization guide with 58 rules across 8 priority categories. Use when writing new React components, implementing data fetching, reviewing code for performance, refactoring React/Next.js code, or optimizing bundle size and load times. Covers async waterfalls, bundle size, server-side performance, client-side data fetching, re-render optimization, rendering performance, JavaScript performance, and advanced patterns.

2026-03-077

skill-graph-creator

quaylabshq/skill-graph

Guide for creating skill graphs — interlinked, modular skill architectures that decompose knowledge into navigable reference networks. Use when users want to create a new skill graph (or upgrade an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations. Always produces graph-structured output with lean index files, interlinked references, and explicit extension points.

2026-03-077

name	web-design-guidelines
description	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 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.