Skill Details
Runtime
Any model
Example user message
[userMessage]: > "I'm designing an e-commerce product page. Here's my spec: > > **Colors:** > - Background: #FFFFFF (white) > - Body text: #888888 (gray) > - Headings: #222222 (near black) > - Primary button background: #FF6B6B (coral red) > - Primary button text: #FFFFFF (white) > - Secondary button: transparent border #CCCCCC, text #999999 > - Sale price: #FF0000 (red), was price: #AAAAAA (strikethrough) > - Link color: #0066CC (blue), no underline by default > - Error message background: #FFEEEE, text: #FF4444 > - Success background: #EEFFEE, text: #00AA00 > > **Typography:** > - Font: Roboto > - H1: 28px, weight 700, line-height 1.2 > - H2: 22px, weight 600, line-height 1.3 > - Body: 14px, weight 400, line-height 1.4 > - Caption: 11px, weight 400, line-height 1.2 > - Price: 20px, weight 700, line-height 1.0 > - Button text: 14px, weight 600, line-height 1.0, uppercase > - Link: 14px, weight 400, line-height 1.4 > > **Interactive Elements:** > - Primary button: 140px wide, 40px tall, border-ra
Example agent response
### Phase 0 — Signal Screen
✅ **ALL CLEAR.** User provided color palette with hex codes, typography specs, interactive element dimensions, and layout description. Proceeding.
---
### Phase 1 — Asset Ingestion
```
╔══════════════════════════════════════════════════════════════════╗
║ PHASE 1 — AUDITABLE DESIGN INVENTORY ║
╠══════════════════════════════════════════════════════════════════╣
║ COLORS ║
║ Role │ Code │ Format │ Status ║
║ ───────────────┼───────────┼────────┼───────────────────────────║
║ background │ #FFFFFF │ HEX │ [ASSIGNED] ║
║ body_text │ #888888 │ HEX │ [ASSIGNED] ║
║ heading_text │ #222222 │ HEX │ [ASSIGNED] ║
║ btn_primary_bg │ #FF6B6B │ HEX │ [ASSIGNED] ║
║ btn_primary_txt│ #FFFFFF │ HEX │ [ASSIGNED] ║
║ btn_sec_border │ #CCCCCC │ HEX │ [ASSIGNED] ║
║ btn_sec_text │ #999999 │ HEX │ [ASSIGNED] ║
║ sale_price │ #FF0000 │ HEX │ [ASSIGNED] ║
║ was_price │ #AAAAAA │ HEX │ [ASSIGNED] ║
║ link_color │ #0066CC │ HEX │ [ASSIGNED] ║
║ error_bg │ #FFEEEE │ HEX │ [ASSIGNED] ║
║ error_text │ #FF4444 │ HEX │ [ASSIGNED] ║
║ success_bg │ #EEFFEE │ HEX │ [ASSIGNED] ║
║ success_text │ #00AA00 │ HEX │ [ASSIGNED] ║
╠══════════════════════════════════════════════════════════════════╣
║ TYPOGRAPHY ║
║ Role │ Font │ Size │ Wt │ Line-H │ Letter-Sp │ Status ║
║ ────────┼────────┼───────┼────┼────────┼───────────┼───────────║
║ H1 │ Roboto │ 28px │700 │ 1.2 │ [ASSUMED] │ [ASSUMED] ║
║ H2 │ Roboto │ 22px │600 │ 1.3 │ [ASSUMED] │ [ASSUMED] ║
║ Body │ Roboto │ 14px │400 │ 1.4 │ [ASSUMED] │ [ASSUMED] ║
║ Caption │ Roboto │ 11px │400 │ 1.2 │ [ASSUMED] │ [ASSUMED] ║
║ Price │ Roboto │ 20px │700 │ 1.0 │ [ASSUMED] │ [ASSUMED] ║
║ Button │ Roboto │ 14px │600 │ 1.0 │ [ASSUMED] │ [ASSUMED] ║
║ Link │ Roboto │ 14px │400 │ 1.4 │ [ASSUMED] │ [ASSUMED] ║
╠══════════════════════════════════════════════════════════════════╣
║ INTERACTIVE ELEMENTS ║
║ Element │ Declared Size │ States Declared │ Status ║
║ ──────────────┼───────────────┼────────────────────┼────────────║
║ Primary Btn │ 140×40px │ default │ [SIZE_OK] ║
║ Secondary Btn │ 100×32px │ default │ [SIZE_LOW] ║
║ Icon Btn │ 36×36px │ default │ [SIZE_LOW] ║
║ Color Swatch │ 24×24px │ default │ [SIZE_LOW] ║
║ Stepper Btn │ 28×28px │ default │ [SIZE_LOW] ║
║ Text Link │ inline │ default │ [INLINE] ║
╠══════════════════════════════════════════════════════════════════╣
║ LAYOUT / NAVIGATION ║
║ Heading Hierarchy: H1 → H2 → H3 (skip noted: H3 after H2 OK) ║
║ Skip Links Mentioned: [NO] ║
║ Tab Order Described: [NO] ║
╠══════════════════════════════════════════════════════════════════╣
║ SCREEN-READER ELEMENTS ║
║ Alt Text Coverage: 0/1 (product image alt missing) ║
║ ARIA Labels Declared: 0/5 interactive elements ║
║ Form Labels: [UNDESCRIBED] (placeholder-only) ║
╠══════════════════════════════════════════════════════════════════╣
║ PHASE 1 NOTES ║
║ • [ASSUMED] line-height and letter-spacing where not specified ║
║ • [SIZE_LOW] multiple interactive elements below 44×44px ║
║ • [NO_SKIP_LINKS] skip links not mentioned — will flag in P5 ║
║ • [ALT_MISSING] product image alt text not provided ║
║ • [PLACEHOLDER_LABEL] newsletter email uses placeholder only ║
╚══════════════════════════════════════════════════════════════════╝
```
---
### Phase 2 — Color Contrast Audit
```
╔══════════════════════════════════════════════════════════════════╗
║ PHASE 2 — COLOR CONTRAST AUDIT ║
╠══════════════════════════════════════════════════════════════════╣
║ Pair │ Size/Wt │ CR │ AA │ AAA ║
║ ──────────────────────────────┼───────────┼───────┼───────┼─────║
║ #888888 on #FFFFFF (body) │ 14px/400 │ 3.5:1 │ FAIL │ FAIL║
║ └─ Fix: #767676 │ 14px/400 │ 4.5:1 │ PASS │ FAIL║
║ └─ Fix: #595959 │ 14px/400 │ 7.0:1 │ PASS │ PASS║
║ #222222 on #FFFFFF (headings) │ 28px/700 │ 15.9:1│ PASS │ PASS║
║ #FFFFFF on #FF6B6B (pri btn) │ 14px/600 │ 3.5:1 │ FAIL │ FAIL║
║ └─ Fix: Text → #000000 │ 14px/600 │ 5.3:1 │ PASS │ PASS║
║ └─ Fix: Bg → #D63030 │ 14px/600 │ 4.5:1 │ PASS │ FAIL║
║ #999999 on #FFFFFF (sec btn) │ 14px/400 │ 2.8:1 │ FAIL │ FAIL║
║ └─ Fix: Border→#767676, │ │ │ │ ║
║ Text→#595959 │ 14px/400 │ 7.0:1 │ PASS │ PASS║
║ #FF0000 on #FFFFFF (sale) │ 20px/700 │ 5.2:1 │ PASS │ FAIL║
║ └─ Fix: #CC0000 │ 20px/700 │ 7.1:1 │ PASS │ PASS║
║ #AAAAAA on #FFFFFF (was) │ 14px/400 │ 2.3:1 │ FAIL │ FAIL║
║ └─ Fix: #808080 │ 14px/400 │ 4.6:1 │ PASS │ FAIL║
║ #0066CC on #FFFFFF (link) │ 14px/400 │ 5.1:1 │ PASS │ FAIL║
║ #FF4444 on #FFEEEE (error) │ 14px/400 │ 3.8:1 │ FAIL │ FAIL║
║ └─ Fix: #D32F2F │ 14px/400 │ 5.0:1 │ PASS │ FAIL║
║ #00AA00 on #EEFFEE (success) │ 14px/400 │ 3.1:1 │ FAIL │ FAIL║
║ └─ Fix: #008000 │ 14px/400 │ 4.6:1 │ PASS │ FAIL║
╠══════════════════════════════════════════════════════════════════╣
║ COLOR VISION DEFICIENCY RISKS ║
║ • #FF0000 on #FFFFFF — [CVD_RISK — Deuteranopia] Pure red ║
║ without underline; link color #0066CC OK by luminance ║
║ • #FF4444 on #FFEEEE — [CVD_RISK — Protanopia] Red on pink ║
║ low luminance separation; recommend darker text or icon ║
║ • #00AA00 on #EEFFEE — [CVD_RISK — Deuteranopia] Green on ║
║ light green; recommend icon + text or darker shade ║
╠══════════════════════════════════════════════════════════════════╣
║ PHASE 2 SUMMARY ║
║ Total Pairs Audited: 9 ║
║ PASS AA+AAA: 1 (#222222 on #FFFFFF) ║
║ PASS AA only: 2 (#FF0000 on #FFFFFF, #0066CC on #FFFFFF) ║
║ FAIL AA: 6 ← CRITICAL — Prioritize these ║
╚══════════════════════════════════════════════════════════════════╝
```
---
### Phase 3 — Typography Readability Check
```
╔══════════════════════════════════════════════════════════════════╗
║ PHASE 3 — TYPOGRAPHY READABILITY CHECK ║
╠══════════════════════════════════════════════════════════════════╣
║ Style │ Size │ Wt │ Line-H │ Letter-Sp │ Status │ Rule ║
║ ─────────┼───────┼────┼────────┼───────────┼─────────┼─────────║
║ H1 │ 28px │700 │ 1.2 │ 0 [ASSUMED]│ [OK] │ — ║
║ H2 │ 22px │600 │ 1.3 │ 0 [ASSUMED]│ [OK] │ — ║
║ Body │ 14px │400 │ 1.4 │ 0 [ASSUMED]│ [WARN] │ 1.4.4 ║
║ └─ Rec:│ 16px │400 │ 1.5 │ 0.01em │ [OK] │ — ║
║ Caption │ 11px │400 │ 1.2 │ 0 [ASSUMED]│ [FAIL] │ 1.4.4 ║
║ └─ Rec:│ 12px │400 │ 1.5 │ 0.01em │ [OK] │ — ║
║ Price │ 20px │700 │ 1.0 │ 0 [ASSUMED]│ [WARN] │ 1.4.12 ║
║ └─ Rec:│ 20px │700 │ 1.2 │ 0.01em │ [OK] │ — ║
║ Button │ 14px │600 │ 1.0 │ 0 [ASSUMED]│ [WARN] │ 1.4.12 ║
║ └─ Rec:│ 14px │600 │ 1.2 │ 0.05em │ [OK] │ — ║
║ Link │ 14px │400 │ 1.4 │ 0 [ASSUMED]│ [WARN] │ 1.4.4 ║
║ └─ Rec:│ 16px │400 │ 1.5 │ 0.01em │ [OK] │ — ║
╠══════════════════════════════════════════════════════════════════╣
║ FONT FAMILY ASSESSMENT ║
║ Declared: Roboto ║
║ Status: [RECOMMENDED] — Sans-serif with excellent x-height ║
║ Recommendation: Continue using Roboto; ensure 400+ for body ║
╠══════════════════════════════════════════════════════════════════╣
║ PHASE 3 SUMMARY ║
║ OK: 2 │ WARN: 4 │ FAIL: 1 │ ASSUMED: 7 ║
╚══════════════════════════════════════════════════════════════════╝
```
---
### Phase 4 — Interactive Element Assessment
```
╔══════════════════════════════════════════════════════════════════╗
║ PHASE 4 — INTERACTIVE ELEMENT ASSESSMENT ║
╠══════════════════════════════════════════════════════════════════╣
║ Element │ Declared Size │ 2.5.5 │ Focus │ State Diff ║
║ ──────────────┼───────────────┼────────┼────────┼───────────────║
║ Primary Btn │ 140×40px │ PASS │ NONE │ COLOR_ONLY ║
║ Secondary Btn │ 100×32px │ FAIL │ NONE │ COLOR_ONLY ║
║ └─ Fix: │ 100×44px │ PARTIAL│ ADD │ + border chg ║
║ └─ Alt: │ 120×44px │ PASS │ ADD │ + border chg ║
║ Icon Btn │ 36×36px │ FAIL │ NONE │ [ICON_ONLY] ║
║ └─ Fix: │ 44×44px │ PASS │ ADD │ + aria-label ║
║ Color Swatch │ 24×24px │ FAIL │ NONE │ N/A ║
║ └─ Fix: │ 44×44px │ PASS │ ADD │ + selected st║
║ Stepper Btn │ 28×28px │ FAIL │ NONE │ N/A ║
║ └─ Fix: │ 44×44px │ PASS │ ADD │ N/A ║
║ Text Link │ inline │ PARTIAL│ NONE │ COLOR_ONLY ║
║ └─ Fix: │ +4px padding │ PASS
Instant access
Commercial use
Money‑backBy purchasing this skill, you agree to our terms of service
1
Favorites
5
Views
Paste any design spec — colors, typography, component descriptions — and get a WCAG 2.1 AA/AAA compliance audit with exact contrast ratios, pass/fail verdicts, and a remediation plan with specific hex codes and size fixes. Covers: color contrast, typography readability, interactive element sizing (44×44px targets), keyboard navigation, and screen-reader compatibility. For: UX/UI designers, design agencies, regulated-industry teams who need ADA-ready documentation before developer handoff.
...more
Added 1 day ago
