refactor-ui
Analyze a design against all 10 Refactoring UI skills and generate a comprehensive assessment with specific fixes
Source facts
- Repository
- gnurio/refactoring-ui-plugin
- Last source activity
- April 26, 2026 at 10:28
- Detected SKILL.md language
- English
- Stars
- 445
- Forks
- 16
Install options
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Review the source files
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Showing SKILL.md
SKILL.md
Source instructions · Read-only preview- name
- refactor-ui
- description
- Analyze a design against all 10 Refactoring UI skills and generate a comprehensive assessment with specific fixes
- domain
- ui-design
- skill-type
- orchestration
- version
- 1.0.0
- prerequisites
- []
- dependencies
- ["01-establish-visual-hierarchy","02-apply-typography-scale","03-build-color-palette","04-apply-consistent-spacing","05-design-button-hierarchy","06-eliminate-visual-clutter","07-design-empty-states","08-use-shadows-appropriately","09-manage-color-contrast","10-group-related-elements"]
- input
- [{"design_description":"string"},{"design_screenshot":"optional image"},{"context":"marketing | application | content"}]
- output
- [{"comprehensive_assessment":"object"},{"violations":"array"},{"recommendations":"array"},{"priority_fixes":"array"}]
# 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
```
Read skills.json
Validate all 10 skills available
```
### Phase 2: Sequential Skill Application
Execute each skill in optimal order:
```
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:
```json
{
"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
```
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
```
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:
```
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
View on GitHub