SKILL.md
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
Refactoring UI Operating Model
Use this decision order before reaching for effects:
- Start with a feature, not a shell: Design the specific user task first. Navigation, chrome, and decorative structure should follow the needs of the feature, not the other way around.
- Establish hierarchy in grayscale: First make the interface clear using spacing, size, weight, contrast, and grouping. If it doesn't work in grayscale, color won't save it.
- Define systems before details: Use constrained scales for spacing, type, color, radius, and elevation. Limit choices to reduce decision fatigue and make the result feel intentional.
- Choose personality through concrete levers: Express tone through font choice, color temperature, border radius, and language — not random effects.
- Polish last: Add color, depth, decoration, motion, and finishing touches only after hierarchy and systems are already working.
CRITICAL: Hierarchy beats decoration. Systems beat one-off tweaking. Restraint beats trend-chasing.
Context Gathering Protocol
Design skills produce generic output without project context. You MUST have confirmed design context before doing any design work.