# Mockup Generation Instructions

## Required Mockups for TaskFlow

### 1. Task List Dashboard - Desktop (1440px)

**Prompt for generation:**
TaskFlow Task List Dashboard - Desktop Layout (1440px width)

Clean, professional web application interface showing a task management dashboard for small teams. The layout should be:

HEADER:
- Top navigation bar with "TaskFlow" logo/title on left
- User avatar and name on right 
- Clean, minimal header design

MAIN CONTENT AREA:
- Left sidebar (250px) with navigation menu: "My Tasks", "All Tasks", "Create Task"
- Main content area showing task list in card/table format
- Each task card shows: Task title, Assigned user, Status (Open/In Progress/Blocked), Priority, Due date
- Clear visual indicators for task status (color coding: green=open, blue=in progress, red=blocked)
- Action buttons for Edit/Assign on each task card

VISUAL DESIGN:
- Modern, clean interface with plenty of white space
- Professional color scheme (blues, grays, subtle accents)
- Clear typography hierarchy
- Accessibility-focused design with high contrast
- Card-based or table layout for tasks
- Status badges clearly visible and color-coded
- Hover states and interactive elements clearly defined

The interface should feel professional, organized, and make it immediately clear who owns what tasks and their current status. Focus on clarity and quick scanning rather than fancy graphics.

**Command to run:**
```bash
# 1. Encode prompt to base64
$prompt = '...[above prompt]...'
$b64 = [Convert]::ToBase64String([Text.Encoding]::UTF8.GetBytes($prompt))

# 2. Generate on ws
ssh ws "~/kiro/bin/genmockup $b64 /home/sam/kiro/out/task-list-desktop.png 16:9"

# 3. Copy back
scp ws:/home/sam/kiro/out/task-list-desktop.png scratch/taskflow/architect/01-mockups/

# 4. Cleanup ws
ssh ws "rm -f /home/sam/kiro/out/task-list-desktop.png"
```

---

### 2. Task List Dashboard - Mobile (375px)

**Prompt for generation:**
TaskFlow Task List Dashboard - Mobile Layout (375px width)

Mobile-responsive task management interface for small teams. Design should be:

HEADER:
- Compact header with hamburger menu on left, "TaskFlow" title center, user avatar right
- Touch-friendly navigation elements

MAIN CONTENT:
- Collapsible navigation menu accessed via hamburger
- Vertically stacked task cards optimized for mobile scrolling
- Each task card shows: Task title (larger), Status badge, Assigned user, Due date
- Large, touch-friendly action buttons
- Swipe-to-action capabilities (edit, assign)

MOBILE OPTIMIZATIONS:
- Large tap targets (44px minimum)
- Clear visual hierarchy with larger text
- Status indicators prominently displayed
- Thumb-friendly button placement
- Vertical card layout for easy scrolling
- High contrast for outdoor visibility

Professional mobile-first design that maintains task clarity and ownership visibility on small screens.

**Command to run:**
```bash
# Similar process with 9:16 aspect ratio for mobile
ssh ws "~/kiro/bin/genmockup $b64 /home/sam/kiro/out/task-list-mobile.png 9:16"
```

---

### 3. Create/Edit Task - Desktop (1440px)

**Prompt for generation:**
TaskFlow Create/Edit Task Form - Desktop Layout (1440px width)

Clean task creation/editing interface with form-based layout:

HEADER:
- Same navigation as dashboard
- Breadcrumb: "Tasks > Create New Task" or "Tasks > Edit Task"

FORM LAYOUT:
- Two-column layout: Main form (left 60%), Task preview (right 40%)
- Form fields: Task Title (required), Description (textarea), Assign To (dropdown), Priority (Low/Medium/High), Due Date (date picker), Status (Open/In Progress/Blocked)
- Clear field labels and validation indicators
- Save/Cancel buttons prominently placed

PREVIEW PANEL:
- Live preview of how task will appear in task list
- Shows all entered information formatted as task card
- Helps users understand what they're creating

VISUAL DESIGN:
- Clean, spacious form design
- Clear validation states (errors, required fields)
- Professional color scheme consistent with dashboard
- Accessibility-focused with proper form labels
- Progressive disclosure for advanced options

The interface should make task creation feel quick and straightforward, with immediate visual feedback.

---

### 4. Create/Edit Task - Mobile (375px)

**Prompt for generation:**
TaskFlow Create/Edit Task Form - Mobile Layout (375px width)

Mobile-optimized task creation form:

LAYOUT:
- Single column, vertically stacked form
- Full-screen modal or dedicated page
- Sticky header with Cancel/Save buttons

FORM ELEMENTS:
- Large, touch-friendly input fields
- Mobile-optimized dropdowns and date pickers
- Auto-expanding textarea for descriptions
- Clear visual separation between form sections
- Touch-friendly button placement

MOBILE SPECIFIC:
- Keyboard-aware design (form adjusts when keyboard appears)
- Swipe gestures for navigation
- Large tap targets for all interactive elements
- Simplified field layouts for thumb navigation
- Clear save/cancel actions always visible

Clean, focused mobile form design that makes task creation effortless on mobile devices.

---

### 5. Blocked Task States - Mobile (375px)

**Prompt for generation:**
TaskFlow Blocked Task and Error States - Mobile Layout (375px width)

Mobile interface showing empty states and error handling:

EMPTY STATE:
- Center-aligned illustration or icon
- "No blocked tasks" message
- Encouraging call-to-action: "Great! No tasks are currently blocked"
- Secondary action: "View all tasks" button

ERROR STATE:
- Clear error message with friendly language
- "Oops! Something went wrong" with specific error details
- Retry button prominently displayed
- Alternative action options
- Maintain TaskFlow branding and color scheme

BLOCKED TASK DISPLAY:
- Task cards with prominent "BLOCKED" status
- Clear visual indicators (red color scheme)
- Reason for blocking clearly stated
- Unblock action button
- Contact information for task owner

Mobile-first design focused on clear communication and recovery actions.

**All files should be generated and placed in `scratch/taskflow/architect/01-mockups/` directory**