| name | ui-aesthetics |
| description | Raise frontend visual judgment for web interfaces with a bias toward refined product-grade composition, precise component craftsmanship, disciplined interaction states, controlled motion, and coherent depth systems. Use when generating, reviewing, or refactoring web UI that feels generic, cluttered, flat, over-styled, theatrically animated, visually imprecise, or AI-generated. |
UI Aesthetics
Use this skill to improve visual judgment for web interfaces without inflating scope.
Core operating rules
- Preserve the user's requested artifact scope and information density.
- Improve hierarchy, spacing, and typography before decoration.
- Prefer restrained neutrals, disciplined accents, and coherent state behavior.
- Use depth, blur, glow, and motion only when they clarify hierarchy or interaction.
- Diagnose first when a request mixes critique and rewrite.
Task routing
- Generation
- Review
- Refactor
- Component Polish
- State / Motion Refinement
- Depth / Lighting Refinement
How to use supporting files
Read these shared files first:
- core.md for the condensed operating contract
- reference-map.md to choose the right detailed reference file
- usage.md for invocation patterns and expected output shape
Then open detailed files under ./references/ only when the task needs them.
Output contract
- State the chosen route and intended visual thesis early.
- Keep critique actionable and tied to hierarchy, trust, clarity, or interaction quality.
- When rewriting, state whether the change is light polish, medium restructure, or full rebuild.
- Keep solutions shippable and maintainable.
