Kanban Markdown

A VSCode/Cursor extension that brings a full-featured kanban board directly into your editor. Features are stored as human-readable markdown files, making them version-controllable and easy to edit outside the board.

Kanban Board Overview

Kanban Skill

Install the kanban-skill via skills.sh to give your AI agent full context of your board and the ability to create, update, and move features directly from the terminal. Works with Claude Code, Codex, OpenCode, and any skills.sh-compatible agent.

npx skills add https://github.com/LachyFS/kanban-skill

Features

Kanban Board

5-column workflow: Backlog, To Do, In Progress, Review, Done
Sidebar view: Access the board from the activity bar without opening a panel
Drag-and-drop: Move cards between columns and reorder within columns
Split-view editor: Board on left, inline markdown editor on right
Layout toggle: Switch between horizontal and vertical board layouts
Keyboard shortcuts:
- N - Create new feature
- Esc - Close dialogs
- Cmd/Ctrl + Enter - Submit create dialog
- Enter in title - Move to description field
- Shift + Enter in title - Add new line

Feature Cards

Editor View

Priority levels: Critical, High, Medium, Low (color-coded badges)
Assignees: Assign team members to features
Due dates: Smart formatting (Overdue, Today, Tomorrow, "5d", etc.)
Labels: Tag features with multiple labels (shows up to 3 with "+X more")
Auto-generated IDs: Based on title and timestamp (e.g., implement-dark-mode-2026-01-29)
Timestamps: Created and modified dates tracked automatically

Filtering & Search

Full-text search: Search across content, IDs, assignees, and labels
Priority filter: Show only critical, high, medium, or low items
Assignee filter: Filter by team member or show unassigned items
Label filter: Filter by specific labels
Due date filters: Overdue, due today, due this week, or no due date
Clear filters button: Reset all filters at once

File Organization

Status subfolders: Features are automatically organized into subfolders by status (with migration of existing files)

Editor Integration

Rich text editing with Tiptap markdown editor
Inline frontmatter editing (dropdowns for status/priority, inputs for assignee/due date/labels)
Auto-save functionality
Live settings updates without reopening the board
Auto-refresh when files change externally
Theme integration with VSCode/Cursor (light & dark mode)

AI Agent Integration

Claude Code: Default, Plan, Auto-edit, and Full Auto modes
Codex: Suggest, Auto-edit, and Full Auto modes
OpenCode: Agent integration support
AI receives feature context (title, priority, labels, description) for informed assistance

Installation

VS Code Marketplace

Install from the VS Code Marketplace or search for "Kanban Markdown" in the Extensions view.

Open VSX (VSCodium, Cursor, etc.)

Install from Open VSX or search for "Kanban Markdown" in the Extensions view.

From VSIX (Manual)

Download the .vsix file from the releases
In VSCode: Extensions > ... > Install from VSIX
Select the downloaded file

Usage

Open the command palette (Cmd+Shift+P / Ctrl+Shift+P)
Run "Open Kanban Board"
Start creating and managing features

Features are stored as markdown files in .devtool/features/ within your workspace:

---
id: "implement-dark-mode-toggle-2026-01-25"
status: "todo"
priority: "high"
assignee: "john"
dueDate: "2026-01-25"
created: "2026-01-25T10:30:00.000Z"
modified: "2026-01-25T14:20:00.000Z"
labels: ["feature", "ui"]
order: 0
---

# Implement dark mode toggle

Add a toggle in settings to switch between light and dark themes...

Configuration

Available settings in VSCode/Cursor preferences:

Setting	Default	Description
`kanban-markdown.featuresDirectory`	`.devtool/features`	Directory for feature files
`kanban-markdown.defaultPriority`	`medium`	Default priority for new features
`kanban-markdown.defaultStatus`	`backlog`	Default status for new features
`kanban-markdown.columns`	see below	Customize column IDs, names, and colors
`kanban-markdown.aiAgent`	`claude`	AI agent (`claude`, `codex`, or `opencode`)
`kanban-markdown.showPriorityBadges`	`true`	Show priority badges on cards
`kanban-markdown.showAssignee`	`true`	Show assignee on cards
`kanban-markdown.showDueDate`	`true`	Show due date on cards
`kanban-markdown.showLabels`	`true`	Show labels on cards and in editors
`kanban-markdown.showBuildWithAI`	`true`	Show "Build with AI" button on cards
`kanban-markdown.compactMode`	`false`	Enable compact card display
`kanban-markdown.addNewCardsToTop`	`false`	Add new cards to the top of the column instead of the bottom

Default columns configuration:

[
  { "id": "backlog", "name": "Backlog", "color": "#6b7280" },
  { "id": "todo", "name": "To Do", "color": "#3b82f6" },
  { "id": "in-progress", "name": "In Progress", "color": "#f59e0b" },
  { "id": "review", "name": "Review", "color": "#8b5cf6" },
  { "id": "done", "name": "Done", "color": "#22c55e" }
]

Development

Prerequisites

Node.js 18+
pnpm

Setup

# Install dependencies
pnpm install

# Start development (watch mode)
pnpm dev

# Build for production
pnpm build

# Type checking
pnpm typecheck

# Linting
pnpm lint

Debugging

Press F5 in VSCode to launch the Extension Development Host
Open the command palette and run "Open Kanban Board"
Make changes and reload the window (Cmd+R) to see updates

Tech Stack

Extension: TypeScript, VSCode API, esbuild Webview: React 18, Vite, Tailwind CSS, Zustand, Tiptap

License

MIT