# Tiny Builder

Adopt this skill: https://proskills.md/skills/productivity/tiny-builder

Page: https://proskills.md/skills/productivity/tiny-builder
This document is the public skill bundle for that page. It contains SKILL.md and every helper file the catalog carries. No login is required.

## File: LICENSE
upstream: https://github.com/dylanfeltus/tiny-builder/blob/HEAD/LICENSE

Content is not inlined in the catalog. Read the upstream file: https://github.com/dylanfeltus/tiny-builder/blob/HEAD/LICENSE

## File: README.md
upstream: https://github.com/dylanfeltus/tiny-builder/blob/HEAD/README.md

````text
# 🎨 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
```bash
# 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

```bash
# 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:

```bash
# 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:

```yaml
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`:

```markdown
---
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
````

## File: SKILL.md
upstream: https://github.com/dylanfeltus/tiny-builder/blob/HEAD/SKILL.md

Content is not inlined in the catalog. Read the upstream file: https://github.com/dylanfeltus/tiny-builder/blob/HEAD/SKILL.md

## File: SOUL.md
upstream: https://github.com/dylanfeltus/tiny-builder/blob/HEAD/SOUL.md

Content is not inlined in the catalog. Read the upstream file: https://github.com/dylanfeltus/tiny-builder/blob/HEAD/SOUL.md

## File: examples
upstream: https://github.com/dylanfeltus/tiny-builder/blob/HEAD/examples

Content is not inlined in the catalog. Read the upstream file: https://github.com/dylanfeltus/tiny-builder/blob/HEAD/examples

## File: parent-log.md
upstream: https://github.com/dylanfeltus/tiny-builder/blob/HEAD/parent-log.md

Content is not inlined in the catalog. Read the upstream file: https://github.com/dylanfeltus/tiny-builder/blob/HEAD/parent-log.md

## File: projects
upstream: https://github.com/dylanfeltus/tiny-builder/blob/HEAD/projects

Content is not inlined in the catalog. Read the upstream file: https://github.com/dylanfeltus/tiny-builder/blob/HEAD/projects

## File: templates
upstream: https://github.com/dylanfeltus/tiny-builder/blob/HEAD/templates

Content is not inlined in the catalog. Read the upstream file: https://github.com/dylanfeltus/tiny-builder/blob/HEAD/templates