skills.rest
Keimoshi
KeimoshiCOMMUNITY
Explore all skills by this author →
GitHub

kanban-board

Generates a single-screen HTML kanban board prototype with columns, cards, and sprint sidebar.

Updated May 20, 2026
Search Tags:#design system#generate#kanban#task board#ui mockup#html prototype#sprint board
One-click install
npx skills add https://github.com/Keimoshi/Silverloft --skill kanban-board-keimoshi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: kanban-board
Source: https://github.com/Keimoshi/Silverloft/tree/main/open-design-port/skills/kanban-board
Command: npx skills add https://github.com/Keimoshi/Silverloft --skill kanban-board-keimoshi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designers and product teams often need a quick, realistic kanban or sprint board mockup to communicate workflow states, but building one from scratch in HTML is repetitive and time-consuming. ## Core Features & Use Cases - Four-Column Board Layout: Renders Backlog, In progress, In review, and Done columns with count chips, tag-coded cards, assignee avatars, and point estimates. - Sprint Pulse Sidebar: Includes a progress bar, top contributor list, and a blocked-ticket callout for realistic sprint context. - Filter Bar and Top Bar: Adds member filters, label chips, search, and a sprint status chip for an authentic operations tool feel. - Use Case: Ask for a kanban board for a 5-person growth squad mid-sprint and receive a complete single-file HTML prototype styled from the active design system. ## Quick Start Ask the assistant to make a kanban board for your squad's current sprint with backlog, in progress, review, and done columns.

Frequently Asked Questions about kanban-board

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a kanban board mockup in HTML?▼

Describe your squad, sprint number, columns, and team members in a prompt, and the skill produces a single HTML file with four columns, tagged cards, avatars, and point estimates. The output uses one inline style block and semantic markup.

What triggers the kanban board skill?▼

The skill activates when a brief mentions kanban, task board, sprint board, trello, jira board, or the Chinese term 看板. It is configured for desktop prototype mode in operations scenarios.

Does the kanban board output require external CSS or JavaScript?▼

No, the output is a single self-contained HTML document with one inline style block and no external dependencies. Cards use hover styling to suggest draggability without actual drag-and-drop logic.

Can I customize the columns and card content in the board?▼

Yes, the workflow reads squad name, sprint number, columns, and member roster from your brief before generating the layout. It typically renders 3 to 6 cards per column with tags, titles, assignees, and estimates.

What are the limitations of this kanban prototype?▼

The board is a static visual prototype, not a functional application, so cards are not actually draggable and filters do not execute queries. It is intended for design communication and preview rather than production task management.

Related Skills

Explore More Design & Creative Skills→
caobingshengcaobingsheng
1

design-md

Analyze Stitch projects to generate DESIGN.md files documenting design systems.

Community
Advanced
wodsmithwodsmith
2

drag-and-drop

Implement drag-and-drop interactions for sortable lists and kanban boards.

Official
Advanced
az9713az9713

dashboard

Generate a single-screen admin analytics dashboard HTML from a brief.

Community
Intermediate
ArtyMcLabinArtyMcLabin
8

trello-fetch

Fetch Trello board JSON exports via authenticated browser sessions and dated TrainingData files.

Community
Basic