38 lines
1.7 KiB
Markdown
38 lines
1.7 KiB
Markdown
# Component Library / Design System
|
|
|
|
## Design System Approach
|
|
|
|
**Design System Strategy:** Adopt existing design system (Chakra UI or Ant Design) + AI-specific component extensions
|
|
|
|
## Core Components
|
|
|
|
### 1. AI Prompt Input
|
|
**Purpose:** Primary interface for natural language task creation and AI interactions
|
|
**Variants:** Compact (header), Expanded (full-width), Modal (focused creation)
|
|
**States:** Empty, typing, processing, success, error, disabled
|
|
|
|
### 2. Task Card (Enhanced)
|
|
**Purpose:** Display individual tasks with origin tracking and smart actions
|
|
**Variants:** Compact (list view), Detailed (board view), Inline-edit (quick editing)
|
|
**States:** Normal, selected, editing, syncing, error, archived
|
|
|
|
### 3. Context Selector
|
|
**Purpose:** Help users specify context for AI operations
|
|
**Variants:** Chips (quick selection), Dropdown (full list), Smart (AI-suggested)
|
|
**States:** None selected, single selected, multiple selected, loading options
|
|
|
|
### 4. Status Workflow Indicator
|
|
**Purpose:** Visual representation of task progress through BMad/custom workflows
|
|
**Variants:** Progress bar (linear), Badge cluster (multiple types), Timeline (historical)
|
|
**States:** Not started, in progress, completed, blocked, skipped
|
|
|
|
### 5. Sync Status Component
|
|
**Purpose:** Real-time indication of Task Master CLI integration health
|
|
**Variants:** Icon only (minimal), Detailed (full status), Interactive (click actions)
|
|
**States:** Connected, syncing, disconnected, error, manual sync needed
|
|
|
|
### 6. Bulk Action Toolbar
|
|
**Purpose:** Efficient multi-task operations with AI assistance
|
|
**Variants:** Floating (appears on selection), Fixed (always visible), Contextual (adaptive)
|
|
**States:** No selection, single selected, multiple selected, processing
|