ui-aesthetics

分类: 开发与编程 | 上传者: kasonye | 下载: 0 | 版本: v1.0（最新）

将前端 UI 美学判断应用于 Web 界面生成、审查和重构任务。在处理前端代码中的层次结构、组合、响应能力、可访问性或视觉效果时使用。

更新日志: Source: GitHub https://github.com/kasonye/ui-aesthetics-skill

目录结构

当前层级: tree/main/.cline/skills/ui-aesthetics/

📄 SKILL.md 3.4 KB

SKILL.md

---
name: ui-aesthetics
description: Apply frontend UI aesthetics judgment for web interface generation, review, and refactor tasks. Use when working on hierarchy, composition, responsiveness, accessibility, or visual polish in frontend code.
---

# UI Aesthetics

This is the Cline wrapper for the `ui-aesthetics` skill.

## Using Inside the Original Repository

If you are working inside the `ui-aesthetics-skill` repository, read the full canonical skill at [../../../skills/ui-aesthetics/SKILL.md](../../../skills/ui-aesthetics/SKILL.md) and follow its instructions. The canonical file is the single source of truth.

## Using in Other Projects (Standalone Copy)

If this wrapper has been copied into another workspace where `skills/ui-aesthetics/SKILL.md` is not present, follow the inline rules below.

### 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 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.
- Prioritize hierarchy, focus, rhythm, and information density before decorative styling.
- Prefer real technical proof, semantic color, and precision-friendly presentation when trust and inspectability matter.
- Choose the shallowest structure and interaction depth that can still support the task clearly.
- Let task shape determine whether content should be a table, list, or card.
- Let context retention determine whether detail belongs inline, in a panel, in a modal, or on its own page.
- Keep actions close to the objects they affect, and preserve workflow continuity with visible progress, validation, and recovery paths.
- Make desktop and mobile behavior explicit rather than relying on shrinkage.
- Define interaction states clearly and make feedback immediate and predictable.
- Use semantic HTML, enforce keyboard operability, maintain WCAG 2.2 AA contrast ratios, and never rely on color alone to convey meaning.
- Ensure loading states, layout stability, animation performance, and interaction feedback support a fast perceived experience.
- Use CSS logical properties, text-elastic containers, and generous line-height values so the UI does not break when text expands or direction flips.
- 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
- minimalism that strips affordance, labels, or feedback

### 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 information density appropriate for the page role on both desktop and mobile?
- Are interaction states sufficiently defined?
- Did the visual upgrade preserve maintainability?

> For the complete skill with references, examples, and rubrics, see the full repository at https://github.com/kasonye/ui-aesthetics-skill

登录后下载/点赞/收藏 ❤ 112 | ★ 0

ui-aesthetics

目录结构

SKILL.md

举报内容

提示