Agent skill
plans-kanban
Install this agent skill to your Project
npx add-skill https://github.com/binhmuc/autobot-review/tree/main/.claude/skills/plans-kanban
SKILL.md
plans-kanban
Plans dashboard server with progress tracking and timeline visualization.
⚠️ Installation Required
This skill requires npm dependencies. Run one of the following:
# Option 1: Install via ClaudeKit CLI (recommended)
ck init # Runs install.sh which handles all skills
# Option 2: Manual installation
cd .claude/skills/plans-kanban
npm install
Dependencies: gray-matter
Without installation, you'll get Error 500 when viewing plan details.
Purpose
Visual dashboard for viewing plan directories with:
- Progress tracking per plan
- Timeline/Gantt visualization
- Phase status indicators
- Activity heatmap
Quick Start
# View plans dashboard
node .claude/skills/plans-kanban/scripts/server.cjs \
--dir ./plans \
--open
# Remote access (all interfaces)
node .claude/skills/plans-kanban/scripts/server.cjs \
--dir ./plans \
--host 0.0.0.0 \
--open
# Background mode
node .claude/skills/plans-kanban/scripts/server.cjs \
--dir ./plans \
--background
# Stop all running servers
node .claude/skills/plans-kanban/scripts/server.cjs --stop
Slash Command
Use /kanban for quick access:
/kanban plans/ # View plans dashboard
/kanban --stop # Stop kanban server
Features
Dashboard View
- Plan cards with progress bars
- Phase status breakdown (completed, in-progress, pending)
- Last modified timestamps
- Issue and branch links
- Priority indicators
Timeline Visualization
- Gantt-style timeline of plans
- Duration tracking
- Activity heatmap
Design
- Glassmorphism UI with dark mode
- Responsive grid layout
- Warm accent colors
CLI Options
| Option | Description | Default |
|---|---|---|
--dir <path> |
Plans directory | - |
--port <number> |
Server port | 3500 |
--host <addr> |
Host to bind (0.0.0.0 for remote) |
localhost |
--open |
Auto-open browser | false |
--background |
Run in background | false |
--stop |
Stop all servers | - |
Architecture
scripts/
├── server.cjs # Main entry point
└── lib/
├── port-finder.cjs # Port allocation (3500-3550)
├── process-mgr.cjs # PID management
├── http-server.cjs # HTTP routing
├── plan-parser.cjs # Plan.md parsing
├── plan-scanner.cjs # Directory scanning
├── plan-metadata-extractor.cjs # Rich metadata
└── dashboard-renderer.cjs # HTML generation
assets/
├── dashboard-template.html # Dashboard HTML template
├── dashboard.css # Styles
└── dashboard.js # Client interactivity
HTTP Routes
| Route | Description |
|---|---|
/ or /kanban |
Dashboard view |
/kanban?dir=<path> |
Dashboard for specific directory |
/api/plans |
JSON API for plans data |
/api/plans?dir=<path> |
JSON API for specific directory |
/assets/* |
Static assets |
/file/* |
Local file serving |
Remote Access
When using --host 0.0.0.0, the server auto-detects your local network IP:
{
"success": true,
"url": "http://localhost:3500/kanban?dir=...",
"networkUrl": "http://192.168.2.75:3500/kanban?dir=...",
"port": 3500
}
Use networkUrl to access from other devices on the same network.
Plan Structure
The dashboard scans for directories containing plan.md files:
plans/
├── 251215-feature-a/
│ ├── plan.md # Required - parsed for phases
│ ├── phase-01-setup.md
│ └── phase-02-impl.md
├── 251214-feature-b/
│ └── plan.md
└── templates/ # Excluded by default
Troubleshooting
Port in use: Server auto-increments from 3500-3550
No plans found: Ensure directories contain plan.md files
Remote access denied: Use --host 0.0.0.0 to bind all interfaces
PID files: Located at /tmp/plans-kanban-*.pid
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
binhmuc/autobot-review
Debugging
Systematic debugging framework ensuring root cause investigation before fixes. Includes four-phase debugging process, backward call stack tracing, multi-layer validation, and verification protocols. Use when encountering bugs, test failures, unexpected behavior, performance issues, or before claiming work complete. Prevents random fixes, masks over symptoms, and false completion claims.
binhmuc/autobot-review
ui-ux-pro-max
Frontend UI/UX design intelligence - activate FIRST when user requests beautiful, stunning, gorgeous, or aesthetic interfaces. The primary skill for design decisions before implementation. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check frontend UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
binhmuc/autobot-review
mcp-builder
Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).
binhmuc/autobot-review
planning
Use when you need to plan technical solutions that are scalable, secure, and maintainable.
binhmuc/autobot-review
Problem-Solving Techniques
Apply systematic problem-solving techniques for complexity spirals (simplification cascades), innovation blocks (collision-zone thinking), recurring patterns (meta-pattern recognition), assumption constraints (inversion exercise), scale uncertainty (scale game), and dispatch when stuck. Techniques derived from Microsoft Amplifier project patterns adapted for immediate application.
binhmuc/autobot-review
payment-integration
Implement payment integrations with SePay (Vietnamese payment gateway with VietQR, bank transfers, cards) and Polar (global SaaS monetization platform with subscriptions, usage-based billing, automated benefits). Use when integrating payment processing, implementing checkout flows, managing subscriptions, handling webhooks, processing bank transfers, generating QR codes, automating benefit delivery, or building billing systems. Supports authentication (API keys, OAuth2), product management, customer portals, tax compliance (Polar as MoR), and comprehensive SDK integrations (Node.js, PHP, Python, Go, Laravel, Next.js).
Didn't find tool you were looking for?