web-design-reviewer
Inspect web interfaces for layout, responsive, accessibility, and visual issues, then apply targeted source code fixes and re-verify results.
Best use case
web-design-reviewer is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Inspect web interfaces for layout, responsive, accessibility, and visual issues, then apply targeted source code fixes and re-verify results.
Teams using web-design-reviewer should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/web-design-reviewer/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How web-design-reviewer Compares
| Feature / Agent | web-design-reviewer | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Inspect web interfaces for layout, responsive, accessibility, and visual issues, then apply targeted source code fixes and re-verify results.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Web Design Reviewer Skill ## When to use - Reviewing deployed or in-development web interfaces - Auditing for visual bugs, layout issues, and responsiveness - Checking accessibility compliance - Providing actionable fixes for identified issues ## Review workflow 1. **Visual inspection**: Open at multiple breakpoints (320px, 768px, 1024px, 1440px) 2. **Layout audit**: Check alignment, spacing consistency, overflow issues 3. **Responsive check**: Test all breakpoints, orientation changes 4. **Accessibility scan**: Contrast, focus states, screen reader compatibility 5. **Performance check**: Image sizes, font loading, CLS, LCP 6. **Fix and verify**: Apply source code fixes, re-check ## Common issues checklist ### Layout - [ ] Elements overflow their containers - [ ] Inconsistent spacing between sections - [ ] Content not centered or aligned properly - [ ] Footer not sticking to bottom on short pages - [ ] Sidebar collapses incorrectly on mobile ### Responsive - [ ] Text too small on mobile (< 16px) - [ ] Images stretch or crop incorrectly - [ ] Navigation inaccessible on mobile - [ ] Horizontal scrollbar appears - [ ] Touch targets too small (< 44px) ### Visual - [ ] Inconsistent border-radius across components - [ ] Color contrast fails WCAG AA - [ ] Font weights/sizes inconsistent - [ ] Dark mode colors incorrect - [ ] Hover states missing or inconsistent ### Accessibility - [ ] Missing alt text on images - [ ] No visible focus indicators - [ ] Form inputs without labels - [ ] Incorrect heading hierarchy - [ ] Missing skip-to-content link ## Fix format ``` ISSUE: [description] FILE: [file path] LINE: [line number] FIX: [specific code change] VERIFY: [how to confirm the fix] ``` ## Tips for AI Agents - Always test at 320px width minimum for mobile. - Use browser DevTools to inspect computed styles. - Provide specific file/line fixes, not just descriptions.
Related Skills
ui-design-system
Create and maintain scalable UI design systems with design tokens, responsive rules, accessibility standards, component libraries, and developer handoff documentation.
tailwind-design-system-v4
Build scalable, responsive, and accessible design systems with Tailwind CSS v4 — design tokens, theme configuration, reusable React UI components, and migration from v3.
responsive-design
Master modern responsive design techniques — container queries, fluid typography with clamp(), CSS Grid, Flexbox patterns, and mobile-first strategies for adaptive interfaces.
pricing-page-design
Design high-conversion SaaS pricing pages with plan structures, comparison patterns, conversion strategies, copy templates, SEO/AEO checklists, and layout types (3-card, slider, persona split, enterprise).
landing-page-design
Design high-conversion landing pages with structure, section order, layout types (classic hero, long-form, minimal, comparison), conversion strategies, SEO/AEO guidance, and copywriting templates.
interaction-design
Design and implement purposeful UI motion, microinteractions, and feedback patterns to enhance usability and user delight — hover effects, transitions, loading states, and gesture responses.
frontend-distinctive-design
Create distinctive, production-grade frontend interfaces with bold, cohesive aesthetics and refined implementation — visual identity, typography systems, color palettes, and layout composition.
canvas-design
Create original visual design philosophies and express them as meticulously crafted, museum-quality PNG or PDF art with minimal text — generative art, data visualization, and abstract compositions.
web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
youtube-growth
Act as an expert YouTube Strategy Consultant. Apply the Creator Unlock N.I.C.E.R. Framework for conducting channel audits, niche validation, and data-backed video ideation/thumbnail generation.
xyops-automate
Build and manage automation pipelines using xyOps at {{XYOPS_HOST}}:{{XYOPS_PORT}}.
xml-parse
Parse and transform XML/HTML documents using command-line tools in the shared volume at {{SHARED_VOLUME}}.