Refactor Ui

Meta-Skill: /refactor-ui

Purpose

Run a complete UI design audit against all 10 Refactoring UI principles, generating a prioritized list of specific improvements.

Workflow

Phase 1: Load Skill Registry

Copy code
Read skills.json
Validate all 10 skills available

Phase 2: Sequential Skill Application

Execute each skill in optimal order:

Copy code
1. establish-visual-hierarchy
   ↓
2. apply-typography-scale
   ↓
3. build-color-palette
   ↓
4. apply-consistent-spacing
   ↓
5. design-button-hierarchy
   ↓
6. eliminate-visual-clutter
   ↓
7. design-empty-states
   ↓
8. use-shadows-appropriately
   ↓
9. manage-color-contrast
   ↓
10. group-related-elements

Phase 3: Consolidate Findings

Aggregate results from all skills:

• Collect all FAIL assessments
• Group by severity (Critical | High | Medium | Low)
• Remove duplicates (same issue caught by multiple skills)
• Prioritize by impact

Phase 4: Generate Report

Output structured assessment:

jsonCopy code
{
  "overall_score": "PASS | NEEDS_WORK | FAIL",
  "summary": "3 critical, 5 high, 2 medium priority fixes",
  "violations": [
    {
      "skill": "visual-hierarchy",
      "severity": "critical",
      "issue": "Primary CTA buried",
      "location": "Hero section",
      "fix": "Increase button to solid brand color, reduce surrounding contrast"
    }
  ],
  "priority_fixes": [
    "1. Make primary CTA prominent with brand color",
    "2. Consolidate font sizes from 12 to 6",
    "3. Add 8-10 grey shades to palette"
  ],
  "skill_breakdown": {
    "visual-hierarchy": { "status": "FAIL", "issues": 2 },
    "typography-scale": { "status": "PASS", "issues": 0 },
    "color-palette": { "status": "FAIL", "issues": 1 },
    ...
  }
}

Execution Modes

Mode: Quick Scan

• Run all 10 skills
• Report only FAILs
• Time: ~30 seconds

Mode: Deep Analysis

• Run all 10 skills
• Report PASS with rationale
• Cross-reference between skills
• Suggest composition improvements
• Time: ~2 minutes

Mode: Fix Mode

• Run all 10 skills
• Generate specific fix instructions
• Provide before/after code examples
• Time: ~5 minutes

Usage Examples

Example 1: Marketing Page

Copy code
Input: Landing page description with hero, features, CTA

/refactor-ui
→ Overall: NEEDS_WORK
→ Critical: Visual hierarchy (CTA buried)
→ High: Typography (8 sizes, need 5)
→ Medium: Spacing (ambiguous grouping)
→ Priority fixes: [3 items]

Example 2: Dashboard

Copy code
Input: Analytics dashboard screenshot

/refactor-ui --deep
→ Overall: PASS with suggestions
→ Visual hierarchy: PASS (clear primary)
→ Color palette: FAIL (only 4 greys)
→ Shadows: FAIL (decorative on cards)
→ Suggestions: [5 items]

Integration with Validation

This meta-skill can validate against NotebookLM:

Copy code
For each skill assessment:
  Query: "According to Refactoring UI, is this correct?"
  Validate assessment matches expert
Report agreement rate

References

• ../skills.json - Skill registry
• ../examples/ - Before/after examples for all skills