---
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](./core.md) for the condensed operating contract
- [reference-map.md](./reference-map.md) to choose the right detailed reference file
- [usage.md](./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.