ui-aesthetics

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

1. Generation
2. Review
3. Refactor
4. Component Polish
5. State / Motion Refinement
6. 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.