refactoring-ui

Audit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions "my UI looks off", "fix the design", "Tailwind styling", "color palette", or "visual hierarchy". Covers grayscale-first workflow, constrained design scales, shadows, and component styling. For typeface s

Content Preview
---
name: refactoring-ui
description: |
  Audit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions "my UI looks off", "fix the design", "Tailwind styling", "color palette", or "visual hierarchy". Covers grayscale-first workflow, constrained design scales, shadows, and component styling. For typeface selection, see web-typography. For usability audits, see ux-heuristics. Trigger with 'refactoring', 'ui'.
allowed-tools: Read, Glob, Grep
license: MIT
author: 
How to Use

Recommended: Install to project (local)

mkdir -p .claude/skills
curl -o .claude/skills/refactoring-ui.md \
  https://raw.githubusercontent.com/jeremylongshore/claude-code-plugins-plus-skills/main/plugins/design/wondelai-refactoring-ui/skills/refactoring-ui/SKILL.md

Skill is scoped to this project only. Add .claude/skills/ to your .gitignoreif you don't want to commit it.

Alternative: Clone full repo

git clone https://github.com/jeremylongshore/claude-code-plugins-plus-skills

Then reference at plugins/design/wondelai-refactoring-ui/skills/refactoring-ui/SKILL.md

Related Skills