Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →Validate design systems for accessibility (WCAG), responsive design, and component consistency with design token analysis.
.claude/skills/williamzujkowski-ux-design-system-validator/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-01 | ✗→✓ | ▲ Improved | 47% | 0% |
| case-02 | ✗→✓ | ▲ Improved | 88% | 0% |
| case-03 | ✗→✓ | ▲ Improved | 78% | 0% |
| case-04 | ✗→✓ | ▲ Improved | 336% | 0% |
| case-07 | ✗→✓ | ▲ Improved | 189% | 0% |
Trigger conditions:
Use this skill when:
Do NOT use when:
Time normalization:
NOW_ET = 2025-10-25T21:30:36-04:00 (NIST/time.gov semantics)Required inputs validation:
design_system_url, component_library, or design_tokens must be providedtarget_wcag_level specified, must be "AA" or "AAA"platforms array provided, validate against supported platforms: web, iOS, Android, react-native, flutter]Source freshness checks:
Abort conditions:
Fast-path for 80% of cases: basic WCAG and token checks
color.button.primary references color.brand.blue)Output: JSON summary with violation counts and quick-win recommendations.
Decision point: If critical violations > 5 OR user requests comprehensive audit → proceed to T2.
Includes T1 + responsive design + component library audit + design token validation
Output: Comprehensive validation report with prioritized remediation plan.
Decision point: If AAA compliance requested OR multi-platform alignment needed → optionally proceed to T3 (not implemented in this T2 skill).
T3 would include: full AAA audit, automated testing integration, cross-platform design system federation, advanced token tooling recommendations.
Ambiguity thresholds:
Severity classification:
Abort/stop conditions:
Required fields (JSON schema):
json{ "validation_report": { "timestamp": "ISO-8601 timestamp", "wcag_level_tested": "AA | AAA", "overall_compliance_score": "0-100 integer", "dimensions": { "accessibility": {"score": 0-100, "violations": []}, "responsive_design": {"score": 0-100, "issues": []}, "design_tokens": {"score": 0-100, "inconsistencies": []}, "component_library": {"score": 0-100, "findings": []} } }, "wcag_violations": [ { "criterion": "1.4.3 Contrast (Minimum)", "level": "AA", "severity": "CRITICAL | HIGH | MEDIUM | LOW", "component": "Primary Button", "description": "Text contrast is 3.2:1, needs 4.5:1", "remediation": "Increase text color darkness or lighten background", "wcag_reference": "https://w3.org/WAI/WCAG22/Understanding/contrast-minimum" } ], "token_inconsistencies": [ { "token_name": "color.button.primary", "issue": "Defined as #FF5733 in tokens.json but #FF5734 in components.css", "recommendation": "Synchronize to single source of truth" } ], "remediation_plan": { "quick_wins": ["Fix button contrast", "Add focus indicators"], "prioritized_actions": [ { "priority": "CRITICAL | HIGH | MEDIUM | LOW", "category": "accessibility | responsive | tokens | components", "action": "Description of fix needed", "effort": "quick | medium | complex", "references": ["URL to WCAG/Material/HIG"] } ] } }
Types:
validation_report: Object (required)wcag_violations: Array of objects (required, may be empty)token_inconsistencies: Array of objects (required, may be empty)remediation_plan: Object (required)compliance_score: Integer 0-100 per dimension (required)Example: Basic WCAG validation (T1)
jsonINPUT: { "design_system_url": "https://example.com/design-system", "target_wcag_level": "AA", "platforms": ["web"] } OUTPUT: { "validation_report": { "timestamp": "2025-10-25T21:30:36-04:00", "wcag_level_tested": "AA", "overall_compliance_score": 72, "dimensions": { "accessibility": {"score": 65, "violations": 8} } }, "wcag_violations": [ { "criterion": "1.4.3 Contrast (Minimum)", "level": "AA", "severity": "HIGH", "component": "Secondary Button", "description": "Contrast ratio 3.8:1 (need 4.5:1)" } ], "remediation_plan": { "quick_wins": ["Darken secondary button text"] } }
Token budgets (enforced):
Safety checks:
Auditability:
Determinism:
Quality metrics:
Standards and specifications:
Design system references:
Tools and validators:
Additional reading:
| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-01 | fail→pass | 18,361 | 13,681 | -25% | 1 | 1 | 0% | 4,829 | 7,076 | +47% | 0 | 0 | — |
case-02 | fail→pass | 15,064 | 13,124 | -13% | 1 | 1 | 0% | 3,508 | 6,594 | +88% | 0 | 0 | — |
case-03 | fail→pass | 16,236 | 14,497 | -11% | 1 | 1 | 0% | 3,750 | 6,682 | +78% | 0 | 0 | — |
case-04 | fail→pass | 7,455 | 10,346 | +39% | 1 | 1 | 0% | 1,391 | 6,062 | +336% | 0 | 0 | — |
case-05 | pass→pass | 10,661 | 6,197 | -42% | 1 | 1 | 0% | 1,954 | 5,092 | +161% | 0 | 0 | — |
case-06 | pass→pass | 9,381 | 3,181 | -66% | 1 | 1 | 0% | 1,781 | 4,394 | +147% | 0 | 0 | — |
case-07 | fail→pass | 8,306 | 1,928 | -77% | 1 | 1 | 0% | 1,403 | 4,051 | +189% | 0 | 0 | — |
case-08 | pass→pass | 12,384 | 4,608 | -63% | 1 | 1 | 0% | 1,905 | 4,409 | +131% | 0 | 0 | — |
case-09 | pass→pass | 9,689 | 4,610 | -52% | 1 | 1 | 0% | 1,654 | 4,465 | +170% | 0 | 0 | — |
case-10 | pass→pass | 9,519 | 6,195 | -35% | 1 | 1 | 0% | 1,857 | 4,888 | +163% | 0 | 0 | — |
case-11 | pass→pass | 5,331 | 4,448 | -17% | 1 | 1 | 0% | 1,111 | 4,468 | +302% | 0 | 0 | — |
case-12 | fail→pass | 9,614 | 4,042 | -58% | 1 | 1 | 0% | 1,756 | 4,408 | +151% | 0 | 0 | — |
case-13 | fail→pass | 10,259 | 4,015 | -61% | 1 | 1 | 0% | 1,705 | 4,334 | +154% | 0 | 0 | — |
case-14 | pass→pass | 7,678 | 3,440 | -55% | 1 | 1 | 0% | 1,347 | 4,298 | +219% | 0 | 0 | — |
case-15 | fail→fail | 5,793 | 8,501 | +47% | 1 | 1 | 0% | 1,124 | 5,301 | +372% | 0 | 0 | — |
case-16 | pass→pass | 13,790 | 7,499 | -46% | 1 | 1 | 0% | 2,850 | 5,066 | +78% | 0 | 0 | — |
case-17 | pass→pass | 10,722 | 6,122 | -43% | 1 | 1 | 0% | 1,975 | 5,069 | +157% | 0 | 0 | — |
case-18 | fail→pass | 10,886 | 6,410 | -41% | 1 | 1 | 0% | 1,877 | 4,836 | +158% | 0 | 0 | — |
case-19 | pass→pass | 9,657 | 3,963 | -59% | 1 | 1 | 0% | 1,821 | 4,567 | +151% | 0 | 0 | — |
case-20 | fail→fail | 8,322 | 12,515 | +50% | 1 | 1 | 0% | 1,947 | 6,638 | +241% | 0 | 0 | — |
case-21 | fail→fail | 26,403 | 23,616 | -11% | 1 | 1 | 0% | 5,005 | 8,953 | +79% | 0 | 0 | — |
case-22 | fail→pass | 12,711 | 10,852 | -15% | 1 | 1 | 0% | 2,208 | 5,572 | +152% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +41 percentage points is the difference between those two pass rates over the 22 comparable cases.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.