Skill: UI-UX

Mô tả

Skill này giúp thiết kế UI/UX có cấu trúc, tạo design system và đảm bảo consistency trong giao diện. Lấy cảm hứng từ ui-ux-pro-max-skill.

Khi nào sử dụng

•Có UI phức tạp cần design trước
•User yêu cầu giao diện đẹp/professional
•Cần prototype trước khi code
•Đòi hỏi consistency trong design system

Core Concepts

1. Design System Hierarchy

code

MASTER.md (Global Source of Truth)
    │
    ├── Typography
    ├── Colors
    ├── Spacing
    ├── Components
    └── Patterns
        │
        ▼
pages/*.md (Page-specific overrides)

2. Multi-Domain Search

Khi nhận request, skill sẽ search song song 5 domains:

•Product Type: SaaS, E-commerce, Dashboard...
•UI Style: Glassmorphism, Bento Grid, Minimal...
•Color Scheme: Industry-specific palettes
•Patterns: Cards, Tables, Forms...
•Typography: Font pairings

3. Reasoning Engine

Apply rules theo industry và context để generate consistent design.

Workflow

Phase 1: Analyze Request

•Parse requirements từ intake/spec
•Identify product category
•Determine complexity level
•Check existing design context

Phase 2: Search & Match

•Multi-domain parallel search
•Match reasoning rules
•Filter anti-patterns
•Rank by relevance

Phase 3: Generate Design System

•Create MASTER.md
•Define color palette
•Choose typography
•Specify components
•Document patterns

Phase 4: Page Handoffs

•Create page-specific overrides
•Generate component specs
•Prepare developer handoff

Output Format

File: `output/design/MASTER.md`

markdown

# Design System: [Project Name]

## Overview
- **Industry**: [SaaS/E-commerce/Healthcare/...]
- **Style**: [Glassmorphism/Minimal/Bento/...]
- **Complexity**: [Simple/Medium/Complex]

---

## Color Palette

### Primary Colors
| Name | Hex | Usage |
|------|-----|-------|
| Primary | #3B82F6 | Buttons, CTAs, Links |
| Primary Light | #60A5FA | Hover states |
| Primary Dark | #2563EB | Active states |

### Secondary Colors
| Name | Hex | Usage |
|------|-----|-------|
| Secondary | #6366F1 | Accents, badges |

### Neutral Colors
| Name | Hex | Usage |
|------|-----|-------|
| Background | #FFFFFF | Main background |
| Surface | #F9FAFB | Cards, panels |
| Border | #E5E7EB | Borders, dividers |
| Text Primary | #111827 | Headings, body |
| Text Secondary | #6B7280 | Captions, muted |

### Semantic Colors
| Name | Hex | Usage |
|------|-----|-------|
| Success | #10B981 | Success states |
| Warning | #F59E0B | Warning states |
| Error | #EF4444 | Error states |
| Info | #3B82F6 | Info states |

---

## Typography

### Font Family
- **Headings**: Inter, system-ui, sans-serif
- **Body**: Inter, system-ui, sans-serif
- **Mono**: JetBrains Mono, monospace

### Type Scale
| Element | Size | Weight | Line Height |
|---------|------|--------|-------------|
| H1 | 36px / 2.25rem | 700 | 1.2 |
| H2 | 30px / 1.875rem | 600 | 1.3 |
| H3 | 24px / 1.5rem | 600 | 1.4 |
| H4 | 20px / 1.25rem | 500 | 1.4 |
| Body | 16px / 1rem | 400 | 1.5 |
| Small | 14px / 0.875rem | 400 | 1.5 |
| Caption | 12px / 0.75rem | 400 | 1.4 |

---

## Spacing

### Base Unit
`4px` (0.25rem)

### Scale
| Token | Value | Usage |
|-------|-------|-------|
| xs | 4px | Tight spacing |
| sm | 8px | Component internal |
| md | 16px | Component gaps |
| lg | 24px | Section gaps |
| xl | 32px | Large sections |
| 2xl | 48px | Page margins |

---

## Components

### Buttons
```css
.btn-primary {
  background: var(--primary);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
}

.btn-secondary {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
}

.btn-ghost {
  background: transparent;
  color: var(--text-primary);
}

Cards

css

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

Inputs

css

.input {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
}

.input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

Patterns

Layout

•Max content width: 1280px
•Sidebar width: 256px
•Header height: 64px

Grid

•12 column grid
•Gap: 24px (md) / 32px (lg)

Responsive Breakpoints

Name	Value
sm	640px
md	768px
lg	1024px
xl	1280px
2xl	1536px

Anti-patterns to Avoid

•Don't use more than 3 font weights
•Don't mix rounded and sharp corners
•Don't use pure black (#000000) for text
•Don't rely only on color for meaning (accessibility)
•Don't nest cards more than 2 levels

Accessibility Checklist

Generated by UI-UX Skill | [timestamp]

code


### File: `output/design/pages/dashboard.md`

```markdown
# Page: Dashboard

## Inherits from: MASTER.md

## Overrides

### Colors
- Background: Use Surface (#F9FAFB) instead of pure white

### Layout
- Sidebar: Fixed left, 256px
- Header: Fixed top, 64px
- Content: Scrollable main area

### Components

#### Stats Card
```jsx
<div className="bg-white rounded-lg p-6 shadow-sm border">
  <p className="text-sm text-gray-500">{label}</p>
  <h3 className="text-2xl font-bold mt-1">{value}</h3>
  <span className="text-green-500 text-sm">{change}</span>
</div>

Chart Container

•Border radius: 12px
•Padding: 24px
•Background: white

Wireframe

code

┌─────────────────────────────────────────────┐
│ HEADER (Logo, Search, User)                 │
├─────────┬───────────────────────────────────┤
│         │ Stats Row                         │
│         │ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐  │
│ SIDEBAR │ │ KPI │ │ KPI │ │ KPI │ │ KPI │  │
│         │ └─────┘ └─────┘ └─────┘ └─────┘  │
│ - Nav   │                                   │
│ - Nav   │ Main Chart                        │
│ - Nav   │ ┌─────────────────────────────┐  │
│         │ │                             │  │
│         │ │                             │  │
│         │ └─────────────────────────────┘  │
│         │                                   │
│         │ Table / Recent Activity           │
│         │ ┌─────────────────────────────┐  │
│         │ │ Row 1                       │  │
│         │ │ Row 2                       │  │
│         │ └─────────────────────────────┘  │
└─────────┴───────────────────────────────────┘

Page spec for Dashboard

code


### File: `output/design/handoff.md`

```markdown
# Developer Handoff

## Design System Files
- `MASTER.md` - Global design tokens
- `pages/*.md` - Page-specific specs

## Quick Reference

### CSS Variables
```css
:root {
  --primary: #3B82F6;
  --background: #FFFFFF;
  --surface: #F9FAFB;
  --border: #E5E7EB;
  --text-primary: #111827;
  --text-secondary: #6B7280;
}

Tailwind Config

colors: {
  primary: '#3B82F6',
  surface: '#F9FAFB',
  // ...
}

Implementation Notes

•Use Inter font from Google Fonts
•All border-radius should be consistent (0.5rem for buttons, 0.75rem for cards)
•Use CSS Grid for main layout, Flexbox for components
•Mobile-first approach

Resources

•
•[Icon Set]: Lucide Icons
•[Font]: Google Fonts Inter

Handoff document for developers

code


## Industry Reasoning Rules

### SaaS / Dashboard
- Clean, minimal design
- Data-focused layouts
- Blue/Purple color schemes
- Sans-serif typography
- Card-based components

### E-commerce
- Product-focused design
- Strong CTAs
- Warm color accents
- Clear pricing display
- Trust indicators

### Healthcare
- Calming color palette (blues, greens)
- High accessibility standards
- Clean, trustworthy typography
- Privacy-focused UI

### Finance
- Professional, conservative design
- Data tables and charts
- Green/Blue color schemes
- Security indicators

## Style Library

| Style | Description | Use Case |
|-------|-------------|----------|
| **Glassmorphism** | Frosted glass effect | Modern dashboards |
| **Neumorphism** | Soft 3D shadows | Minimal apps |
| **Bento Grid** | Grid-based layout | Portfolios, landing |
| **Dark Mode** | Dark backgrounds | Dev tools, media |
| **Minimal** | Clean, lots of whitespace | SaaS, productivity |
| **Brutalism** | Raw, bold typography | Creative, artistic |

## Lệnh thực thi

```bash
# Generate design system từ intake
node ".agent/skills/ui-ux/scripts/generate-design.js"

# Create page spec
node ".agent/skills/ui-ux/scripts/create-page.js" --name dashboard

# Generate handoff
node ".agent/skills/ui-ux/scripts/generate-handoff.js"

# View design system
node ".agent/skills/ui-ux/scripts/view-design.js"

Ui Ux

Skill: UI-UX

Mô tả

Khi nào sử dụng

Core Concepts

1. Design System Hierarchy

2. Multi-Domain Search

3. Reasoning Engine

Workflow

Phase 1: Analyze Request

Phase 2: Search & Match

Phase 3: Generate Design System

Phase 4: Page Handoffs

Output Format

File: `output/design/MASTER.md`

Cards

Inputs

Patterns

Layout

Grid

Responsive Breakpoints

Anti-patterns to Avoid

Accessibility Checklist

Chart Container

Wireframe

Tailwind Config

Implementation Notes

Resources

Quy tắc cho UI/UX Agent

DO

DON'T

Integration

Input từ

Output cho

Tham khảo

Skill: UI-UX

Mô tả

Khi nào sử dụng

Core Concepts

1. Design System Hierarchy

2. Multi-Domain Search

3. Reasoning Engine

Workflow

Phase 1: Analyze Request

Phase 2: Search & Match

Phase 3: Generate Design System

Phase 4: Page Handoffs

Output Format

File: output/design/MASTER.md

Cards

Inputs

Patterns

Layout

Grid

Responsive Breakpoints

Anti-patterns to Avoid

Accessibility Checklist

Chart Container

Wireframe

Tailwind Config

Implementation Notes

Resources

Quy tắc cho UI/UX Agent

DO

DON'T

Integration

Input từ

Output cho

Tham khảo

File: `output/design/MASTER.md`