Tiny Builder

🎨 Tiny Builder

What it is: A kid-first OpenClaw skill that helps children (ages 5-8) build simple HTML games, drawings, animations, and stories. Who it's for: Kids on tablet/phone with a parent nearby.

Tiny Builder outputs a shareable gui.new link after each build so creations are immediately playable.

Quick setup

# 1) Clone and create projects folder
git clone https://github.com/dylanfeltus/tiny-builder.git ~/tiny-builder
mkdir -p ~/tiny-builder/projects

# 2) Add skill directory to your OpenClaw agent
# skills: ["~/tiny-builder"]

Demo

Try examples/catch-game.html for a ready-made, kid-friendly project.

---

✨ What Kids Can Build

• 🎮 Games — Catch games, mazes, quizzes, platformers
• 🎨 Drawings — Interactive drawing pads with colors and tools
• 🌟 Animations — Stars, rockets, underwater worlds, rainbows
• 📖 Stories — Interactive choose-your-own-adventure tales

Everything works in a web browser. No coding knowledge needed.

---

🎯 Why Tiny Builder?

For Kids:

• ✅ Builds confidence through quick wins (working projects in under 30 seconds)
• ✅ Teaches creative thinking through guided choices
• ✅ Makes technology feel accessible and fun
• ✅ Celebrates every creation — no judgment, no grades

For Parents:

• ✅ Safe sandbox — No general web access. gui.new is used only for publishing playable links.
• ✅ Activity log — See what your kid built and how they're doing
• ✅ Content filtering — Age-appropriate redirects for inappropriate requests
• ✅ Screen time that builds — Not just consuming, but creating!

---

🚀 Quick Start

1. Set Up the Project Folder

# Clone the repo
git clone https://github.com/dylanfeltus/tiny-builder.git ~/tiny-builder

# Create the projects folder (where kids' creations go)
mkdir -p ~/tiny-builder/projects

2. Add the Skill to Your Agent

In OpenClaw, point the agent's skill config to the cloned folder:

# Add skill path to agent config: ~/tiny-builder

Or manually copy SKILL.md and SOUL.md to your agent's skill directory.

3. Create the Agent

In OpenClaw, create a new agent profile:

name: tiny-builder
skills:
  - ~/tiny-builder
model: claude-sonnet-4  # or your preferred model

4. Start Building!

Launch the agent and let your kid start creating:

👧 "I want to make a game!"
🤖 "Awesome! What kind of game? ⭐ Catch falling stars / 🧩 A maze / 🧠 A quiz / 🏃 A jumping game"

---

📖 Example Interactions

Building a Game

Kid: "Can we make a game?"

Agent: "Awesome! What kind of game?

⭐ Catch falling stars
🧩 A maze
🧠 A quiz
🏃 A jumping game"

Kid: "Stars!"

Agent: "Great choice! I'm building you a star-catching game right now... ✨"

[Creates star-catcher.html]

Agent: "🎉 AMAZING! You just built a star-catching game!
Open it by double-clicking:
~/tiny-builder/projects/star-catcher.html"

Kid: [plays game]

Agent: "That's SO COOL! Want to make it even better?

🎵 Add fun sounds when you catch stars
🌈 Make the stars different colors
⚡ Make more stars fall at once"

Building a Drawing

Kid: "I want to draw!"

Agent: "Cool! What should we draw?

🐶 An animal
🌌 Outer space
🌊 Underwater world
💡 Your own idea (describe it!)"

Kid: "Underwater!"

Agent: "Awesome! Building you an underwater drawing pad... 🌊"

[Creates underwater-draw.html with ocean colors and fish stickers]

Agent: "🎉 AMAZING! You just built an underwater drawing pad!
Open it: ~/tiny-builder/projects/underwater-draw.html

You can draw with ocean colors and add fish! 🐠"

---

🛡️ Safety Features

Content Filtering

Agent automatically redirects inappropriate requests:

Kid: "Can we make a spooky ghost game?"

Agent: "YES! 👻 A spooky ghost game sounds awesome! Do you want to:
1. 🏚️ Explore a haunted house and find hidden ghosts
2. 👻 BE the ghost and scare silly characters
3. 🔦 Use a flashlight to catch sneaky ghosts
Which one sounds fun?"

Sandboxed Environment

• ✅ All projects stay in ~/tiny-builder/projects/
• ✅ No general web access (no web_search, web_fetch, external URLs); only gui.new API calls for link publishing
• ✅ No messaging capabilities
• ✅ No dangerous system commands

Parent Dashboard

Every session is logged to ~/tiny-builder/parent-log.md:

---
Date: 2026-02-26 2:30 PM
Duration: 15 minutes
Projects Created:
- star-catcher.html — Catch falling stars game (added sound effects)
- rainbow-draw.html — Drawing pad with rainbow colors

What They Asked For:
"Can we make a game where you catch stars and then draw rainbows?"

How It Went:
They were super engaged! Built the star game first, then wanted
to make a drawing app. Asked great questions about adding colors.
Very proud of both projects!

Flags: None
---

---

🎨 What Gets Created

All projects are single HTML files that work by double-clicking them. They open in any web browser.

Technical Details (for parents/developers):

• Pure HTML/CSS/JavaScript — No build tools, no dependencies
• Inline everything — Styles and scripts in one file
• Touch-friendly — Big buttons, large tap targets (great for tablets)
• Bright and colorful — Designed to engage young kids
• Canvas API for games and drawings
• Web Audio API for sound effects (simple beeps and boops)
• CSS animations for visual effects

---

📁 Project Structure

~/tiny-builder/
├── SKILL.md              # Agent instructions
├── SOUL.md               # Agent's personality
├── README.md             # This file
├── parent-log.md         # Session logs (auto-created)
├── examples/             # Demo projects
│   ├── catch-game.html
│   ├── drawing-pad.html
│   ├── space-animation.html
│   └── quiz-game.html
├── templates/            # Base templates for the agent
│   ├── game-base.html
│   ├── drawing-base.html
│   ├── animation-base.html
│   └── story-base.html
└── projects/             # Kids' creations go here
    ├── build-log.md      # Trophy case of what they've built
    └── [project files]

---

🎮 Example Projects (Included)

Check out examples/ for fully functional demos:

1. catch-game.html — Click falling stars before they hit the ground. Colorful, with sound effects and score tracking.

2. drawing-pad.html — Canvas drawing tool with big color buttons, brush size slider, and clear button. Touch-friendly for tablets.

3. space-animation.html — Animated stars, planets, and a flying rocket. Mesmerizing and colorful.

4. quiz-game.html — Animal quiz with emoji, multiple choice, celebration animations, and score tracking.

Try them out! These show what kids can build with Agent's help.

---

💡 Tips for Parents

Getting Started:

1. Open an example project with your kid — let them play with it
2. Ask: "Want to build something like this?"
3. Launch Agent and let them tell it what they want
4. Watch them get excited when it works!

Encouraging Creativity:

• Let them iterate — "Want to add colors? Sounds? More of something?"
• Celebrate every creation, no matter how simple
• Keep their projects — it's amazing to see progress over time
• Ask "What do you want to build next?"

When They're Stuck:

• Agent will offer specific choices (never overwhelming)
• You can suggest: "Maybe ask Agent to add [specific thing]?"
• Remind them: "You built that! You're a real builder!"

Screen Time Balance:

• Building > passive consumption
• Set a timer for sessions (15-30 minutes is great)
• Projects they build can be shared with family!

---

🔧 Customization

Adding New Templates

Drop new HTML templates in ~/tiny-builder/templates/ and Agent can use them.

Adjusting Safety Settings

Edit SKILL.md to modify:

• Content restrictions
• File path permissions
• Available tools

Changing Agent's Personality

Edit SOUL.md to adjust tone, phrases, or style.

---

🌟 Philosophy

Tiny Builder is built on these principles:

1. Fast feedback — Kids s