Apply Refactoring UI principles to improve visual hierarchy in UI designs.
npx skills add https://github.com/booklib-ai/skills --skill refactoring-ui-booklib-ai
Please help me install this Agent Skill. Skill: refactoring-ui Source: https://github.com/booklib-ai/skills/tree/main/skills/refactoring-ui Command: npx skills add https://github.com/booklib-ai/skills --skill refactoring-ui-booklib-ai
Refactoring UI provides a structured approach to turn messy, hard-to-scan interfaces into clear, visually hierarchical designs by leveraging proven techniques for typography, color, spacing, and depth.
Refactor a given UI card to establish hierarchy using size, weight, and color, and apply depth with shadows.
High-intent search queries and answers about installing and using this skill.
Improve visual hierarchy by applying the three levers of size, weight, and color across UI components. This structured approach transforms hard-to-scan interfaces into clear designs using defined typography scales and spacing systems.
Establish consistent design tokens by implementing a defined type scale, spacing scale, shade-based color palette, and shadow elevation system. These tokens ensure visual consistency across product surfaces like pricing cards and dashboards.
Refactor a UI card by applying hierarchy through size, weight, and color adjustments, then add depth using a shadow elevation system. This process leverages Refactoring UI principles to clarify visual structure.
Yes, you can apply these principles to component libraries by generating global tokens and reference patterns. This supports design-system consistency by providing clear review guidelines for typography, color, spacing, and depth.
No, visual hierarchy relies on three levers: size, weight, and color. Combining these techniques with a shade-based color palette and shadow depth creates scannable interfaces more effectively than scaling font size alone.
You need a shadow elevation system when adding depth to UI components like pricing cards and forms. It defines consistent shadow tokens that distinguish visual layers and improve the overall scannability of the interface.
omanjayaProvide typography, color, spacing, and motion guidelines for web UI design.
v1nizxExtract color palettes, typography scales, and component styling patterns from frontend source code.
dennislee928Generate accessible 11-shade color palettes with WCAG contrast checks.
jacob-balslevGuide palette, typography, spacing, density, and grouping choices for visual hierarchy audits.
