kanban-app/docs/figma-design-prompt.md

# Taskboard — Figma AI Designer Prompt

> Use this document as a design brief for generating UI flows, wireframes, and high-fidelity mockups in Figma with AI assistance.

---

## 1. Application Overview

**Taskboard** is a Trello-like Kanban project management web application. Users create Boards containing Lists (columns) and Cards (tasks). Cards support labels, checklists, comments, file attachments, due dates, card-to-card linking, and epic grouping. Boards also have **Epics** (large features spanning multiple cards) and **Wikis** (rich-text documentation pages).

### Tech Stack
- **Frontend**: React 18 + TypeScript, Tailwind CSS (dark theme), React Router, @dnd-kit (drag-and-drop), Slate.js (rich text editor)
- **Backend**: Flask + SQLAlchemy + PostgreSQL
- **Auth**: JWT-based authentication

### Design System Basics
- **Theme**: Dark mode by default
- **Background**: `gray-900` (#111827) for page backgrounds, `gray-800` (#1f2937) for card/panel surfaces, `gray-700` (#374151) for inputs and hover states
- **Accent color**: `blue-600` (#2563eb) primary, `blue-500` hover, `blue-400` for text links
- **Text**: `white` for headings, `gray-300` for body text, `gray-400` for secondary/muted text, `gray-500` for placeholders
- **Borders**: `gray-700` for subtle dividers
- **Destructive**: `red-500`/`red-600` for delete/danger actions
- **Success**: `green-500`/`green-600`
- **Border radius**: `rounded-lg` (8px) for cards and inputs, `rounded-md` (6px) for buttons, `rounded-full` for badges/chips
- **Spacing**: Tailwind's 4px base unit (p-4 = 16px, gap-6 = 24px)
- **Typography**: System font stack; headings bold (font-bold), body medium (font-medium)

---

## 2. Navigation & Information Architecture

### Global Navigation Bar (Navbar)
- **Logo**: "Taskboard" wordmark + icon (left side), links to `/boards`
- **Nav links** (desktop): "Home" → `/home`, "Boards" → `/boards` (only when logged in)
- **Auth section** (right side):
  - Logged out: "Login" link + "Register" button (blue-600 filled)
  - Logged in: Username display + "Logout" button
- **Mobile**: Hamburger menu icon that expands to show same links vertically
- **Height**: 64px (h-16), bg-gray-800 with bottom border-gray-700

### Board-Level Sidebar (BoardSidebar)
- Fixed position on the **right edge** of the viewport, vertically centered
- Contains links for the current board context:
  - 📋 **Epics** → `/boards/:id/epics`
  - 📚 **Wikis** → `/boards/:id/wikis`
  - 📜 **History** → `/boards/:id/history`
- Active item has blue-600 background; inactive has gray-800 with hover-gray-700
- Pill-shaped tabs with rounded-l-lg (left rounded only, flush to right edge)

### Full Route Map

| Route | Page | Auth Required |
|-------|------|---------------|
| `/home` | Landing/Marketing page | No |
| `/login` | Login page | No |
| `/register` | Registration page | No |
| `/boards` | Board listing | Yes |
| `/boards/new` | Create new board | Yes |
| `/boards/:id` | Board detail (Kanban board view) | Yes |
| `/boards/:id/edit` | Edit board settings | Yes |
| `/boards/:id/epics` | Epics listing for board | Yes |
| `/boards/:id/epics/new` | Create new epic | Yes |
| `/boards/:id/epics/:epicId` | Epic detail page | Yes |
| `/boards/:id/epics/:epicId/edit` | Edit epic | Yes |
| `/boards/:id/wikis` | Wikis listing for board | Yes |
| `/boards/:id/wikis/new` | Create new wiki | Yes |
| `/boards/:id/wikis/:wikiId` | Wiki detail page | Yes |
| `/boards/:id/wikis/:wikiId/edit` | Edit wiki | Yes |
| `/boards/:id/cards/:cardId` | Card detail page | Yes |

---

## 3. Data Models & Their Fields

### User
| Field | Type | Display Notes |
|-------|------|---------------|
| `id` | integer | Internal |
| `email` | string (120) | Shown in auth forms |
| `username` | string (80) | Displayed in navbar, comments |
| `password_hash` | string | Never displayed |
| `first_name` | string (50) | Optional display |
| `last_name` | string (50) | Optional display |
| `is_active` | boolean | Account status |
| `is_admin` | boolean | Admin badge |
| `created_at` | datetime | Account creation date |
| `updated_at` | datetime | Last update |

### Board
| Field | Type | Display Notes |
|-------|------|---------------|
| `id` | integer | Internal |
| `name` | string (200) | Board title — prominent heading |
| `description` | text | Subtitle/brief shown below title |
| `closed` | boolean | Archived indicator (badge or dimmed card) |
| `url` | string (500) | External URL reference |
| `short_link` | string (10) | Shareable short link |
| `short_url` | string (500) | Full short URL |
| `user_id` | FK → User | Board owner |
| `prefs` | JSONB | Board preferences (background, etc.) |
| `label_names` | JSONB | Label color→name mapping |
| `limits` | JSONB | Card/list limits |
| `date_last_activity` | datetime | "Last active" display |
| `date_last_view` | datetime | "Last viewed" display |
| `created_at` | datetime | Creation date |
| `updated_at` | datetime | Last update |

### List (Column)
| Field | Type | Display Notes |
|-------|------|---------------|
| `id` | integer | Internal |
| `name` | string (200) | Column header title |
| `closed` | boolean | Archived indicator |
| `pos` | float | Horizontal sort order |
| `board_id` | FK → Board | Parent board |
| `created_at` | datetime | — |
| `updated_at` | datetime | — |

### Card (Task)
| Field | Type | Display Notes |
|-------|------|---------------|
| `id` | integer | Internal |
| `name` | string (200) | Card title — main heading on detail page |
| `description` | text | Multi-line description; editable inline |
| `closed` | boolean | Archived indicator |
| `due` | datetime | Due date — shown as badge on card, date picker in editor |
| `due_complete` | boolean | Checkbox to mark due as done |
| `pos` | float | Sort position within list |
| `id_short` | integer | Short ID for display |
| `board_id` | FK → Board | Parent board |
| `list_id` | FK → List | Current list (shown as "In list [name]") |
| `epic_id` | FK → Epic | Assigned epic (nullable) |
| `badges` | JSONB | Stats (checklist count, comment count, attachment count) |
| `cover` | JSONB | Cover image settings |
| `desc_data` | JSONB | Rich description data |
| `date_last_activity` | datetime | — |
| `created_at` | datetime | "Created [date]" display |
| `updated_at` | datetime | — |

### Label
| Field | Type | Display Notes |
|-------|------|---------------|
| `id` | integer | Internal |
| `name` | string (100) | Label text (shown on hover) |
| `color` | string (50) | Color name (green, red, blue, etc.) — rendered as colored chip/badge |
| `uses` | integer | Usage count |
| `board_id` | FK → Board | Parent board |

### Checklist
| Field | Type | Display Notes |
|-------|------|---------------|
| `id` | integer | Internal |
| `name` | string (200) | Checklist heading |
| `pos` | float | Sort order among checklists |
| `card_id` | FK → Card | Parent card |
| `board_id` | FK → Board | Parent board |

### CheckItem
| Field | Type | Display Notes |
|-------|------|---------------|
| `id` | integer | Internal |
| `name` | string (500) | Item text with checkbox |
| `pos` | float | Sort order |
| `state` | "complete" / "incomplete" | Checkbox state |
| `due` | datetime | Optional due date |
| `checklist_id` | FK → Checklist | Parent checklist |
| `user_id` | FK → User | Assigned user |

### Comment
| Field | Type | Display Notes |
|-------|------|---------------|
| `id` | integer | Internal |
| `text` | text | Comment body text |
| `card_id` | FK → Card | Parent card |
| `user_id` | FK → User | Author (display username + timestamp) |
| `created_at` | datetime | "Posted [relative time]" |
| `updated_at` | datetime | "Edited" indicator |

### FileAttachment
| Field | Type | Display Notes |
|-------|------|---------------|
| `id` | integer | Internal |
| `uuid` | string (36) | Public identifier |
| `filename` | string (255) | Storage filename |
| `original_name` | string (255) | Display name |
| `file_type` | string (50) | "image", "pdf", "document" — determines icon/preview |
| `mime_type` | string (100) | MIME type |
| `file_size` | integer | Display as "KB", "MB" |
| `attachable_type` | string (50) | "Card", "Comment", "Epic" — polymorphic parent |
| `attachable_id` | integer | ID of parent entity |
| `uploaded_by` | FK → User | Uploader |
| `thumbnail_url` | string | Thumbnail for images |
| `created_at` | datetime | Upload date |

### Epic
| Field | Type | Display Notes |
|-------|------|---------------|
| `id` | integer | Internal |
| `name` | string (200) | Epic title |
| `description` | text | Brief description |
| `content` | JSONB | Rich text content (Slate.js JSON) |
| `color` | string (7) | Hex color for epic badge (e.g., "#FF5733") |
| `closed` | boolean | Completed/archived indicator |
| `pos` | float | Sort order |
| `depth_limit` | integer | Max nesting depth (default 5) |
| `board_id` | FK → Board | Parent board |
| `parent_epic_id` | FK → Epic (nullable) | Parent epic for hierarchy |
| `completed_list_id` | FK → List (nullable) | Which list counts as "done" |
| `metrics` | JSONB | `{ card_count: 10, completed_cards_count: 7 }` — progress bar |
| `date_last_activity` | datetime | — |
| `created_at` | datetime | — |
| `updated_at` | datetime | — |

### Wiki
| Field | Type | Display Notes |
|-------|------|---------------|
| `id` | integer | Internal |
| `name` | string (200) | Wiki page title |
| `slug` | string (255) | URL-friendly identifier |
| `content` | JSONB | Rich text content (Slate.js JSON) |
| `summary` | text | Brief description/abstract |
| `category` | string (100) | Category grouping label |
| `board_id` | FK → Board | Parent board |
| `created_by` | FK → User | Author |
| `updated_by` | FK → User | Last editor |
| `tags` | JSONB | Array of tag strings: `["security", "api"]` |
| `created_at` | datetime | — |
| `updated_at` | datetime | — |

### CardLink (Card-to-Card Relationship)
| Field | Type | Display Notes |
|-------|------|---------------|
| `id` | integer | Internal |
| `parent_card_id` | FK → Card | Parent card |
| `child_card_id` | FK → Card | Child card |
| `created_by` | FK → User | Who linked them |
| `created_at` | datetime | When linked |

---

## 4. Page-by-Page UI Specifications

---

### PAGE 1: Landing / Home Page (`/home`)

**Purpose**: Marketing landing page introducing Taskboard. Visible to all visitors.

**Layout**: Full-width centered layout

**Elements**:
- **Hero Section**
  - Large heading: "Taskboard" with tagline (e.g., "Organize your work, your way")
  - Two CTA buttons: "Get Started" → `/register` (blue-600 filled), "Login" → `/login` (outline/ghost)
  - Optional illustration or screenshot mockup
- **Features Section** (optional)
  - 3-4 feature cards in a grid: Kanban boards, Epics, Wikis, Card linking
- **Footer** with basic links

**Interactions**: Click CTAs to navigate to auth pages

---

### PAGE 2: Login Page (`/login`)

**Purpose**: User authentication

**Layout**: Narrow centered card on dark background

**Elements**:
- "Taskboard" logo/wordmark at top
- Heading: "Sign in to your account"
- **Form fields**:
  - **Email** — text input with label, placeholder "you@example.com"
  - **Password** — password input with label, placeholder "••••••••"
- **Submit button**: "Sign In" (full width, blue-600)
- **Link**: "Don't have an account? Register" → `/register`
- Error message area (red text, shown on failed login)

---

### PAGE 3: Register Page (`/register`)

**Purpose**: New user registration

**Layout**: Narrow centered card on dark background

**Elements**:
- "Taskboard" logo/wordmark at top
- Heading: "Create your account"
- **Form fields**:
  - **Username** — text input, placeholder "Choose a username"
  - **Email** — text input, placeholder "you@example.com"
  - **Password** — password input, placeholder "Create a password"
  - **Confirm Password** — password input, placeholder "Confirm your password"
- **Submit button**: "Create Account" (full width, blue-600)
- **Link**: "Already have an account? Sign in" → `/login`
- Validation error messages per field

---

### PAGE 4: Boards List (`/boards`)

**Purpose**: View all boards the user owns/participates in

**Layout**: Wide page layout with padding

**Elements**:
- **Page header**:
  - Heading: "My Boards"
  - Button: "+ New Board" (blue-600) → navigates to `/boards/new`
- **Board grid** (responsive: 1 col mobile, 2 col tablet, 3-4 col desktop):
  - Each **Board card** shows:
    - Board name (bold, white text)
    - Description snippet (gray-400, truncated)
    - Metadata: "Last active: [relative date]" or "Created [date]"
    - Card count indicator (optional badge)
    - Closed/archived boards shown dimmed or with "Archived" badge
  - Click on board card → navigates to `/boards/:id`
- **Empty state**: "No boards yet. Create your first board to get started!" with CTA button

---

### PAGE 5: Create Board (`/boards/new`)

**Purpose**: Create a new Kanban board

**Layout**: Narrow centered form

**Elements**:
- Breadcrumb: "← Back to Boards" → `/boards`
- Heading: "Create New Board"
- **Form fields**:
  - **Board Name** — text input (required), placeholder "Enter board name"
  - **Description** — textarea, placeholder "Describe your board (optional)"
- **Buttons**: "Create Board" (blue-600), "Cancel" (gray-600, navigates back)

---

### PAGE 6: Edit Board (`/boards/:id/edit`)

**Purpose**: Edit board settings

**Layout**: Narrow centered form

**Elements**:
- Breadcrumb: "← Back to Board" → `/boards/:id`
- Heading: "Edit Board"
- **Form fields**:
  - **Board Name** — text input (pre-filled)
  - **Description** — textarea (pre-filled)
  - **Closed** — toggle/checkbox "Archive this board"
- **Buttons**: "Save Changes" (blue-600), "Cancel" (gray-600)

---

### PAGE 7: Board Detail — Kanban View (`/boards/:id`) ★ PRIMARY PAGE

**Purpose**: The main Kanban board interface. This is the core of the application.

**Layout**: Full-width, horizontally scrollable. BoardSidebar on right edge.

**Elements**:
- **Top bar**:
  - Breadcrumb: "← Back to Boards" → `/boards`
  - Board name (h1, large, bold)
  - Board description (gray-400, below name)
  - Action buttons (right aligned):
    - "Edit Board" (gray-700 button) → `/boards/:id/edit`
    - "+ Add List" (blue-600 button)
- **Kanban board area** (horizontal flex container, scrollable):
  - **List/Column** (each ~300px wide, bg-gray-800, rounded-lg):
    - **Column header**: List name (bold), with dropdown menu (⋮) for: Rename list, Delete list
    - **Card list** (vertical, scrollable):
      - Each **KanbanCard** shows:
        - Card name (white, medium weight)
        - Label chips (colored dots or small pills below name)
        - Badges row: checklist icon + count, comment icon + count, attachment icon + count
        - Due date badge (if set): date text, red if overdue, green if complete
        - Epic badge (if assigned): colored pill with epic name
        - Parent card indicator: "Linked from: [card name]" (gray-400 text)
    - **"Add card" button** at bottom of list: "+ Add a card" (text button, gray-400)
  - **"Add another list" card**: Dashed border placeholder at end of columns
- **Drag & Drop**: Cards can be dragged between lists and reordered within lists. Lists can be reordered horizontally. Show ghost/overlay of dragged item.

**Interactions**:
- Click card → opens Card Preview Modal OR navigates to Card Detail
- Click "+ Add a card" → opens Create Card Modal
- Click "+ Add List" → opens Create List Modal
- Drag card/column to reorder

---

### PAGE 8: Card Detail Page (`/boards/:id/cards/:cardId`) ★ KEY PAGE

**Purpose**: Full detailed view and editing of a single card

**Layout**: Narrow centered layout (max-width ~900px). Two-column grid: main content (2/3) + sidebar (1/3).

**Elements**:

**Top Section**:
- Breadcrumb: "← Back to Board" → `/boards/:id`
- Card name (h1, 3xl bold, inline-editable — click edit icon to rename)
- Subtitle: "In list [list name] • Created [date]"
- **Action dropdown** (⋮ icon, top-right): Edit Name, Delete Card, Create Linked Card, Link Existing Card

**Main Content (left 2/3)**:

1. **Description Section** (bg-gray-800 card)
   - Heading "Description" + "Edit" button
   - Display mode: rendered text or "No description added yet." placeholder
   - Edit mode: textarea with Save/Cancel buttons

2. **Labels Section**
   - Colored label chips attached to this card
   - Button to add/remove labels (opens label picker dropdown)
   - Label picker: list of board labels as colored rows, click to toggle

3. **Epic Section**
   - If assigned: colored epic badge with name, click to navigate to epic
   - Button to assign/change epic (opens epic picker dropdown)

4. **Linked Cards Section**
   - List of linked parent/child cards with name and link icon
   - Each link has "Unlink" button (×)
   - Empty state: "No linked cards"

5. **Checklists Section**
   - Multiple checklists, each with:
     - Checklist name heading + delete button (trash icon)
     - Progress bar (percentage of completed items)
     - List of CheckItems, each with:
       - Checkbox (complete/incomplete)
       - Item name (strikethrough when complete)
       - Due date (if set)
       - Action menu: Edit, Convert to Card, Delete
     - "Add item" input at bottom
   - "Add Checklist" button

6. **Attachments Section**
   - File upload area (drag & drop or click to browse)
   - List of uploaded files:
     - Image preview (thumbnail) for images
     - File icon + name for documents/PDFs
     - File name, size, upload date
     - Actions: View, Download, Delete

7. **Comments Section**
   - Comment input: textarea + "Save" button
   - List of comments (newest first):
     - Author username + avatar placeholder
     - Comment text
     - Timestamp (relative: "2h ago")
     - Actions: Edit (pencil icon), Delete (trash icon)
   - Edit mode: inline textarea with Save/Cancel

**Sidebar (right 1/3)** — CardSidebar component:
- **Due Date**: Date display, "Mark complete" checkbox, date picker to change
- **List**: Current list name, dropdown to move card to another list
- **Epic**: Current epic or "None", link to epic detail
- **Created Date**: Full datetime
- **Last Activity**: Relative datetime
- **Card ID**: Short ID display

**Modals accessible from this page**:
- Delete Card Modal
- Create Linked Card Modal (name + description fields)
- Link Existing Card Modal (search/select from board cards)
- Unlink Card Modal (confirmation)
- Create Checklist Modal
- Delete Checklist Modal
- Edit Check Item Modal

---

### PAGE 9: Board Epics (`/boards/:id/epics`)

**Purpose**: View and manage all epics for a board

**Layout**: Wide page layout with BoardSidebar

**Elements**:
- Breadcrumb: "← Back to Board" → `/boards/:id`
- Heading: "Epics"
- Button: "+ New Epic" (blue-600) → `/boards/:id/epics/new`
- **Epics list/table**:
  - Each epic row/card shows:
    - **Color dot** (epic color)
    - **Epic name** (bold, links to detail page)
    - **Description** snippet (truncated)
    - **Progress bar**: `completed_cards_count / card_count` with percentage
    - **Status**: Open/Closed badge
    - **Last activity**: Relative date
    - **Actions**: Edit (pencil), Delete (trash)
  - Nested epics shown indented under parent
- **Empty state**: "No epics yet. Create an epic to group related cards."

---

### PAGE 10: Create Epic (`/boards/:id/epics/new`)

**Purpose**: Create a new epic

**Layout**: Narrow centered form

**Elements**:
- Breadcrumb: "← Back to Epics" → `/boards/:id/epics`
- Heading: "Create New Epic"
- **Form fields**:
  - **Name** — text input (required), placeholder "Epic name"
  - **Description** — textarea, placeholder "Brief description"
  - **Color** — color picker or preset color swatches (hex input)
  - **Rich Text Content** — Slate.js rich text editor with toolbar (bold, italic, lists, headings, links, images)
  - **Parent Epic** — dropdown select (nullable, "None" option)
  - **Completed List** — dropdown select (which list means "done")
- **Buttons**: "Create Epic" (blue-600), "Cancel" (gray-600)

---

### PAGE 11: Edit Epic (`/boards/:id/epics/:epicId/edit`)

**Purpose**: Edit an existing epic

**Layout**: Same as Create Epic, pre-filled with existing data

**Additional fields**:
- **Closed** — toggle "Mark epic as completed/closed"

---

### PAGE 12: Epic Detail (`/boards/:id/epics/:epicId`)

**Purpose**: View full epic details with progress and linked cards

**Layout**: Narrow centered layout

**Elements**:
- Breadcrumb: "← Back to Epics"
- **Header**:
  - Epic name (h1) with color dot
  - Description (gray-300)
  - Status badge: Open/Closed
  - "Edit" button → edit page
- **Progress Section**:
  - Progress bar showing `completed_cards_count / card_count`
  - Percentage text
- **Rich Text Content**: Rendered Slate.js content (formatted text, images, links)
- **Linked Cards**:
  - List of cards assigned to this epic
  - Each card shows: name, current list, labels, due date
  - Click card → navigates to card detail
- **Child Epics** (if any):
  - Nested list of sub-epics with same info
- **Attachments** (if any):
  - File list with preview/download

---

### PAGE 13: Board Wikis (`/boards/:id/wikis`)

**Purpose**: View and manage all wiki pages for a board

**Layout**: Wide page layout with BoardSidebar

**Elements**:
- Breadcrumb: "← Back to Board" → `/boards/:id`
- Heading: "Wikis"
- Button: "+ New Wiki" (blue-600) → `/boards/:id/wikis/new`
- **Wiki list/grid**:
  - Each wiki card shows:
    - **Wiki name** (bold, links to detail)
    - **Summary** (truncated, gray-400)
    - **Category** badge (if set)
    - **Tags** as small pills/chips
    - **Author**: Created by [username]
    - **Last updated**: Relative date
    - **Actions**: Edit (pencil), Delete (trash)
- **Empty state**: "No wiki pages yet. Create a wiki to document your project."

---

### PAGE 14: Create Wiki (`/boards/:id/wikis/new`)

**Purpose**: Create a new wiki page

**Layout**: Wide page layout (to accommodate rich text editor)

**Elements**:
- Breadcrumb: "← Back to Wikis" → `/boards/:id/wikis`
- Heading: "Create New Wiki"
- **Form fields**:
  - **Name** — text input (required), placeholder "Wiki page title"
  - **Slug** — text input, auto-generated from name, editable, placeholder "url-friendly-slug"
  - **Summary** — textarea, placeholder "Brief description"
  - **Category** — text input, placeholder "Category (optional)"
  - **Tags** — tag input (add/remove tags, shown as chips)
  - **Content** — Slate.js rich text editor (full width):
    - Toolbar: Bold, Italic, Underline, Strikethrough, Headings (H1-H3), Bulleted List, Numbered List, Link, Image, Code Block, Quote
    - Large editable area
- **Buttons**: "Create Wiki" (blue-600), "Cancel" (gray-600)

---

### PAGE 15: Edit Wiki (`/boards/:id/wikis/:wikiId/edit`)

**Purpose**: Edit an existing wiki page

**Layout**: Same as Create Wiki, pre-filled with existing data

---

### PAGE 16: Wiki Detail (`/boards/:id/wikis/:wikiId`)

**Purpose**: View a wiki page's content

**Layout**: Narrow centered layout

**Elements**:
- Breadcrumb: "← Back to Wikis"
- **Header**:
  - Wiki name (h1)
  - Category badge (if set)
  - Tags as colored chips
  - Summary text (gray-300, italic)
  - Metadata: "Created by [author] on [date] • Last updated [date] by [editor]"
  - "Edit" button → edit page
- **Content**: Rendered Slate.js rich text (headings, paragraphs, lists, images, links, code blocks, quotes)
- **Linked Entities** (if any):
  - "Linked Cards" section: list of linked cards with name and link
  - "Linked Epics" section: list of linked epics with name and link

---

## 5. Modal Catalog

### Create List Modal
- **Triggered**: "+ Add List" button on board detail
- **Fields**: List Name (text input)
- **Actions**: "Create List" (blue-600), "Cancel"

### Edit List Modal
- **Triggered**: Rename option from list dropdown menu
- **Fields**: List Name (text input, pre-filled)
- **Actions**: "Save" (blue-600), "Cancel"

### Delete List Modal
- **Triggered**: Delete option from list dropdown menu
- **Content**: "Are you sure you want to delete '[list name]'? All cards in this list will be permanently deleted."
- **Actions**: "Delete" (red-600), "Cancel"

### Create Card Modal
- **Triggered**: "+ Add a card" button at bottom of a list
- **Fields**: Card Name (text input, required), Description (textarea, optional)
- **Actions**: "Create Card" (blue-600), "Cancel"

### Edit Card Modal
- **Triggered**: Edit action on card
- **Fields**: Card Name (text input), Description (textarea)
- **Actions**: "Save" (blue-600), "Cancel"

### Delete Card Modal
- **Triggered**: Delete action from card dropdown
- **Content**: "Are you sure you want to delete '[card name]'? This action cannot be undone."
- **Actions**: "Delete" (red-600), "Cancel"

### Card Preview Modal
- **Triggered**: Clicking a card on the Kanban board
- **Content**: Compact card view with name, description, labels, badges
- **Actions**: "View Full Details" (navigates to card detail), "Close"

### Create Linked Card Modal
- **Triggered**: "Create Linked Card" from card action dropdown
- **Purpose**: Create a new card and automatically link it as a child
- **Fields**: Card Name (text input), Description (textarea)
- **Actions**: "Create & Link" (blue-600), "Cancel"

### Link Existing Card Modal
- **Triggered**: "Link Existing Card" from card action dropdown
- **Purpose**: Search and select an existing card on the board to link
- **Fields**: Search input, list of matching cards with radio buttons
- **Actions**: "Link Card" (blue-600), "Cancel"

### Unlink Card Modal
- **Triggered**: "Unlink" button on a linked card
- **Content**: "Are you sure you want to unlink '[card name]' from '[parent card name]'?"
- **Actions**: "Unlink" (red-600), "Cancel"

### Create Checklist Modal
- **Triggered**: "Add Checklist" button in card checklists section
- **Fields**: Checklist Name (text input)
- **Actions**: "Add" (blue-600), "Cancel"

### Delete Checklist Modal
- **Triggered**: Delete button on a checklist
- **Content**: "Are you sure you want to delete the checklist '[name]'? All items will be removed."
- **Actions**: "Delete" (red-600), "Cancel"

### Edit Check Item Modal
- **Triggered**: Edit action on a checklist item
- **Fields**: Item Name (text input)
- **Actions**: "Save" (blue-600), "Cancel"

### Create Label Modal
- **Triggered**: "Create new label" option in label picker
- **Fields**: Label Name (text input), Color (color swatches picker)
- **Actions**: "Create" (blue-600), "Cancel"

---

## 6. Key User Flows

### Flow 1: Registration & First Board
1. User visits `/home` → clicks "Get Started"
2. Fills registration form on `/register` → submits
3. Auto-logged in → redirected to `/boards`
4. Empty state shown → clicks "+ New Board"
5. Enters board name + description → clicks "Create Board"
6. Redirected to new board `/boards/:id` → empty board with no lists
7. Clicks "+ Add List" → enters list name (e.g., "To Do", "In Progress", "Done")
8. Repeats for more lists

### Flow 2: Creating and Managing Cards
1. On board view, clicks "+ Add a card" in a list
2. Enters card name → creates card
3. Clicks card → card preview modal opens
4. Clicks "View Full Details" → navigates to Card Detail page
5. Adds description, assigns labels, sets due date
6. Adds checklist with items, checks off items
7. Adds comments
8. Uploads file attachments
9. Returns to board → sees updated card with badges

### Flow 3: Card Linking
1. On Card Detail page, clicks action dropdown (⋮)
2. Selects "Create Linked Card" → enters name/description → creates
3. OR selects "Link Existing Card" → searches board cards → selects one → links
4. Linked cards shown in "Linked Cards" section
5. Can unlink via × button → confirms in Unlink Card Modal

### Flow 4: Epic Management
1. From board sidebar, clicks "Epics"
2. On epics page, clicks "+ New Epic"
3. Fills in name, description, color, rich content, assigns completed list
4. On board view, opens a card → assigns the epic
5. Epic metrics auto-update (card count, completion progress)

### Flow 5: Wiki Documentation
1. From board sidebar, clicks "Wikis"
2. Clicks "+ New Wiki"
3. Enters title, summary, category, tags
4. Writes rich text content in editor
5. Saves → views rendered wiki page
6. Can link wiki to cards/epics

### Flow 6: Drag & Drop on Board
1. User hovers over a card → cursor changes to grab
2. Drags card to new position in same list OR to different list
3. Ghost overlay follows cursor
4. On drop, card moves to new position/list
5. Lists can also be reordered by dragging column headers

---

## 7. Component Inventory

### Reusable UI Components
| Component | Description |
|-----------|-------------|
| **Navbar** | Top navigation with logo, links, auth controls |
| **BoardSidebar** | Fixed right-side nav for board sections |
| **KanbanColumn** | Vertical list container with header and card list |
| **SortableKanbanColumn** | Drag-enabled version of KanbanColumn |
| **KanbanCard** | Card summary shown in columns (name, badges, labels) |
| **BoardCard** | Board summary card for the boards listing page |
| **CardPreviewModal** | Quick card preview popup |
| **CardSidebar** | Right sidebar on card detail (due date, list, etc.) |
| **CardLabels** | Label chips display + picker |
| **LabelDropdown** | Dropdown for selecting/toggling labels |
| **CardEpics** | Epic assignment display + picker |
| **CardLinks** | Linked cards display with unlink action |
| **CardChecklists** | Checklists with checkable items, progress bars |
| **CardComments** | Comment thread with add/edit/delete |
| **CardAttachments** | File upload area + attachment list |
| **CardActionDropdown** | Context menu (⋮) for card actions |
| **RichTextEditor** | Slate.js rich text editor with formatting toolbar |
| **RichTextContent** | Read-only rich text renderer |
| **SecureImage** | Authenticated image component (MinIO-backed) |
| **WidePageLayout** | Full-width page wrapper with standard padding |
| **NarrowPageLayout** | Centered narrow content wrapper (~900px max) |
| **DeleteCardModal** | Confirmation dialog for card deletion |
| **DeleteListModal** | Confirmation dialog for list deletion |
| **CreateListModal** | Form modal for creating a new list |
| **EditListModal** | Form modal for editing a list name |
| **CreateCardModal** | Form modal for creating a new card |
| **EditCardModal** | Form modal for editing card name/description |
| **CreateLinkedCardModal** | Form modal for creating + linking a card |
| **LinkExistingCardModal** | Search/select modal for linking existing cards |
| **UnlinkCardModal** | Confirmation modal for unlinking cards |
| **CreateChecklistModal** | Form modal for adding a checklist |
| **DeleteChecklistModal** | Confirmation modal for deleting a checklist |
| **EditCheckItemModal** | Form modal for editing a checklist item |
| **CreateLabelModal** | Form modal for creating a new label |
| **ProtectedRoute** | Auth guard wrapper component |

---

## 8. States to Design

For each page, please design these states:

1. **Loading state**: Skeleton/spinner while data loads
2. **Empty state**: Helpful message + CTA when no data exists
3. **Populated state**: Normal data display
4. **Error state**: Error message display (toast notification pattern)
5. **Mobile responsive**: Stack layouts vertically, hamburger nav, full-width cards

### Special States
- **Card dragging**: Ghost overlay of card at cursor position
- **Column dragging**: Ghost overlay of column at cursor position
- **Inline editing**: Input fields replacing display text (card name, description)
- **Modal overlay**: Dark backdrop with centered modal card
- **Toast notifications**: Top-right corner, auto-dismiss, types: success (green), error (red), info (blue)
- **Archived items**: Dimmed with "Archived" badge

---

## 9. Responsive Breakpoints

| Breakpoint | Width | Layout Changes |
|-----------|-------|----------------|
| Mobile | < 640px | Single column, hamburger nav, stacked cards, full-width modals |
| Tablet | 640-1024px | 2-column grids, collapsible sidebar |
| Desktop | > 1024px | Full kanban horizontal scroll, 3-column card detail, sidebar visible |

---

## 10. Design Priorities

1. **Board Detail (Kanban View)** — This is the most-used page; prioritize its drag-and-drop UX
2. **Card Detail** — Second most important; dense information layout
3. **Card Detail Modals** — Many user workflows happen through modals
4. **Boards List** — Entry point after login
5. **Epic Detail & Wiki Detail** — Supporting features
6. **Auth Pages** — Simple but must look polished
7. **Forms (Create/Edit)** — Standard patterns, focus on rich text editor UX

---

*End of design brief. Use this document to generate complete UI flows and page designs for the Taskboard application.*