# UI Aesthetics

> 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.

- Skill: `kasonye/ui-aesthetics-2` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kasonye/ui-aesthetics-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kasonye/ui-aesthetics-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: kasonye (https://skillmd.com/u/kasonye)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/kasonye/ui-aesthetics-2

---


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