frontend-output-validator
CommunityAutomated post-frontend design checks.
Authorjorgeochipinti97
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Non-destructive review gate that runs AFTER frontend implementation to validate output against verifiable design rules. It ensures accessibility, visual stability, and design-token compliance across components and layouts by catching issues before shipping.
Core Features & Use Cases
- Reads DESIGN.md as truth to enforce budgets and targets for contrast, CLS, touch targets, and icon budgets.
- Audits frontend outputs for WCAG-compliant contrast, image/video dimensions, viewport meta, and mobile-first constraints.
- Generates a pass/fail report with exact file:line references to guide fixes after UI changes.
Quick Start
Run the validator after frontend changes to generate a report showing any design-rule violations and guidance to fix them.
Dependency Matrix
Required Modules
None requiredComponents
scriptsreferences
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: frontend-output-validator Download link: https://github.com/jorgeochipinti97/dublin-skills/archive/main.zip#frontend-output-validator Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.