Skip to content

Chapter Content Generation Workflow Timeline

An interactive process timeline visualization showing the 8 sequential stages of the chapter-content-generator skill workflow, from initial file validation through final reporting.

Run the Chapter Content Generation Timeline Fullscreen

View the Timeline Data

1

Overview

This timeline visualizes the complete workflow used by the chapter-content-generator skill to create comprehensive educational chapter content for intelligent textbooks. The process includes validation, analysis, content generation, quality assurance, and reporting stages, typically completing in 2-4 minutes depending on chapter complexity.

The timeline uses a horizontal layout with color-coded stages representing different workflow phases:

  • Validation (Blue) - File and structure verification
  • Analysis (Green) - Reading level determination and reference loading
  • Generation (Orange) - Core content creation phase
  • Quality Assurance (Purple) - Verification and file updates
  • Completion (Gold) - Final statistics and reporting

Features

Interactive Elements

  • Zoom and Pan: Click and drag to pan horizontally, scroll to zoom in/out on specific stages
  • Stage Details: Click any stage to see expanded information including substeps and token usage
  • Hover Information: Hover over timeline items for quick stage summaries
  • Category Filtering: Use filter buttons to view specific workflow phases
  • Progress Bar: Visual representation showing relative time distribution across stages

Visual Design

  • Color-coded stages: Each workflow phase has a distinct color for easy identification
  • Minimal borders: Optimized for iframe embedding without scrolling
  • Responsive layout: Adapts to different screen sizes and container widths
  • Time-scaled display: Stage widths reflect actual relative durations

Workflow Stages

Stage 1: File Validation (< 1 second)

Verifies that the chapter's index.md file exists with the required structure before proceeding.

Substeps:

  • Check file existence
  • Verify file permissions
  • Validate basic markdown structure

Stage 2: Structure Check (1-2 seconds)

Parses and validates all required frontmatter elements including title, summary, concepts list, and prerequisites.

Substeps:

  • Parse YAML frontmatter
  • Validate title format
  • Check summary content
  • Verify concepts list
  • Validate prerequisites

Stage 3: Reading Level Analysis (2-3 seconds)

Extracts target audience information from the course description to determine appropriate vocabulary and complexity.

Substeps:

  • Load course description
  • Extract target audience
  • Determine reading level (junior-high, senior-high, college, graduate)
  • Set complexity parameters
  • Configure vocabulary guidelines

Stage 4: Reference Loading (3-5 seconds)

Loads reading-level guidelines and content-element-types specifications that guide the generation process.

Substeps:

  • Load reading level guidelines
  • Import content element specifications
  • Load Bloom's Taxonomy mappings
  • Retrieve example templates
  • Configure generation parameters

Stage 5: Content Generation (60-180 seconds)

The core phase where detailed educational content is created with examples, exercises, and non-text elements.

Token Usage: 15,000-50,000 tokens (varies by chapter complexity)

Generated Elements:

  • Concept explanations aligned with learning objectives
  • Worked examples (2-3 per section)
  • Practice exercises (5-8 per section)
  • Diagram and infographic specifications
  • MicroSim recommendations
  • Admonitions and callouts
  • Cross-references to related concepts

Stage 6: Concept Coverage Verification (5-10 seconds)

Cross-checks the generated content against the chapter's concept list to ensure completeness.

Verification Steps:

  • Parse generated content
  • Extract concept mentions
  • Cross-reference with concept list
  • Identify gaps or omissions
  • Verify prerequisite coverage
  • Check Bloom's Taxonomy distribution

Stage 7: File Update (1-2 seconds)

Replaces the TODO placeholder in the chapter's index.md with the newly generated content.

Update Steps:

  • Backup original file
  • Preserve frontmatter
  • Replace TODO placeholder
  • Maintain markdown formatting
  • Verify file integrity

Stage 8: Reporting (2-3 seconds)

Generates comprehensive summary statistics about the generated content for quality assessment.

Reported Metrics:

  • Total word count
  • Number of sections
  • Examples generated
  • Exercises created
  • Non-text elements (diagrams, MicroSims)
  • Concepts covered
  • Bloom's Taxonomy distribution
  • Token usage statistics

Data Structure

The timeline data is stored in timeline.json following the vis-timeline format with time-based events:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{
  "title": "Chapter Content Generation Workflow Timeline",
  "events": [
    {
      "start_date": {
        "year": "2024",
        "month": "1",
        "day": "1",
        "hour": "0",
        "minute": "0",
        "second": "0"
      },
      "end_date": {
        "year": "2024",
        "month": "1",
        "day": "1",
        "hour": "0",
        "minute": "0",
        "second": "1"
      },
      "text": {
        "headline": "Stage 1: File Validation",
        "text": "Description of the stage..."
      },
      "group": "Validation",
      "notes": "Detailed substeps and timing information"
    }
  ]
}

Each event includes:

  • start_date and end_date with precise timestamps
  • headline - Stage name and number
  • text - Detailed description
  • group - Workflow phase category
  • notes - Substeps and additional context (displayed in tooltips and detail panel)

Usage Instructions

Viewing the Timeline

  1. Load the timeline - The visualization loads automatically with all 8 stages visible
  2. Explore stages - Click and drag to pan, scroll to zoom
  3. Select a stage - Click any stage to see detailed information in the panel below
  4. Filter by category - Use the filter buttons to focus on specific workflow phases
  5. Check progress distribution - The progress bar shows relative time allocation

Understanding the Workflow

The timeline demonstrates that:

  • Validation and Analysis (Stages 1-4) complete quickly (~10 seconds total)
  • Content Generation (Stage 5) is the longest phase (1-3 minutes)
  • Quality Assurance (Stages 6-7) ensures content completeness (~10 seconds)
  • Reporting (Stage 8) provides final metrics (~3 seconds)

Total typical workflow time: 2-4 minutes depending on:

  • Chapter length and complexity
  • Number of concepts to cover
  • Reading level requirements
  • Number of examples and exercises to generate

Customization Guide

Modifying Stage Durations

To adjust the timeline for different workflows, edit timeline.json:

1
2
3
4
{
  "start_date": {"year": "2024", "month": "1", "day": "1", "hour": "0", "minute": "0", "second": "0"},
  "end_date": {"year": "2024", "month": "1", "day": "1", "hour": "0", "minute": "0", "second": "3"}
}

The duration is determined by the difference between start_date and end_date.

Changing Colors

To modify the color scheme, edit the categoryColors object in main.html:

1
2
3
4
5
6
7
const categoryColors = {
    'Validation': '#3b82f6',      // Blue
    'Analysis': '#10b981',        // Green
    'Generation': '#f97316',      // Orange
    'Quality Assurance': '#a855f7', // Purple
    'Completion': '#f59e0b'       // Gold
};

Adding New Stages

To add additional workflow stages:

  1. Add a new event to timeline.json with proper start/end dates
  2. Assign it to an existing category or create a new one
  3. If creating a new category, add the color to categoryColors in main.html
  4. Add a filter button in the HTML if needed

Technical Details

  • Timeline Library: vis-timeline 7.7.3
  • Data Format: Custom JSON structure compatible with vis-timeline ranges
  • Browser Compatibility: Modern browsers (Chrome, Firefox, Safari, Edge)
  • Dependencies: vis-timeline.js and vis-timeline.css (loaded from CDN)
  • Responsive: Adapts to container width, optimized for iframe embedding
  • Performance: Lightweight, loads in < 1 second

Timeline Configuration

The timeline uses these key options:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
const options = {
    width: '100%',
    height: '400px',
    margin: {
        item: { horizontal: 0, vertical: 10 },
        axis: 5
    },
    orientation: 'top',
    stack: true,
    selectable: true,
    zoomMin: 1000 * 10,  // 10 seconds
    zoomMax: 1000 * 60 * 10  // 10 minutes
};

Lesson Plan

Learning Objectives

After completing this lesson, students will be able to:

  • Understand (Understand) the sequential stages of automated educational content generation workflows
  • Analyze (Analyze) time and resource distribution across different workflow phases
  • Evaluate (Evaluate) bottlenecks and optimization opportunities in multi-stage processes
  • Apply (Apply) timeline visualization techniques to document their own workflows
  • Create (Create) interactive process timelines for technical documentation using vis-timeline

Target Audience

  • Primary: Software developers, educational technology specialists, workflow designers
  • Secondary: Technical writers, project managers, instructional designers
  • Level: Undergraduate computer science or professional development
  • Prerequisites: Basic understanding of software workflows, familiarity with JSON data structures

Activities

Activity 1: Workflow Stage Analysis (20 minutes)

  1. Open the interactive timeline and identify the longest-running stage (Stage 5: Content Generation)
  2. Calculate what percentage of total workflow time is spent on content generation (typically 70-80%)
  3. Examine substeps for Stage 3 (Reading Level Analysis) - which substep would you expect to take longest?
  4. Discuss: Why does validation (Stages 1-2) happen before resource loading (Stage 4)?

Activity 2: Timeline Interaction Exploration (15 minutes)

  1. Use zoom controls to examine Stage 5 (Content Generation) in detail
  2. Click on Stage 3 to view expanded information about Reading Level Analysis
  3. Filter the timeline to show only "Analysis" stages (Green)
  4. Take a screenshot showing Stages 6-8 (Quality Assurance and Completion phases)

Activity 3: Bottleneck Identification (25 minutes)

Using the timeline data and stage descriptions:

  1. Identify the 2 stages that account for >80% of total execution time
  2. For Stage 5 (Content Generation), propose 3 ways to optimize token usage to reduce time
  3. Analyze whether parallel processing could speed up any stages (consider dependencies)
  4. Write a 1-paragraph optimization recommendation

Activity 4: Create Your Own Timeline (45 minutes)

  1. Document a workflow from your own experience (e.g., software build pipeline, research process, course preparation)
  2. Break it into 6-10 sequential stages with realistic time estimates
  3. Create a JSON data file following the timeline.json structure
  4. Customize the timeline HTML with your data and appropriate colors
  5. Test interactivity (zoom, filter, click events)

Assessment

Formative Assessment:

  • During Activity 1: Can students correctly identify stage dependencies and time distributions?
  • During Activity 3: Do students understand which stages could potentially run in parallel?

Summative Assessment:

Students demonstrate mastery through a practical project:

  1. Timeline Creation (40 points): Build a functional interactive timeline for a real-world workflow
  2. Minimum 6 stages with accurate time estimates
  3. Appropriate color coding by workflow phase

  4. Valid JSON structure

  5. Documentation (30 points): Write comprehensive descriptions for each stage

  6. Explain purpose and outputs
  7. List substeps (3-5 per major stage)

  8. Document resource usage (time, tokens, API calls)

  9. Analysis (30 points): Provide workflow analysis addressing:

  10. Which stages are critical path (cannot be parallelized)?
  11. Where are optimization opportunities?
  12. How would you handle stage failures/retries?

Success Criteria: - Timeline renders correctly with proper stage sequencing - Students can articulate why certain stages must be sequential - Students demonstrate understanding of time-scaled visualization benefits - Students can modify timeline.json to represent different workflows

Extension Activities

  • Advanced: Add custom stage types with different visual indicators (diamonds for decision points, circles for milestones)
  • Integration: Connect the timeline to a real build system to display live progress
  • Comparison: Create parallel timelines showing "before" and "after" optimization

Educational Applications

This timeline pattern can be adapted for:

  • Process workflows - Software development, data pipelines, build processes
  • Algorithm visualizations - Step-by-step algorithm execution stages
  • Project management - Task sequences and dependencies
  • Course schedules - Lesson progression and timing
  • Research workflows - Experimental procedure stages

References

License

This visualization is part of the claude-skills repository and follows the same license. The vis-timeline library is licensed under Apache-2.0/MIT dual license.