Ui Design

---
name: ui-design
description: Create user interfaces that are visually appealing, intuitive, and functional.
category: design
triggers:
  - ui
  - visual
  - layout
  - interface
version: 0.2.1
---

# UI Design Skill

## Purpose
Create user interfaces that are visually appealing, intuitive, and functional.

## Design Principles

### 1. Hierarchy
Guide users through content with visual importance.
- Size: Larger = more important
- Color: Bold/saturated = more important
- Space: More whitespace = more important

### 2. Consistency
Use consistent patterns throughout.
- Same colors mean same things
- Same components behave the same
- Predictable layouts

### 3. Feedback
Respond to user actions.
- Hover states on interactive elements
- Loading indicators for async operations
- Success/error messages for actions

### 4. Simplicity
Remove unnecessary elements.
- Every element should serve a purpose
- Reduce cognitive load
- Progressive disclosure for complexity

## Color Usage

| Color | Typical Use |
|-------|-------------|
| Primary | Main actions, branding |
| Secondary | Supporting actions |
| Success | Positive feedback (green) |
| Warning | Caution (yellow/orange) |
| Error | Problems (red) |
| Neutral | Text, backgrounds, borders |

## Typography

- **Headlines** - Large, bold, limited use
- **Body** - Readable, 16px minimum
- **Captions** - Small, secondary information
- **Line Height** - 1.5 for body text

## Spacing System

Use consistent spacing scale:
`4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px`

## Component Checklist

- [ ] Has visible focus state
- [ ] Has hover state (if interactive)
- [ ] Has disabled state
- [ ] Works with keyboard
- [ ] Has appropriate contrast