refactoring-ui-skill
🥈SilverClaude Code skill that applies Refactoring UI design principles to generate professional, well-designed user interfaces using tactical design rules instead of generic code.
3000Updated 2mo ago
Intermediate30min to implementautomation
Saves ~120 min per use
Quick InstallView Source
git clone https://github.com/LovroPodobnik/refactoring-ui-skill.gitWorks with:
Claude
Overview
About This Skill
This skill teaches Claude Code to build better user interfaces by enforcing tactical design principles from the Refactoring UI book. Instead of generating generic, poorly-designed interfaces, the skill applies rules for visual hierarchy, spacing systems, typography scales, color palettes, and elevation using defined values rather than arbitrary choices. It includes reference guides for hierarchy, layout, typography, color, and polish, plus slash commands for quick design fixes. Users can request UI components or improvements by describing what they need, and Claude Code generates code that follows professional design patterns without requiring manual design iteration.
How to Use
Copy the `.claude` folder to your project root. Use the `/ui-refactor` slash command or describe what UI you need. Claude Code applies the skill's design system automatically, enforcing spacing scales, type scales, HSL colors, and shadow levels.
Use Cases
Generate dashboard UIs with properly hierarchized stats cards and data tables
Build pricing pages with consistent typography and color contrast
Refactor existing forms to improve visual hierarchy and polish
Create component libraries with enforced spacing and shadow systems
Setup & Installation
Quick Install
No install command available. Check the GitHub repository for manual installation instructions.
Alternative Install (Git Clone)
git clone https://github.com/LovroPodobnik/refactoring-ui-skillRequirements
- Claude Code or compatible AI agent
- Works with: Claude
Quick Start Guide
1
Install the Skill
Copy the install command above and run it in your terminal.
2
Open Your AI Agent
Launch Claude Code, Cursor, or your preferred AI coding agent.
3
Try It Out
Use the prompt template or examples below to test the skill.
4
Customize
Adapt the skill to your specific use case and workflow.
Usage Examples
Prompt Template
Act as a UI design expert using Refactoring UI principles. Analyze this [COMPANY] website in the [INDUSTRY] sector and suggest improvements to make it more intuitive and user-friendly. Focus on [DATA] such as navigation, button placement, and color schemes. Provide specific recommendations with before/after comparisons.
Example Output
# UI Design Recommendations for [COMPANY] Website ## Navigation Improvements - **Current State**: The navigation menu is hidden behind a hamburger icon, making it less accessible. - **Recommendation**: Implement a persistent navigation bar at the top of the page with clear labels for each section. ## Button Placement - **Current State**: The 'Sign Up' button is placed at the bottom of the homepage, reducing visibility. - **Recommendation**: Move the 'Sign Up' button to the top right corner of the page for better visibility and accessibility. ## Color Scheme - **Current State**: The color scheme is too dark, making the text hard to read. - **Recommendation**: Use a lighter color scheme with high contrast to improve readability and user experience.
Apply to these tools
Browse all toolsRefactor
Production-grade AI agent infrastructure
Claude
AI assistant built for thoughtful, nuanced conversation
Principle
Custom software development for data, engagement, and automation
Microsoft Teams
Get more done every day with Microsoft Teams – powered by AI
Respell
Agentic AI Workflow platform
Notion
Connected workspace for docs, wikis, and projects
Compatible MCP servers
Browse all MCP servers
Find the right skills for your stack
Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan