Kanban Board
- 242 installs
- 83.7k repo stars
- Updated August 5, 2026
- nexu-io/open-design
kanban-board is a frontend design skill that guides implementation of kanban board UI with columns, draggable task cards, lane statuses, and workflow semantics for developers building project-management SaaS or agent das
About
kanban-board is an open-design skill from nexu-io that helps developers design and implement kanban interfaces for project-management SaaS products or internal agent dashboards. It covers column layouts, draggable task cards, lane status transitions, and workflow semantics that communicate work-in-progress limits and state changes. The skill bridges UX structure and frontend implementation so boards feel intuitive for task triage and pipeline tracking. Reach for kanban-board when adding a visual workflow board to a web app, not when you only need a flat task list without column-based workflow semantics.
- Column and lane layouts
- Draggable task cards
- Status workflow patterns
- Open design system alignment
Kanban Board by the numbers
- 242 all-time installs (skills.sh)
- +1 installs in the week ending Aug 4, 2026 (Skillselion tracking)
- Ranked #886 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/nexu-io/open-design --skill kanban-boardAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 242 |
|---|---|
| repo stars | ★ 83.7k |
| Last updated | August 5, 2026 |
| Repository | nexu-io/open-design ↗ |
How do you build a draggable kanban board UI?
Design and implement kanban board UI with columns, draggable task cards, lane statuses, and workflow semantics for project-management SaaS or internal agent dashboards.
Who is it for?
Frontend developers adding project-management kanban views with drag-and-drop cards and lane-based workflow states to SaaS or internal dashboards.
Skip if: Teams needing only a simple static task table without column lanes, drag interactions, or WIP workflow semantics.
When should I use this skill?
The user asks to design or implement a kanban board, draggable task cards, workflow columns, or lane statuses in a web UI.
What you get
Kanban column layouts, draggable task card components, lane status definitions, and workflow transition semantics.
- kanban column components
- draggable task cards
- workflow status model
Files
Kanban Board Skill
Produce a single-screen kanban board.
Workflow
1. Read the active DESIGN.md. 2. Identify squad name, sprint number, columns, and member roster from the brief. 3. Layout:
- Top bar: project crumb, sprint chip, filter row (members, labels, status), search.
- 4 columns: Backlog, In progress, In review, Done. Each column has a count chip and an "+ add" affordance.
- 3–6 cards per column. Each card: tag chip, title, assignee avatar, point estimate, progress (if applicable).
- Sidebar (collapsible feel): "Sprint pulse" with progress bar, top assignees, blocked-tickets callout.
4. One inline <style>, semantic HTML.
Output contract
<artifact identifier="kanban-board" type="text/html" title="Sprint Board">
<!doctype html>...</artifact><!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Growth Squad · Sprint 38 Board</title>
<style>
:root {
--bg: #f7f7f9;
--paper: #ffffff;
--ink: #1a1d29;
--muted: #5e6478;
--line: #e5e7ee;
--line-strong: #c8cdd9;
--accent: #5b3df0;
--accent-soft: #ece8ff;
--pink: #d6336c;
--teal: #1a8e8e;
--amber: #b58522;
--green: #2c8a4f;
--display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
--mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 13.5px; line-height: 1.5; }
.app { display: grid; grid-template-columns: 1fr 280px; min-height: 100vh; }
main { padding: 18px 22px 32px; min-width: 0; }
aside.sidebar { padding: 22px 24px; border-left: 1px solid var(--line); background: var(--paper); }
/* Topbar */
.topbar { display: flex; align-items: center; gap: 16px; padding-bottom: 16px; }
.crumb { font-family: var(--mono); font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.sprint-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 11.5px; }
.sprint-chip .dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
.topbar-spacer { flex: 1; }
.topbar input.search { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; max-width: 220px; background: var(--paper); }
.icon-btn { padding: 6px 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; font-size: 12.5px; cursor: pointer; color: var(--muted); }
.filterbar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 14px; }
.filter-label { font-family: var(--mono); font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-right: 6px; }
.chip-row { display: flex; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 12px; color: var(--muted); cursor: pointer; }
.chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip .av { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #a991ff); display: inline-block; }
.filterbar .spacer { flex: 1; }
.members { display: flex; }
.members .av { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--paper); margin-left: -8px; font-size: 10.5px; font-weight: 700; color: white; display: inline-flex; align-items: center; justify-content: center; }
.members .av:first-child { margin-left: 0; }
/* Board */
.board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: flex-start; }
.col { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px; min-height: 460px; display: flex; flex-direction: column; gap: 10px; }
.col-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 8px; border-bottom: 1px dashed var(--line); }
.col-name { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.col-name .swatch { width: 8px; height: 8px; border-radius: 50%; }
.swatch.gray { background: var(--line-strong); }
.swatch.violet { background: var(--accent); }
.swatch.amber { background: var(--amber); }
.swatch.green { background: var(--green); }
.col-count { font-family: var(--mono); font-size: 10.5px; color: var(--muted); padding: 2px 6px; background: var(--bg); border-radius: 999px; }
/* Cards */
.card { padding: 12px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; display: flex; flex-direction: column; gap: 10px; cursor: grab; transition: border-color 0.15s, box-shadow 0.15s; }
.card:hover { border-color: var(--accent); box-shadow: 0 4px 12px rgba(91,61,240,0.06); }
.card-tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.tag-bug { background: rgba(214,51,108,0.12); color: var(--pink); }
.tag-feat { background: rgba(91,61,240,0.12); color: var(--accent); }
.tag-design { background: rgba(26,142,142,0.12); color: var(--teal); }
.tag-chore { background: rgba(94,100,120,0.12); color: var(--muted); }
.tag-research { background: rgba(181,133,34,0.12); color: var(--amber); }
.card-title { font-size: 13.5px; font-weight: 500; line-height: 1.4; }
.card-meta { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; color: var(--muted); }
.card-meta .left { display: flex; gap: 8px; align-items: center; }
.av-sm { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #a991ff); color: white; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.av-mira { background: linear-gradient(135deg, #d6336c, #ff7a9b); }
.av-cale { background: linear-gradient(135deg, #1a8e8e, #56c1c1); }
.av-pri { background: linear-gradient(135deg, #b58522, #f1b13a); }
.av-dev { background: linear-gradient(135deg, #2c8a4f, #66c285); }
.pts { font-family: var(--mono); padding: 2px 7px; border: 1px solid var(--line); border-radius: 999px; font-size: 10.5px; color: var(--muted); }
.progress { height: 4px; background: var(--bg); border-radius: 999px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.add-card { padding: 10px; border: 1px dashed var(--line-strong); border-radius: 8px; text-align: center; color: var(--muted); font-size: 12px; cursor: pointer; }
.add-card:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
/* Sidebar */
aside h4 { font-family: var(--display); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 10px; font-weight: 600; }
.pulse { display: flex; flex-direction: column; gap: 14px; }
.pulse-stat { display: flex; justify-content: space-between; font-size: 13px; }
.pulse-stat strong { font-family: var(--mono); }
.pulse-bar { height: 6px; background: var(--bg); border-radius: 999px; overflow: hidden; }
.pulse-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #a991ff); border-radius: 999px; }
.top-list { display: flex; flex-direction: column; gap: 10px; }
.top-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; font-size: 12.5px; }
.pill-block { padding: 16px; border-radius: 10px; background: rgba(214,51,108,0.07); border: 1px solid rgba(214,51,108,0.2); }
.pill-block strong { color: var(--pink); }
@media (max-width: 1180px) {
.app { grid-template-columns: 1fr; }
aside.sidebar { border-left: none; border-top: 1px solid var(--line); }
.board { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) { .board { grid-template-columns: 1fr; } }
</style>
</head>
<body>
<div class="app">
<main>
<div class="topbar">
<span class="crumb">Northwind / Growth squad</span>
<span class="sprint-chip"><span class="dot"></span>Sprint 38 · Day 6 of 10</span>
<div class="topbar-spacer"></div>
<input class="search" placeholder="Search tickets…" />
<button class="icon-btn">⌘ Filter</button>
<button class="icon-btn">+ New</button>
</div>
<div class="filterbar">
<span class="filter-label">Members</span>
<div class="members">
<span class="av av-mira">MR</span>
<span class="av av-cale">CA</span>
<span class="av av-pri">PB</span>
<span class="av av-dev">DP</span>
<span class="av" style="background: #c8cdd9; color: #5e6478;">+1</span>
</div>
<span class="filter-label" style="margin-left: 18px;">Labels</span>
<div class="chip-row">
<span class="chip active">Active sprint</span>
<span class="chip">Bug</span>
<span class="chip">Feature</span>
<span class="chip">Research</span>
</div>
<div class="spacer"></div>
<span class="chip">Group · Status</span>
<span class="chip">Sort · Priority</span>
</div>
<div class="board">
<div class="col">
<div class="col-head"><div class="col-name"><span class="swatch gray"></span>Backlog</div><span class="col-count">5</span></div>
<div class="card">
<span class="card-tag tag-feat">Feature</span>
<div class="card-title">Add empty-state illustration to onboarding step 2</div>
<div class="card-meta"><div class="left"><span class="av-sm av-dev">DP</span><span class="pts">3 pts</span></div><span>NW-241</span></div>
</div>
<div class="card">
<span class="card-tag tag-design">Design</span>
<div class="card-title">Refresh notification settings page tokens</div>
<div class="card-meta"><div class="left"><span class="av-sm av-mira">MR</span><span class="pts">2 pts</span></div><span>NW-237</span></div>
</div>
<div class="card">
<span class="card-tag tag-research">Research</span>
<div class="card-title">Interview 5 new Enterprise admins about 2FA enforcement</div>
<div class="card-meta"><div class="left"><span class="av-sm av-pri">PB</span><span class="pts">5 pts</span></div><span>NW-225</span></div>
</div>
<div class="card">
<span class="card-tag tag-chore">Chore</span>
<div class="card-title">Migrate legacy auth logs to new schema</div>
<div class="card-meta"><div class="left"><span class="av-sm av-cale">CA</span><span class="pts">3 pts</span></div><span>NW-219</span></div>
</div>
<div class="card">
<span class="card-tag tag-bug">Bug</span>
<div class="card-title">CSV export drops emoji from project names</div>
<div class="card-meta"><div class="left"><span class="av-sm">+</span><span class="pts">1 pt</span></div><span>NW-244</span></div>
</div>
<div class="add-card">+ New card</div>
</div>
<div class="col">
<div class="col-head"><div class="col-name"><span class="swatch violet"></span>In progress</div><span class="col-count">4</span></div>
<div class="card">
<span class="card-tag tag-feat">Feature</span>
<div class="card-title">TOTP enrollment UI in member settings</div>
<div class="progress"><span style="width: 70%"></span></div>
<div class="card-meta"><div class="left"><span class="av-sm av-dev">DP</span><span class="pts">5 pts</span></div><span>NW-201</span></div>
</div>
<div class="card">
<span class="card-tag tag-feat">Feature</span>
<div class="card-title">Recovery codes — generate, download, regenerate</div>
<div class="progress"><span style="width: 45%"></span></div>
<div class="card-meta"><div class="left"><span class="av-sm av-pri">PB</span><span class="pts">3 pts</span></div><span>NW-202</span></div>
</div>
<div class="card">
<span class="card-tag tag-bug">Bug</span>
<div class="card-title">Fix focus-trap regression in command bar</div>
<div class="progress"><span style="width: 80%"></span></div>
<div class="card-meta"><div class="left"><span class="av-sm av-cale">CA</span><span class="pts">2 pts</span></div><span>NW-238</span></div>
</div>
<div class="card">
<span class="card-tag tag-design">Design</span>
<div class="card-title">2FA challenge step — visual + microcopy</div>
<div class="progress"><span style="width: 30%"></span></div>
<div class="card-meta"><div class="left"><span class="av-sm av-mira">MR</span><span class="pts">3 pts</span></div><span>NW-205</span></div>
</div>
</div>
<div class="col">
<div class="col-head"><div class="col-name"><span class="swatch amber"></span>In review</div><span class="col-count">3</span></div>
<div class="card">
<span class="card-tag tag-feat">Feature</span>
<div class="card-title">Audit-log entries for 2FA setup events</div>
<div class="card-meta"><div class="left"><span class="av-sm av-pri">PB</span><span class="pts">2 pts</span></div><span>NW-198</span></div>
</div>
<div class="card">
<span class="card-tag tag-design">Design</span>
<div class="card-title">Settings nav restructure (left rail)</div>
<div class="card-meta"><div class="left"><span class="av-sm av-mira">MR</span><span class="pts">3 pts</span></div><span>NW-189</span></div>
</div>
<div class="card">
<span class="card-tag tag-bug">Bug</span>
<div class="card-title">Workspace switcher resets scroll on close</div>
<div class="card-meta"><div class="left"><span class="av-sm av-cale">CA</span><span class="pts">1 pt</span></div><span>NW-233</span></div>
</div>
</div>
<div class="col">
<div class="col-head"><div class="col-name"><span class="swatch green"></span>Done</div><span class="col-count">6</span></div>
<div class="card" style="opacity: 0.85;">
<span class="card-tag tag-feat">Feature</span>
<div class="card-title">Workspace 2FA enforcement policy (admin)</div>
<div class="card-meta"><div class="left"><span class="av-sm av-dev">DP</span><span class="pts">5 pts</span></div><span>NW-181</span></div>
</div>
<div class="card" style="opacity: 0.85;">
<span class="card-tag tag-chore">Chore</span>
<div class="card-title">Bump auth library to 4.2.0</div>
<div class="card-meta"><div class="left"><span class="av-sm av-cale">CA</span><span class="pts">1 pt</span></div><span>NW-176</span></div>
</div>
<div class="card" style="opacity: 0.85;">
<span class="card-tag tag-research">Research</span>
<div class="card-title">2FA usability sessions (n=8)</div>
<div class="card-meta"><div class="left"><span class="av-sm av-pri">PB</span><span class="pts">3 pts</span></div><span>NW-172</span></div>
</div>
<div class="card" style="opacity: 0.85;">
<span class="card-tag tag-design">Design</span>
<div class="card-title">Settings tokens audit</div>
<div class="card-meta"><div class="left"><span class="av-sm av-mira">MR</span><span class="pts">2 pts</span></div><span>NW-168</span></div>
</div>
</div>
</div>
</main>
<aside class="sidebar">
<div class="pulse">
<div>
<h4>Sprint pulse</h4>
<div class="pulse-stat"><span>Completed</span><strong>22 of 38 pts</strong></div>
<div class="pulse-bar" style="margin-top: 6px;"><span style="width: 58%"></span></div>
</div>
<div>
<h4>Top contributors</h4>
<div class="top-list">
<div class="top-row"><span class="av-sm av-dev">DP</span><span>Devon Park</span><strong>9 pts</strong></div>
<div class="top-row"><span class="av-sm av-mira">MR</span><span>Mira Reddy</span><strong>5 pts</strong></div>
<div class="top-row"><span class="av-sm av-pri">PB</span><span>Priya Banerjee</span><strong>5 pts</strong></div>
<div class="top-row"><span class="av-sm av-cale">CA</span><span>Caleb Renner</span><strong>3 pts</strong></div>
</div>
</div>
<div>
<h4>Blocked</h4>
<div class="pill-block">
<strong>1 ticket needs unblock.</strong>
<p style="margin: 6px 0 0; color: var(--muted); font-size: 12.5px;">NW-205 (2FA challenge design) is waiting on a copy review from Brand. Mention @Sasha or move it back to backlog.</p>
</div>
</div>
</div>
</aside>
</div>
</body>
</html>
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112kHow it compares
Choose kanban-board over generic list-UI skills when you need column-based workflow boards with drag-and-drop and lane status semantics.
FAQ
What UI elements does kanban-board cover?
kanban-board covers kanban column layouts, draggable task cards, lane statuses, and workflow semantics for project-management SaaS products or internal agent dashboards that need visual pipeline tracking.
Is kanban-board only for design or also implementation?
kanban-board guides both design and implementation of kanban interfaces, including column structure, card drag behavior, and status transition semantics suitable for frontend codebase integration.