Back to marketplace

Web Design Guidelines

Reviews UI code against Web Interface Guidelines — UX, accessibility, and design conventions.

Design / Frontenddesignfrontend
by AgentVoltv1.0.0Published 1y ago
Free to sign up · every skill included with AgentVolt Pro

Before & after

Same prompt, same agent — the only difference is the skill.

Prompt“Audit our React component library against web interface design guidelines.”
Beforegeneric AI agent
You could look at your components and review them against best practices for web design. Things like making sure text is readable, buttons are easy to click, spacing is consistent, and colors have good contrast. You'd probably want to check that your components work well on different screen sizes. Accessibility is important too, so making sure keyboard navigation works and things have proper labels for screen readers. You might find some issues and some things that are working well. It's hard to say what specific problems you might have without looking at the code.
Afterwith Web Design Guidelines
DESIGN GUIDELINE AUDIT REPORT

SCOPE: 24 React components (form inputs, buttons, cards, navigation)
GUIDELINES USED: WCAG 2.1 AA + Material Design 3 + Apple HIG

FINDINGS BY CATEGORY

ACCESSIBILITY (17 issues found)
→ CRITICAL (5): Color-only state indication (red errors, no icon fallback)
  Component: FormInput, StatusBadge
  Fix: Add icon + text alongside color
  
→ MAJOR (8): Missing form labels (screenreader invisible)
  Components: SearchInput (3), Modal form (2), FilterDropdown (3)
  Fix: Add aria-label or associated <label> tags
  
→ MINOR (4): Insufficient touch target size (35px vs 44px minimum)
  Components: Checkbox, RadioButton (mobile breakpoint)
  Fix: Increase padding to 44x44px minimum

COLOR CONTRAST (6 issues)
→ Disabled button text: 3.8:1 ratio (AA requires 4.5:1)
→ Secondary text on blue background: 4.2:1 (need 4.5:1 for UI elements)
→ Chart legend labels on light background: 4.1:1
Fix: Adjust font weight or background color

SPACING CONSISTENCY (4 issues)
→ Padding inconsistent: some 8px, some 12px, some 16px across similar components
→ Margin bottom on form fields: varies 16-24px
Fix: Define 8px grid system; apply via shared token

TYPOGRAPHY (2 issues)
→ Line height: body text 1.4 (acceptable) but buttons 1.0 (cramped on multi-line labels)
→ Font size hierarchy: 5 sizes used, no semantic relationship
Fix: Define 4 sizes (sm, md, lg, xl) + semantic tags

RESPONSIVESS (3 issues)
→ Modal dialog: 100% width on mobile (no padding from edge)
→ Table overflow: horizontal scroll without indicator
→ Navigation: no mobile menu collapse pattern

WHAT'S WORKING WELL
→ Consistent icon sizing (20px, 24px, 32px grid)
→ Button states well-defined (hover, active, disabled)
→ Dark mode toggle covers all components

PRIORITY ROADMAP
1. Fix color contrast (1 day, high impact)
2. Add missing aria-labels (2 days, compliance)
3. Implement 8px spacing grid (3 days, technical debt)
4. Define semantic typography system (2 days, maintenance)

OVERALL SCORE: 6.5/10 (compliant but needs refinement)

About this skill

name: web-design-guidelines description: Use when Reviews UI code against Web Interface Guidelines — UX, accessibility, and design conventions.

Web Design Guidelines

Audits existing frontend code against established web interface best practices rather than relying on subjective visual review alone.

What you get

  • A UI review report against Web Interface Guidelines.

Customize your output

  • Which files/pages to review
  • which guideline categories to prioritize.

Example output

A findings list of UX/design-convention issues in the reviewed UI.

Best for

Frontend developers and designers doing UI quality reviews.

SKILL.md preview

SKILL.md
---
name: web-design-guidelines
description: Use this skill when reviewing frontend UI code against established web interface conventions for UX, accessibility, and consistency rather than relying on subjective visual review alone.
version: 1.0.0
category: Design / Frontend
author: AgentVolt
license: proprietary
tags:
  - design
  - frontend
  - standard
---

# Web Design Guidelines

Audits frontend code against established web interface best practices — UX conventions, accessibility, and interaction patterns — giving a concrete, checkable review instead of a purely subjective visual opinion.

## When to use

… (sign up to view the full skill)
Sign up to view, copy, and install the full skill