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.
