roadmap-skill 0.1.4 → 0.2.3

package/CHANGELOG.md

@@ -0,0 +1,29 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.2.0] - 2026-02-10
+
+### Added
+- **Kanban Priority Sorting**: Tasks are now sorted by priority (Critical > High > Medium > Low) within each column
+- **Task Creation Modal**: Added a dedicated modal for creating tasks with priority selection
+- **Smooth Animations**: Added CSS animations for modal transitions, task card hover effects, and drag interactions
+- **Agent Progress Sync Reminder**: Enhanced prompts to remind agents to update task status using `update_task` tool
+
+### Changed
+- Converted prompt text from Chinese to English for consistency
+
+### Fixed
+- Task priority is now properly utilized in the UI
+
+## [0.1.0] - 2026-02-10
+
+### Added
+- Initial release with Web UI and Kanban board
+- MCP server with full tool support (projects, tasks, tags)
+- Local JSON file storage
+- Auto browser open functionality
+- Bilingual README (English/Chinese)

package/README.md

@@ -1,12 +1,16 @@
-# 🗺️ Roadmap Skill
+# Roadmap Skill
 
 <p align="center">
   <img src="./imgs/roadmap-skill-web.png" alt="Roadmap Skill Kanban Board" width="900">
 </p>
 
 <p align="center">
-  <strong>Visual project management with drag-and-drop Kanban boards</strong><br>
-  Manage tasks through AI assistants or directly in your browser
+  <strong>Let AI manage your projects, keep Kanban simple</strong><br>
+  Zero-config startup, local data, Agent-native support
+</p>
+
+<p align="center">
+  <a href="README.zh.md">简体中文</a> | English
 </p>
 
 <p align="center">
@@ -24,37 +28,33 @@
 
 ## Why Roadmap Skill?
 
-**Tired of juggling multiple project management tools?** Roadmap Skill brings your tasks directly into your AI workflow while offering a beautiful visual interface when you need it.
-
-### Three Ways to Work
-
-🎯 **Visual Kanban** — Drag and drop tasks between columns (Todo → In Progress → Review → Done)
-
-🤖 **AI-Powered** — Ask Claude, Cursor, or any MCP-compatible AI to create, update, and organize tasks
-
-⚡ **Instant Start** — One command launches the web interface, no configuration needed
+| Your Pain Point | How Roadmap Skill Solves It |
+|----------------|----------------------------|
+| Project data scattered in third-party clouds | **Local-first** — All data stored on your machine, full control, works offline |
+| Copy-pasting task lists when chatting with AI | **Agent-native** — AI reads/writes tasks directly, zero friction in conversation |
+| Text-only management lacks visuals, but traditional tools are bloated | **Beautiful Kanban** — Open browser when needed, drag and drop, doesn't interrupt coding flow |
+| Ideas and bugs from Vibe Coding get forgotten | **Collection Box** — Let Agent capture scattered thoughts, auto-organize todos |
+| Too many tasks, don't know where to start | **Smart Recommendations** — Agent analyzes context, proactively suggests next steps |
 
 ---
 
-## 🚀 Quick Start
-
-### Option 1: Standalone Web App
+## Quick Start (Zero Config)
 
 ```bash
+# Option 1: Launch Web Kanban
 npx roadmap-skill-web
-```
 
-Then open <http://localhost:7860> in your browser.
-
-### Option 2: Integrate with AI Assistants
+# Option 2: Integrate with your AI assistant (MCP config below)
+```
 
-Add to your AI assistant's MCP configuration:
+<details>
+<summary><b>View platform configurations</b></summary>
 
 <details>
 <summary><b>Claude Code</b></summary>
 
 ```bash
-claude mcp add roadmap npx -y roadmap-skill
+claude mcp add roadmap "npx -y roadmap-skill"
 ```
 
 </details>
@@ -246,70 +246,100 @@ Follow Windsurf MCP documentation and use:
 
 </details>
 
-Then ask your AI (e.g.):
-> "Create a project called 'Website Redesign' with tasks for homepage, about page, and contact form"
+</details>
+
+<br>
+
+After setup, simply tell your AI:
+
+> "Create a website redesign project with tasks for homepage, about page, and contact form"
+
+The AI will immediately create the project and tasks, saving them to local storage. You can open <http://localhost:7860> anytime to view the visual Kanban board.
 
 ---
 
-## 💡 What You Can Do
+## Who Is This For?
+
+| Scenario | What Roadmap Skill Does For You |
+|---------|--------------------------------|
+| **Solo Developers** | Manage personal projects through conversation, avoid getting lost in complex tools |
+| **AI Power Users** | Let Agent directly read/write tasks, goodbye to copy-pasting hassle |
+| **Vibe Coders** | Capture inspirations on the fly, automatically save to collection box |
+| **Small Teams** | Simple task assignment and progress tracking, zero learning curve |
+| **Privacy-conscious Users** | Data stored completely locally, never uploaded to any cloud service |
+
+---
+
+## Typical Use Cases
+
+### 1. Capture Inspiration During Vibe Coding
 
-### Plan Projects Visually
+When discussing new features with AI, suddenly think of an optimization:
 
-- See all your tasks organized in Kanban columns
-- Switch between compact and detailed card views
-- Filter by status, project, or search keywords
-- Drag tasks to update their status instantly
+> "Add this to my collection: Refactor user auth module using JWT + Refresh Token scheme"
 
-### Work with AI
+AI automatically creates the task, and you'll see it in the Kanban later.
 
-- "Show me all high priority tasks due this week"
-- "Move the authentication task to in-progress"
-- "Create a new project for mobile app with 5 initial tasks"
-- "What's my overall progress across all projects?"
+### 2. Let AI Plan Project Structure
 
-### Collaborate & Track
+Starting a new project? Just ask AI to break it down:
 
-- Assign tasks to team members
-- Set due dates and priorities
-- Add tags to organize related work
-- Track completion statistics
+> "Create an e-commerce admin dashboard project with product management, order processing, and user permissions modules, broken down into specific development tasks"
+
+AI auto-creates the project structure. Just open the Kanban in browser and drag tasks to start working.
+
+### 3. Progress Tracking and Status Updates
+
+Check progress anytime during coding:
+
+> "What's the completion percentage of my current project? What high-priority tasks haven't started yet?"
+
+> "Mark the user login feature as completed and create corresponding test tasks"
+
+### 4. Team Collaboration and Assignment
+
+Quickly assign in conversation:
+
+> "Assign frontend page tasks to @zhangsan, deadline this Friday, priority high"
+
+Team members can view their task list in the Kanban.
 
 ---
 
-## 📦 Installation
+## Installation
 
 ### Requirements
 
-- Node.js 18+ (20+ recommended)
+- Node.js 18+ (recommended 20+)
 
-### One-Line Install
+### Global Install
 
 ```bash
 npm install -g roadmap-skill
 ```
 
-### Or Use Without Installing
+### Use Without Installing
 
 ```bash
-npx roadmap-skill-web      # Just the web interface
+npx roadmap-skill-web      # Web Kanban only
 npx roadmap-skill          # Full MCP server
 ```
 
 ---
 
-## 🎨 Interface Features
+## Core Features
 
 | Feature | Description |
-|---------|-------------|
-| **Kanban Board** | Four columns: Todo, In Progress, Review, Done |
-| **Drag & Drop** | Move tasks between columns to update status |
-| **Quick Add** | Click "+" on any column to add tasks instantly |
-| **Dual Views** | Compact mode for overview, Detailed mode for full info |
-| **Smart Search** | Find tasks across all projects instantly |
+|--------|-------------|
+| **Kanban View** | Four columns: Todo, In Progress, Review, Done |
+| **Drag and Drop** | Drag tasks to update status, WYSIWYG |
+| **Quick Create** | Click "+" button on any column to instantly add tasks |
+| **Dual View** | Compact mode for overview, detailed mode for full info |
+| **Smart Search** | Quick task search across all projects, keyword filtering |
 
 ---
 
-## 🔧 Supported Platforms
+## Supported Platforms
 
 - ✅ **Claude Code** — Command-line AI assistant
 - ✅ **Claude Desktop** — Full MCP integration
@@ -319,12 +349,39 @@ npx roadmap-skill          # Full MCP server
 
 ---
 
-## 📄 License
+## Data Storage
+
+Roadmap Skill uses **pure local JSON file storage**. All data is saved in your user directory:
+
+| Platform | Storage Path |
+|---------|-------------|
+| macOS | `~/.roadmap-skill/data/` |
+| Linux | `~/.roadmap-skill/data/` |
+| Windows | `%USERPROFILE%\.roadmap-skill\data\` |
+
+### Data File Structure
+
+```
+.roadmap-skill/
+└── data/
+    ├── projects.json      # Project list
+    ├── tasks.json         # All tasks
+    └── tags.json          # Tag definitions
+```
+
+- ✅ **Fully offline** — No internet connection needed
+- ✅ **Portable** — Copy folder to backup/transfer
+- ✅ **Version control friendly** — JSON format for easy diff
+- ✅ **Privacy secure** — Data never leaves your machine
+
+---
+
+## License
 
 MIT © [shiquda](https://github.com/shiquda)
 
 ---
 
 <p align="center">
-  <strong>Star ⭐ this repo if you find it helpful!</strong>
+  <strong>If this project helps you, please consider giving it a star!</strong>
 </p>

package/README.zh.md

@@ -0,0 +1,387 @@
+# Roadmap Skill
+
+<p align="center">
+  <img src="./imgs/roadmap-skill-web.png" alt="Roadmap Skill Kanban Board" width="900">
+</p>
+
+<p align="center">
+  <strong>让 AI 帮你管理项目，让看板回归简洁</strong><br>
+  零配置启动，本地数据，Agent 原生支持
+</p>
+
+<p align="center">
+  简体中文 | <a href="README.md">English</a>
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/roadmap-skill"><img src="https://img.shields.io/npm/v/roadmap-skill" alt="npm version"></a>
+  <a href="https://github.com/shiquda/roadmap-skill/blob/main/LICENSE"><img src="https://img.shields.io/github/license/shiquda/roadmap-skill" alt="License"></a>
+  <a href="https://www.npmjs.com/package/roadmap-skill"><img src="https://img.shields.io/npm/dm/roadmap-skill" alt="npm downloads"></a>
+</p>
+
+<p align="center">
+  <a href="https://insiders.vscode.dev/redirect/mcp/install?name=roadmap&config=%7B%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22roadmap-skill%22%5D%7D"><img src="https://img.shields.io/badge/VS_Code-Install%20MCP%20Server-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white" alt="Install in VS Code"></a>
+  <a href="https://insiders.vscode.dev/redirect/mcp/install?name=roadmap&config=%7B%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22roadmap-skill%22%5D%7D&quality=insiders"><img src="https://img.shields.io/badge/VS_Code_Insiders-Install%20MCP%20Server-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white" alt="Install in VS Code Insiders"></a>
+</p>
+
+---
+
+## 为什么选择 Roadmap Skill？
+
+| 你的困扰 | Roadmap Skill 的解决方式 |
+|---------|-------------------------|
+| 项目数据散落在第三方云端，缺乏安全感 | **本地优先** — 所有数据存储在你的电脑，完全掌控，离线可用 |
+| 和 AI 对话时需要来回粘贴任务列表 | **Agent 原生** — AI 直接读写任务，对话中自然管理，零摩擦 |
+| 纯文本管理缺乏直观性，但传统工具太重 | **美观看板** — 需要时打开浏览器，拖拽即可，不打扰编码流 |
+| Vibe Coding 中的灵感、Bug 随手记在某处就忘了 | **收集箱** — 让 Agent 帮你沉淀零散想法，自动整理待办 |
+| 任务太多不知从何开始，优先级全靠猜 | **智能推荐** — Agent 分析项目上下文，主动建议下一步工作 |
+
+---
+
+## 零配置快速开始
+
+```bash
+# 方式一：启动 Web 看板
+npx roadmap-skill-web
+
+# 方式二：集成到你的 AI 助手（MCP 配置如下）
+```
+
+<details>
+<summary><b>查看各平台配置</b></summary>
+
+<details>
+<summary><b>Claude Code</b></summary>
+
+```bash
+claude mcp add roadmap "npx -y roadmap-skill"
+```
+
+</details>
+
+<details>
+<summary><b>Claude Desktop</b></summary>
+
+```json
+{
+  "mcpServers": {
+    "roadmap": {
+      "command": "npx",
+      "args": ["-y", "roadmap-skill"]
+    }
+  }
+}
+```
+
+</details>
+
+<details>
+<summary><b>Copilot</b></summary>
+
+```bash
+/mcp add
+```
+
+Or edit `~/.copilot/mcp-config.json`:
+
+```json
+{
+  "mcpServers": {
+    "roadmap": {
+      "type": "local",
+      "command": "npx",
+      "args": ["-y", "roadmap-skill"]
+    }
+  }
+}
+```
+
+</details>
+
+<details>
+<summary><b>Cursor</b></summary>
+
+```json
+{
+  "mcpServers": {
+    "roadmap": {
+      "command": "npx",
+      "args": ["-y", "roadmap-skill"]
+    }
+  }
+}
+```
+
+</details>
+
+<details>
+<summary><b>JetBrains (via Cline)</b></summary>
+
+Install Cline plugin, then add to `cline_mcp_settings.json`:
+
+```json
+{
+  "mcpServers": {
+    "roadmap": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["-y", "roadmap-skill"]
+    }
+  }
+}
+```
+
+</details>
+
+<details>
+<summary><b>Roo Code</b></summary>
+
+```json
+{
+  "mcpServers": {
+    "roadmap": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["-y", "roadmap-skill"]
+    }
+  }
+}
+```
+
+</details>
+
+<details>
+<summary><b>Opencode</b></summary>
+
+Edit `~/.config/opencode/opencode.json`:
+
+```json
+{
+  "$schema": "https://opencode.ai/config.json",
+  "mcp": {
+    "roadmap": {
+      "type": "local",
+      "command": [
+        "npx",
+        "-y",
+        "roadmap-skill"
+      ],
+      "enabled": true
+    }
+  }
+}
+```
+
+</details>
+
+<details>
+<summary><b>Trae</b></summary>
+
+Go to `Settings` -> `MCP` -> `Add new MCP Server`:
+
+```json
+{
+  "mcpServers": {
+    "roadmap": {
+      "command": "npx",
+      "args": ["-y", "roadmap-skill"]
+    }
+  }
+}
+```
+
+</details>
+
+<details>
+<summary><b>VS Code</b></summary>
+
+```json
+{
+  "mcp": {
+    "servers": {
+      "roadmap": {
+        "command": "npx",
+        "args": ["-y", "roadmap-skill"]
+      }
+    }
+  }
+}
+```
+
+</details>
+
+<details>
+<summary><b>Windsurf</b></summary>
+
+Follow Windsurf MCP documentation and use:
+
+```json
+{
+  "mcpServers": {
+    "roadmap": {
+      "command": "npx",
+      "args": ["-y", "roadmap-skill"]
+    }
+  }
+}
+```
+
+</details>
+
+<details>
+<summary><b>Zed</b></summary>
+
+```json
+{
+  "context_servers": {
+    "roadmap": {
+      "command": {
+        "path": "npx",
+        "args": ["-y", "roadmap-skill"]
+      }
+    }
+  }
+}
+```
+
+</details>
+
+</details>
+
+<br>
+
+启动后，直接告诉你的 AI：
+
+> "帮我创建一个网站重构项目，包含首页、关于页和联系表单的开发任务"
+
+AI 会立即为你创建项目和任务，并自动写入本地存储。你可以随时打开 <http://localhost:7860> 查看可视化看板。
+
+---
+
+## 适合谁使用
+
+| 场景 | Roadmap Skill 能为你做什么 |
+|------|---------------------------|
+| **独立开发者** | 用对话管理个人项目，避免在复杂工具中迷失 |
+| **AI 重度用户** | 让 Agent 直接读写任务，告别来回粘贴的繁琐 |
+| **Vibe Coder** | 随手让 AI 记录灵感，自动沉淀到收集箱 |
+| **小团队协作** | 简单的任务分配与进度追踪，无需学习成本 |
+| **隐私敏感者** | 数据完全本地存储，不上传任何云端服务 |
+
+---
+
+## 典型使用场景
+
+### 1. Vibe Coding 中的灵感收集
+
+正在和 AI 讨论新功能时，突然想到一个优化点：
+
+> "帮我把这个想法记到收集箱：重构用户认证模块，使用 JWT + Refresh Token 方案"
+
+AI 自动创建任务，稍后你打开看板就能看到待整理的想法。
+
+### 2. 让 AI 规划项目结构
+
+开始一个新项目时，直接让 AI 帮你分解：
+
+> "创建一个电商后台管理项目，包含商品管理、订单处理、用户权限三个模块，每个模块分解为具体的开发任务"
+
+AI 自动创建项目结构，你只需要在浏览器中打开看板，拖拽任务开始工作。
+
+### 3. 进度追踪与状态更新
+
+编码过程中随时询问：
+
+> "我当前项目完成了多少百分比？有哪些高优先级任务还没开始？"
+
+> "把用户登录功能的状态改为已完成，并创建对应的测试任务"
+
+### 4. 团队协作分配
+
+在对话中快速分配：
+
+> "把前端页面的任务分配给 @张三，截止日期设为本周五，优先级设为高"
+
+团队成员可以在看板中查看自己的任务列表。
+
+---
+
+## 安装
+
+### 环境要求
+
+- Node.js 18+ (推荐 20+)
+
+### 全局安装
+
+```bash
+npm install -g roadmap-skill
+```
+
+### 免安装使用
+
+```bash
+npx roadmap-skill-web      # 仅启动 Web 看板
+npx roadmap-skill          # 完整 MCP 服务器
+```
+
+---
+
+## 核心功能
+
+| 功能 | 说明 |
+|------|------|
+| **看板视图** | 四列布局：待办、进行中、审核中、已完成 |
+| **拖拽操作** | 拖拽任务即可更新状态，所见即所得 |
+| **快速创建** | 点击任意列的 "+" 按钮，瞬间添加新任务 |
+| **双重视图** | 紧凑模式概览全局，详细模式查看完整信息 |
+| **智能搜索** | 跨所有项目快速查找任务，支持关键词过滤 |
+
+---
+
+## 支持平台
+
+- ✅ **Claude Code** — 命令行 AI 助手
+- ✅ **Claude Desktop** — 完整 MCP 集成
+- ✅ **Cursor** — AI 驱动的 IDE
+- ✅ **VS Code** — 通过 Cline 或 Roo Code 扩展
+- ✅ **任意 MCP 客户端** — 标准 MCP 协议支持
+
+---
+
+## 数据存储
+
+Roadmap Skill 采用**纯本地 JSON 文件存储**，所有数据保存在你的用户目录下：
+
+| 平台 | 存储路径 |
+|------|---------|
+| macOS | `~/.roadmap-skill/data/` |
+| Linux | `~/.roadmap-skill/data/` |
+| Windows | `%USERPROFILE%\.roadmap-skill\data\` |
+
+### 数据文件结构
+
+```
+.roadmap-skill/
+└── data/
+    ├── projects.json      # 项目列表
+    ├── tasks.json         # 所有任务
+    └── tags.json          # 标签定义
+```
+
+- ✅ **完全离线可用** — 无需网络连接
+- ✅ **数据可迁移** — 直接复制文件夹即可备份
+- ✅ **版本控制友好** — JSON 格式便于 diff 查看变更
+- ✅ **隐私安全** — 数据永远不会离开你的电脑
+
+---
+
+## License
+
+MIT © [shiquda](https://github.com/shiquda)
+
+---
+
+<p align="center">
+  <strong>如果这个项目对你有帮助，欢迎 Star 支持！</strong>
+</p>