training-dashboard skill

Training Dashboard

Generate an HTML dashboard with retro styling showing comprehensive training progress toward the half marathon goal. Outputs a single HTML file saved to dashboard.html that can be opened in any browser.

Dashboard Configuration

When generating the dashboard, you will prompt the user for their preferences. If the user has previously provided preferences in the conversation, use those. Otherwise, ask for the following:

Configuration Prompts

1. Layout Style

Ask: "What level of detail would you like?"

• detailed (default): Full metrics, large charts, extensive commentary
• compact: Key metrics, medium charts, brief commentary
• ultra-compact: Essential metrics only, small charts, minimal commentary

2. Retro Style Theme

Ask: "Which retro theme would you like?"

• terminal-green (default): Classic green phosphor CRT terminal (green on black)
• amber-monitor: Vintage amber monochrome display (amber on dark brown)
• ibm-blue: IBM mainframe blue screen (cyan on blue)
• paper-print: Dot matrix printer style (black on cream)

3. Commentary Style

Ask: "What style of coaching commentary?"

• conversational (default): Chatty, casual coaching style with personality
• analytical: Data-focused with objective observations
• motivational: Encouraging and uplifting focus
• minimal: Brief, to-the-point feedback

4. Optional Customization

Only ask if the user seems interested in customization:

• Chart styles (weekly mileage: bar | sparkline | progress-bar)
• Which sections to show/hide

Default Configuration

If the user wants to skip configuration or says "just use defaults", use:

• Layout: detailed
• Theme: terminal-green
• Commentary: conversational
• Chart styles: bar for mileage, timeline for phase, grid for sessions
• All sections enabled

Dashboard Generation Workflow

1. Prompt for Configuration

Before generating the dashboard, ask the user for their preferences (unless they've already specified them in the conversation):

1. Ask about layout style, theme, and commentary style (see Configuration Prompts above)
2. If the user says "default" or "just show me", use the default configuration
3. Store these preferences for the current dashboard generation
4. Present a brief summary: "Generating [detailed/compact/ultra-compact] dashboard with [theme] theme and [style] commentary..."

2. Load Training Data

Read these files:

• training-plan.md - Full 12-week plan structure, goals, paces
• training-log/week-*.md - All completed training logs
• Check which weeks have logs vs which are planned

Extract from training-plan.md:

• Goal: Target time, pace, distance
• Total plan duration (12 weeks)
• Phase structure (Foundation, Build, Specific, Taper)
• Weekly planned mileage and sessions
• Prescribed paces (Easy, Steady, Threshold, Interval, HM)

Extract from training logs:

• Completed weeks
• Actual mileage per week
• Actual sessions completed
• Actual paces achieved
• Activity types (Run, Ride, Walk, Workout)

3. Calculate Metrics

Calculate these key metrics:

Plan Progress:

• Current week number / Total weeks
• Current phase
• Weeks completed / Weeks remaining
• Time to race (if race date known)

Mileage Tracking:

• Total miles run vs total planned (for completed weeks)
• Average weekly mileage (actual)
• Highest mileage week
• Weekly comparison (actual vs planned for each week)

Session Completion:

• Total sessions completed vs planned
• Completion rate percentage
• Which session types were completed (threshold, intervals, long runs, easy runs)
• Missed sessions

Pace Adherence:

• For each pace type (Easy, Threshold, Interval, HM):
• How many sessions at this pace
• Average actual pace vs prescribed range
• Adherence score (within range, too fast, too slow)
• Most common issue (e.g., "easy runs too fast")

On Track Status: Determine overall status based on:

• Completion rate (>85% = good, 70-85% = okay, <70% = behind)
• Mileage adherence (within 10% = good, 10-20% = okay, >20% = adjust)
• Pace adherence (Easy runs especially - are they truly easy?)
• Progressive overload (volume building appropriately?)

Status: On Track | Slightly Behind | Needs Adjustment | Ahead of Schedule

4. Generate HTML Dashboard

Create a single self-contained HTML file with:

• Tailwind CSS loaded from CDN (https://cdn.tailwindcss.com)
• Retro styling based on configured theme
• ASCII charts displayed in monospace tags
• Responsive layout using Tailwind utilities
• No JavaScript required

HTML Structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Half Marathon Training Dashboard</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* Retro theme styles - see Theme Styles section below */
    </style>
</head>
<body class="[theme-classes]">
    <!-- Dashboard sections -->
</body>
</html>

Theme Styles:

Terminal Green (terminal-green):

body {
    background: #0a0a0a;
    color: #33ff33;
    font-family: 'Courier New', monospace;
}
.card {
    background: #0f0f0f;
    border: 2px solid #33ff33;
    box-shadow: 0 0 10px rgba(51, 255, 51, 0.3);
}
.accent { color: #66ff66; }
.warning { color: #ffff33; }
.success { color: #33ff33; }
.muted { color: #5aaa5a; }

Amber Monitor (amber-monitor):

body {
    background: #2b1810;
    color: #ffb000;
    font-family: 'Courier New', monospace;
}
.card {
    background: #1a0f08;
    border: 2px solid #ffb000;
    box-shadow: 0 0 10px rgba(255, 176, 0, 0.3);
}
.accent { color: #ffc840; }
.warning { color: #ff8800; }
.success { color: #ffb000; }
.muted { color: #7a5830; }

IBM Blue (ibm-blue):

body {
    background: #00007f;
    color: #aaffff;
    font-family: 'Courier New', monospace;
}
.card {
    background: #000066;
    border: 2px solid #aaffff;
    box-shadow: 0 0 10px rgba(170, 255, 255, 0.3);
}
.accent { color: #ccffff; }
.warning { color: #ffff00; }
.success { color: #aaffff; }
.muted { color: #5588aa; }

Paper Print (paper-print):

body {
    background: #f5f5dc;
    color: #1a1a1a;
    font-family: 'Courier New', monospace;
}
.card {
    background: #fafae6;
    border: 2px solid #1a1a1a;
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.2);
}
.accent { color: #000000; font-weight: bold; }
.warning { color: #8b0000; }
.success { color: #006400; }
.muted { color: #666666; }

4. Generate ASCII Visualizations

ASCII charts are embedded within tags in the HTML for retro appearance: