infinite-agents-public/infinite_variants/infinite_variant_3/examples/template_usage.md

17 KiB

Template Usage Examples

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

Table of Contents

  1. Web-Enhanced Visualization Campaign
  2. Code Generation Series
  3. Quality Analysis Workflow
  4. Validation Pipeline
  5. Custom Template Creation
  6. Infinite Mode Learning
  7. 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:

# 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:

{
  "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

/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:
      {
        "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:

# 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

/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:
      {
        "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:

# 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:

{
  "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

/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:
      {
        "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:

# 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

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

What Happens

  1. Orchestrator:

    • Loads validator.md template
    • Reads validation rules
    • Parameters:
      {
        "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

/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

/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:

{
  "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

/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

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

Result: 20 components in components/

Step 2: Quality Analysis

/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

/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
/infinite-templated code-generator specs/regeneration_spec.md components 3 params/regen_params.json

Step 6: Final Validation

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

Result: All components pass

Step 7: Final Analysis

/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

# 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

/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:

# 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:

# 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:

# 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:

# 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.