DOCSEARCHbyAlgolia
Submit Docs

Infinite Agentic Loop

repository·main·Indexed 20 days ago

https://github.com/disler/infinite-agentic-loop

An experimental Proof of Concept (POC) for Claude Code that uses a custom slash command, `/project:infinite`, to orchestrate multiple parallel AI agents. It iteratively generates content based on a specification file, supporting single generation, small batches, large batches, and an infinite mode for progressive sophistication.

Tokens
12.9K
Snippets
27
Records
43
Agent score
70%

What's inside infinite-agentic-loop

  1. Implement State Management for Hybrid Components

    main

    When combining multiple functions into a single component, use a Unified Data Model to ensure all parts work in harmony.

    Key State Principles

    • Single Source of Truth: Use one data model for all combined functions.
    • Intelligent Defaults: Set initial states based on the combined needs of all functions.
    • Cross-Function Communication: Ensure changes in one part of the component (e.g., a filter in a Search Hub) appropriately affect other parts (e.g., the results preview).
    • Memory & Recovery: The component should remember user preferences across all its integrated functions.
    • Conflict Resolution: Gracefully handle scenarios where combined functions have competing needs.

  2. Adhere to UI Innovation Practical Viability Principles

    main

    To ensure the innovative component is usable and robust, follow these constraints:

    • Native Web Technologies Only: Use only HTML, CSS, and vanilla JavaScript. Do not use external libraries, frameworks, or assets.
    • Single File Constraint: Everything must work in one self-contained .html file.
    • Browser Compatibility: Leverage modern but widely-supported web APIs.
    • Performance: Maintain 60fps animations and responsive interactions (use requestAnimationFrame).
    • Accessibility: Ensure full keyboard navigation, screen reader support, and compliance with WCAG 2.1 AA standards (use ARIA attributes).
    • Progressive Enhancement: Implement graceful degradation for older browsers.

  3. Develop a Unique Design Theme

    main

    A theme must embody a distinctive design language to create a memorable user experience. When developing a theme, consider the following dimensions:

    Theme Categories (Examples)

    • Organic Nature: Plant growth, water flow, natural textures.
    • Digital Minimalism: Pure geometry, negative space, precise typography.
    • Retro Computing: Terminal aesthetics, scan lines, monospace fonts.
    • Glass Morphism: Translucent layers, backdrop blur, light refraction.
    • Cyberpunk Future: Neon accents, glitch effects, digital noir.
    • Architectural Brutalism: Bold concrete forms, stark contrasts.

    Implementation Dimensions

    • Visual Identity: Consistent color palette, typography, iconography, and spacing.
    • Motion Language: Signature animation easing, timing, and transition styles (e.g., bouncy physics for 'Playful Animation' or breathing animations for 'Zen Philosophy').
    • Interaction Character: How the component responds to input (e.g., precise, organic, or playful).
    • Micro-Details: Small touches like texture, depth, or sound identity that reinforce the theme.

  4. Apply UI enhancement principles

    main

    To ensure an enhanced component provides "Self-Evident Value," apply these principles across four key dimensions:

    1. Animation & Motion

    • State Transitions: Smooth changes for hover, focus, active, and disabled states.
    • Loading States: Use elegant spinners or skeleton screens.
    • Micro-Animations: Provide feedback for button presses, input focus, and menu reveals.
    • Physics: Use natural easing and spring animations.

    2. Interaction Intelligence

    • Predictive Behavior: Implement auto-complete and smart suggestions.
    • Context Awareness: Adapt to user patterns and device capabilities.
    • Progressive Disclosure: Reveal complexity gradually.
    • Shortcuts: Support keyboard shortcuts and gestures.

    3. Visual & Spatial Design

    • Depth: Use subtle shadows and elevation.
    • Typography: Optimize font choice, line spacing, and readability.
    • Color: Use accessible palettes and support dark mode.

    4. Accessibility & Inclusion

    • Keyboard Navigation: Ensure full support with a logical tab order.
    • Screen Readers: Use proper ARIA labels and semantic markup.
    • Motion Sensitivity: Respect the prefers-reduced-motion setting.
    • Touch Targets: Ensure proper sizing for mobile users.

  5. Target characteristics for high-quality hybrid components

    main

    To achieve excellence in the hybrid component approach, aim for these five specific outcomes:

    • Thematically Distinctive: Strong design personality that creates a memorable experience.
    • Functionally Integrated: Multiple UI capabilities working together seamlessly.
    • Practically Superior: Genuinely better than using separate components.
    • Technically Excellent: Smooth performance despite increased complexity.
    • Immediately Compelling: Users instantly understand and appreciate the hybrid approach.

  6. How the Infinite Agentic Loop works

    main

    The loop follows a structured process to ensure high-quality, evolving content generation:

    1. Specification Analysis: The system reads and understands the requirements in the provided <spec_file>.
    2. Directory Reconnaissance: It analyzes the existing files in the <output_dir> to determine the current state and starting point for new iterations.
    3. Parallel Coordination: It deploys Sub Agents, each assigned unique creative directions to ensure variety.
    4. Quality Assurance: Each iteration is checked to ensure it is unique and compliant with the original specification.
    5. Wave Management: In infinite mode, the system manages successive waves of agents to maintain progressive sophistication.

  7. Understand MCP server scopes

    main

    MCP server configurations can be stored in three different scopes, determining their availability and how they are shared:

    1. local (Default): Stored in your project-specific user settings. Available only to you in the current project.
    2. project: Stored in a .mcp.json file at the project root. This file should be checked into version control to share the same MCP tools with your entire team.
    3. user: Available to you across all projects on your machine. These are private to you.

    Precedence Rules:

    • local > project > user (if names conflict).

    Security Note: Claude Code will prompt you to approve project-scoped servers before using them.

    # Add a local-scoped server (default)
claude mcp add my-private-server /path/to/server

# Add a project-scoped server (shared via .mcp.json)
claude mcp add shared-server -s project /path/to/server

# Add a user-scoped server (available across all projects)
claude mcp add my-user-server -s user /path/to/server

  8. Apply the Ultra-Thinking Directive for Component Creation

    main

    Before generating a themed hybrid component, use the following directive to plan the architecture, file responsibilities, and integration strategy. This ensures the resulting component is architecturally sound and professionally crafted.

    1. Architectural Decisions

    • Determine how the three-file structure enhances the specific theme.
    • Assign responsibilities: What belongs in CSS vs JavaScript?
    • Plan file communication and patterns that support long-term evolution.
    • Evaluate how separation of concerns improves maintainability.

    2. File Responsibility Planning

    • HTML: Define the minimal, semantic structure required.
    • CSS: Distinguish between structural styles and thematic styles.
    • JavaScript: Separate essential logic from non-essential enhancements.
    • Identify natural boundaries between concerns to keep files focused and clean.

    3. Integration Excellence

    • Plan for seamless file interaction.
    • Establish naming conventions that ensure clarity.
    • Design to avoid tight coupling.
    • Select patterns that enable future extensions and support the theme.

  9. Apply UI Replacement Strategies

    main

    When designing a replacement for a traditional component, use one of these five strategies to drive innovation:

    1. Metaphor Transformation: Replace digital metaphors (like buttons or sliders) with physical or natural ones (like gravity, magnetism, or fluid dynamics).
    2. Interaction Modality Shift: Move beyond standard click/touch interactions to include gesture, voice, gaze, or environmental input.
    3. Paradigm Inversion: Turn passive elements into active ones, or transform individual interactions into collaborative ones.
    4. Dimensional Expansion: Add spatial, temporal, or contextual dimensions to the component (e.g., 3D environments or lifecycle progression).
    5. Intelligence Integration: Add learning, adaptation, or predictive capabilities to the component.

  10. Analyze images and screenshots in Claude Code

    main

    You can provide images to Claude Code to analyze UI elements, diagrams, mockups, or error screenshots. This is useful when text descriptions are cumbersome or unclear.

    How to add an image

    1. Drag and drop: Drag an image directly into the Claude Code window.
    2. Paste: Copy an image and use cmd+v (on Mac) to paste it into the CLI.
    3. Path reference: Provide the file path directly in a command:
      claude "Analyze this image: /path/to/your/image.png"

    Common usage patterns

    • Analysis: What does this image show? or Describe the UI elements in this screenshot.
    • Contextual debugging: Here's a screenshot of the error. What's causing it?.
    • Code generation from visuals: Generate CSS to match this design mockup or What HTML structure would recreate this component?.
    claude "Analyze this image: /path/to/your/image.png"

  11. Structure index.html for Hybrid Components

    main

    The index.html file must contain only semantic structure. Do not include inline styles or scripts. Use meaningful class names and data attributes for JavaScript hooks and accessibility (ARIA).

    Key Requirements:

    • Link styles.css in the <head>.
    • Include script.js before the closing </body> tag.
    • Use a <main> wrapper for the component content.
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[Theme Name] [Hybrid Component Name]</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <main>
        <h1>[Hybrid Component Name] - [Theme Name] Theme</h1>
        <div class="hybrid-component">
            <!-- Component structure with meaningful class names -->
            <!-- Data attributes for JavaScript hooks -->
            <!-- Accessibility attributes (ARIA labels, roles) -->
        </div>
    </main>
    <script src="script.js"></script>
</body>
</html>

  12. Run parallel Claude Code sessions with Git worktrees

    main

    To work on multiple tasks simultaneously with complete code isolation, use Git worktrees. This allows you to run separate Claude Code instances in different directories, each with its own file state, without interfering with each other.

    Workflow:

    1. Create a worktree: Use git worktree add <path> -b <branch> to create a new directory with a separate working copy of your repository.
    2. Navigate and Run: cd into the new worktree directory and run claude.
    3. Parallelism: Open a new terminal, cd into a different worktree, and run claude again.
    4. Cleanup: Once finished, use git worktree remove <path>.

    Important Note: You must initialize your development environment (e.g., npm install, pip install) in each new worktree directory before running Claude Code.

    # Create a new worktree for a feature
git worktree add ../project-feature-a -b feature-a

# Navigate to the worktree and start Claude
cd ../project-feature-a
claude

# In another terminal, work on a bugfix simultaneously
cd ../project-bugfix
claude

# List active worktrees
git worktree list

# Remove worktree when done
git worktree remove ../project-feature-a