# Template Usage Examples

Concrete examples demonstrating how to use the pluggable template system for various scenarios.

## Table of Contents

1. [Web-Enhanced Visualization Campaign](#web-enhanced-visualization-campaign)
2. [Code Generation Series](#code-generation-series)
3. [Quality Analysis Workflow](#quality-analysis-workflow)
4. [Validation Pipeline](#validation-pipeline)
5. [Custom Template Creation](#custom-template-creation)
6. [Infinite Mode Learning](#infinite-mode-learning)
7. [Mixed Template Workflow](#mixed-template-workflow)

---

## Web-Enhanced Visualization Campaign

**Scenario:** Generate 10 D3.js visualizations, each learning from different web resources.

### Step 1: Create Specification

`specs/d3_viz_spec.md`:

```markdown
# D3.js Visualization Specification

## File Naming
Pattern: `viz_d3_{{theme}}_{{number}}.html`
Example: viz_d3_force_001.html

## Requirements
- Complete standalone HTML file
- Uses D3.js library
- Interactive elements (hover, click, or drag)
- Demonstrates techniques from web source
- Attribution in header comment

## Quality Standards
- No errors in console
- Professional appearance
- Well-commented code
- Unique from other iterations
```

### Step 2: Create Parameter File

`params/d3_campaign.json`:

```json
{
  "PROJECT_NAME": "D3.js Learning Campaign",
  "PROJECT_DESCRIPTION": "Progressive D3 learning from official documentation",
  "MIN_TECHNIQUES": 2,
  "URL_STRATEGY": {
    "foundation": [
      "https://d3js.org/getting-started",
      "https://d3js.org/what-is-d3"
    ],
    "intermediate": [
      "https://d3js.org/d3-selection",
      "https://d3js.org/d3-scale",
      "https://d3js.org/d3-axis"
    ],
    "advanced": [
      "https://d3js.org/d3-force",
      "https://d3js.org/d3-hierarchy",
      "https://d3js.org/d3-geo"
    ],
    "expert": [
      "https://observablehq.com/@d3/gallery",
      "https://observablehq.com/@d3/learn-d3"
    ]
  }
}
```

### Step 3: Run Command

```bash
/infinite-templated web-research-generator specs/d3_viz_spec.md d3_output 10 params/d3_campaign.json
```

### What Happens

1. **Orchestrator loads:**
   - Template: `web-research-generator.md`
   - Spec: `specs/d3_viz_spec.md`
   - Params: `params/d3_campaign.json`

2. **For iterations 1-10:**
   - Assigns URL from strategy (foundation → intermediate → advanced)
   - Creates parameter mapping:
     ```json
     {
       "WEB_URL": "https://d3js.org/d3-selection",
       "LEARNING_FOCUS": "D3 selection and data binding",
       "FILE_NAME": "viz_d3_selection_003.html",
       "ITERATION_NUMBER": 3,
       "MIN_TECHNIQUES": 2
     }
     ```
   - Substitutes into template
   - Deploys agent with instantiated task

3. **Each agent:**
   - Fetches assigned URL
   - Extracts 2+ techniques
   - Analyzes existing iterations
   - Generates unique visualization
   - Documents learning in file header

4. **Result:**
   - 10 HTML files in `d3_output/`
   - Each demonstrates different D3 techniques
   - Progressive sophistication from basic → advanced

---

## Code Generation Series

**Scenario:** Generate 20 themed UI components without web research.

### Step 1: Create Specification

`specs/ui_component_spec.md`:

```markdown
# Themed UI Component Specification

## File Naming
Pattern: `{{theme}}_component_{{number}}.html`
Example: cosmic_component_007.html

## Structure
- Complete HTML file
- Embedded CSS and JavaScript
- Unique theme applied throughout
- Interactive elements
- Professional appearance

## Themes to Explore
- Nature (ocean, forest, desert, mountains)
- Technology (cyberpunk, retro-tech, holographic)
- Abstract (geometric, fluid, particle-based)
- Cultural (various aesthetics and styles)

## Quality Standards
- Fully functional standalone
- Creative interpretation of theme
- Professional code quality
- No errors
```

### Step 2: Run Command

```bash
/infinite-templated code-generator specs/ui_component_spec.md components 20
```

No parameter file needed - template generates themes creatively.

### What Happens

1. **Orchestrator:**
   - Loads `code-generator.md` template
   - Reads spec
   - Plans 20 unique themes

2. **For each iteration:**
   - Generates unique theme (e.g., "bioluminescent ocean")
   - Creates parameter set:
     ```json
     {
       "THEME": "bioluminescent ocean depths",
       "UNIQUE_FEATURES": "Glow effects, wave animations, depth parallax",
       "FILE_NAME": "bioluminescent_component_012.html",
       "ITERATION_NUMBER": 12
     }
     ```
   - Instantiates template
   - Deploys agent

3. **Each agent:**
   - Analyzes existing components
   - Plans unique approach
   - Generates component with theme
   - Ensures no duplicates

4. **Result:**
   - 20 unique components in `components/`
   - Diverse themes and approaches
   - All meet spec requirements

---

## Quality Analysis Workflow

**Scenario:** Analyze quality of 20 generated components.

### Step 1: Create Analysis Criteria

`specs/quality_criteria.md`:

```markdown
# Component Quality Criteria

## Metrics to Collect
1. Lines of code
2. Number of interactive elements
3. CSS complexity (number of rules)
4. JavaScript functions count
5. Documentation completeness (% of code with comments)

## Quality Dimensions
1. **Functionality** - Does it work without errors?
2. **Uniqueness** - How different from other iterations?
3. **Code Quality** - Clean, readable, well-structured?
4. **Documentation** - Adequate comments and explanations?
5. **Visual Polish** - Professional appearance?

## Scoring
Each dimension rated 1-5:
- 5: Excellent
- 4: Good
- 3: Acceptable
- 2: Needs improvement
- 1: Poor

## Report Format
- Executive summary
- Per-file scores table
- Top 3 best components
- Top 3 areas for improvement
- Recommendations
```

### Step 2: Create Parameter File

`params/analysis_params.json`:

```json
{
  "PROJECT_NAME": "UI Component Quality Analysis",
  "PROJECT_DESCRIPTION": "Assess quality of generated components",
  "METRICS": "LOC, interactive elements, CSS complexity, JS functions, documentation %",
  "TARGET_DESCRIPTION": "20 themed UI components"
}
```

### Step 3: Run Command

```bash
/infinite-templated analyzer specs/quality_criteria.md reports/quality_analysis.md 1 params/analysis_params.json
```

Note: Count is 1 because we're running one analysis job (not iterating).

### What Happens

1. **Orchestrator:**
   - Loads `analyzer.md` template
   - Reads quality criteria
   - Prepares parameters:
     ```json
     {
       "TARGET_PATTERN": "components/*.html",
       "CRITERIA_FILE": "specs/quality_criteria.md",
       "OUTPUT_FILE": "reports/quality_analysis.md",
       "METRICS": "LOC, interactive elements, ..."
     }
     ```

2. **Analyzer agent:**
   - Finds all components
   - Analyzes each against criteria
   - Collects metrics
   - Identifies patterns
   - Generates comprehensive report

3. **Result:**
   - Detailed analysis report in `reports/quality_analysis.md`
   - Metrics for each component
   - Insights and recommendations

---

## Validation Pipeline

**Scenario:** Validate that all components meet specification.

### Step 1: Create Validation Rules

`specs/validation_rules.md`:

```markdown
# Component Validation Rules

## File Naming
- Must match pattern: {{theme}}_component_{{number}}.html
- Number must be zero-padded 3 digits
- Theme must be descriptive

## File Structure
- Must start with <!DOCTYPE html>
- Must have complete <head> section
- Must have attribution comment block
- Must have <style> section
- Must have <script> section

## Functionality
- Must have no JavaScript errors
- Must include at least one interactive element
- Must render correctly

## Code Quality
- Must have at least 10% comment ratio
- Must use meaningful variable names
- Must not have code duplication

## Documentation
- Must have header comment with theme and iteration
- Must document unique characteristics
- Must have inline comments explaining key sections

## Pass/Fail Criteria
- All "Must" requirements = Pass
- Any "Must" violated = Fail
```

### Step 2: Run Command

```bash
/infinite-templated validator specs/validation_rules.md reports/validation_report.md 1
```

### What Happens

1. **Orchestrator:**
   - Loads `validator.md` template
   - Reads validation rules
   - Parameters:
     ```json
     {
       "VALIDATION_SPEC": "specs/validation_rules.md",
       "TARGET_PATTERN": "components/*.html",
       "OUTPUT_FILE": "reports/validation_report.md"
     }
     ```

2. **Validator agent:**
   - Finds all components
   - For each file:
     - Checks every validation rule
     - Documents pass/fail
     - Collects evidence for failures
   - Calculates compliance rate
   - Generates remediation guidance

3. **Result:**
   - Validation report with:
     - Overall pass/fail status
     - Per-component results
     - Detailed failure evidence
     - Remediation steps for each issue

---

## Custom Template Creation

**Scenario:** Create a template for testing APIs.

### Step 1: Use Template Creation Command

```bash
/create-template api-tester testing "Test REST APIs and generate test reports"
```

### Step 2: Answer Questions

**Assistant asks:**
1. What types of APIs?
   → REST APIs with JSON responses

2. What should agents test?
   → Status codes, response format, data validation

3. What parameters vary?
   → API endpoint, auth token, test cases file

4. What should output be?
   → Test report with pass/fail and detailed logs

5. Specific frameworks?
   → No framework, use basic HTTP requests

### Step 3: Template Generated

Assistant creates `.claude/templates/api-tester.md` with:

- **Role**: API Testing Specialist
- **Steps**:
  1. Load test cases from file
  2. For each test case, make HTTP request
  3. Validate response
  4. Document results
  5. Generate test report
- **Parameters**: `API_ENDPOINT`, `AUTH_TOKEN`, `TEST_CASES_FILE`, `OUTPUT_FILE`
- **Output**: Test report with pass/fail for each case

### Step 4: Use New Template

```bash
/infinite-templated api-tester specs/api_test_cases.md reports/api_tests.md 1 params/api_params.json
```

---

## Infinite Mode Learning

**Scenario:** Continuous generation with progressive web learning.

### Step 1: Create Progressive URL Strategy

`params/progressive_learning.json`:

```json
{
  "PROJECT_NAME": "Infinite D3 Learning",
  "PROJECT_DESCRIPTION": "Continuous learning from D3 documentation",
  "MIN_TECHNIQUES": 2,
  "URL_STRATEGY": {
    "foundation": [
      "https://d3js.org/getting-started",
      "https://d3js.org/what-is-d3",
      "https://observablehq.com/@d3/learn-d3"
    ],
    "intermediate": [
      "https://d3js.org/d3-selection",
      "https://d3js.org/d3-scale",
      "https://d3js.org/d3-shape",
      "https://d3js.org/d3-axis",
      "https://d3js.org/d3-transition"
    ],
    "advanced": [
      "https://d3js.org/d3-force",
      "https://d3js.org/d3-hierarchy",
      "https://d3js.org/d3-geo",
      "https://d3js.org/d3-zoom",
      "https://d3js.org/d3-brush"
    ],
    "expert": [
      "https://observablehq.com/@d3/gallery",
      "https://observablehq.com/@d3/chord-diagram",
      "https://observablehq.com/@d3/sunburst",
      "https://observablehq.com/@d3/treemap"
    ]
  },
  "SOPHISTICATION_RAMP": {
    "iterations_1_5": "foundation",
    "iterations_6_10": "intermediate",
    "iterations_11_20": "advanced",
    "iterations_21_plus": "expert"
  }
}
```

### Step 2: Run Infinite Mode

```bash
/infinite-templated web-research-generator specs/d3_viz_spec.md d3_infinite infinite params/progressive_learning.json
```

### What Happens

1. **Wave 1 (iterations 1-5):**
   - Uses foundation URLs
   - Basic techniques
   - Builds knowledge base

2. **Wave 2 (iterations 6-10):**
   - Switches to intermediate URLs
   - More sophisticated techniques
   - Builds on wave 1

3. **Wave 3 (iterations 11-15):**
   - Advanced URLs
   - Complex patterns
   - Combines multiple techniques

4. **Wave 4+ (iterations 16+):**
   - Expert URLs
   - Highly sophisticated
   - Novel combinations

5. **Continues until:**
   - Context budget nearly exhausted
   - Gracefully completes current wave
   - Provides summary

### Result

- 20-50+ visualizations (depending on context)
- Progressive sophistication
- Each demonstrates new learning
- Complete documentation of sources

---

## Mixed Template Workflow

**Scenario:** Complete workflow using multiple templates.

### The Pipeline

1. **Generate** components (code-generator)
2. **Analyze** quality (analyzer)
3. **Validate** compliance (validator)
4. **Regenerate** failures (code-generator)
5. **Final validation** (validator)

### Step 1: Initial Generation

```bash
/infinite-templated code-generator specs/component_spec.md components 20
```

Result: 20 components in `components/`

### Step 2: Quality Analysis

```bash
/infinite-templated analyzer specs/quality_criteria.md reports/initial_analysis.md 1 params/analysis_params.json
```

Result: Analysis report showing quality metrics

### Step 3: Validation

```bash
/infinite-templated validator specs/validation_rules.md reports/initial_validation.md 1
```

Result: Validation report, suppose 3 components failed

### Step 4: Review and Plan

Read `reports/initial_validation.md`, identify:
- `cosmic_component_007.html` - Missing interactivity
- `forest_component_013.html` - Incomplete documentation
- `abstract_component_019.html` - JavaScript errors

### Step 5: Targeted Regeneration

Manually create `specs/regeneration_spec.md` with:
- Focus on the 3 specific themes
- Emphasize the issues found
- Stricter requirements

```bash
/infinite-templated code-generator specs/regeneration_spec.md components 3 params/regen_params.json
```

### Step 6: Final Validation

```bash
/infinite-templated validator specs/validation_rules.md reports/final_validation.md 1
```

Result: All components pass

### Step 7: Final Analysis

```bash
/infinite-templated analyzer specs/quality_criteria.md reports/final_analysis.md 1 params/analysis_params.json
```

Result: Quality improved, all metrics in acceptable range

---

## Advanced: Template Composition

**Scenario:** Create a template that uses other templates.

### Meta-Template: `qa-pipeline.md`

```markdown
# QA Pipeline Template

This template orchestrates a complete quality assurance workflow.

## Execution Instructions

### Step 1: Generate Test Artifacts
Use the code-generator template to create test subjects:
- Template: code-generator
- Count: {{TEST_ARTIFACT_COUNT}}
- Output: {{TEST_OUTPUT_DIR}}

### Step 2: Run Analysis
Use the analyzer template:
- Template: analyzer
- Criteria: {{ANALYSIS_CRITERIA}}
- Output: {{ANALYSIS_REPORT}}

### Step 3: Run Validation
Use the validator template:
- Template: validator
- Rules: {{VALIDATION_RULES}}
- Output: {{VALIDATION_REPORT}}

### Step 4: Generate QA Summary
Combine analysis and validation results into:
- Overall pass/fail determination
- Quality metrics summary
- Recommendations

[... rest of template ...]
```

### Usage

```bash
/infinite-templated qa-pipeline specs/qa_config.md reports/qa_summary.md 1 params/qa_params.json
```

The meta-template orchestrates multiple sub-templates.

---

## Tips for Effective Usage

### 1. Start Small

Test with count=1 or count=5 before large batches:

```bash
# Test first
/infinite-templated web-research-generator specs/test_spec.md test_out 1

# If good, scale up
/infinite-templated web-research-generator specs/test_spec.md real_out 20
```

### 2. Use Parameter Files

For complex configurations, always use parameter files:

```bash
# Better than trying to provide params in command
/infinite-templated template spec.md output 10 params/config.json
```

### 3. Iterate on Specs

Refine specifications based on results:

1. Run with initial spec
2. Review outputs
3. Update spec with clearer requirements
4. Run again

### 4. Monitor Context

For infinite mode, monitor context usage:
- Start conservative (let it run)
- Review wave sizes
- Adjust sophistication ramp if needed

### 5. Validate Early

Run validator after first batch:

```bash
# Generate 5
/infinite-templated code-generator spec.md out 5

# Validate immediately
/infinite-templated validator validation_spec.md report.md 1

# Adjust spec if needed
# Then continue generation
```

### 6. Combine Templates

Use different templates in sequence:

```bash
# Generate
/infinite-templated code-generator spec.md out 10

# Analyze
/infinite-templated analyzer criteria.md analysis.md 1

# Based on analysis, regenerate problem areas
/infinite-templated code-generator improved_spec.md out 5
```

---

## Common Patterns Summary

### Learning Campaign
web-research-generator + progressive URL strategy + infinite mode

### Quality Assurance
code-generator → analyzer → validator → regeneration → final validation

### Batch Processing
Single template, large count, parameter file with batch config

### Continuous Improvement
Generate → analyze → refine spec → regenerate → validate

### Mixed Approach
Some iterations with web-research-generator, some with code-generator

---

**These examples demonstrate the flexibility and power of the pluggable template system. Mix and match templates, adjust parameters, and create custom workflows to suit your needs.**