---
title: Web Design Guidelines
category: product
entity_type: skill
price: $15
canonical: https://forgehouse.ai/skills/web-design-guidelines/
lang: en
hreflang_alt: https://forgehouse.ai/tr/skiller/web-design-guidelines/
last_updated: 2026-06-20
---

# Web Design Guidelines

> Review UI code for Web Interface Guidelines compliance.

A systematic UI code review engine that audits accessibility, responsive behavior, interaction patterns and visual quality against a live, community-driven web interface standard. It produces file:line findings with PASS/FAIL/WARN classifications across 15+ objective checkpoints instead of subjective 'looks good' opinions. The output is a measurable quality score that can gate merges and protect production deploys.

## Use cases
- Reviewing UI code before a feature merge
- Running an accessibility or UX audit on a component
- Verifying best-practice compliance across breakpoints
- Sanity-checking UI quality before a production deploy
- Catching touch-target, contrast and 4-state gaps
- Auto-flagging anti-patterns like div-onClick and tiny fonts

## Benefits
- Replace subjective design opinions with 15+ objective, scored checkpoints
- Gate merges on a minimum pass rate to keep UI quality consistent
- Catch responsive, contrast and state-coverage gaps before users do
- Stay current by fetching the latest guideline rules on every review

## What’s included
- Live guideline fetch so audits track the newest rules
- 15+ point checklist across accessibility, responsive, state and performance
- WCAG 2.2 AA contrast matrix with per-pair ratio evaluation
- Defensive patterns for touch targets, semantic HTML, loading and error states
- Anti-pattern auto-flag list (div-onClick, sub-14px fonts, missing focus rings)
- Structured file:line review output with PASS/WARN/FAIL counts

## Who it’s for
Front-end teams and reviewers who want an objective, repeatable UI quality gate before merging or deploying.

## How it runs
The ruleset gets fetched live before every review, so the audit never runs against a stale local copy. From there, each component faces the checklist, the anti-pattern scan and the edge cases:
1. Fetches the live Vercel Web Interface Guidelines before every review, so the audit runs against the current ruleset rather than a stale local copy
2. Walks each component through the 15+ point checklist: keyboard access, visible focus rings, contrast ratios, label-input association, the three breakpoints (375, 768, 1440), 44x44px touch targets, 14px minimum body text
3. Verifies 4-state coverage on every data-fetching component: shape-matched skeletons instead of generic spinners, errors carrying a retry action, empty states carrying a CTA, then the happy path
4. Auto-flags the known anti-patterns on sight: div-with-onClick, absolute pixel widths, sub-14px mobile text, missing alt text, color as the only error signal, below-fold images without lazy loading
5. Checks the edge cases most reviews skip: RTL logical properties, prefers-reduced-motion behavior, high contrast mode, print styles
6. Outputs a file and line report with a PASS, WARN or FAIL per rule and a concrete fix for every failure (change w-8 h-8 to w-11 h-11), not a vague opinion about quality

## FAQ
### Can I use this as a merge gate in our team's workflow?
Yes, that is the intended shape. It outputs structured file:line findings with PASS/WARN/FAIL counts across 15+ objective checkpoints, so you can set a minimum pass rate that a feature branch must hit before merging or deploying.

### How is this better than an experienced reviewer eyeballing the UI?
It replaces opinion with measurement: a WCAG 2.2 AA contrast matrix evaluated per color pair, touch-target and 4-state checks, and an auto-flag list for anti-patterns like div-onClick and sub-14px fonts. It also fetches the live guideline rules on every run, so the standard never goes stale.

### Does it fix the violations it finds?
No. It is a review engine, not a refactoring tool. You get classified findings with exact file:line locations and the defensive patterns to apply, but the remediation commit is yours to write.

## Price
$15, one-time, no subscription. VAT included.

Related guide: [Building a design system with Claude Design](https://forgehouse.ai/guides/claude-design-design-system/)