refactoring-uilisted

# Refactoring UI Use this skill when a screen looks "almost right" but feels visually weak. ## What this skill does This skill audits and improves: - Visual hierarchy (what gets attention first) - Spacing rhythm (consistent layout and grouping) - Typography clarity and contrast - Color and contrast consistency - Shadows, borders, and depth usage ## Best triggers Activate for requests like: - "my UI looks off" - "fix the design" - "visual hierarchy" - "color palette" - "polish this screen" ## Workflow 1. Identify the product goal and primary action on the screen. 2. Run a hierarchy pass: - Check headline prominence, CTA emphasis, and scan order. - Reduce visual noise competing with the primary action. 3. Run a spacing pass: - Normalize spacing scale (tight, base, section gaps). - Group related elements and separate unrelated ones. 4. Run typography pass: - Limit type styles and weights. - Improve line length and readability. 5. Run color pass: - Reserve accent colors for important actions and status. - Ensure sufficient contrast for text and controls. 6. Run depth pass: - Use shadows and borders intentionally, not everywhere. - Remove decorative effects that do not convey structure. 7. Return a prioritized fix list: - Critical (must fix before ship) - High impact polish - Optional refinements ## Output format Return: 1. A short diagnosis of why the screen feels off 2. Top 5 changes by impact 3. A concrete style recipe (spacing, t