Go to file
Shawn Anderson 03cbe3fbe3 Generate 3 Mapbox globe visualizations via web-enhanced infinite loop
Demonstrates progressive Mapbox GL JS learning through parallel agents with
web research integration. Each globe fetches unique documentation, learns
specific techniques, and creates increasingly sophisticated visualizations.

Globe 2: Global Temperature Anomaly Heatmap
- Web source: Mapbox heatmap layer documentation
- Techniques: heatmap-weight, zoom-responsive intensity, diverging colors
- Data: 280 weather stations with temperature anomalies (-0.8°C to +3.6°C)
- Features: Dual-layer approach (heatmap + circles), climate pattern revelation
- Improvement: Density visualization vs discrete circles

Globe 3: Global Economic Dashboard
- Web source: Mapbox data-driven styling documentation
- Techniques: interpolate/step expressions, multi-property encoding
- Data: 120 countries with GDP, growth, development, trade metrics
- Features: Dynamic metric switching (16 combinations), diverging color scales
- Improvement: Advanced expressions for multi-dimensional data visualization

Globe 4: Global Digital Infrastructure (Multi-Layer)
- Web source: Mapbox choropleth documentation
- Techniques: Multi-layer composition, fill+circle+line+label layers
- Data: 100+ countries (internet penetration) + 80 tech hubs + connections
- Features: Layer toggles, region filtering, opacity controls, tier classification
- Improvement: Synthesis of all learnings with 4 simultaneous interactive layers

All visualizations include:
- 3D rotating globe with atmosphere effects
- Auto-rotation with smart pause on interaction
- Professional dark-themed UI with legends
- Interactive popups and navigation controls
- Comprehensive documentation of techniques learned

Total: 16 files, ~3,800 lines of production-ready code demonstrating
progressive Mapbox mastery through web-enhanced learning.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-09 18:00:14 -07:00
.claude Add web-enhanced infinite agentic loop with progressive learning 2025-10-09 17:37:50 -07:00
ai_docs Add web-enhanced infinite agentic loop with progressive learning 2025-10-09 17:37:50 -07:00
d3_test Add web-enhanced infinite agentic loop with progressive learning 2025-10-09 17:37:50 -07:00
images progress 2025-06-08 15:13:35 -05:00
legacy progress 2025-06-07 09:44:26 -05:00
mapbox_test Generate 3 Mapbox globe visualizations via web-enhanced infinite loop 2025-10-09 18:00:14 -07:00
specs Add Mapbox GL JS 3D globe web-enhanced infinite loop system 2025-10-09 17:47:34 -07:00
src progress 2025-06-07 11:07:07 -05:00
src_group progress 2025-06-10 11:34:24 -05:00
src_infinite progress 2025-06-07 11:07:07 -05:00
CLAUDE.md Add web-enhanced infinite agentic loop with progressive learning 2025-10-09 17:37:50 -07:00
README.md Add web-enhanced infinite agentic loop with progressive learning 2025-10-09 17:37:50 -07:00
WEB_ENHANCED_GUIDE.md Add web-enhanced infinite agentic loop with progressive learning 2025-10-09 17:37:50 -07:00
mock_data.txt progress 2025-06-06 11:31:34 -05:00

README.md

Infinite Agentic Loop POC

Watch the Tutorial: Infinite Agentic Loop with Claude Code

An experimental project demonstrating Infinite Agentic Loop patterns using Claude Code - now with Web-Enhanced Progressive Learning!

Infinite Agentic Loop

Overview

This project provides two powerful slash commands for orchestrating multiple AI agents in parallel:

  1. /project:infinite - Original loop for generating evolving iterations based on specifications
  2. /project:infinite-web - NEW! Web-enhanced loop where each iteration learns from web resources

What's New: Web-Enhanced Learning

The new /project:infinite-web command creates a self-improving knowledge loop where:

  • Each iteration fetches and learns from a different web URL
  • Knowledge progressively accumulates across iterations
  • Agents apply learnings from documentation, tutorials, and examples
  • Output quality improves as the system learns more sophisticated techniques

Usage

Read .claude/settings.json to see the permissions and commands allowed.

Start Claude Code: claude

Type slash command /project:infinite to start the infinite agentic loop.

The infinite command takes three arguments:

/project:infinite <spec_file> <output_dir> <count>

4 Command Variants

1. Single Generation

/project:infinite specs/invent_new_ui_v3.md src 1

Generate one new iteration using the UI specification.

2. Small Batch (5 iterations)

/project:infinite specs/invent_new_ui_v3.md src_new 5

Deploy 5 parallel agents to generate 5 unique iterations simultaneously.

3. Large Batch (20 iterations)

/project:infinite specs/invent_new_ui_v3.md src_new 20

Generate 20 iterations in coordinated batches of 5 agents for optimal resource management.

4. Infinite Mode

/project:infinite specs/invent_new_ui_v3.md infinite_src_new/ infinite

Continuous generation in waves until context limits are reached, with progressive sophistication.

Web-Enhanced Command (NEW!)

D3 Data Visualization Example

Generate progressively sophisticated D3 visualizations with web-based learning:

# Single visualization with web learning
/project:infinite-web specs/d3_visualization_progressive.md d3_output 1

# Batch of 5 with different web sources
/project:infinite-web specs/d3_visualization_progressive.md d3_output 5

# Progressive learning (20 iterations)
/project:infinite-web specs/d3_visualization_progressive.md d3_output 20 specs/d3_url_strategy.json

# Infinite mode - continuous learning
/project:infinite-web specs/d3_visualization_progressive.md d3_output infinite specs/d3_url_strategy.json

How It Works:

  1. Initial Priming: Fetches 3-5 foundational web resources to build knowledge base
  2. Progressive URL Assignment: Each iteration gets a URL matched to its complexity level
  3. Web Fetch & Learn: Agent fetches URL, extracts techniques, applies learnings
  4. Generate & Document: Creates output demonstrating new technique, documents source
  5. Accumulate Knowledge: Each iteration builds on previous learnings
  6. Infinite Waves: Continues with progressive sophistication until context limits

See WEB_ENHANCED_GUIDE.md for complete documentation and how to create your own web-enhanced loops!

How the Original Loop Works

  1. Specification Analysis: Reads and understands the spec file requirements
  2. Directory Reconnaissance: Analyzes existing iterations to determine starting point
  3. Parallel Coordination: Deploys Sub Agents with unique creative directions
  4. Quality Assurance: Ensures each iteration is unique and spec-compliant
  5. Wave Management: For infinite mode, manages successive waves of agents

Directions you can take to enhance this pattern

Original Loop Enhancements

  • Apply this to a use case of your choice
  • Build an MCP Server that enables reuse of the infinite agentic loop
  • Get the .claude/commands/infinite.md into your ~/.claude/commands/ directory for global use
  • Update .claude/commands/infinite.md to generate sets of files instead of a single file

Web-Enhanced Loop Possibilities

  • React Components: Progressive React patterns from official docs, popular libraries, and best practices
  • CSS Techniques: Master CSS animations, layouts, and effects through web tutorials
  • Python Data Science: Learn pandas, matplotlib, seaborn through progressive web examples
  • Machine Learning: Implement progressively complex ML models with paper and tutorial learnings
  • API Development: Build REST/GraphQL APIs learning from official documentation
  • Game Development: Create progressively complex games learning from web tutorials
  • Any Domain: Create your own spec + URL strategy for any progressive learning goal

See WEB_ENHANCED_GUIDE.md for detailed instructions on creating your own web-enhanced loops!

Master AI Coding

Learn to code with AI with foundational Principles of AI Coding

Follow the IndyDevDan youtube channel for more AI coding tips and tricks.

Use the best Agentic Coding tool: Claude Code