英語 |简体中文

ウェブUIの生成、レビュー、リファクタリングを用いて、より強力な視覚的判断力を持つマルチプラットフォームAIスキルパック。

ui-aestheticsは、エージェントがスコープを誇張したり偽りの高級手がかりに頼ることなく、より洗練され、バランスが取れ、正確で製品グレードに感じられるインターフェースを作り出すのを助けます。

概要

このリポジトリは、標準的なUI美学スキルを保持しつつ、複数のエージェントやIDEエコシステムに適応させます。

• 正典出典:SKILL.md
• 共有アダプター層:.shared/ui-aesthetics/
• プラットフォームネイティブラッパー:.codex/、.claude/、.cursor/、.windsurf/、.opencode/、.opencode/、.gemini/、.qoder/、.kiro/、.github/
• ディープガイダンス:references/

スキルを更新するなら、まずSKILL.mdを更新してください。

それが役立つもの

UIが以下を必要とする場合にui-aestheticsを使用してください:

• よりクリーンな構成と階層構造
• より狭い間隔、タイポグラフィ、情報密度の向上
• より洗練されたボタン、カード、フォーム、表、オーバーレイ
• 落ち着いたホバリング、フォーカス、選択、読み込み、エラー状態
• より良い動作規律
• より一貫したシャドウ、ブラー、ハイライト、ダークモードの深度ロジック

典型的な要望:

• 「このダッシュボードをもっとクリーンで高級感のあるものにしよう。」

UI Aesthetics

English | 简体中文

Multi-platform AI skill pack for generating, reviewing, and refactoring web UI with stronger visual judgment.

ui-aesthetics helps agents produce interfaces that feel more refined, balanced, precise, and product-grade without inflating scope or relying on fake luxury cues.

Overview

This repository keeps one canonical UI aesthetics skill and adapts it to multiple agent and IDE ecosystems.

• Canonical source: SKILL.md
• Shared adapter layer: .shared/ui-aesthetics/
• Platform-native wrappers: .codex/, .claude/, .cursor/, .windsurf/, .opencode/, .gemini/, .qoder/, .kiro/, .github/
• Deep guidance: references/

If you update the skill, update SKILL.md first.

What it helps with

Use ui-aesthetics when a UI needs:

• cleaner composition and hierarchy
• tighter spacing, typography, and information density
• more refined buttons, cards, forms, tables, and overlays
• calmer hover, focus, selected, loading, and error states
• better motion discipline
• more coherent shadow, blur, highlight, and dark-mode depth logic

Typical requests:

• “Make this dashboard feel cleaner and more premium.”
• “Explain why this page looks AI-generated.”
• “Refactor this settings panel without changing the information density.”
• “Tighten hover, focus, selected, loading, and dark-mode depth behavior.”

Core principles

• preserve requested scope
• fix hierarchy before decoration
• prefer restraint over fake luxury
• keep default states quiet and semantic states distinct
• use motion and depth to clarify, not to perform
• keep the result shippable and maintainable

Supported platforms