17 KiB
Template Usage Examples
Concrete examples demonstrating how to use the pluggable template system for various scenarios.
Table of Contents
- Web-Enhanced Visualization Campaign
- Code Generation Series
- Quality Analysis Workflow
- Validation Pipeline
- Custom Template Creation
- Infinite Mode Learning
- 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
-
Orchestrator loads:
- Template:
web-research-generator.md - Spec:
specs/d3_viz_spec.md - Params:
params/d3_campaign.json
- Template:
-
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
-
Each agent:
- Fetches assigned URL
- Extracts 2+ techniques
- Analyzes existing iterations
- Generates unique visualization
- Documents learning in file header
-
Result:
- 10 HTML files in
d3_output/ - Each demonstrates different D3 techniques
- Progressive sophistication from basic → advanced
- 10 HTML files in
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
-
Orchestrator:
- Loads
code-generator.mdtemplate - Reads spec
- Plans 20 unique themes
- Loads
-
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
-
Each agent:
- Analyzes existing components
- Plans unique approach
- Generates component with theme
- Ensures no duplicates
-
Result:
- 20 unique components in
components/ - Diverse themes and approaches
- All meet spec requirements
- 20 unique components in
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
-
Orchestrator:
- Loads
analyzer.mdtemplate - 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, ..." }
- Loads
-
Analyzer agent:
- Finds all components
- Analyzes each against criteria
- Collects metrics
- Identifies patterns
- Generates comprehensive report
-
Result:
- Detailed analysis report in
reports/quality_analysis.md - Metrics for each component
- Insights and recommendations
- Detailed analysis report in
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
-
Orchestrator:
- Loads
validator.mdtemplate - Reads validation rules
- Parameters:
{ "VALIDATION_SPEC": "specs/validation_rules.md", "TARGET_PATTERN": "components/*.html", "OUTPUT_FILE": "reports/validation_report.md" }
- Loads
-
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
-
Result:
- Validation report with:
- Overall pass/fail status
- Per-component results
- Detailed failure evidence
- Remediation steps for each issue
- Validation report with:
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:
-
What types of APIs? → REST APIs with JSON responses
-
What should agents test? → Status codes, response format, data validation
-
What parameters vary? → API endpoint, auth token, test cases file
-
What should output be? → Test report with pass/fail and detailed logs
-
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:
- Load test cases from file
- For each test case, make HTTP request
- Validate response
- Document results
- 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
-
Wave 1 (iterations 1-5):
- Uses foundation URLs
- Basic techniques
- Builds knowledge base
-
Wave 2 (iterations 6-10):
- Switches to intermediate URLs
- More sophisticated techniques
- Builds on wave 1
-
Wave 3 (iterations 11-15):
- Advanced URLs
- Complex patterns
- Combines multiple techniques
-
Wave 4+ (iterations 16+):
- Expert URLs
- Highly sophisticated
- Novel combinations
-
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
- Generate components (code-generator)
- Analyze quality (analyzer)
- Validate compliance (validator)
- Regenerate failures (code-generator)
- 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 interactivityforest_component_013.html- Incomplete documentationabstract_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:
- Run with initial spec
- Review outputs
- Update spec with clearer requirements
- 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.