Refactoring Ui
by wondelaic172996495beMIT2.3K starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 4 weeks ago
Audit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions "my UI looks off" (or amateur/unprofessional), "fix the design", "Tailwind styling", "color palette", "visual hierarchy", "design system", "spacing scale", or "component styling". Also trigger when building consistent design tokens, creating dark mode themes, improving data-visualization clarity, or polishing UI details before launch. Covers grayscale-first workflow, constrained design scales, shadows, and component styling. For typeface selection, see web-typography. For usability audits, see ux-heuristics.
Add to a SourceWeft workspace
- Open the skill in your dashboard and add it to a workspace.
- Enable it for the chats that should use it.
This skill is instructions only: it ships no scripts to execute.
Add to SourceWeftYou will be asked to sign in first, then taken straight to this skill.
Ask your agent to install it
Paste this prompt into Claude Code, Codex, Cursor or another agent that can run commands — or into SourceWeft chat. The agent reads this skill's install guide, shows you its source, license and scripts, and installs it with the SourceWeft CLI once you agree.
Read https://sourceweft.com/skills/gh-wondelai-skills-refactoring-ui/install.md and install the skill it describes. Before installing, show me its source, license and whether it ships scripts, and wait for my OK. Ask me before changing anything else on my machine.Install it yourself from a terminal
For Claude Code, Codex, Cursor and other local agents. The SourceWeft CLI fetches the skill from its source repository at the commit scanned here, and verifies every file against the hashes recorded when the skill was scanned. If anything differs, nothing is written.
npx @sourceweft/cli skills install gh-wondelai-skills-refactoring-uiAdd --agent claude-code, codex, cursor or universal to choose which agent gets it (Claude Code by default).
Upstream installer — not verified by SourceWeft
The open-source skills installer fetches the same pinned commit, but does not check the files against the hashes SourceWeft recorded.
npx skills add https://github.com/wondelai/skills/tree/c172996495bed0fcd26896a9416b2093fd7073f0/refactoring-uiSource and attribution
Source:wondelai/skillsinrefactoring-uiat commitc172996
License: MIT
Content belongs to its original authors. SourceWeft indexes it from a public repository.
More from wondelai/skills
System Design
wondelai
Structured framework for designing scalable distributed systems, covering estimation, building blocks, database scaling, common designs, and operations.
Web Typography
wondelai
Guides selecting, pairing, and implementing web typefaces, covering readability, CSS, and font loading.
Top Design
wondelai
Guides creation of award-winning, immersive web experiences with dramatic typography, purposeful motion, and scroll-based design.
Ux Heuristics
wondelai
Evaluates interface usability using Nielsen's heuristics, Krug's principles, severity ratings and accessibility checks.
Traction Eos
wondelai
Guides a leadership team through implementing the Entrepreneurial Operating System (EOS) to align vision and execution.
Team Topologies
wondelai
Guides engineering org design using Team Topologies: team types, interaction modes, cognitive load and fracture planes.