Spins up a full kanban board with draggable-looking cards, swimlanes, and all the trappings of Trello or Jira. You get four columns out of the box (backlog, in progress, review, done), a top filter bar for assignees and labels, and a collapsible sidebar showing sprint pulse metrics. It reads your design system, infers squad composition from the prompt, and outputs a working HTML prototype in one shot. Trigger it with "kanban", "task board", or even "看板" if you're working in Chinese contexts. Honestly most useful when you need to mock up project tracking UIs fast or show stakeholders what a sprint board could look like without opening Figma.

skills.sh installs
238
GitHub stars
106.9K
last updated
Aug 21, 2026

Install

$ npx -y skills add nexu-io/open-design --skill kanban-board --agent claude-code

Installs into .claude/skills of the current project.

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>

Sponsors

Details

Repository
github.com/nexu-io/open-design
Categories
Git & Pull Requests, Code Review & Quality, Productivity & Planning, Design & UI/UX
First seen
Jun 3, 2026

More from nexu-io/open-design

All 217
1mjunaidca avatarpolymarket-strategy-advisormjunaidca/polymarket-skillsUse this skill whenever the user wants trading strategy advice, trade recommendations, portfolio guidance, or prediction market analysis that leads to actionabl235skills.sh installs
2davila7 avatargepettodavila7/claude-code-templatesCreates detailed, sectionized implementation plans through research, stakeholder interviews, and multi-LLM review. Use when planning features that need thorough234skills.sh installs
3everyinc avatardeploy-docseveryinc/compound-engineering-pluginValidate and prepare documentation for GitHub Pages deployment234skills.sh installs
4davila7 avatarweb-quality-auditdavila7/claude-code-templatesComprehensive web quality audit covering performance, accessibility, SEO, and best practices. Use when asked to "audit my site", "review web quality", "run ligh232skills.sh installs
5guia-matthieu avatarlanding-page-optimizerguia-matthieu/clawfu-skillsOptimize landing pages for maximum conversions using proven frameworks from Unbounce and Oli Gardner—apply the "one goal, one message, one action" principle wit232skills.sh installs
6sundial-org avatarclawdbot-backupsundial-org/awesome-openclaw-skillsBackup and restore ClawdBot configuration, skills, commands, and settings. Sync across devices, version control with git, automate backups, and migrate to new m231skills.sh installs