kanban

Files (1)

• SKILL.md

SKILL.md (first lines)

# Skill: Kanban & Implementation Tracker (Stage 7)

## Objective
Your goal is to act as the **Orchestration Engine** to generate a local, interactive Kanban board and a visual Mermaid diagram representing the progress state of the current feature development's vertical slices. This enables real-time visual progress tracking during active TDD implementation (Stage 7).

## Rules of Engagement
- **Artifact Generation:** Always output:
  1. `plans/<feature-slug>/<timestamp>/05_KANBAN.md` - Clean Markdown Kanban board and Mermaid flow diagram.
  2. `plans/<feature-slug>/<timestamp>/visual-dashboard.html` - Premium interactive local master progress tracking application with a dedicated `Execution Kanban` tab (`#kanban`).
- **UI Visibility / Artifact Mirroring**: Mirror `visual-dashboard.html` to system artifacts via `python3 scripts/manage_dashboard.py mirror --plan-dir "plans/<feature-slug>/<timestamp>"` to render in the chat UI.
- **Dedicated Tab Location**: The full interactive Kanban board, Parallel/Serial execution lanes, and Dependency DAG tree live on the dedicated `Execution Kanban` tab in `visual-dashboard.html`. The `Brew Overview` tab features a compact Slice Execution Pulse widget.
- **Visual Design Mandate:** The generated HTML MUST follow the master visual-dashboard design (custom HSL themes, Outfit/JetBrains fonts, smooth transitions, embedded Kanban columns, and view toggles).
- **Dynamic Coupling & Dependency Mapping:** The dashboard contains an automated parser that extracts slice checklist items, prerequisites, target files, and execution modes (`Parallel` / `Serial`) directly from `05_PLAN.md` and `07_VERIFICATION.md`, computing `⚡ PARALLEL READY`, `🔗 SERIAL CHAIN`, and `🔒 BLOCKED` states in real time.

## Instructions

### Step 1: Locate & Resolve Active Plan Directory
1. Find the active plan directory `plans/<feature-slug>/<timestamp>/` for the feature currently being implemented.
2. **Directory Reuse Mandate**: Check if an existing plan directory already exists under `plans/<feature-slug>/` (e.g. created by `ideator`, `grill`, or `write-prd`). **REUSE that exact plan directory**. Do NOT create a new timestamp directory if `ideator` or a prior stage was already run!
3. Read `05_PLAN.md` (or `05_IMPLEMENTATION_PLAN.md`) from that plan directory.

### Step 2: Generate 05_KANBAN.md
Create a visual overview of the vertical slices in Markdown:
1. **Mermaid Flowchart:** Map out each Phase and Step as node blocks. Style the nodes dynamically based on status:
   - Completed slices: Fill with green (`#a6e3a1`), stroke with dark green.
   - In-progress slices: Fill with cyan/blue (`#89b4fa`), stroke with blue.
   - Pending slices: Fill with mocha gray (`#313244`), stroke with lighter gray.
2. **Markdown Kanban Columns:**
   - **Backlog / To Do:** List of pending slices with `[Parallel]` or `[Serial]` tags.
   - **In Progress:** The active slice currently being implemented.
   - **Done:** Completed slices.

### Step 3: Generate visual-dashboard.html
Ensure or update the gorgeous, self-contained interactive web page inside `plans/<feature-slug>/<timestamp>/visual-dashboard.html` by executing `python3 scripts/manage_dashboard.py ensure --plan-dir "plans/<feature-slug>/<timestamp>" --moniker "<feature-slug>"` (or invoking the `visual-dashboard` skill) to represent the latest state on the dedicated `Execution Kanban` tab.
 

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bean-to-Cup Progress Tracker</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
  <style>
    :root {
      --bg-color: #11111b;
      --panel-bg: rgba(30, 30, 46, 0.7);
      --card-bg: rgba(49, 50, 68, 0.4);
      --card-hover-bg: rgba(49, 50, 68, 0.65);
      --border-color: rgba(147, 153, 178, 0.2);
      --accent-blue: #89b4fa;
      --accent-green: #a6e3a1;
      --accent-yellow: #f9e2af;
      --accent-red: #f38ba8;
      --accent-mauve: #cba6f7;
      --accent-teal: #94e2d5;
      --text-main: #cdd6f4;
      --text-sub: #a6adc8;
      --text-dim: #6c7086;
      --glow-blue: rgba(137, 180, 250, 0.2);
      --glow-green: rgba(166, 227, 161, 0.25);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      background-color: var(--bg-color);
      color: var(--text-main);
      font-family: 'Outfit', sans-serif;
      min-height: 100vh;
      overflow-x: hidden;
      padding: 1.5rem;
      background-image: 
        radial-gradient(at 10% 10%, rgba(203, 166, 247, 0.05) 0px, transparent 50%),
        radial-gradient(at 90% 90%, rgba(137, 180, 250, 0.05) 0px, transparent 50%);
    }

    /* Scrollbar Styling */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    ::-webkit-scrollbar-track {
      background: transparent;
    }
    ::-webkit-scrollbar-thumb {
      background: var(--border-color);
      border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: var(--text-dim);
    }

    /* Main Grid Layout */
    .container {
      display: grid;
      grid-template-columns: 280px 1fr;
      gap: 1.5rem;
      max-width: 1600px;
      margin: 0 auto;
      height: calc(100vh - 3rem);
    }

    /* Left Control Sidebar */
    .sidebar {
      background: var(--panel-bg);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      padding: 1.5rem;
      display: flex;

From sapientcoffee/bean-to-cup, Apache-2.0.

More from sapientcoffee/bean-to-cup