# 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: `pdsuwwz/ui-aesthetics` (Agent Skill, multi-file: 17 files)
- Install (CLI): `npx skillmds@latest add pdsuwwz/ui-aesthetics`
- Raw SKILL.md: https://api.skillmd.com/api/skills/pdsuwwz/ui-aesthetics/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: pdsuwwz (https://skillmd.com/u/pdsuwwz)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/pdsuwwz/ui-aesthetics

---


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