Skip to content
Get packs

Kanban Board

Generates a single-page Trello-style kanban board in HTML with four status columns, cards and swimlanes.

Source Download skill
Repository
nexu-io/html-anything
Stars
9,376
Licence
Apache-2.0
Files
2 files

What it does

This skill teaches an AI agent how to produce a single-page, Trello-like kanban board as an HTML file. The board has a filter bar for assignee, label and search, four columns (To do, In progress, In review, Done), and cards showing a title, labels, due date, avatar and comment count. It can optionally group work into swimlanes by epic or assignee. The board looks draggable but does not implement real drag-and-drop, and an example.html file shows the expected look.

Great for

  • Product or project managers who want a quick visual mockup of a task board
  • Front-end developers or designers prototyping a kanban-style UI
  • Anyone who wants a styled sample board to show stakeholders without setting up Trello or Jira

Skip it if

  • Teams needing a working task tracker with saved data, since the board has no real drag-and-drop or backend storage described in the files
  • Situations requiring real sensitive project data to be placed into a generated page that might be shared publicly, since the output is a static HTML file

Try asking

  • “Make a kanban board for our sprint with To do, In progress, In review and Done columns”
  • “Create a Trello-style task board with assignee and label filters and swimlanes grouped by epic”
  • “Build a desktop-sized kanban page showing cards with avatars and due dates”
Step-by-step guide: how to use Kanban BoardInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the Apache-2.0 licence and an attribution note.

    kanban-board.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip kanban-board.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip kanban-board.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Describe your columns, sample cards, and whether you want swimlanes so the agent fills the layout accurately.
  • Use placeholder names and dates rather than real customer or employee data when generating the sample board.
  • Open the generated HTML in a desktop-width browser window, since the template targets roughly 1440px wide screens.

What's inside

  • example.html
  • SKILL.md

Redistributed unmodified from nexu-io/html-anything under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.