Kanban Task Board

A Kanban task board with draggable columns, task cards with assignees and labels, add task inline, and a board header with sprint controls and filter bar.

SaaSMediumsaas
Compatible with:ChatGPTv0Bolt.newCursorGitHub Copilot
Patterns:kanban, sidebar
Prompt
Build a Kanban task board for a project management SaaS app called "SprintOS". The board is for a sprint called "Sprint 15 — API v3 Refactor". The page should include:

1. **App shell** — Fixed left sidebar (64px icon rail): Home, Board (active), List, Calendar, Settings. Logo at top. To the right of the sidebar, the board fills the remaining viewport.

2. **Board header bar** — Project name and sprint label on the left: "API v3" breadcrumb → "Sprint 15 (Feb 17–Feb 28)". Sprint progress pill: "14 / 22 done". On the right: filter controls — "Group by: Status ▾", a member avatar cluster (4 overlapping avatars + "+3"), "Hide resolved" toggle, and a blue "+ New task" button.

3. **Filter / search bar** — Below the header: a search input "Search tasks…", filter chips: "Assignee: All ▾", "Priority: All ▾", "Label: All ▾", and a "Clear" text link.

4. **Kanban board — 4 columns (horizontal scroll on overflow):**

   **Column 1 — To Do (8 tasks)**
   - Column header has a gray dot, count pill "8", and a "+" add task icon
   - Cards:
     a. "Implement JWT refresh token logic" — Priority: 🔴 High — Assignee: JK — Label: "backend" — Due: Feb 23 — 3 story pts
     b. "Add OpenAPI spec for /auth routes" — Priority: 🟡 Medium — Assignee: PH — Label: "docs" — Due: Feb 24 — 2 pts
     c. "Set up rate limiter middleware" — Priority: 🔴 High — Assignee: JK — Label: "backend" — Due: Feb 25 — 3 pts
   - "[ + Add task ]" at bottom

   **Column 2 — In Progress (5 tasks)**
   - Blue dot, count pill "5"
   - Cards (2 shown):
     a. "Refactor database connection pool" — Priority: 🔴 High — Assignee: AR — Label: "perf" — Due: Feb 22 — 5 pts — progress bar 60%
     b. "Write unit tests for user service" — Priority: 🟡 Medium — Assignee: JK — Label: "testing" — Due: Feb 23 — 3 pts — progress bar 30%

   **Column 3 — In Review (3 tasks)**
   - Yellow dot, count "3"
   - Cards:
     a. "Migrate endpoints to v3 prefix" — Assignee: AR — Label: "breaking" — PR #142 linkable

   **Column 4 — Done (14 tasks, scroll to see all)**
   - Green dot, count "14"
   - Top 2 cards shown with strikethrough names, faded style (opacity-60):
     a. ~~"Remove legacy auth module"~~ — Closed Feb 19 — AR
     b. ~~"Update CI/CD pipeline for monorepo"~~ — Closed Feb 18 — ST

5. **Card anatomy (detailed):**
   Each card is a white rounded-xl card with 1px zinc-200 border and subtle box-shadow. Contents:
   - Top row: priority icon (🔴🟡🟢), task title (font-medium), kebab menu ⋯
   - Labels: colored pill tags (backend=purple, docs=blue, perf=orange, testing=green)
   - Bottom row: assignee avatar (24px, with tooltip on hover), due date, story point badge, and a 🔗 PR link if present

6. **Add task inline** — Clicking "+ Add task" at column bottom reveals an inline card editor: a text input with "Task name…", a priority dropdown, assignee picker, and "Add" / "Cancel" buttons.

7. **Design:** White body background, columns have zinc-50 background, card hover elevates shadow. Drag-in-progress state: card becomes semi-transparent (opacity-50), a blue dashed dropzone appears. Blue-600 primary, font Inter, 280px column width with 16px gap, horizontal scroll for overflow.
Mockdown
[SIDEBAR RAIL — 64px]
  [Logo]
  [🏠]
  [📋] ← active
  [☰]
  [📅]
  [⚙]

[BOARD HEADER]
  API v3  >  Sprint 15 (Feb 17–Feb 28)   ●● 14/22 done
                   [Group: Status ▾]  [●●●●+3]  [Hide resolved ○]  [+ New task]

[FILTER BAR]
  [Search tasks…]   [Assignee: All ▾]   [Priority: All ▾]   [Label: All ▾]   Clear

[KANBAN COLUMNS — horizontal layout, 280px each]

┌────────────────────────────┐ ┌────────────────────────────┐ ┌────────────────────────────┐ ┌────────────────────────────┐
│ ● To Do              8  + │ │ 🔵 In Progress       5  + │ │ 🟡 In Review         3  + │ │ 🟢 Done             14  + │
│                            │ │                            │ │                            │ │                            │
│ ┌────────────────────────┐ │ │ ┌────────────────────────┐ │ │ ┌────────────────────────┐ │ │ ┌────────────────────────┐ │
│ │🔴 Implement JWT        │ │ │ │🔴 Refactor DB pool     │ │ │ │   Migrate endpoints    │ │ │ │~~Remove legacy auth~~  │ │
│ │   refresh token logic  │ │ │ │   connection           │ │ │ │   to v3 prefix         │ │ │ │  Closed Feb 19  AR     │ │
│ │ [backend]              │ │ │ │ [perf]                 │ │ │ │ [breaking]  PR #142 🔗 │ │ │ └────────────────────────┘ │
│ │ 📅 Feb 23  JK  3pts    │ │ │ │ ████████░░░░ 60%       │ │ │ │ 📅 Feb 22  AR          │ │ │                            │
│ └────────────────────────┘ │ │ │ 📅 Feb 22  AR  5pts    │ │ │ └────────────────────────┘ │ │ ┌────────────────────────┐ │
│                            │ │ └────────────────────────┘ │ │                            │ │ │~~Update CI/CD for mono~│ │
│ ┌────────────────────────┐ │ │                            │ │ ┌────────────────────────┐ │ │ │  Closed Feb 18  ST     │ │
│ │🟡 Add OpenAPI spec     │ │ │ ┌────────────────────────┐ │ │ │🟡 Review error handler │ │ │ └────────────────────────┘ │
│ │   for /auth routes     │ │ │ │🟡 Write unit tests for │ │ │ │   middleware PR         │ │ │                            │
│ │ [docs]                 │ │ │ │   user service         │ │ │ │ [backend]  PR #138 🔗  │ │ │  + 12 more (scroll)        │
│ │ 📅 Feb 24  PH  2pts    │ │ │ │ [testing]              │ │ │ │ 📅 Feb 21  PH          │ │ │                            │
│ └────────────────────────┘ │ │ │ ████░░░░░░░░ 30%       │ │ │ └────────────────────────┘ │ │                            │
│                            │ │ │ 📅 Feb 23  JK  3pts    │ │ │                            │ │                            │
│ ┌────────────────────────┐ │ │ └────────────────────────┘ │ │ + 1 more                   │ │                            │
│ │🔴 Set up rate limiter  │ │ │                            │ │                            │ │                            │
│ │   middleware           │ │ │  + 3 more                  │ │                            │ │                            │
│ │ [backend]              │ │ │                            │ │                            │ │                            │
│ │ 📅 Feb 25  JK  3pts    │ │ │                            │ │                            │ │                            │
│ └────────────────────────┘ │ │                            │ │                            │ │                            │
│                            │ │                            │ │                            │ │                            │
│  + 5 more                  │ │                            │ │                            │ │                            │
│ ─────────────────────────  │ │                            │ │                            │ │                            │
│ [+ Add task              ] │ │ [+ Add task              ] │ │ [+ Add task              ] │ │ [+ Add task              ] │
└────────────────────────────┘ └────────────────────────────┘ └────────────────────────────┘ └────────────────────────────┘

[ADD TASK INLINE — on click]
  ┌────────────────────────────┐
  │ Task name…                 │
  │ [Priority ▾]  [Assignee ▾] │
  │ [Add]  [Cancel]            │
  └────────────────────────────┘
Kanban Task Board
┌──────────┬────────────────────────────────────┐
│ ◉ App    │  Search [____________]  🔔  👤    │
│          ├────────────────────────────────────┤
│ ● Home   │                                    │
│ ○ Inbox  │  ┌───────────────────────────────┐│
│ ○ Tasks  │  │  ⌘K  Quick Actions            ││
│ ○ Docs   │  │  ─────────────────────────    ││
│ ○ Team   │  │  📄 New Document              ││
│ ○ API    │  │  👥 Invite Team Member        ││
│          │  │  ⚙  Open Settings             ││
│ ──────── │  │  📊 View Analytics            ││
│ Settings │  │  ...                           ││
│ Help     │  └───────────────────────────────┘│
│          │                                    │
│          │  ┌──────────┐ ┌──────────────────┐│
│          │  │ Projects │ │  Recent Activity ││
│          │  │ ──────── │ │  ─────────────── ││
│          │  │ ▸ Alpha  │ │  ● Deploy v2.1   ││
│          │  │ ▸ Beta   │ │  ○ PR merged     ││
│          │  │ ▸ Gamma  │ │  ○ Issue #42     ││
│          │  └──────────┘ └──────────────────┘│
└──────────┴────────────────────────────────────┘

Related Layouts

┌──────────┬────────────────────────────────────┐
│ ◉ App    │  Search [____________]  🔔  👤    │
│          ├────────────────────────────────────┤
│ ● Home   │                                    │
│ ○ Inbox  │  ┌───────────────────────────────┐│
│ ○ Tasks  │  │  ⌘K  Quick Actions            ││
│ ○ Docs   │  │  ─────────────────────────    ││
│ ○ Team   │  │  📄 New Document              ││
│ ○ API    │  │  👥 Invite Team Member        ││
│          │  │  ⚙  Open Settings             ││
│ ──────── │  │  📊 View Analytics            ││
│ Settings │  │  ...                           ││
│ Help     │  └───────────────────────────────┘│
│          │                                    │
│          │  ┌──────────┐ ┌──────────────────┐│
│          │  │ Projects │ │  Recent Activity ││
│          │  │ ──────── │ │  ─────────────── ││
│          │  │ ▸ Alpha  │ │  ● Deploy v2.1   ││
│          │  │ ▸ Beta   │ │  ○ PR merged     ││
│          │  │ ▸ Gamma  │ │  ○ Issue #42     ││
│          │  └──────────┘ └──────────────────┘│
└──────────┴────────────────────────────────────┘
SaaS

Data Table CRUD Interface

A full-featured data table CRUD interface with column filters, inline row editing, bulk actions, add/delete controls, CSV export, and pagination for SaaS admin screens.

--data-table--crud--filter
Medium
┌──────────┬────────────────────────────────────┐
│ ◉ App    │  Search [____________]  🔔  👤    │
│          ├────────────────────────────────────┤
│ ● Home   │                                    │
│ ○ Inbox  │  ┌───────────────────────────────┐│
│ ○ Tasks  │  │  ⌘K  Quick Actions            ││
│ ○ Docs   │  │  ─────────────────────────    ││
│ ○ Team   │  │  📄 New Document              ││
│ ○ API    │  │  👥 Invite Team Member        ││
│          │  │  ⚙  Open Settings             ││
│ ──────── │  │  📊 View Analytics            ││
│ Settings │  │  ...                           ││
│ Help     │  └───────────────────────────────┘│
│          │                                    │
│          │  ┌──────────┐ ┌──────────────────┐│
│          │  │ Projects │ │  Recent Activity ││
│          │  │ ──────── │ │  ─────────────── ││
│          │  │ ▸ Alpha  │ │  ● Deploy v2.1   ││
│          │  │ ▸ Beta   │ │  ○ PR merged     ││
│          │  │ ▸ Gamma  │ │  ○ Issue #42     ││
│          │  └──────────┘ └──────────────────┘│
└──────────┴────────────────────────────────────┘
SaaS

Inbox and Messaging Layout

A three-pane inbox and messaging layout with a contacts sidebar, thread list panel, and full conversation view — modeled after Gmail, Linear, and Intercom.

--inbox--messaging--three-pane
Complex
┌──────────┬────────────────────────────────────┐
│ ◉ App    │  Search [____________]  🔔  👤    │
│          ├────────────────────────────────────┤
│ ● Home   │                                    │
│ ○ Inbox  │  ┌───────────────────────────────┐│
│ ○ Tasks  │  │  ⌘K  Quick Actions            ││
│ ○ Docs   │  │  ─────────────────────────    ││
│ ○ Team   │  │  📄 New Document              ││
│ ○ API    │  │  👥 Invite Team Member        ││
│          │  │  ⚙  Open Settings             ││
│ ──────── │  │  📊 View Analytics            ││
│ Settings │  │  ...                           ││
│ Help     │  └───────────────────────────────┘│
│          │                                    │
│          │  ┌──────────┐ ┌──────────────────┐│
│          │  │ Projects │ │  Recent Activity ││
│          │  │ ──────── │ │  ─────────────── ││
│          │  │ ▸ Alpha  │ │  ● Deploy v2.1   ││
│          │  │ ▸ Beta   │ │  ○ PR merged     ││
│          │  │ ▸ Gamma  │ │  ○ Issue #42     ││
│          │  └──────────┘ └──────────────────┘│
└──────────┴────────────────────────────────────┘
SaaS

SaaS App Shell with Command Palette

A complete SaaS application shell featuring a collapsible sidebar, command palette (⌘K), notification drawer, and multi-workspace switcher — the skeleton for any SaaS product.

--app-shell--sidebar--command-palette
Complex