hatch3r-visual-refactor

What problem does it solve?

This Skill helps teams implement visual/UI updates that match the requested design while avoiding regressions in accessibility, responsiveness, and expected behavior.

Core Features & Use Cases

• Ambiguity detection and safe clarification: Identifies unresolved scope, acceptance criteria, environment, and irreversibility and prompts the user via the platform-native question protocol before proceeding.
• Design-system-driven implementation: Reads the issue inputs and uses hatch3r-design-system-detect to select a reuse/extend/create path so tokens and primitives are not invented or duplicated.
• End-to-end verification for UI quality: Produces a visual change plan, implements mockup-matching changes, verifies WCAG AA contrast and keyboard focus, checks prefers-reduced-motion, runs test/lint/typecheck, validates responsive behavior, and prepares before/after screenshots for PRs.
• Fan-out orchestration discipline: Delegates into parallel sub-agents based on task size (single-file vs multi-concern vs high-risk module boundaries) and emits sub-agent spawn rationale in outputs.

Quick Start

Use hatch3r-visual-refactor when you have an issue describing UI changes (with mockups or design references) and you want the assistant to produce a verified, PR-ready implementation that matches the design and passes accessibility and responsiveness requirements.