ui-refactor
Tactical user interface design guide for fixing layouts, selecting colors/fonts, and creating professional UIs. Use when the user asks to "make this look better," needs help with CSS/styling decisions, wants to create a design system, or needs to fix a cluttered interface.
How do I install this agent skill?
npx skills add https://github.com/lovropodobnik/refactoring-ui-skill --skill ui-refactorIs this agent skill safe to install?
- Gen Agent Trust Hubpass
This skill is a collection of design guidelines and reference materials for UI refactoring. It contains only informational markdown files and poses no security risk.
- Socketpass
No alerts
- Snykpass
Risk: LOW · No issues
- Runlayerpass
6 files scanned · No issues
What does this agent skill do?
UI Refactoring and Design
This skill applies tactical, logical rules to user interface design. It prioritizes clarity, hierarchy, and systems over "artistic talent."
Core Workflow
- Feature First: Do not start by designing a "shell" (nav bars, sidebars). Start with the specific functionality (e.g., the search form, the contact card).
- Low Fidelity: Ignore color, shadows, and fonts initially. Design in grayscale using a thick marker or basic wireframes to solve layout and spacing first.
- Define Systems: Do not use arbitrary values. establishing restrictive systems for spacing, type, and color immediately.
- Refine: Apply specific tactics for hierarchy, depth, and polish.
Domain-Specific Tactics
Consult these references for specific implementation rules:
- Making elements stand out/fit in: See hierarchy.md (Size, weight, contrast, semantics).
- Whitespace and alignment: See layout-spacing.md (Grids, spacing scales, density).
- Text and fonts: See typography.md (Type scales, line-height, fonts).
- Colors and palettes: See color.md (HSL, saturation, accessible contrast).
- Images, shadows, and polish: See depth-and-polish.md (Light sources, assets, finishing touches).
Quick Heuristics
- Limit Choices: If you can't decide between two options, you have too many choices. constrain your inputs (colors, font sizes, spacing) to a pre-defined scale.
- Personality:
- Serious/Elegant: Serif fonts, sharp corners, gold/blue colors, formal language.
- Playful/Friendly: Rounded sans-serifs, large border-radius, pink/orange, casual language.
- Complexity: Do not design for edge cases first. Design the "happy path" (simple version), then iterate for complexity.
How can the creator link this skill?
Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.
<a href="https://skillzs.dev/skills/lovropodobnik/refactoring-ui-skill/ui-refactor">View ui-refactor on skillZs</a>