Why is this design validation gate mandatory?

It serves as a critical checkpoint to prevent 'implementation rework' by ensuring all UI states and accessibility requirements are defined before coding begins.

What happens if a validation check fails?

If critical sections like wireframe completeness or UI states fail, the gate acts as a hard stop, preventing the user from proceeding to technical architecture (TRD).

Can I skip this for backend-only projects?

Yes, the skill automatically detects if a feature has no UI (e.g., pure API or infrastructure tasks) and allows you to skip to the next phase.

Does it support specific UI libraries like shadcn/ui?

Yes, it validates that components defined in your wireframes exist and match the variants available in your project's specified UI library.

Pre-Dev Design Validation

Name: Pre-Dev Design Validation
Author: luanrodrigues

byluanrodrigues

•

Herramientas de Diseño

Validates UX specifications and design artifacts to ensure UI completeness before starting technical architecture and implementation.

This skill acts as a mandatory quality gate between the design phase and technical development within the Claude Code environment. It systematically evaluates wireframes, UI states, accessibility standards, and component library alignment to prevent expensive rework during the coding phase. By enforcing high standards for specifications like loading states, error handling, and responsive layouts, it ensures that developers have a complete roadmap before any code is written, significantly reducing 10x implementation rework risks.

Características Principales

01Automated UI completeness auditing for screens, routes, and ASCII prototypes

02Responsive layout and mobile-first breakpoint behavior audits

032 GitHub stars

04Mandatory validation of critical UI states including loading, error, empty, and success

05Design system and UI component library alignment checks

06Accessibility and keyboard navigation specification verification

Casos de Uso

01Standardizing the handoff between product design and frontend engineering teams

02Verifying UX artifacts are implementation-ready before starting a Technical Requirements Document (TRD)

03Ensuring accessibility and mobile responsiveness are defined early in the development lifecycle

Características Principales

01Automated UI completeness auditing for screens, routes, and ASCII prototypes

02Responsive layout and mobile-first breakpoint behavior audits

032 GitHub stars

04Mandatory validation of critical UI states including loading, error, empty, and success

05Design system and UI component library alignment checks

06Accessibility and keyboard navigation specification verification

Casos de Uso

01Standardizing the handoff between product design and frontend engineering teams

02Verifying UX artifacts are implementation-ready before starting a Technical Requirements Document (TRD)

03Ensuring accessibility and mobile responsiveness are defined early in the development lifecycle