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.
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