Skip to content

Instantly share code, notes, and snippets.

@burkeholland
Last active June 9, 2026 02:33
Show Gist options
  • Select an option

  • Save burkeholland/79d3e786464064c7c0d952c069c08dbe to your computer and use it in GitHub Desktop.

Select an option

Save burkeholland/79d3e786464064c7c0d952c069c08dbe to your computer and use it in GitHub Desktop.
Fledgling competition prep - vibe coding flow

Fledgling — Loop-Engineered Competition Build

The demo: You design the loop, kick it off, and watch a game build itself. You steer. You don't type prompts step by step.


The Loop (What the Audience Sees)

  1. You describe the game (grill-me validates it) — 5 min
  2. You set the goal and walk away — the agent builds in phases autonomously
  3. You intervene only when needed — "that's tacky, fix it" or "controls are wrong"
  4. Fleet kicks in for parallel polish at the end
  5. Done. A playable, beautiful bird game — built by a loop you designed.

The 5 Loop Primitives (All Present)

# Primitive How It Shows Up
1 Automations /every runs QA checks on a schedule while builder works
2 Worktrees/isolation Fleet runs parallel agents on independent modules
3 Skills A ghibli-aesthetic skill encodes visual rules — agent reads it automatically
4 Plugins/connectors Agent-browser opens the game and visually verifies it works
5 Sub-agents Builder agent + verifier agent (different jobs, different checks)
+1 Memory/state plan.md tracks what's done — persists between cycles

Step 0: Skill Setup (Do This First)

Create a skill so the agent never needs to be told about aesthetics — it just knows:

/skill create ghibli-aesthetic

Content:

# Ghibli Aesthetic

When building any visual/3D scene in this project:

- Use MeshLambertMaterial ONLY (never Standard, never Phong)
- Ambient light: warm #FFF5E6, intensity 0.6
- Directional light: golden #FFE4B5, intensity 0.8, low angle
- Fog: #FFF8DC, near 50, far 200
- Color palette: earth tones (#DEB887, #F4A460, #CD853F), muted greens (#7EC850), warm roofs (#C84C4C, #4682B4)
- No metallic/shiny surfaces. No pure white lights. No harsh shadows.
- Sky: gradient #87CEEB to #FFF8DC
- Overall feel: Studio Ghibli still frame, golden hour, warm Saturday morning

This is the "explain once, never again" primitive.


Step 1: Grill-Me (Sets the Vision)

I want to build a cozy 3D bird flying game called Fledgling. You're a baby bird learning to fly over a small town. Three.js, browser, no build step. Should feel like a Studio Ghibli film — warm, soft, joyful. No losing. Just the sky and the small pleasures of being a bird.

Let grill-me challenge you. Answer naturally. This produces the spec.


Step 2: Plan Mode (Creates the Roadmap)

Turn this into a phased build plan. Three.js from CDN, vanilla JS modules, static server. Each phase must be independently complete and playable. The plan should live in plan.md so the agent can track progress.

Step 3: Set the Goal (The Loop Starts Here)

This is the key moment. You set the goal and autopilot takes over:

Build Fledgling by following plan.md phase by phase. After each phase:
1. Start the server
2. Use agent-browser to open the game and verify it loads, looks warm/cozy (not tacky), and the bird flies correctly
3. If something looks wrong, fix it before continuing
4. Update plan.md to mark the phase complete
5. Move to the next phase

The game is done when all phases are complete and the bird is flyable in a beautiful world.

CONTROLS: W = dive forward, S = climb, A/D = bank, SPACE = flap. Camera follows behind smoothly.

The aesthetic skill handles the visual rules automatically. The agent-browser connector is the "eyes" — it actually looks at the game instead of just assuming it works.

Then you watch. The agent:

  • Builds phase 1 (scene + bird + controls)
  • Tests it
  • Marks it done in plan.md
  • Builds phase 2 (interactions)
  • Tests it
  • Marks it done
  • Continues...

Step 4: Fleet (Parallel Polish)

When the core is done, kick off fleet for independent modules:

Use fleet to add these three independent modules in parallel:
1. Synthesized audio (wind, flap, splat, chirps) — Web Audio API, no files
2. Time-of-day cycle with golden hour lighting transitions
3. A flock of AI birds that circle the town and scatter when I approach

Interventions (Your Steering Moments)

These are the only things you type during the build:

Problem What You Say
Looks tacky "Too harsh. Warm fog, golden light, earth tones, MeshLambertMaterial."
Controls inverted "W should dive forward, not climb."
Too complex "Cut that. Keep it simple and charming."
Stuck/looping "Skip this and move to the next phase."

What This Demonstrates

  1. Loop engineering — you designed a self-driving system, not a prompt chain
  2. Goal-based autonomy — the agent decides what's next, you set the destination
  3. Plan as state — plan.md is the memory that persists between cycles
  4. Skills as knowledge — aesthetic constraints baked in, not re-explained
  5. Fleet as parallelism — independent work happening simultaneously
  6. Human as steering wheel — you intervene with judgment, not instructions

/every — The Automation Heartbeat

This is the scheduled verifier running independently of the builder:

/every 2 minutes: open the game in agent-browser, take a screenshot, verify the scene looks warm and cozy (no harsh white, no garish colors, fog present). If it looks wrong, file a note in plan.md under "Issues Found".

This shows:

  • Automation (primitive #1) — runs on a schedule without you
  • Connector (primitive #4) — agent-browser as the "eyes"
  • Sub-agent / maker-checker split (primitive #5) — the verifier is separate from the builder
  • Memory — findings go to plan.md, not lost in chat

Pre-Flight

  • Node.js available
  • Know your grill-me answers (concept, not scripts)
  • This gist open for the goal prompt + interventions
  • That's it. The loop does the rest.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment