skills.rest
timbrinded
timbrindedCOMMUNITY
Explore all skills by this author →
GitHub

ui-refactor

Analyze UI designs and frontend code for hierarchy, spacing, typography, and color issues.

2|Updated Feb 10, 2026
Search Tags:#design review#frontend development#ui design#user interface#visual hierarchy#design feedback
One-click install
npx skills add https://github.com/timbrinded/kiln --skill ui-refactor
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-refactor
Source: https://github.com/timbrinded/kiln/tree/main/plugins/ui-refactor/skills/ui-refactor
Command: npx skills add https://github.com/timbrinded/kiln --skill ui-refactor

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps users improve the visual design and user interface of their applications by providing structured feedback and actionable recommendations based on established design principles.

Core Features & Use Cases

  • Design Review: Analyzes screenshots, code (CSS, Tailwind), or descriptions to identify hierarchy, spacing, typography, color, depth, and polish issues.
  • Advisory Workflow: Provides guidance on design decisions when users ask for help with specific UI elements or concepts.
  • Use Case: You've built a new dashboard and want to ensure it looks professional and is easy to use. You can ask the Skill to review your design, and it will provide specific, prioritized feedback on how to improve hierarchy, spacing, and color choices.

Quick Start

Review the provided screenshot for design improvements.

Frequently Asked Questions about ui-refactor

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I get design feedback on my frontend user interface?▼

To get design feedback on your frontend user interface, provide a screenshot, CSS, or Tailwind code for analysis. The review evaluates visual hierarchy, spacing, typography, color, depth, and polish, returning actionable recommendations to improve visual appeal and user experience.

What is visual hierarchy in UI design and how do I improve it?▼

Visual hierarchy in UI design organizes elements to guide user attention effectively. You can improve it by applying constrained choices and progressive refinement to spacing, typography, and color depth. Analyzing your interface structure yields prioritized, actionable feedback for visual polish.

Can I review a dashboard UI for spacing and typography issues?▼

Yes, you can review a dashboard UI for spacing and typography issues. Submit the design screenshot or frontend code for evaluation. The analysis identifies specific problems with visual hierarchy, color choices, and overall polish, providing actionable guidance to ensure a professional result.

How do I refactor CSS or Tailwind code to improve user experience?▼

To refactor CSS or Tailwind code for better user experience, submit the code for design analysis. The review assesses hierarchy, spacing, color, and depth, providing specific, prioritized feedback and actionable recommendations to improve the interface's visual appeal and usability.

What's the best way to evaluate color and depth in a frontend design?▼

The best way to evaluate color and depth in a frontend design is through a structured review based on core design principles. By analyzing your screenshot or code, the review identifies issues with color choices and depth, returning actionable guidance to enhance visual polish.

Why does my user interface look unprofessional despite correct functionality?▼

Your user interface looks unprofessional due to issues with visual hierarchy, spacing, typography, or color depth. A structured design review analyzes your frontend code or screenshots to identify these specific polish issues and provides prioritized, actionable recommendations for improvement.

Related Skills

Explore More Design & Creative Skills→
kaikunnnnkaikunnnn

design

Map Figma design nodes to Tailwind CSS tokens and component structures.

Community
Advanced
ArnavPuriArnavPuri
3

ui-design

Generate UI components and styles using atomic design and Tailwind CSS.

Community
Advanced
SpaceZephyrSpaceZephyr
333

frontend-design

Create responsive frontend interfaces from rough UI requirements using HTML, CSS, and JavaScript.

Community
Advanced
distribucionesfayosmoreno-sysdistribucionesfayosmoreno-sys

ui-visual-validator

Validate UI modifications for visual regression, compliance, and accessibility.

Community
Advanced