ui-aesthetics

Original：🇺🇸 English

Translated

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.

4installs

Sourcekasonye/ui-aesthetics-skill

Added on2026-05-24

NPX Install

npx skill4agent add kasonye/ui-aesthetics-skill ui-aesthetics

SKILL.md Content

View Translation Comparison →

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.