1.7 KiB
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