ui-aesthetics

Category: Development & Coding | Uploader: kasonye | Downloads: 0 | Version: v1.0（Latest）

Improve frontend UI/UX judgment for web interfaces by raising aesthetic quality across generation, review, and refactor tasks. Use when an AI coding agent needs to design a new page, section, or component; critique an existing frontend UI from a visual and UX perspective; or rewrite a page to improve hierarchy, composition, interaction quality, and responsiveness while avoiding generic AI-looking design.

Changelog: Source: GitHub https://github.com/kasonye/ui-aesthetics-skill

Directory Structure

Current level: tree/main/.claude/skills/ui-aesthetics/

📁 references/
- 📄 anti-patterns.md 5.7 KB
- 📄 design-principles.md 4.7 KB
- 📄 distilled-examples.md 16.6 KB
- 📄 module-patterns.md 3.4 KB
- 📄 react-next-css-anti-patterns.md 3.5 KB
- 📄 react-next-css-patterns.md 4.5 KB
- 📄 react-next-css-review-checklist.md 3.1 KB
- 📄 react-next-css-rewrite-playbook.md 2.9 KB
- 📄 react-next-tailwind-anti-patterns.md 6.0 KB
- 📄 react-next-tailwind-patterns.md 4.9 KB
- 📄 react-next-tailwind-review-checklist.md 3.4 KB
- 📄 react-next-tailwind-rewrite-playbook.md 2.9 KB
- 📄 review-rubric.md 3.0 KB
- 📄 rewrite-playbook.md 1.5 KB
- 📄 scene-patterns.md 3.5 KB
- 📄 vue-nuxt-tailwind-anti-patterns.md 4.0 KB
- 📄 vue-nuxt-tailwind-patterns.md 4.5 KB
- 📄 vue-nuxt-tailwind-review-checklist.md 3.7 KB
- 📄 vue-nuxt-tailwind-rewrite-playbook.md 2.8 KB
📄 SKILL.md 6.9 KB

SKILL.md

---
name: ui-aesthetics
description: Improve frontend UI/UX judgment for web interfaces by raising aesthetic quality across generation, review, and refactor tasks. Use when an AI coding agent needs to design a new page, section, or component; critique an existing frontend UI from a visual and UX perspective; or rewrite a page to improve hierarchy, composition, interaction quality, and responsiveness while avoiding generic AI-looking design.
---

# UI Aesthetics

## Overview

Use this skill to improve web UI work when the default output would likely be visually generic, weakly structured, or shallow in its UX critique.

This skill is framework-agnostic by default. Focus on design judgment first, implementation second.

When the stack is explicitly React + Next.js + Tailwind, also load:

- `references/react-next-tailwind-patterns.md`
- `references/react-next-tailwind-anti-patterns.md`
- `references/react-next-tailwind-review-checklist.md`
- `references/react-next-tailwind-rewrite-playbook.md`

When the stack is explicitly Vue + Nuxt + Tailwind, also load:

- `references/vue-nuxt-tailwind-patterns.md`
- `references/vue-nuxt-tailwind-anti-patterns.md`
- `references/vue-nuxt-tailwind-review-checklist.md`
- `references/vue-nuxt-tailwind-rewrite-playbook.md`

When the stack is explicitly React + Next.js + CSS Modules or plain CSS, also load:

- `references/react-next-css-patterns.md`
- `references/react-next-css-anti-patterns.md`
- `references/react-next-css-review-checklist.md`
- `references/react-next-css-rewrite-playbook.md`

## Task Routing

Classify the request before acting:

1. **Generation**
   Use when the user wants a new page, section, or component.
2. **Review**
   Use when the user wants critique, findings, or UI/UX analysis of existing code or pages.
3. **Refactor**
   Use when the user wants the existing implementation changed directly.

If the request mixes review and refactor, review first, then choose rewrite depth before editing.

## Core Rules

- Establish a visual thesis before writing implementation code.
- Prefer scene-specific structure over generic page templates.
- Prioritize hierarchy, focus, rhythm, and information density before decorative styling.
- Prefer real technical proof over decorative filler when trust matters.
- Prefer intentional contrast over uniformly weighted composition.
- Use color as structure, emphasis, or system state, not generic polish.
- Make desktop and mobile behavior explicit.
- Define interaction states when they affect clarity, trust, or usability.
- Raise design quality without making the result harder to read, maintain, or ship.

## Anti-Pattern Policy

Reject outputs that rely on:

- interchangeable center-stacked SaaS layouts
- evenly weighted cards with no clear emphasis
- decoration used in place of hierarchy
- glass, gradients, or shadows without structural purpose
- overuse of pills, borders, or large radii to fake polish
- desktop layouts that merely shrink on mobile
- "premium" styling that adds ornament without improving composition

Read `references/anti-patterns.md` when the output feels generic or over-styled.
Read `references/design-principles.md` when you need stable rules that survive across different styles.

## Workflow

### Generation

1. Infer the page role, audience, and information density.
2. Choose a visual direction before implementation.
3. Set hierarchy, composition, spacing rhythm, and emphasis.
4. Load scene-specific guidance from `references/scene-patterns.md` when the page type materially affects structure.
5. Load module-specific guidance from `references/module-patterns.md` when the request hinges on a hero, grid, pricing block, or data table pattern.
6. Load the relevant framework reference when component boundaries, server/client boundaries, or CSS/Tailwind implementation judgment materially affect the result.
7. Select the right form of technical proof for the page role when credibility matters.
8. Implement only after the direction is coherent.

### Review

1. Lead with the most severe UI/UX and aesthetic failures.
2. Prioritize structural problems over surface-level CSS comments.
3. Explain why each issue harms readability, focus, trust, or usability.
4. Distinguish surface symptoms from root problems.
5. Use `references/review-rubric.md` to structure findings.
6. If the stack is framework-specific, also use the matching framework anti-pattern reference to catch structural failures that the generic library will miss.
7. For framework-specific code review, load the matching framework review checklist so findings cover implementation-boundary failures as well as visual failures.

### Refactor

1. Decide whether the work is light polish, medium restructure, or full rebuild.
2. Preserve existing structure when issues are local.
3. Rebuild structure when the composition fundamentally fails.
4. Remove decorative noise before deciding whether the underlying layout and content still work.
5. Use `references/rewrite-playbook.md` before making broad visual changes.
6. If the stack is framework-specific, also use the matching framework rewrite playbook so refactors fix ownership and boundary failures instead of only repainting the UI.

## Self-Critique

Before final output, check:

- Is there a clear focal point?
- Is the hierarchy legible at a glance?
- Does the result still look like generic AI-generated UI?
- Is the page proving something real, or only styling itself persuasively?
- Is the information density appropriate for the page role?
- Are desktop and mobile layouts both coherent?
- Are interaction states sufficiently defined?
- Did the visual upgrade preserve maintainability?

## References

- Positive rules: `references/design-principles.md`
- Scene patterns: `references/scene-patterns.md`
- Module patterns: `references/module-patterns.md`
- React / Next / Tailwind patterns: `references/react-next-tailwind-patterns.md`
- React / Next / Tailwind anti-patterns: `references/react-next-tailwind-anti-patterns.md`
- React / Next / Tailwind review checklist: `references/react-next-tailwind-review-checklist.md`
- React / Next / Tailwind rewrite playbook: `references/react-next-tailwind-rewrite-playbook.md`
- Vue / Nuxt / Tailwind patterns: `references/vue-nuxt-tailwind-patterns.md`
- Vue / Nuxt / Tailwind anti-patterns: `references/vue-nuxt-tailwind-anti-patterns.md`
- Vue / Nuxt / Tailwind review checklist: `references/vue-nuxt-tailwind-review-checklist.md`
- Vue / Nuxt / Tailwind rewrite playbook: `references/vue-nuxt-tailwind-rewrite-playbook.md`
- React / Next / CSS patterns: `references/react-next-css-patterns.md`
- React / Next / CSS anti-patterns: `references/react-next-css-anti-patterns.md`
- React / Next / CSS review checklist: `references/react-next-css-review-checklist.md`
- React / Next / CSS rewrite playbook: `references/react-next-css-rewrite-playbook.md`
- Anti-patterns: `references/anti-patterns.md`
- Review rubric: `references/review-rubric.md`
- Rewrite guide: `references/rewrite-playbook.md`
- Distilled Gemini examples: `references/distilled-examples.md`

Comments 0

Latest | Hot

Please login before commenting.

No comments yet. Be the first one!

ui-aesthetics

Directory Structure

SKILL.md

Report

Notice