skills.rest
eugener
eugenerCOMMUNITY
Explore all skills by this author →
Website𝕏@eryzhikovGitHub

refactoring-ui

Audit frontend UI code against Refactoring UI design principles.

3|Updated Feb 7, 2026
Search Tags:#code review#refactoring#design principles#frontend development#ui design#ux
One-click install
npx skills add https://github.com/eugener/cc-marketplace --skill refactoring-ui-eugener
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: refactoring-ui
Source: https://github.com/eugener/cc-marketplace/tree/main/plugins/eugenes-tools/skills/refactoring-ui
Command: npx skills add https://github.com/eugener/cc-marketplace --skill refactoring-ui-eugener

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill helps developers improve the visual design and user experience of their frontend code by auditing it against established principles from "Refactoring UI".

Core Features & Use Cases

  • Comprehensive UI Audit: Analyzes hierarchy, spacing, typography, color, depth, and polish.
  • Actionable Suggestions: Provides specific, code-level refactoring recommendations.
  • Framework Agnostic: Works with raw CSS, SCSS, and popular frameworks like Tailwind CSS.
  • Use Case: You've built a new dashboard but it feels a bit "off". Run this Skill to get concrete advice on how to improve spacing, button hierarchy, and color contrast to make it look more professional.

Quick Start

Run the refactoring-ui skill on the current project's frontend files.

Frequently Asked Questions about refactoring-ui

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

FAQPage Schema
How do I audit frontend code for UI design principles like visual hierarchy and spacing?▼

To audit frontend code for UI design principles, this skill analyzes hierarchy, spacing, typography, color, depth, and polish, then provides specific code-level refactoring suggestions to fix inconsistencies.

Does this UI refactoring tool work with Tailwind CSS and framework-specific files like TSX or Vue?▼

Yes, this UI refactoring tool works with Tailwind CSS and framework-specific files including TSX, JSX, Vue, Svelte, Astro, HTML, CSS, and SCSS, providing tailored analysis for each.

How do I fix poor typography scales and weak visual hierarchy in my web application?▼

Fix poor typography scales and weak visual hierarchy by running an audit against Refactoring UI principles, which identifies specific design flaws and suggests actionable code-level corrections.

What are common UI design issues when building a frontend dashboard that looks unprofessional?▼

Common UI design issues in frontend dashboards include inconsistent spacing, poor typography scales, and weak visual hierarchy, which this skill identifies and suggests fixes for to achieve a professional look.

Can I review raw CSS and SCSS files for visual design polish without using a JavaScript framework?▼

Yes, you can review raw CSS and SCSS files for visual design polish without a JavaScript framework, as this skill operates framework-agnostically to evaluate depth, color, and spacing.

Related Skills

Explore More Design & Creative Skills→
VKirillVKirill
15

frontend-craft

Enforces WCAG AA accessibility and BEM naming in frontend UI markup and stylesheets.

Community
Intermediate
rogvidrogvid

king-mode

Provides UI/UX architectural guidance for designing scalable frontend systems and crafting sprint-ready plans.

Community
Advanced
ChildoftheVibeChildoftheVibe

minimalist-ui

Generate CSS tokens and layout rules for minimalist bento-grid UI systems.

Community
Advanced
eboodyeboody

ui-expert

Audit UI designs for visual hierarchy, spacing, typography, and design-system consistency.

Community
Advanced