Loading...
Loading...
Analyze a design against all 10 Refactoring UI skills and generate a comprehensive assessment with specific fixes
npx skill4agent add gnurio/refactoring-ui-plugin refactor-uiRead skills.json
Validate all 10 skills available1. 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{
"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 },
...
}
}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]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]For each skill assessment:
Query: "According to Refactoring UI, is this correct?"
Validate assessment matches expert
Report agreement rate../skills.json../examples/