refactoring-ui-skill

🥈Silver

@LovroPodobnik

Claude Code skill for building better UIs using Refactoring UI principles

800Updated Today

Intermediate30min to implementautomation

Saves ~120 min per use

Quick InstallView Source

git clone https://github.com/LovroPodobnik/refactoring-ui-skill.git

Works with:

Claude

Overview

About This Skill

Claude Code skill for building better UIs using Refactoring UI principles

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-skill

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

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.