Todo Visualizer Agent Skill

When to Use

Use this skill when the user wants to:

• Visualize TODO files in an interactive dashboard
• Track task completion progress
• Generate HTML reports from markdown TODOs (especially for learning roadmaps)
• Analyze timelines containing weeks/days (supports "Week/Day" and "第X周/第X天" formats)

How to Use

Follow these steps to generate an HTML dashboard from a TODO file:

Step 1: Read the TODO File

Use the

Read

tool to read the markdown TODO file path provided by the user.

Step 2: Analyze the Content

Use LLM analysis to extract and structure the information. IMPORTANT: You should check the

examples/

directory for reference formats if the input file structure is complex.

• examples/table_style.md

  : Standard table format

• examples/list_style.md

  : Standard Markdown list format (

  - [ ]

  )

• examples/mixed_style.md

  : Mixed format

Extraction Rules:

1. Identify the structure: Look for sections representing time periods.

   • Weeks: "Week 1", "第一周", "Week One", etc.
   • Days: "Day 1", "第一天", "Monday", "周一", etc.
   • If no explicit timeline: Group tasks by their Headers (H1, H2) as "Weeks" or "Categories".

2. Extract tasks: Parse each task with its associated metadata.

   • Focus: Often found in table columns like "Focus", "重点", "主题".
   • Tasks: The actual work items.
   • Nested Lists: Flatten nested tasks into the main list but preserve hierarchy in the text (e.g., "Parent > Child"). Count every checkbox as a task.

3. Detect completion status: Analyze patterns that indicate completed vs incomplete tasks.

   • Completed:

     ✓

     ,

     DONE

     ,

     ✅

     ,

     [x]

     ,

     [X]

     ,

     完成

     ,

     已完成

     .
   • Incomplete: Empty cells,

     [ ]

     ,

     TODO

     ,

     未开始

     .
   • Note: If a row has mixed signals, prioritize explicit completion markers.

4. Organize by timeline: Structure tasks chronologically.

Step 3: Read the Template

Read the HTML template from

assets/template.html

using the

Read

tool.

Step 4: Inject the Data

Replace the placeholder data in the template with the extracted TODO information. You need to replace the

const todoData = { ... };

block in the script.

Data Structure Requirements:

• title

  : Document title (e.g., "Linux Learning Roadmap").

• weeks

  : Array of week objects.

  • weekNumber

    : Integer (1, 2, ...).

  • title

    : Display title (e.g., "Week 1: Basics" or "第一周：基础知识").

  • days

    : Array of day objects.

    • day

      : Display string (e.g., "Day 1" or "Section 1").

    • focus

      : (Optional) Focus area string.

    • tasks

      : Array of task objects.

      • id

        : Unique string ID (e.g., "w1-d1-1").

      • text

        : Task description.

      • completed

        : Boolean

        true

        or

        false

        .

• totalTasks

  : Integer count.

• completedTasks

  : Integer count.

Step 5: Write the Output

Use the

Write

tool to save the generated HTML to a file (e.g.,

todo-dashboard.html

) in the same directory as the source TODO file.

• If the user provided a specific output filename, use it.
• Otherwise, append

  .html

  to the original filename or use

  dashboard.html

  .

Example

Input (List Format)

# Project Alpha

## Phase 1
- [x] Setup Repo
- [ ] Design DB
    - [ ] Users Table
    - [ ] Posts Table

Extracted Data Structure

{
  "title": "Project Alpha",
  "weeks": [
    {
      "weekNumber": 1,
      "title": "Phase 1",
      "days": [
        {
          "day": "Tasks",
          "focus": "General",
          "tasks": [
            {
              "id": "1-1",
              "text": "Setup Repo",
              "completed": true
            },
            {
              "id": "1-2",
              "text": "Design DB",
              "completed": false
            },
            {
              "id": "1-3",
              "text": "Design DB > Users Table",
              "completed": false
            },
            {
              "id": "1-4",
              "text": "Design DB > Posts Table",
              "completed": false
            }
          ]
        }
      ]
    }
  ],
  "totalTasks": 4,
  "completedTasks": 1
}

Constraints

• Single HTML output: The output must be a single, self-contained HTML file.
• Client-side only: No backend dependencies.
• Local Storage: The template handles local storage, you just provide the initial state.
• Encoding: Ensure UTF-8 encoding for Chinese character support.
• Robustness: If completion status is ambiguous, default to

  false

  .