Taskboard

A real-time Kanban dashboard for TaskMaster AI projects. This tool provides a beautiful, live visualization of your TaskMaster AI tasks, automatically updating as your AI-assisted development workflow progresses.

Created by @5aikat

TaskMaster AI, created by Eyal Toledano, is an AI-powered project management system that breaks down complex software development projects into manageable, structured tasks. It integrates seamlessly with AI-driven development environments like Cursor AI, Windsurf, Roo, and others, helping maintain context and organization throughout the development process.

This taskboard serves as the perfect visual companion, transforming your structured TaskMaster AI tasks into an intuitive Kanban board that updates in real-time. Whether you're working with Claude, Cursor AI, or other AI assistants, you'll have a live dashboard showing exactly where your project stands - making AI-assisted development more organized and productive than ever.

From CLI Dashboard to Beautiful Dashboard

Transform your TaskMaster AI experience from overwhelming JSON files to intuitive visual project management.

Before: TaskMaster AI Native CLI Dashboard

The original TaskMaster AI CLI dashboard: functional, but text-heavy and hard to scan or share progress screenshot with others

After: Taskboard Dashboard

The same tasks transformed into a beautiful, intuitive Kanban dashboard with real-time updates, progress tracking, metrics, and professional presentation

The Transformation:

• 📊 Instant Project Insights: See progress, bottlenecks, and priorities at a glance instead of parsing JSON manually
• 🎨 Professional Presentation: Perfect for client demos, team standups, and stakeholder updates
• ⚡ Real-time Intelligence: Live metrics, progress bars, and status indicators vs static text files
• 🧭 Intuitive Navigation: Organized Kanban columns instead of nested JSON structures
• 👥 Team-Friendly: Share visual dashboards instead of asking team members to read raw JSON

Features

• 📋 Live Kanban Visualization: Transform TaskMaster AI tasks into a beautiful Kanban board
• 🔄 Real-time Updates: Automatically refreshes when TaskMaster AI updates your tasks.json
• 🎯 Complete Task Details: View titles, descriptions, priorities, subtasks, and dependencies
• 🤖 AI Development Workflow: Perfect companion for AI-assisted development with Claude, Cursor, and others
• 🚀 Zero Configuration: Works immediately with any TaskMaster AI project
• 🔌 Non-intrusive: Runs independently without affecting your development workflow
• 🌐 Multi-project Support: Each TaskMaster AI project gets its own dashboard instance

Prerequisites

• Node.js 16 or higher
• A project with TaskMaster AI initialized
• The .taskmaster/tasks/tasks.json file created by TaskMaster AI

Setting up TaskMaster AI First

If you haven't set up TaskMaster AI yet, visit the official repository for installation instructions. TaskMaster AI can be integrated as:

• An MCP server with Claude Desktop
• A project management system within Cursor AI, Windsurf, Roo, and other AI development environments
• A standalone task management tool for AI-assisted development projects

Installation

npm install -g claude-taskboard

Or with yarn:

yarn global add claude-taskboard

Usage

Navigate to any TaskMaster AI-enabled project and run:

cd /path/to/your/taskmaster-project
taskboard serve

The dashboard will automatically:

1. Find an available port (default: 5000)
2. Start watching your .taskmaster/tasks/tasks.json file
3. Open your browser to the live dashboard

Command Options

taskboard serve [options]

Options:
  -p, --port <number>    Port to run the server on (default: 5000)
  -o, --no-open         Don't open browser on start
  -w, --watch <path>    Path to watch for tasks.json (default: current directory)
  -h, --help           Display help for command

Examples

Run on a specific port:

taskboard serve --port 5050

Watch a different directory:

taskboard serve --watch /path/to/project

Start without opening browser:

taskboard serve --no-open

How It Works

1. TaskMaster AI manages your project tasks in .taskmaster/tasks/tasks.json
2. As you work with AI assistants (Claude, Cursor AI, etc.), TaskMaster AI updates task statuses
3. This dashboard watches the tasks file and reflects changes instantly
4. Tasks are displayed in columns: Pending, In Progress, Review, and Completed
5. You get a real-time visual overview of your AI-assisted development progress

Task Visualization

The dashboard displays TaskMaster AI tasks with:

• Title and Description: Complete task information from TaskMaster AI
• Priority Indicators: 🔴 High, 🟡 Medium, 🟢 Low priority tasks
• Task ID: Unique identifiers matching TaskMaster AI's task system
• Subtask Progress: Visual progress bars showing completed/total subtasks
• Dependencies: Clear indication of task dependencies and blockers
• Status Tracking: Real-time status updates as AI assistants complete work

Integration with AI Development Workflow

This dashboard enhances your AI-assisted development experience by:

• Visual Context: See all TaskMaster AI tasks at a glance while working with Claude or other AI assistants
• Progress Tracking: Monitor how AI-assisted work progresses through your project
• Team Collaboration: Share live dashboard views with team members
• Project Overview: Maintain big-picture awareness during detailed AI-assisted coding sessions

Troubleshooting

Dashboard shows "Tasks file not found"

• Ensure TaskMaster AI is initialized in your project: npm install @taskmaster-ai/cli
• Check that .taskmaster/tasks/tasks.json exists
• Verify you're running the command from the correct project root
• Refer to TaskMaster AI documentation

Port already in use

• The dashboard will automatically find the next available port (5000-5999)
• Or specify a different port with --port

Changes not reflecting

• Ensure TaskMaster AI is actively updating the tasks.json file
• Check that your AI assistant (Claude, Cursor AI, etc.) is properly integrated with TaskMaster AI
• Try refreshing the browser or restarting the dashboard

Related Projects

• TaskMaster AI - The main project management system this dashboard visualizes
• Task-Master.dev - Official TaskMaster AI website and documentation
• Claude Desktop - AI assistant that integrates with TaskMaster AI via MCP
• Cursor AI - AI-powered code editor with TaskMaster AI integration

Development

To contribute to this visualization tool:

git clone https://github.com/shokks/taskboard.git
cd taskboard
npm install
npm run dev

Credits

This project is a visualization companion for TaskMaster AI, created by Eyal Toledano. TaskMaster AI revolutionizes AI-assisted development by providing structured task management that keeps AI agents focused and productive.

Version History

v1.0.7 (Current)

Latest Release - August 2025

• Added TaskMaster-like dependency ordering to dashboard
• Pending tasks now sorted by dependency readiness (ready tasks first)
• Visual dependency indicators: "Ready ✅" for available tasks, "Waiting for #X ⏳" for blocked tasks
• Fixed issue where tasks appeared in JSON array order instead of logical dependency order
• Dashboard now matches TaskMaster's next-task logic for better workflow guidance

v1.0.5

August 2025

• Improved documentation with accurate CLI dashboard comparison
• Updated screenshots and before/after descriptions

v1.0.4

August 2025

• Perfect logo alignment with text baseline
• Dynamic version display from package.json
• Updated installation commands for correct package name

v1.0.3

August 2025

• Initial release with real-time Kanban dashboard
• TaskMaster AI integration and task monitoring
• Modern UI with dark mode support
• Zero configuration setup

License

MIT

Contributing

Contributions are welcome! This project aims to enhance the TaskMaster AI ecosystem with better visualization tools. Please feel free to submit issues and pull requests.

For TaskMaster AI core functionality, please contribute to the main TaskMaster AI repository.