web-design-guidelines

name	web-design-guidelines
description	Run a broad web UI review for pages, flows, or component surfaces using audit categories such as layout hierarchy, content clarity, CTA emphasis, visual consistency, interaction states, responsiveness basics, performance signals, and accessibility basics. Use when the user asks to review a UI, audit a page, critique UX polish, check interface quality before launch, or turn vague design-feedback requests into a structured audit packet. Not for accessibility- only remediation, reusable component API design, system-level token governance, or React/runtime performance debugging. Triggers on: UI audit, design review, UX review, interface critique, polish review, landing-page review, dashboard review, usability review, visual consistency, CTA clarity.
allowed-tools	Bash Read Write Grep Glob
compatibility	Best for frontend and fullstack web work where the main task is a broad page or flow review. Route specialized remediation to neighboring frontend skills when the issue is mainly accessibility, responsive layout, design-system governance, component architecture, or React behavior.
license	MIT
metadata	{"tags":"frontend, ui-review, ux, usability, design-audit, heuristics, accessibility-basics, responsive-basics","platforms":"Claude, ChatGPT, Gemini, Codex","version":"2.0","source":"akillness/oh-my-skills"}

Web Design Guidelines

Use this skill when the question is "how good is this interface overall, what is creating friction, and what should we fix first?"

This is the repo's broad interface audit / design-review anchor. It is not just a vendor-rule fetcher and it is not a replacement for specialized neighboring skills.

Read references/review-modes-and-categories.md before handling a broad page or flow review. Read references/handoff-boundaries.md when deciding whether the work belongs here, web-accessibility, responsive-design, ui-component-patterns, design-system, or react-best-practices. Read references/ui-audit-packet-template.md before writing a final review packet.

When to use this skill

• Review a landing page, dashboard, signup flow, settings page, or marketing site for broad interface quality
• Turn "review my UI" or "audit this UX" into a structured audit instead of scattered opinions
• Judge hierarchy, clarity, spacing, consistency, component-state quality, CTA emphasis, and task friction together
• Check whether a screen or flow is ready for implementation, release, or stakeholder review
• Compare a page against broad interface heuristics and practical implementation guidelines
• Convert mixed findings into one prioritized UI audit packet with explicit handoffs

When not to use this skill

• The main task is accessibility remediation, keyboard/focus behavior, labels, semantic HTML, or manual-vs-automated WCAG verification → use web-accessibility
• The main task is viewport adaptation, overflow, breakpoint strategy, or container-aware layout behavior → use responsive-design
• The main task is reusable primitive / slot / variant API design or controlled-vs-uncontrolled component architecture → use ui-component-patterns
• The main task is system-level token governance, visual language, or component-library foundations → use design-system
• The main task is React rendering, hydration, state churn, bundle/runtime behavior, or performance debugging → use react-best-practices or performance-optimization
• The task is only to paste automated tool output with no design judgment; run the tool directly, then return here to interpret and prioritize