design-refine

What problem does it solve?

This Skill ensures UI implementations stay faithful to the established design language by analyzing the current state, confirming token alignment, and dispatching Impeccable refinement commands when mismatches or polish opportunities arise.

Core Features & Use Cases

• Design context validation: Loads .impeccable.md and design-tokens.json, warns if either is missing, and prepares the brand context so Impeccable commands have accurate guidance.
• Refinement command dispatch: Suggests high-impact Impeccable commands when no argument is given, or directly invokes commands such as colorize, typeset, arrange, and polish when specified.
• Token synchronization: After refinements run, scans modified files for new color, typography, or spacing values and prompts to update design-tokens.json, keeping implementation and tokens aligned.
• Use Case: After generating a mockup, run this Skill to detect token drift, apply the right Impeccable polish pass, and ensure no ad-hoc styles slip into the codebase.

Quick Start

Ask design-refine to analyze the current implementation and suggest the most impactful Impeccable command.