@tinkcarlos/skillora 0.2.0

package/.claude/skills/frontend-design/SKILL.md

@@ -0,0 +1,587 @@
+---
+name: frontend-design
+user-invocable: true
+description: |
+  Create and review production-grade frontend interfaces with high design quality.
+  Dual-mode: CREATE mode for building UI, REVIEW mode for auditing compliance.
+
+  Use when:
+  - BUILD: web components, pages, dashboards, landing pages
+  - BUILD: "make it look better", "design a page", "UI for...", "beautiful interface"
+  - BUILD: 美化界面, 优化样式, 设计页面, 前端设计, 组件开发
+  - REVIEW: "review my UI", "check accessibility", "audit design", "review UX"
+  - REVIEW: 审查UI, 检查可访问性, 设计审计
+
+  Key Features:
+  - 🎨 CREATE MODE: 57 UI styles + 95 palettes + 56 font pairings
+  - 🔍 REVIEW MODE: 100+ rules (accessibility, performance, UX)
+  - 28-item pre-delivery checklist
+  - Layout anti-patterns prevention
+  - Color consistency (Light/Dark, 4.5:1 contrast)
+  - 8px spacing grid system
+  - Industry-specific anti-patterns
+
+  Not for: backend API, database design, pure business logic without UI.
+license: MIT
+allowed-tools: [Read, Write, Edit, Glob, Grep]
+---
+
+# Frontend Design Skill
+
+Create and review production-grade frontend interfaces.
+**Dual-mode**: 🎨 CREATE (build UI) | 🔍 REVIEW (audit compliance)
+
+## 🔴 Mode Selection
+
+```
+用户请求
+    │
+    ├── "设计/创建/美化/UI" → 🎨 CREATE MODE
+    │
+    └── "审查/检查/audit" → 🔍 REVIEW MODE
+```
+
+---
+
+# 🎨 CREATE MODE
+
+Create distinctive interfaces that avoid generic "AI slop" aesthetics.
+**Prevents**: element overlap, layout shift, excessive whitespace, inconsistent colors, poor responsive scaling.
+
+## 🔴 MANDATORY: Design System Generation Flow
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│  设计系统生成流程 (MUST FOLLOW)                                   │
+├─────────────────────────────────────────────────────────────────┤
+│  Step 1: 识别行业/产品类型                                        │
+│          ↓                                                       │
+│  Step 2: 加载行业反模式 (→ references/industry-anti-patterns.md) │
+│          ↓                                                       │
+│  Step 3: 选择 UI 风格 (→ references/ui-styles-full.md)           │
+│          ↓                                                       │
+│  Step 4: 选择调色板 (60-30-10 法则)                               │
+│          ↓                                                       │
+│  Step 5: 选择字体配对                                             │
+│          ↓                                                       │
+│  Step 6: 应用布局约束 (防重叠/错乱/空白)                          │
+│          ↓                                                       │
+│  Step 7: 响应式断点测试 (320px → 1440px)                         │
+│          ↓                                                       │
+│  Step 8: 预交付检查 (28项必检)                                    │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+## 🔴 Core Rules (MANDATORY)
+
+### 1. Element Overlap Prevention (防止元素重叠)
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│  🔴 防止重叠黄金法则                                             │
+├─────────────────────────────────────────────────────────────────┤
+│  ✅ 固定导航栏: 内容区添加 pt-16 或 pt-20 预留空间              │
+│  ✅ 浮动导航栏: 使用 top-4 left-4 right-4 边距                  │
+│  ✅ z-index 层级: dropdown(10) < navbar(30) < modal(50)         │
+│  ✅ 使用 Flexbox/Grid 替代绝对定位                              │
+│  ❌ 禁止: position: absolute 布局 (除非必要)                    │
+│  ❌ 禁止: 负 margin 导致重叠                                    │
+│                                                                  │
+│  → 详细指南: references/layout-anti-patterns.md                  │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+### 2. Responsive Design Rule (防止元素错乱/变形)
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│  🔴 响应式设计黄金法则                                           │
+├─────────────────────────────────────────────────────────────────┤
+│  ✅ 使用: clamp(), min(), max(), minmax()                       │
+│  ✅ 使用: Flexbox + Grid 自适应布局                              │
+│  ✅ 使用: Container Queries (@container)                         │
+│  ✅ 使用: auto-fit/auto-fill + minmax(280px, 1fr)               │
+│  ✅ 图片: aspect-ratio + object-fit: cover                       │
+│  ❌ 禁止: 固定 px 宽高 (除非有 min/max 约束)                     │
+│  ❌ 禁止: 绝对定位布局 (position: absolute)                      │
+│                                                                  │
+│  → 详细指南: references/responsive-design.md                     │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+### 3. Layout Optimization Rule (防止空白/动态高度)
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│  🔴 布局优化黄金法则                                              │
+├─────────────────────────────────────────────────────────────────┤
+│  ✅ 使用: height: auto + min-height: fit-content (动态高度)     │
+│  ✅ 使用: max-height + overflow-y: auto (长内容滚动)            │
+│  ✅ 使用: flex: 1 填充剩余空间 (无空白)                          │
+│  ✅ 使用: grid-auto-rows: min-content (按内容行高)              │
+│  ✅ 空状态: 友好插图 + 说明 + 操作按钮                           │
+│  ❌ 禁止: 固定高度导致大片空白                                   │
+│  ❌ 禁止: 长内容无限拉长页面                                     │
+│                                                                  │
+│  → 详细指南: references/layout-anti-patterns.md                  │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+### 4. Color Consistency Rule (配色统一高级)
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│  🔴 配色一致性黄金法则                                           │
+├─────────────────────────────────────────────────────────────────┤
+│  ✅ 60-30-10 法则: 主背景(60%) + 次要色(30%) + 强调色(10%)      │
+│  ✅ 对比度: 正文 ≥4.5:1, 大标题 ≥3:1 (WCAG AA)                  │
+│  ✅ Light Mode: text-slate-900(正文), text-slate-600(辅助)      │
+│  ✅ Dark Mode: text-white(标题), text-gray-100(正文)            │
+│  ✅ 玻璃效果: Light用bg-white/80, Dark用bg-gray-900/80          │
+│  ❌ 禁止: 硬编码颜色值 (使用CSS变量或Tailwind类)                 │
+│  ❌ 禁止: text-gray-400 作为正文 (对比度不足)                    │
+│                                                                  │
+│  → 详细指南: references/color-consistency.md                     │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+### 5. Spacing System Rule (内外间距合适)
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│  🔴 间距系统黄金法则 (8px Grid)                                  │
+├─────────────────────────────────────────────────────────────────┤
+│  ✅ 相关元素间距小: 4-8px (gap-1, gap-2)                        │
+│  ✅ 不相关元素间距大: 16-24px (gap-4, gap-6)                    │
+│  ✅ 组件内部间距 < 组件外部间距                                  │
+│  ✅ 按钮: px-4 py-2 (16px/8px)                                  │
+│  ✅ 卡片: p-4 或 p-6 (16px/24px)                                │
+│  ✅ 表单字段: space-y-4 (16px)                                  │
+│  ✅ 章节: py-12 或 py-16 (48px/64px)                            │
+│  ❌ 禁止: 奇数间距 (5px, 7px, 13px)                             │
+│  ❌ 禁止: 过大间距 (>64px 除非章节分隔)                          │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+### 6. Icon & Visual Element Rule (图标与视觉规范)
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│  🔴 图标与视觉黄金法则                                           │
+├─────────────────────────────────────────────────────────────────┤
+│  ✅ 使用 SVG 图标库: Heroicons, Lucide, Simple Icons            │
+│  ✅ 图标尺寸统一: viewBox="0 0 24 24" + w-5 h-5 或 w-6 h-6      │
+│  ✅ 品牌 Logo: 从 Simple Icons 获取官方 SVG                      │
+│  ✅ hover 用 color/opacity 过渡 (不导致布局偏移)                 │
+│  ❌ 禁止: emoji 作为 UI 图标 (🎨 🚀 ⚙️)                          │
+│  ❌ 禁止: hover 用 scale 变换 (导致布局抖动)                     │
+│  ❌ 禁止: 混用不同图标库                                         │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+### 7. Touch Target & Interaction Rule (触摸目标与交互)
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│  🔴 交互黄金法则                                                  │
+├─────────────────────────────────────────────────────────────────┤
+│  ✅ 触摸目标最小: 44x44px (min-h-11 min-w-11)                   │
+│  ✅ 可点击元素: cursor-pointer                                   │
+│  ✅ hover 反馈: 颜色/阴影/边框变化                               │
+│  ✅ 焦点状态: focus-visible:ring-2 focus-visible:ring-primary   │
+│  ✅ 过渡动画: 150-300ms (transition-colors duration-200)        │
+│  ❌ 禁止: 过渡 >500ms (感觉迟钝)                                 │
+│  ❌ 禁止: 无 hover/focus 反馈的交互元素                          │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+### 8. Typography Hierarchy Rule (字体层级规范)
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│  🔴 字体层级黄金法则                                              │
+├─────────────────────────────────────────────────────────────────┤
+│  ✅ H1: text-4xl/text-5xl font-bold (页面标题)                  │
+│  ✅ H2: text-2xl/text-3xl font-semibold (章节标题)              │
+│  ✅ H3: text-xl font-medium (子标题)                            │
+│  ✅ Body: text-base (16px) leading-relaxed                      │
+│  ✅ Small: text-sm text-muted-foreground (辅助文字)             │
+│  ✅ 行高: 标题 1.2-1.3, 正文 1.5-1.75                           │
+│  ❌ 禁止: 正文 <14px (可读性差)                                  │
+│  ❌ 禁止: 超过 3 种字重 (视觉混乱)                               │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+### 9. Loading & Empty State Rule (加载与空状态)
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│  🔴 状态反馈黄金法则                                              │
+├─────────────────────────────────────────────────────────────────┤
+│  ✅ 加载状态: Skeleton (内容占位) 或 Spinner (操作等待)         │
+│  ✅ Skeleton: 匹配实际内容布局, animate-pulse                    │
+│  ✅ 空状态: 插图 + 说明文字 + 操作按钮                           │
+│  ✅ 错误状态: 红色边框 + 错误图标 + 错误信息                     │
+│  ✅ 成功状态: 绿色 + 勾选图标 + 成功信息                         │
+│  ❌ 禁止: 无加载指示的异步操作                                   │
+│  ❌ 禁止: 空白页面无任何提示                                     │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+### 10. Container & Max-Width Rule (容器宽度一致性)
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│  🔴 容器宽度黄金法则                                              │
+├─────────────────────────────────────────────────────────────────┤
+│  ✅ 全局统一: max-w-6xl (1152px) 或 max-w-7xl (1280px)          │
+│  ✅ 居中: mx-auto px-4 sm:px-6 lg:px-8                          │
+│  ✅ 全宽区域: 背景色全宽, 内容居中                               │
+│  ✅ 侧边栏布局: w-64 (256px) 固定 + flex-1 内容区               │
+│  ❌ 禁止: 混用不同 max-width (视觉不一致)                        │
+│  ❌ 禁止: 内容贴边无 padding                                     │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+### 11. Style-Only Modification Rule
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│  🔴 样式修改黄金法则                                              │
+├─────────────────────────────────────────────────────────────────┤
+│  ✅ 只改外观 (HOW it looks): 颜色、字体、间距、动画、布局        │
+│  ❌ 不改行为 (WHAT it does): 事件、状态、API、路由、验证         │
+│                                                                  │
+│  → 详细规则: references/style-modification-rules.md              │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+### Deep Page Coverage
+
+修改 UI 时，必须检查并统一**所有**相关组件：
+- **弹窗类**: Modal, Drawer, Popover, Dropdown
+- **提示类**: Toast, Alert, Tooltip, Badge
+- **表单类**: Input, Select, Checkbox, Switch
+- **数据类**: Table, Card, List, Avatar
+- **导航类**: Navbar, Sidebar, Tabs, Breadcrumb
+- **反馈类**: Loading, Skeleton, Empty State
+
+### Diversity Enforcement
+
+1. **Theme Rotation**: Light (40%) | Dark (30%) | Mixed (30%)
+2. **Style Exploration**: Consider 3+ styles before committing
+3. **Color Variety**: Each project gets a unique palette
+
+## 🔴 Pre-Delivery Checklist (28 Items)
+
+交付前必须通过以下检查 → 详细: `references/pre-delivery-checklist.md`
+
+### Visual Quality (6 items)
+- [ ] 无 emoji 作为图标 (使用 SVG: Heroicons/Lucide)
+- [ ] 图标来自同一图标库，尺寸统一 (w-5 h-5 或 w-6 h-6)
+- [ ] 品牌 logo 正确 (Simple Icons 验证)
+- [ ] hover 状态不导致布局偏移 (用 color/opacity, 不用 scale)
+- [ ] 直接使用主题色 (bg-primary, 不用 var() 包装)
+- [ ] 字体层级清晰 (H1 > H2 > H3 > Body > Small)
+
+### Interaction (5 items)
+- [ ] 所有可点击元素有 `cursor-pointer`
+- [ ] 触摸目标 ≥44x44px (min-h-11 min-w-11)
+- [ ] hover 状态提供视觉反馈
+- [ ] 过渡动画 150-300ms (`transition-colors duration-200`)
+- [ ] 焦点状态可见 (`focus-visible:ring-2`)
+
+### Light/Dark Mode (4 items)
+- [ ] Light mode 正文对比度 ≥4.5:1 (text-slate-900)
+- [ ] 玻璃效果 Light mode 可见 (bg-white/80+)
+- [ ] 边框两种模式都可见
+- [ ] 两种模式都测试过
+
+### Layout (5 items)
+- [ ] 浮动元素有边距 (top-4 left-4 right-4)
+- [ ] 内容不被固定导航栏遮挡 (pt-20)
+- [ ] 容器宽度统一 (max-w-6xl 或 max-w-7xl)
+- [ ] 响应式测试: 320px, 768px, 1024px, 1440px
+- [ ] 无水平滚动
+
+### State Feedback (4 items)
+- [ ] 加载状态有 Skeleton 或 Spinner
+- [ ] 空状态有插图 + 说明 + 操作按钮
+- [ ] 错误状态有红色边框 + 错误信息
+- [ ] 成功状态有绿色 + 成功信息
+
+### Accessibility (4 items)
+- [ ] 所有图片有 alt 属性
+- [ ] 表单输入有 label
+- [ ] 颜色不是唯一信息指示 (配合图标)
+- [ ] 尊重 `prefers-reduced-motion`
+
+## Decision Tree
+
+```
+Step 1: Identify Industry/Context
+  SaaS/Tech → Modern, Clean, Gradient accents
+  E-commerce → Product-focused, Trust signals
+  Healthcare → Calm, Accessible, Professional
+  Finance → Trust, Precision, Data-rich
+  Creative → Bold, Expressive, Unique
+  Gaming → Neon, Dark, Futuristic
+  Beauty/Spa → Soft, Organic, Calming
+  Food/Restaurant → Warm, Appetizing, Visual
+  Education → Friendly, Clear, Progress-focused
+  Web3/NFT → Futuristic, Gradient, 3D
+
+Step 2: Load Industry Anti-Patterns (🔴 MANDATORY)
+  → references/industry-anti-patterns.md
+  Check: What NOT to do for this industry
+
+Step 3: Select UI Style (→ references/ui-styles-full.md)
+  Check ratings: → references/ui-styles-rating.md
+
+Step 4: Choose Color Palette (60-30-10 rule)
+  → references/color-palettes-full.md
+  Verify: Not using industry-forbidden colors
+
+Step 5: Select Typography (Display + Body font)
+  → references/font-pairings-full.md
+
+Step 6: Apply Layout Constraints
+  → references/layout-anti-patterns.md
+  → references/responsive-design.md
+
+Step 7: Generate Design System
+  → references/design-system-generator.md
+
+Step 8: Implement with Motion + Micro-interactions
+  → references/motion-patterns.md
+
+Step 9: Pre-delivery Check (🔴 MANDATORY)
+  → references/pre-delivery-checklist.md
+```
+
+## 🔴 Industry-Specific Anti-Patterns (行业禁忌)
+
+**必须在设计前查阅** → `references/industry-anti-patterns.md`
+
+| 行业 | 禁止主色 | 禁止风格 | 禁止效果 |
+|------|----------|----------|----------|
+| **医疗** | 红色, 黑色 | 深色模式, 卡通 | 快速动画 |
+| **金融** | 霓虹色 | 卡通, 手写 | 过度动画 |
+| **美容** | 霓虹色 | 深色模式 | 生硬动画 |
+| **餐饮** | 蓝色 | 冷色调 | 过度滤镜 |
+| **游戏** | 柔和色 | 企业风格 | 静态界面 |
+| **教育** | - | 深色默认 | 过多动画 |
+| **电商** | - | 深色默认 | 自动播放 |
+
+## Quick Reference: 10 Core UI Styles
+
+| Style | Visual Signature | Best For |
+|-------|-----------------|----------|
+| **Glassmorphism** | Frosted glass, blur | Dashboards, Cards |
+| **Neumorphism** | Soft shadows, embossed | Buttons, Controls |
+| **Brutalism** | Raw, bold, rough | Creative, Portfolio |
+| **Minimalism** | White space, essential | Corporate, Luxury |
+| **Bento Grid** | Card-based asymmetric | Dashboards, Portfolios |
+| **Claymorphism** | 3D clay-like | Playful, Kids |
+| **Retro/Vintage** | Nostalgic, old-school | Creative, Food |
+| **Cyberpunk** | Neon, dark, futuristic | Gaming, Tech |
+| **Organic/Natural** | Flowing shapes | Wellness, Eco |
+| **Editorial** | Magazine-like | Blogs, News |
+
+→ Full 57 styles: `references/ui-styles-full.md`
+
+## Quick Reference: Industry Color Palettes
+
+| Industry | Primary | Secondary | Accent |
+|----------|---------|-----------|--------|
+| **SaaS/Tech** | `#6366F1` Indigo | `#8B5CF6` Purple | `#F59E0B` Amber |
+| **Healthcare** | `#0EA5E9` Sky | `#14B8A6` Teal | `#F97316` Orange |
+| **Finance** | `#1E3A5F` Navy | `#059669` Emerald | `#EAB308` Gold |
+| **E-commerce** | `#DC2626` Red | `#000000` Black | `#FBBF24` Yellow |
+| **Creative** | `#EC4899` Pink | `#8B5CF6` Violet | `#06B6D4` Cyan |
+
+→ Full 95 palettes: `references/color-palettes-full.md`
+
+## Quick Reference: Font Pairings
+
+| Pairing | Display | Body | Vibe |
+|---------|---------|------|------|
+| **Modern Tech** | Clash Display | Satoshi | Clean |
+| **Editorial** | Playfair Display | Source Serif Pro | Sophisticated |
+| **Geometric** | Bebas Neue | Work Sans | Bold |
+| **Humanist** | DM Serif Display | DM Sans | Warm |
+| **Brutalist** | Anton | IBM Plex Mono | Raw |
+| **Luxury** | Cormorant Garamond | Lato | Elegant |
+
+→ Full 56 pairings: `references/font-pairings-full.md`
+
+## Design Thinking Process
+
+1. **Purpose**: What problem does this interface solve?
+2. **Industry**: Match to industry palette and style
+3. **Tone**: Pick an extreme from the style spectrum
+4. **Differentiation**: What's the ONE thing someone will remember?
+
+**CRITICAL**: Bold maximalism and refined minimalism both work - the key is **intentionality**.
+
+## NEVER Use (Anti-Patterns)
+
+- ❌ Overused fonts: Inter alone, Roboto, Arial
+- ❌ Clichéd colors: Purple gradients on white ("AI slop" look)
+- ❌ Predictable layouts: Standard hero → features → CTA
+- ❌ Safe defaults: Always dark theme, always the same style
+
+## Output Contract
+
+1. **Working Code**: HTML/CSS/JS or React/Vue component
+2. **Design Rationale**: Why this style, palette, typography
+3. **Key Techniques**: Special CSS/animation techniques used
+4. **Customization Notes**: How to adapt for brand
+5. **Pre-delivery Check**: 🔴 Must pass `references/pre-delivery-checklist.md`
+
+---
+
+## 🔴 技能编排 (Skill Orchestration)
+
+遵循 `../shared-references/skill-orchestration-protocol.md` 协议。
+
+| 触发条件 | 调用技能 | 返回条件 |
+|----------|----------|----------|
+| React/Next.js 项目 | 🔴 `react-best-practices` | 性能优化完成 |
+| UI 审查/可访问性 | 🔴 `web-design-guidelines` | 审查通过 |
+| 设计完成后 | `code-review` | 代码审查通过 |
+
+### 强制调用规则
+
+| 触发条件 | 必须调用 | 原因 |
+|----------|----------|------|
+| React/Next.js 组件开发 | 🔴 `react-best-practices` | 确保性能最佳实践 |
+| 任何 UI 完成后 | 🔴 `web-design-guidelines` | 确保可访问性和 UX |
+
+---
+
+## References Navigation
+
+| File | When to Read |
+|------|--------------|
+| 🔴 `references/industry-anti-patterns.md` | **设计前必读 - 行业禁忌** |
+| 🔴 `references/responsive-design.md` | **防止元素错乱/重叠/变形** |
+| 🔴 `references/layout-anti-patterns.md` | **防止重叠/空白/间距问题** |
+| 🔴 `references/color-consistency.md` | **配色统一/Light-Dark模式** |
+| 🔴 `references/style-modification-rules.md` | **修改现有项目时必读** |
+| 🔴 `references/pre-delivery-checklist.md` | **交付前必须检查** |
+| `references/design-system-generator.md` | 生成完整设计系统 |
+| `references/ui-styles-full.md` | 57 种 UI 风格详解 |
+| `references/ui-styles-rating.md` | 风格性能/可访问性评级 |
+| `references/color-palettes-full.md` | 95 种行业调色板 |
+| `references/font-pairings-full.md` | 56 种字体配对 |
+| `references/ux-guidelines.md` | 98 条 UX 最佳实践 |
+| `references/motion-patterns.md` | 动画和微交互 |
+| 🔴 `../react-best-practices/SKILL.md` | **React/Next.js 性能优化** |
+| 🔴 `../web-design-guidelines/SKILL.md` | **UI 审查和可访问性** |
+
+---
+
+# 🔍 REVIEW MODE
+
+Review UI code for compliance with web interface best practices.
+
+## Review Process
+
+1. Read the specified files
+2. Check against all rules
+3. Output findings in terse `file:line` format
+
+## Quick Reference
+
+| Category | Priority | Key Rules |
+|----------|----------|-----------|
+| Accessibility | **P0** | aria-labels, semantic HTML, keyboard handlers |
+| Focus States | **P0** | focus-visible:ring-*, never remove outline |
+| Forms | **P1** | autocomplete, labels, inline errors |
+| Animation | **P1** | prefers-reduced-motion, transform/opacity only |
+| Performance | **P1** | virtualize lists, preconnect, lazy loading |
+| Images | **P1** | width/height, loading="lazy", alt text |
+| Navigation | **P2** | URL reflects state, confirmation for destructive |
+| Dark Mode | **P2** | color-scheme, theme-color meta |
+| Touch | **P2** | touch-action, overscroll-behavior |
+
+## 🔴 Anti-Patterns to Flag (P0)
+
+| Pattern | Problem | Fix |
+|---------|---------|-----|
+| `user-scalable=no` | Blocks zoom | Remove |
+| `onPaste` + `preventDefault` | Blocks paste | Remove |
+| `transition: all` | Performance | List properties |
+| `outline-none` without replacement | No focus | Add focus-visible ring |
+| `<div>` with click handler | Not accessible | Use `<button>` |
+| Images without dimensions | Layout shift | Add width/height |
+| Inputs without labels | Screen reader | Add label |
+
+## Review Rules
+
+### Accessibility (P0)
+
+```tsx
+// ❌ Icon button without label
+<button onClick={close}><XIcon /></button>
+
+// ✅ With aria-label
+<button onClick={close} aria-label="Close dialog"><XIcon /></button>
+```
+
+### Focus States (P0)
+
+```css
+/* ❌ Removes focus indicator */
+button:focus { outline: none; }
+
+/* ✅ Custom focus indicator */
+button:focus-visible { @apply ring-2 ring-offset-2 ring-blue-500; }
+```
+
+### Forms (P1)
+
+```tsx
+// ❌ Missing autocomplete
+<input type="email" />
+
+// ✅ With autocomplete
+<input type="email" autocomplete="email" />
+```
+
+### Animation (P1)
+
+```css
+/* ❌ Ignores motion preference */
+.card { transition: all 0.3s; }
+
+/* ✅ Respects motion preference */
+.card { transition: transform 0.3s, opacity 0.3s; }
+@media (prefers-reduced-motion: reduce) {
+  .card { transition: none; }
+}
+```
+
+### Performance (P1)
+
+- Virtualize lists >50 items
+- No layout reads in render
+- Preconnect/preload critical assets
+
+## Review Output Contract
+
+```markdown
+## UI Review: [filename]
+
+### Issues Found
+| Priority | Line | Issue | Fix |
+|----------|------|-------|-----|
+| P0 | 15 | Missing aria-label | Add aria-label="Close" |
+| P1 | 42 | transition: all | List specific properties |
+
+### Summary
+- P0 (Critical): X issues
+- P1 (Important): X issues
+- P2 (Recommended): X issues
+```