From d4eb4cc435b999d852bf3deb71f6b2ca0c0c4e52 Mon Sep 17 00:00:00 2001
From: MK <mk@initializ.io>
Date: Tue, 3 Mar 2026 19:12:13 -0500
Subject: [PATCH 1/2] feat: add codegen-react and codegen-html embedded skills
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add two new code generation skills for frontend UI scaffolding:

- codegen-react: Vite + React 19 with Tailwind CSS, 4 tools
  (scaffold, run, read, write). The run tool handles npm install
  and starts the dev server with browser auto-open.
- codegen-html: Preact + HTM via CDN with Tailwind CSS, 3 tools
  (scaffold, read, write). Zero dependencies — just open index.html.

Both skills include Forge dark theme defaults, path traversal
prevention, and strong LLM guardrails to prevent common errors
(rewriting main.jsx, using default exports, inventing index.css).

Updates docs/skills.md with complete skill table and detailed
sections for both new skills.
---
 docs/skills.md                                |  77 +++++-
 .../local/embedded/codegen-html/SKILL.md      | 190 ++++++++++++++
 .../codegen-html/scripts/codegen-html-read.sh |  90 +++++++
 .../scripts/codegen-html-scaffold.sh          | 219 ++++++++++++++++
 .../scripts/codegen-html-write.sh             |  85 +++++++
 .../local/embedded/codegen-react/SKILL.md     | 236 ++++++++++++++++++
 .../scripts/codegen-react-read.sh             |  92 +++++++
 .../scripts/codegen-react-run.sh              |  81 ++++++
 .../scripts/codegen-react-scaffold.sh         | 197 +++++++++++++++
 .../scripts/codegen-react-write.sh            |  85 +++++++
 forge-skills/local/registry_embedded_test.go  |   6 +-
 11 files changed, 1351 insertions(+), 7 deletions(-)
 create mode 100644 forge-skills/local/embedded/codegen-html/SKILL.md
 create mode 100755 forge-skills/local/embedded/codegen-html/scripts/codegen-html-read.sh
 create mode 100755 forge-skills/local/embedded/codegen-html/scripts/codegen-html-scaffold.sh
 create mode 100755 forge-skills/local/embedded/codegen-html/scripts/codegen-html-write.sh
 create mode 100644 forge-skills/local/embedded/codegen-react/SKILL.md
 create mode 100755 forge-skills/local/embedded/codegen-react/scripts/codegen-react-read.sh
 create mode 100755 forge-skills/local/embedded/codegen-react/scripts/codegen-react-run.sh
 create mode 100755 forge-skills/local/embedded/codegen-react/scripts/codegen-react-scaffold.sh
 create mode 100755 forge-skills/local/embedded/codegen-react/scripts/codegen-react-write.sh

diff --git a/docs/skills.md b/docs/skills.md
index 32cc2a4..bbf2fc5 100644
--- a/docs/skills.md
+++ b/docs/skills.md
@@ -99,7 +99,7 @@ For skills **without** scripts (binary-backed skills like `k8s-incident-triage`)
 │                LLM Tool Registry                │
 ├─────────────────┬───────────────────────────────┤
 │  Builtins       │  web_search, http_request     │
-│  Skill Tools    │  tavily_research, ...         │  ← auto-registered from scripts
+│  Skill Tools    │  tavily_research, codegen_*   │  ← auto-registered from scripts
 │  read_skill     │  load any SKILL.md on demand  │
 │  cli_execute    │  run approved binaries        │
 ├─────────────────┴───────────────────────────────┤
@@ -143,10 +143,18 @@ forge skills list --tags kubernetes,incident-response
 
 ## Built-in Skills
 
-| Skill | Description | Scripts |
-|-------|-------------|---------|
-| `tavily-research` | Deep multi-source research via Tavily API | `tavily-research.sh`, `tavily-research-poll.sh` |
-| `k8s-incident-triage` | Read-only Kubernetes incident triage using kubectl | — (binary-backed) |
+| Skill | Category | Description | Scripts |
+|-------|----------|-------------|---------|
+| `github` | — | Create issues, PRs, and query repositories | — (binary-backed) |
+| `weather` | — | Get weather data for a location | — (binary-backed) |
+| `tavily-search` | — | Search the web using Tavily AI search API | `tavily-search.sh` |
+| `tavily-research` | — | Deep multi-source research via Tavily API | `tavily-research.sh`, `tavily-research-poll.sh` |
+| `k8s-incident-triage` | sre | Read-only Kubernetes incident triage using kubectl | — (binary-backed) |
+| `code-review` | dev | AI-powered code review for diffs and files | `code-review-diff.sh`, `code-review-file.sh` |
+| `code-review-standards` | dev | Initialize and manage code review standards | — (template-based) |
+| `code-review-github` | dev | Post code review results to GitHub PRs | — (binary-backed) |
+| `codegen-react` | developer | Scaffold and iterate on Vite + React apps | `codegen-react-scaffold.sh`, `codegen-react-read.sh`, `codegen-react-write.sh`, `codegen-react-run.sh` |
+| `codegen-html` | developer | Scaffold standalone Preact + HTM apps (zero dependencies) | `codegen-html-scaffold.sh`, `codegen-html-read.sh`, `codegen-html-write.sh` |
 
 ### Tavily Research Skill
 
@@ -210,6 +218,65 @@ The skill accepts two input modes:
 
 Requires: `kubectl`, optional `KUBECONFIG`, `K8S_API_DOMAIN`, `DEFAULT_NAMESPACE` environment variables.
 
+### Codegen React Skill
+
+The `codegen-react` skill scaffolds and iterates on **Vite + React** applications with Tailwind CSS:
+
+```bash
+forge skills add codegen-react
+```
+
+This registers four tools:
+
+| Tool | Purpose | Behavior |
+|------|---------|----------|
+| `codegen_react_scaffold` | Create a new project | Generates package.json, Vite config, React components with Tailwind CSS and Forge dark theme |
+| `codegen_react_run` | Start the dev server | Runs `npm install` + `npm run dev`, auto-opens browser, returns server URL and PID |
+| `codegen_react_read` | Read project files | Returns file content or directory listing (excludes `node_modules/`, `.git/`) |
+| `codegen_react_write` | Write/update files | Creates or updates files with path traversal prevention; Vite hot-reloads automatically |
+
+**Iteration workflow:**
+
+1. Scaffold the project with `codegen_react_scaffold`
+2. Start the dev server with `codegen_react_run` — installs deps, opens browser
+3. Read/write files with `codegen_react_read` / `codegen_react_write` — Vite hot-reloads on save
+4. Repeat step 3 to iterate on the UI
+
+**Scaffold output:** `package.json` (React 19, Vite 6), `vite.config.js`, `index.html` (with Tailwind CDN), `src/main.jsx`, `src/App.jsx` (Tailwind utility classes), `src/App.css`, `.gitignore`.
+
+**Safety:** Output directories must be under `$HOME` or `/tmp`. Path traversal (`..`, absolute paths) is rejected. Non-empty directories require `force: true`.
+
+Requires: `node`, `npx`, `jq`. Egress: `registry.npmjs.org`, `cdn.jsdelivr.net`, `cdn.tailwindcss.com`.
+
+### Codegen HTML Skill
+
+The `codegen-html` skill scaffolds standalone **Preact + HTM** applications with zero local dependencies:
+
+```bash
+forge skills add codegen-html
+```
+
+This registers three tools:
+
+| Tool | Purpose | Behavior |
+|------|---------|----------|
+| `codegen_html_scaffold` | Create a new project | Generates HTML with Preact + HTM via CDN and Tailwind CSS; supports single-file and multi-file modes |
+| `codegen_html_read` | Read project files | Returns file content or directory listing |
+| `codegen_html_write` | Write/update files | Creates or updates files with path traversal prevention |
+
+**Two scaffold modes:**
+
+| Mode | Files | Use Case |
+|------|-------|----------|
+| `single-file` | One `index.html` with inline JS | Quick prototypes, shareable demos |
+| `multi-file` | `index.html`, `app.js`, `components/Counter.js` | Larger apps with component separation |
+
+**Key differences from codegen-react:** No Node.js required. No build step. No `npm install`. Just open `index.html` in a browser. Uses `class` (not `className`) since HTM maps directly to DOM attributes.
+
+**Safety:** Same restrictions as codegen-react — output under `$HOME` or `/tmp`, path traversal prevention, `force: true` for non-empty directories.
+
+Requires: `jq`. Egress: `cdn.tailwindcss.com`, `esm.sh`.
+
 ## Skill Instructions in System Prompt
 
 Forge injects the **full body** of each skill's SKILL.md into the LLM system prompt. This means all detailed operational instructions — triage steps, detection heuristics, output structure, safety constraints — are directly available in the LLM's context without requiring an extra `read_skill` tool call.
diff --git a/forge-skills/local/embedded/codegen-html/SKILL.md b/forge-skills/local/embedded/codegen-html/SKILL.md
new file mode 100644
index 0000000..4d8b8b4
--- /dev/null
+++ b/forge-skills/local/embedded/codegen-html/SKILL.md
@@ -0,0 +1,190 @@
+---
+name: codegen-html
+category: developer
+tags:
+  - code-generation
+  - frontend
+  - html
+  - preact
+  - ui
+  - zero-dependency
+description: Scaffold and iterate on standalone Preact + HTM applications with zero build dependencies
+metadata:
+  forge:
+    requires:
+      bins:
+        - jq
+      env:
+        required: []
+        one_of: []
+        optional: []
+    egress_domains:
+      - cdn.tailwindcss.com
+      - esm.sh
+    timeout_hint: 60
+---
+
+# Codegen HTML Skill
+
+Scaffold and iteratively build standalone HTML applications using Preact + HTM via CDN. Zero local dependencies — no Node.js, no npm, no build step. Just open the HTML file in a browser.
+
+## Quick Start
+
+```bash
+# Scaffold a single-file app
+./scripts/codegen-html-scaffold.sh '{"project_name": "my-app", "output_dir": "/tmp/my-app", "mode": "single-file"}'
+
+# Scaffold a multi-file app
+./scripts/codegen-html-scaffold.sh '{"project_name": "my-app", "output_dir": "/tmp/my-app", "mode": "multi-file"}'
+
+# Read a file or list the project
+./scripts/codegen-html-read.sh '{"project_dir": "/tmp/my-app", "file_path": "."}'
+
+# Write/update a file
+./scripts/codegen-html-write.sh '{"project_dir": "/tmp/my-app", "file_path": "index.html", "content": "..."}'
+```
+
+## CRITICAL: Scaffold Conventions (DO NOT VIOLATE)
+
+These rules prevent runtime errors:
+
+1. **Use `class` (not `className`)** — HTM maps directly to DOM attributes
+2. **Use Tailwind CSS utility classes** for all styling (loaded via CDN in `index.html`)
+3. **Do NOT create `<style>` blocks or `.css` files** — use Tailwind classes instead
+4. **Keep Preact/HTM imports unchanged** — do not change CDN URLs or versions
+5. **Use named exports** for components: `export function ComponentName() {}`
+
+## Code Style Guide
+
+- Use **Preact** with **HTM** (tagged template literals instead of JSX)
+- Use `class` (not `className`) — HTM maps directly to DOM attributes
+- Template literal syntax: `` html`<div class="app">${content}</div>` ``
+- Use `useState`, `useEffect`, `useRef` from Preact hooks
+- Components are plain functions returning `` html`...` `` template literals
+- All imports via CDN (`esm.sh`), pinned to specific versions
+- Use **Tailwind CSS utility classes** — the CDN is pre-loaded in `index.html`
+- Forge dark theme colors: `bg-zinc-950` (bg), `bg-zinc-900` (cards), `border-zinc-800` (borders), `text-zinc-200` (text), `text-zinc-400` (muted), `bg-indigo-500` (accent)
+
+## Tailwind CSS Reference
+
+Tailwind is loaded via CDN. Use utility classes directly in `class` attributes:
+
+- **Layout:** `flex`, `grid`, `gap-4`, `max-w-4xl`, `mx-auto`, `px-6`, `py-12`
+- **Colors:** `bg-zinc-950`, `bg-zinc-900`, `text-zinc-200`, `text-zinc-400`, `bg-indigo-500`
+- **Borders:** `border`, `border-zinc-800`, `rounded-lg`, `shadow-lg`
+- **Typography:** `text-3xl`, `font-bold`, `text-center`, `font-mono`
+- **Interactive:** `hover:bg-indigo-400`, `transition-colors`, `cursor-pointer`
+
+Do NOT write custom CSS when Tailwind utilities exist.
+
+## Safety Constraints
+
+- Output directory must be under `$HOME` or `/tmp`
+- Non-empty directories require `force: true` to overwrite
+- Path traversal (`..`, absolute paths) is rejected in read/write operations
+- No local tooling required — files can be opened directly in a browser
+
+## Iteration Workflow
+
+1. **Scaffold** the project with `codegen_html_scaffold`
+2. **Read** files to understand current state with `codegen_html_read`
+3. **Write** updated files with `codegen_html_write`
+4. Repeat steps 2-3 to iterate on the UI
+
+After scaffolding, the user can simply open `index.html` in a browser. No install or build step needed.
+
+## When to Use
+
+Use `codegen-html` when the user wants:
+- A quick UI prototype with no setup
+- A single HTML file they can share or open directly
+- Zero-dependency frontend (no Node.js required)
+- Simple interactive apps, dashboards, or demos
+
+For full React apps with build tooling and npm packages, use `codegen-react` instead.
+
+## Tool: codegen_html_scaffold
+
+Create a new Preact + HTM project with Forge-themed dark UI.
+
+**Input:**
+
+| Parameter | Type | Required | Description |
+|-----------|------|----------|-------------|
+| project_name | string | yes | Name for the project |
+| output_dir | string | yes | Absolute path for the project directory |
+| title | string | no | Page title. Default: project_name |
+| mode | string | no | `single-file` (one index.html) or `multi-file` (separate JS/CSS). Default: `single-file` |
+| force | boolean | no | Overwrite non-empty directory. Default: false |
+
+**Output:** JSON object with status, output_dir, mode, and list of files created.
+
+### Response Format
+
+```json
+{
+  "status": "created",
+  "output_dir": "/tmp/my-app",
+  "project_name": "my-app",
+  "mode": "single-file",
+  "files": ["index.html"]
+}
+```
+
+## Tool: codegen_html_read
+
+Read a file or list the project directory.
+
+**Input:**
+
+| Parameter | Type | Required | Description |
+|-----------|------|----------|-------------|
+| project_dir | string | yes | Absolute path to the project directory |
+| file_path | string | yes | Relative path to read, or `"."` for directory listing |
+
+**Output:** JSON object with path, content (or listing), size, and modified timestamp.
+
+### Response Format (file)
+
+```json
+{
+  "path": "index.html",
+  "content": "<!DOCTYPE html>...",
+  "size": 2048,
+  "modified": "2025-01-15T10:30:00Z"
+}
+```
+
+### Response Format (directory listing)
+
+```json
+{
+  "path": ".",
+  "type": "directory",
+  "files": ["index.html", "app.js", "styles.css"]
+}
+```
+
+## Tool: codegen_html_write
+
+Write or update a file in the project.
+
+**Input:**
+
+| Parameter | Type | Required | Description |
+|-----------|------|----------|-------------|
+| project_dir | string | yes | Absolute path to the project directory |
+| file_path | string | yes | Relative path to write |
+| content | string | yes | Complete file content |
+
+**Output:** JSON object with path, action (created/updated), and size.
+
+### Response Format
+
+```json
+{
+  "path": "index.html",
+  "action": "updated",
+  "size": 2150
+}
+```
diff --git a/forge-skills/local/embedded/codegen-html/scripts/codegen-html-read.sh b/forge-skills/local/embedded/codegen-html/scripts/codegen-html-read.sh
new file mode 100755
index 0000000..dda2d7f
--- /dev/null
+++ b/forge-skills/local/embedded/codegen-html/scripts/codegen-html-read.sh
@@ -0,0 +1,90 @@
+#!/usr/bin/env bash
+# codegen-html-read.sh — Read a file or list an HTML project directory.
+# Usage: ./codegen-html-read.sh '{"project_dir": "/tmp/my-app", "file_path": "index.html"}'
+#
+# Requires: jq
+set -euo pipefail
+
+# --- Read input ---
+INPUT="${1:-}"
+if [ -z "$INPUT" ]; then
+  echo '{"error": "usage: codegen-html-read.sh {\"project_dir\": \"...\", \"file_path\": \"...\"}"}' >&2
+  exit 1
+fi
+
+if ! echo "$INPUT" | jq empty 2>/dev/null; then
+  echo '{"error": "invalid JSON input"}' >&2
+  exit 1
+fi
+
+# --- Extract fields ---
+PROJECT_DIR=$(echo "$INPUT" | jq -r '.project_dir // empty')
+FILE_PATH=$(echo "$INPUT" | jq -r '.file_path // empty')
+
+if [ -z "$PROJECT_DIR" ]; then
+  echo '{"error": "project_dir is required"}' >&2
+  exit 1
+fi
+if [ -z "$FILE_PATH" ]; then
+  echo '{"error": "file_path is required"}' >&2
+  exit 1
+fi
+
+# --- Path traversal prevention ---
+case "$FILE_PATH" in
+  /*|*..*)
+    echo '{"error": "file_path must be relative and must not contain .."}' >&2
+    exit 1
+    ;;
+esac
+
+if [ ! -d "$PROJECT_DIR" ]; then
+  echo '{"error": "project_dir does not exist"}' >&2
+  exit 1
+fi
+
+# Resolve and verify the target stays within project_dir
+RESOLVED_PROJECT=$(cd "$PROJECT_DIR" && pwd)
+
+# --- Directory listing ---
+if [ "$FILE_PATH" = "." ]; then
+  FILES=$(cd "$RESOLVED_PROJECT" && find . -type f \
+    ! -path './.git/*' \
+    -maxdepth 5 | sed 's|^\./||' | sort)
+  echo "$FILES" | jq -R -s '{
+    path: ".",
+    type: "directory",
+    files: (split("\n") | map(select(length > 0)))
+  }'
+  exit 0
+fi
+
+# --- File read ---
+FULL_PATH="$RESOLVED_PROJECT/$FILE_PATH"
+
+# Verify resolved path is still under project dir
+RESOLVED_FULL=$(cd "$(dirname "$FULL_PATH")" 2>/dev/null && pwd)/$(basename "$FULL_PATH") 2>/dev/null || true
+case "$RESOLVED_FULL" in
+  "$RESOLVED_PROJECT"/*)
+    ;;
+  *)
+    echo '{"error": "file_path resolves outside project_dir"}' >&2
+    exit 1
+    ;;
+esac
+
+if [ ! -f "$FULL_PATH" ]; then
+  echo '{"error": "file not found: '"$FILE_PATH"'"}' >&2
+  exit 1
+fi
+
+CONTENT=$(cat "$FULL_PATH")
+SIZE=$(wc -c < "$FULL_PATH" | tr -d ' ')
+MODIFIED=$(stat -f '%Sm' -t '%Y-%m-%dT%H:%M:%SZ' "$FULL_PATH" 2>/dev/null || stat --format='%y' "$FULL_PATH" 2>/dev/null || echo "unknown")
+
+jq -n \
+  --arg path "$FILE_PATH" \
+  --arg content "$CONTENT" \
+  --arg size "$SIZE" \
+  --arg modified "$MODIFIED" \
+  '{path: $path, content: $content, size: ($size | tonumber), modified: $modified}'
diff --git a/forge-skills/local/embedded/codegen-html/scripts/codegen-html-scaffold.sh b/forge-skills/local/embedded/codegen-html/scripts/codegen-html-scaffold.sh
new file mode 100755
index 0000000..7bac1d6
--- /dev/null
+++ b/forge-skills/local/embedded/codegen-html/scripts/codegen-html-scaffold.sh
@@ -0,0 +1,219 @@
+#!/usr/bin/env bash
+# codegen-html-scaffold.sh — Scaffold a Preact + HTM project with Forge dark theme.
+# Usage: ./codegen-html-scaffold.sh '{"project_name": "my-app", "output_dir": "/tmp/my-app"}'
+#
+# Requires: jq
+set -euo pipefail
+
+# --- Read input ---
+INPUT="${1:-}"
+if [ -z "$INPUT" ]; then
+  echo '{"error": "usage: codegen-html-scaffold.sh {\"project_name\": \"...\", \"output_dir\": \"...\"}"}' >&2
+  exit 1
+fi
+
+if ! echo "$INPUT" | jq empty 2>/dev/null; then
+  echo '{"error": "invalid JSON input"}' >&2
+  exit 1
+fi
+
+# --- Extract fields ---
+PROJECT_NAME=$(echo "$INPUT" | jq -r '.project_name // empty')
+OUTPUT_DIR=$(echo "$INPUT" | jq -r '.output_dir // empty')
+TITLE=$(echo "$INPUT" | jq -r '.title // empty')
+MODE=$(echo "$INPUT" | jq -r '.mode // "single-file"')
+FORCE=$(echo "$INPUT" | jq -r '.force // false')
+
+if [ -z "$PROJECT_NAME" ]; then
+  echo '{"error": "project_name is required"}' >&2
+  exit 1
+fi
+if [ -z "$OUTPUT_DIR" ]; then
+  echo '{"error": "output_dir is required"}' >&2
+  exit 1
+fi
+
+# Default title to project name
+if [ -z "$TITLE" ]; then
+  TITLE="$PROJECT_NAME"
+fi
+
+# Validate mode
+case "$MODE" in
+  single-file|multi-file) ;;
+  *)
+    echo '{"error": "mode must be single-file or multi-file"}' >&2
+    exit 1
+    ;;
+esac
+
+# --- Safety: output_dir must be under $HOME or /tmp ---
+RESOLVED_DIR=$(cd "$(dirname "$OUTPUT_DIR")" 2>/dev/null && pwd)/$(basename "$OUTPUT_DIR") 2>/dev/null || RESOLVED_DIR="$OUTPUT_DIR"
+case "$RESOLVED_DIR" in
+  "$HOME"/*|/tmp/*)
+    ;;
+  *)
+    echo '{"error": "output_dir must be under $HOME or /tmp"}' >&2
+    exit 1
+    ;;
+esac
+
+# --- Check non-empty directory ---
+if [ -d "$OUTPUT_DIR" ] && [ "$(ls -A "$OUTPUT_DIR" 2>/dev/null)" ]; then
+  if [ "$FORCE" != "true" ]; then
+    echo '{"error": "output_dir is not empty; set force: true to overwrite"}' >&2
+    exit 1
+  fi
+fi
+
+mkdir -p "$OUTPUT_DIR"
+
+# --- Single-file mode ---
+if [ "$MODE" = "single-file" ]; then
+  cat > "$OUTPUT_DIR/index.html" << 'HEREDOC'
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>PLACEHOLDER_TITLE</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-zinc-950 text-zinc-200 antialiased">
+  <div id="app"></div>
+  <script type="module">
+    import { h, render } from 'https://esm.sh/preact@10.25.4';
+    import { useState } from 'https://esm.sh/preact@10.25.4/hooks';
+    import htm from 'https://esm.sh/htm@3.1.1';
+
+    const html = htm.bind(h);
+
+    function App() {
+      const [count, setCount] = useState(0);
+
+      return html`
+        <div class="min-h-screen bg-zinc-950 text-zinc-200">
+          <div class="max-w-4xl mx-auto px-6 py-12">
+            <header class="text-center mb-8">
+              <h1 class="text-3xl font-bold text-white">PLACEHOLDER_TITLE</h1>
+            </header>
+            <main class="flex flex-col items-center gap-6">
+              <div class="bg-zinc-900 border border-zinc-800 rounded-lg p-8 text-center shadow-lg">
+                <button
+                  onClick=${() => setCount(c => c + 1)}
+                  class="bg-indigo-500 hover:bg-indigo-400 text-white font-semibold px-6 py-3 rounded-lg transition-colors"
+                >
+                  Count: ${count}
+                </button>
+                <p class="text-zinc-400 mt-4">Edit this file and refresh to see changes.</p>
+              </div>
+            </main>
+          </div>
+        </div>
+      `;
+    }
+
+    render(html`<${App} />`, document.getElementById('app'));
+  </script>
+</body>
+</html>
+HEREDOC
+
+  sed "s|PLACEHOLDER_TITLE|${TITLE}|g" "$OUTPUT_DIR/index.html" > "$OUTPUT_DIR/index.html.tmp" && mv "$OUTPUT_DIR/index.html.tmp" "$OUTPUT_DIR/index.html"
+
+  echo "{
+    \"status\": \"created\",
+    \"output_dir\": \"$OUTPUT_DIR\",
+    \"project_name\": \"$PROJECT_NAME\",
+    \"mode\": \"single-file\",
+    \"files\": [\"index.html\"]
+  }" | jq .
+  exit 0
+fi
+
+# --- Multi-file mode ---
+mkdir -p "$OUTPUT_DIR/components"
+
+# index.html
+cat > "$OUTPUT_DIR/index.html" << 'HEREDOC'
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>PLACEHOLDER_TITLE</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-zinc-950 text-zinc-200 antialiased">
+  <div id="app"></div>
+  <script type="module" src="app.js"></script>
+</body>
+</html>
+HEREDOC
+sed "s|PLACEHOLDER_TITLE|${TITLE}|g" "$OUTPUT_DIR/index.html" > "$OUTPUT_DIR/index.html.tmp" && mv "$OUTPUT_DIR/index.html.tmp" "$OUTPUT_DIR/index.html"
+
+# app.js
+cat > "$OUTPUT_DIR/app.js" << 'HEREDOC'
+import { h, render } from 'https://esm.sh/preact@10.25.4';
+import htm from 'https://esm.sh/htm@3.1.1';
+import { Counter } from './components/Counter.js';
+
+const html = htm.bind(h);
+
+function App() {
+  return html`
+    <div class="min-h-screen bg-zinc-950 text-zinc-200">
+      <div class="max-w-4xl mx-auto px-6 py-12">
+        <header class="text-center mb-8">
+          <h1 class="text-3xl font-bold text-white">PLACEHOLDER_TITLE</h1>
+        </header>
+        <main class="flex flex-col items-center gap-6">
+          <${Counter} />
+        </main>
+      </div>
+    </div>
+  `;
+}
+
+render(html`<${App} />`, document.getElementById('app'));
+HEREDOC
+sed "s|PLACEHOLDER_TITLE|${TITLE}|g" "$OUTPUT_DIR/app.js" > "$OUTPUT_DIR/app.js.tmp" && mv "$OUTPUT_DIR/app.js.tmp" "$OUTPUT_DIR/app.js"
+
+# components/Counter.js
+cat > "$OUTPUT_DIR/components/Counter.js" << 'HEREDOC'
+import { h } from 'https://esm.sh/preact@10.25.4';
+import { useState } from 'https://esm.sh/preact@10.25.4/hooks';
+import htm from 'https://esm.sh/htm@3.1.1';
+
+const html = htm.bind(h);
+
+export function Counter() {
+  const [count, setCount] = useState(0);
+
+  return html`
+    <div class="bg-zinc-900 border border-zinc-800 rounded-lg p-8 text-center shadow-lg">
+      <button
+        onClick=${() => setCount(c => c + 1)}
+        class="bg-indigo-500 hover:bg-indigo-400 text-white font-semibold px-6 py-3 rounded-lg transition-colors"
+      >
+        Count: ${count}
+      </button>
+      <p class="text-zinc-400 mt-4">
+        Edit <code class="bg-zinc-950 px-1.5 py-0.5 rounded text-sm font-mono">components/Counter.js</code> and refresh to see changes.
+      </p>
+    </div>
+  `;
+}
+HEREDOC
+
+echo "{
+  \"status\": \"created\",
+  \"output_dir\": \"$OUTPUT_DIR\",
+  \"project_name\": \"$PROJECT_NAME\",
+  \"mode\": \"multi-file\",
+  \"files\": [
+    \"index.html\",
+    \"app.js\",
+    \"components/Counter.js\"
+  ]
+}" | jq .
diff --git a/forge-skills/local/embedded/codegen-html/scripts/codegen-html-write.sh b/forge-skills/local/embedded/codegen-html/scripts/codegen-html-write.sh
new file mode 100755
index 0000000..629f533
--- /dev/null
+++ b/forge-skills/local/embedded/codegen-html/scripts/codegen-html-write.sh
@@ -0,0 +1,85 @@
+#!/usr/bin/env bash
+# codegen-html-write.sh — Write or update a file in an HTML project.
+# Usage: ./codegen-html-write.sh '{"project_dir": "/tmp/my-app", "file_path": "index.html", "content": "..."}'
+#
+# Requires: jq
+set -euo pipefail
+
+# --- Read input ---
+INPUT="${1:-}"
+if [ -z "$INPUT" ]; then
+  echo '{"error": "usage: codegen-html-write.sh {\"project_dir\": \"...\", \"file_path\": \"...\", \"content\": \"...\"}"}' >&2
+  exit 1
+fi
+
+if ! echo "$INPUT" | jq empty 2>/dev/null; then
+  echo '{"error": "invalid JSON input"}' >&2
+  exit 1
+fi
+
+# --- Extract fields ---
+PROJECT_DIR=$(echo "$INPUT" | jq -r '.project_dir // empty')
+FILE_PATH=$(echo "$INPUT" | jq -r '.file_path // empty')
+CONTENT=$(echo "$INPUT" | jq -r '.content // empty')
+
+if [ -z "$PROJECT_DIR" ]; then
+  echo '{"error": "project_dir is required"}' >&2
+  exit 1
+fi
+if [ -z "$FILE_PATH" ]; then
+  echo '{"error": "file_path is required"}' >&2
+  exit 1
+fi
+if [ -z "$CONTENT" ]; then
+  echo '{"error": "content is required"}' >&2
+  exit 1
+fi
+
+# --- Path traversal prevention ---
+case "$FILE_PATH" in
+  /*|*..*)
+    echo '{"error": "file_path must be relative and must not contain .."}' >&2
+    exit 1
+    ;;
+esac
+
+if [ ! -d "$PROJECT_DIR" ]; then
+  echo '{"error": "project_dir does not exist"}' >&2
+  exit 1
+fi
+
+# Resolve and verify the target stays within project_dir
+RESOLVED_PROJECT=$(cd "$PROJECT_DIR" && pwd)
+FULL_PATH="$RESOLVED_PROJECT/$FILE_PATH"
+
+# Create parent directory
+PARENT_DIR=$(dirname "$FULL_PATH")
+mkdir -p "$PARENT_DIR"
+
+# Verify resolved path is still under project dir
+RESOLVED_PARENT=$(cd "$PARENT_DIR" && pwd)
+case "$RESOLVED_PARENT" in
+  "$RESOLVED_PROJECT"|"$RESOLVED_PROJECT"/*)
+    ;;
+  *)
+    echo '{"error": "file_path resolves outside project_dir"}' >&2
+    exit 1
+    ;;
+esac
+
+# --- Determine action ---
+ACTION="created"
+if [ -f "$FULL_PATH" ]; then
+  ACTION="updated"
+fi
+
+# --- Write file ---
+echo "$INPUT" | jq -r '.content' > "$FULL_PATH"
+
+SIZE=$(wc -c < "$FULL_PATH" | tr -d ' ')
+
+jq -n \
+  --arg path "$FILE_PATH" \
+  --arg action "$ACTION" \
+  --arg size "$SIZE" \
+  '{path: $path, action: $action, size: ($size | tonumber)}'
diff --git a/forge-skills/local/embedded/codegen-react/SKILL.md b/forge-skills/local/embedded/codegen-react/SKILL.md
new file mode 100644
index 0000000..68e8bf6
--- /dev/null
+++ b/forge-skills/local/embedded/codegen-react/SKILL.md
@@ -0,0 +1,236 @@
+---
+name: codegen-react
+category: developer
+tags:
+  - code-generation
+  - frontend
+  - react
+  - vite
+  - ui
+description: Scaffold and iterate on Vite + React applications
+metadata:
+  forge:
+    requires:
+      bins:
+        - node
+        - npx
+        - jq
+      env:
+        required: []
+        one_of: []
+        optional: []
+    egress_domains:
+      - registry.npmjs.org
+      - cdn.jsdelivr.net
+      - cdn.tailwindcss.com
+    timeout_hint: 120
+---
+
+# Codegen React Skill
+
+Scaffold and iteratively build Vite + React applications. Creates a complete project structure with React 19, Vite 6, and a Forge-themed dark UI out of the box.
+
+## Quick Start
+
+```bash
+# Scaffold a new project
+./scripts/codegen-react-scaffold.sh '{"project_name": "my-app", "output_dir": "/tmp/my-app"}'
+
+# Install deps and start dev server (opens browser)
+./scripts/codegen-react-run.sh '{"project_dir": "/tmp/my-app"}'
+
+# Read a file or list the project
+./scripts/codegen-react-read.sh '{"project_dir": "/tmp/my-app", "file_path": "src/App.jsx"}'
+
+# Write/update a file (Vite hot-reloads automatically)
+./scripts/codegen-react-write.sh '{"project_dir": "/tmp/my-app", "file_path": "src/App.jsx", "content": "..."}'
+```
+
+## CRITICAL: Scaffold Conventions (DO NOT VIOLATE)
+
+These rules prevent build errors. Violating them **will** break the app:
+
+1. **NEVER modify `src/main.jsx`** — it is the entry point and must not be changed
+2. **ALWAYS use named exports**: `export function ComponentName() {}`, NEVER `export default`
+3. **NEVER create or import `index.css`** — it does not exist and will cause a build error
+4. **Use Tailwind CSS utility classes** for all styling (loaded via CDN in `index.html`)
+5. **Only modify `src/App.jsx`** and create new component files under `src/`
+6. `src/App.css` exists for custom styles but prefer Tailwind classes
+
+## Code Style Guide
+
+- Use **functional components** with hooks (`useState`, `useEffect`, `useRef`, etc.)
+- Use **named exports** for components: `export function App() {}`
+- Keep components in separate files under `src/`
+- Use **Tailwind CSS utility classes** — the CDN is pre-loaded in `index.html`
+- Forge dark theme colors: `bg-zinc-950` (bg), `bg-zinc-900` (cards), `border-zinc-800` (borders), `text-zinc-200` (text), `text-zinc-400` (muted), `bg-indigo-500` (accent)
+- Prefer `const` over `let`; never use `var`
+
+## Tailwind CSS Reference
+
+Tailwind is loaded via CDN. Use utility classes directly in JSX `className` attributes:
+
+- **Layout:** `flex`, `grid`, `gap-4`, `max-w-4xl`, `mx-auto`, `px-6`, `py-12`
+- **Colors:** `bg-zinc-950`, `bg-zinc-900`, `text-zinc-200`, `text-zinc-400`, `bg-indigo-500`
+- **Borders:** `border`, `border-zinc-800`, `rounded-lg`, `shadow-lg`
+- **Typography:** `text-3xl`, `font-bold`, `text-center`, `font-mono`
+- **Interactive:** `hover:bg-indigo-400`, `transition-colors`, `cursor-pointer`
+
+Do NOT write custom CSS classes when Tailwind utilities exist. Do NOT create new `.css` files.
+
+## Safety Constraints
+
+- Output directory must be under `$HOME` or `/tmp`
+- Non-empty directories require `force: true` to overwrite
+- Path traversal (`..`, absolute paths) is rejected in read/write operations
+- No network calls during scaffold (all files generated locally)
+
+## Iteration Workflow
+
+1. **Scaffold** the project with `codegen_react_scaffold`
+2. **Run** the dev server with `codegen_react_run` — installs deps and opens the browser
+3. **Read** files to understand current state with `codegen_react_read`
+4. **Write** updated files with `codegen_react_write` — Vite hot-reloads automatically
+5. Repeat steps 3-4 to iterate on the UI
+
+## When to Use
+
+Use `codegen-react` when the user wants:
+- A full React application with build tooling (Vite)
+- Component-based architecture with JSX
+- Hot module replacement during development
+- npm package ecosystem access
+
+For simpler needs (single HTML file, no build step), use `codegen-html` instead.
+
+## Tool: codegen_react_scaffold
+
+Create a new Vite + React project with Forge-themed dark UI.
+
+**Input:**
+
+| Parameter | Type | Required | Description |
+|-----------|------|----------|-------------|
+| project_name | string | yes | Name for the project (used in package.json) |
+| output_dir | string | yes | Absolute path for the project directory |
+| title | string | no | Page title. Default: project_name |
+| force | boolean | no | Overwrite non-empty directory. Default: false |
+
+**Output:** JSON object with status, output_dir, and list of files created.
+
+### Response Format
+
+```json
+{
+  "status": "created",
+  "output_dir": "/tmp/my-app",
+  "project_name": "my-app",
+  "files": [
+    "package.json",
+    "vite.config.js",
+    "index.html",
+    "src/main.jsx",
+    "src/App.jsx",
+    "src/App.css",
+    ".gitignore"
+  ]
+}
+```
+
+## Tool: codegen_react_read
+
+Read a file or list the project directory.
+
+**Input:**
+
+| Parameter | Type | Required | Description |
+|-----------|------|----------|-------------|
+| project_dir | string | yes | Absolute path to the project directory |
+| file_path | string | yes | Relative path to read, or `"."` for directory listing |
+
+**Output:** JSON object with path, content (or listing), size, and modified timestamp.
+
+### Response Format (file)
+
+```json
+{
+  "path": "src/App.jsx",
+  "content": "export function App() { ... }",
+  "size": 245,
+  "modified": "2025-01-15T10:30:00Z"
+}
+```
+
+### Response Format (directory listing)
+
+```json
+{
+  "path": ".",
+  "type": "directory",
+  "files": [
+    "package.json",
+    "vite.config.js",
+    "index.html",
+    "src/main.jsx",
+    "src/App.jsx",
+    "src/App.css"
+  ]
+}
+```
+
+## Tool: codegen_react_write
+
+Write or update a file in the project.
+
+**Input:**
+
+| Parameter | Type | Required | Description |
+|-----------|------|----------|-------------|
+| project_dir | string | yes | Absolute path to the project directory |
+| file_path | string | yes | Relative path to write |
+| content | string | yes | Complete file content |
+
+**Output:** JSON object with path, action (created/updated), and size.
+
+### Response Format
+
+```json
+{
+  "path": "src/App.jsx",
+  "action": "updated",
+  "size": 312
+}
+```
+
+## Tool: codegen_react_run
+
+Install dependencies and start the Vite dev server. Automatically opens the browser.
+
+Call this tool **after scaffolding** to get the app running. It installs `node_modules` (if not already present) and starts `npm run dev` in the background. Vite hot-reloads on file changes, so subsequent `codegen_react_write` calls update the browser automatically.
+
+**Input:**
+
+| Parameter | Type | Required | Description |
+|-----------|------|----------|-------------|
+| project_dir | string | yes | Absolute path to the project directory (must contain `package.json`) |
+
+**Output:** JSON object with status, url, pid, and install status.
+
+### Response Format
+
+```json
+{
+  "status": "running",
+  "url": "http://localhost:3000",
+  "pid": 12345,
+  "project_dir": "/tmp/my-app",
+  "install": "installed"
+}
+```
+
+### Tips
+
+- Call this once after `codegen_react_scaffold` — the server stays running
+- After the server is running, just use `codegen_react_write` to update files — Vite hot-reloads automatically
+- The `install` field is `"installed"` on first run and `"skipped"` on subsequent runs
+- The `pid` can be used to stop the server later with `kill <pid>`
diff --git a/forge-skills/local/embedded/codegen-react/scripts/codegen-react-read.sh b/forge-skills/local/embedded/codegen-react/scripts/codegen-react-read.sh
new file mode 100755
index 0000000..5a7f53f
--- /dev/null
+++ b/forge-skills/local/embedded/codegen-react/scripts/codegen-react-read.sh
@@ -0,0 +1,92 @@
+#!/usr/bin/env bash
+# codegen-react-read.sh — Read a file or list a React project directory.
+# Usage: ./codegen-react-read.sh '{"project_dir": "/tmp/my-app", "file_path": "src/App.jsx"}'
+#
+# Requires: jq
+set -euo pipefail
+
+# --- Read input ---
+INPUT="${1:-}"
+if [ -z "$INPUT" ]; then
+  echo '{"error": "usage: codegen-react-read.sh {\"project_dir\": \"...\", \"file_path\": \"...\"}"}' >&2
+  exit 1
+fi
+
+if ! echo "$INPUT" | jq empty 2>/dev/null; then
+  echo '{"error": "invalid JSON input"}' >&2
+  exit 1
+fi
+
+# --- Extract fields ---
+PROJECT_DIR=$(echo "$INPUT" | jq -r '.project_dir // empty')
+FILE_PATH=$(echo "$INPUT" | jq -r '.file_path // empty')
+
+if [ -z "$PROJECT_DIR" ]; then
+  echo '{"error": "project_dir is required"}' >&2
+  exit 1
+fi
+if [ -z "$FILE_PATH" ]; then
+  echo '{"error": "file_path is required"}' >&2
+  exit 1
+fi
+
+# --- Path traversal prevention ---
+case "$FILE_PATH" in
+  /*|*..*)
+    echo '{"error": "file_path must be relative and must not contain .."}' >&2
+    exit 1
+    ;;
+esac
+
+if [ ! -d "$PROJECT_DIR" ]; then
+  echo '{"error": "project_dir does not exist"}' >&2
+  exit 1
+fi
+
+# Resolve and verify the target stays within project_dir
+RESOLVED_PROJECT=$(cd "$PROJECT_DIR" && pwd)
+
+# --- Directory listing ---
+if [ "$FILE_PATH" = "." ]; then
+  FILES=$(cd "$RESOLVED_PROJECT" && find . -type f \
+    ! -path './node_modules/*' \
+    ! -path './.git/*' \
+    ! -path './dist/*' \
+    -maxdepth 5 | sed 's|^\./||' | sort)
+  echo "$FILES" | jq -R -s '{
+    path: ".",
+    type: "directory",
+    files: (split("\n") | map(select(length > 0)))
+  }'
+  exit 0
+fi
+
+# --- File read ---
+FULL_PATH="$RESOLVED_PROJECT/$FILE_PATH"
+
+# Verify resolved path is still under project dir
+RESOLVED_FULL=$(cd "$(dirname "$FULL_PATH")" 2>/dev/null && pwd)/$(basename "$FULL_PATH") 2>/dev/null || true
+case "$RESOLVED_FULL" in
+  "$RESOLVED_PROJECT"/*)
+    ;;
+  *)
+    echo '{"error": "file_path resolves outside project_dir"}' >&2
+    exit 1
+    ;;
+esac
+
+if [ ! -f "$FULL_PATH" ]; then
+  echo '{"error": "file not found: '"$FILE_PATH"'"}' >&2
+  exit 1
+fi
+
+CONTENT=$(cat "$FULL_PATH")
+SIZE=$(wc -c < "$FULL_PATH" | tr -d ' ')
+MODIFIED=$(stat -f '%Sm' -t '%Y-%m-%dT%H:%M:%SZ' "$FULL_PATH" 2>/dev/null || stat --format='%y' "$FULL_PATH" 2>/dev/null || echo "unknown")
+
+jq -n \
+  --arg path "$FILE_PATH" \
+  --arg content "$CONTENT" \
+  --arg size "$SIZE" \
+  --arg modified "$MODIFIED" \
+  '{path: $path, content: $content, size: ($size | tonumber), modified: $modified}'
diff --git a/forge-skills/local/embedded/codegen-react/scripts/codegen-react-run.sh b/forge-skills/local/embedded/codegen-react/scripts/codegen-react-run.sh
new file mode 100755
index 0000000..e7f6ad5
--- /dev/null
+++ b/forge-skills/local/embedded/codegen-react/scripts/codegen-react-run.sh
@@ -0,0 +1,81 @@
+#!/usr/bin/env bash
+# codegen-react-run.sh — Install dependencies and start the Vite dev server.
+# Usage: ./codegen-react-run.sh '{"project_dir": "/tmp/my-app"}'
+#
+# Requires: node, npx, jq
+set -euo pipefail
+
+# --- Read input ---
+INPUT="${1:-}"
+if [ -z "$INPUT" ]; then
+  echo '{"error": "usage: codegen-react-run.sh {\"project_dir\": \"...\"}"}' >&2
+  exit 1
+fi
+
+if ! echo "$INPUT" | jq empty 2>/dev/null; then
+  echo '{"error": "invalid JSON input"}' >&2
+  exit 1
+fi
+
+# --- Extract fields ---
+PROJECT_DIR=$(echo "$INPUT" | jq -r '.project_dir // empty')
+
+if [ -z "$PROJECT_DIR" ]; then
+  echo '{"error": "project_dir is required"}' >&2
+  exit 1
+fi
+
+if [ ! -d "$PROJECT_DIR" ]; then
+  echo '{"error": "project_dir does not exist"}' >&2
+  exit 1
+fi
+
+if [ ! -f "$PROJECT_DIR/package.json" ]; then
+  echo '{"error": "no package.json found in project_dir — run codegen_react_scaffold first"}' >&2
+  exit 1
+fi
+
+cd "$PROJECT_DIR"
+
+# --- Install dependencies if needed ---
+INSTALL_STATUS="skipped"
+if [ ! -d "node_modules" ]; then
+  INSTALL_STATUS="installed"
+  if ! npm install --loglevel=error > .forge-install.log 2>&1; then
+    INSTALL_ERR=$(tail -5 .forge-install.log 2>/dev/null || echo "unknown error")
+    jq -n --arg err "npm install failed" --arg details "$INSTALL_ERR" \
+      '{error: $err, details: $details}' >&2
+    exit 1
+  fi
+fi
+
+# --- Start dev server in background ---
+DEV_LOG="$PROJECT_DIR/.forge-dev.log"
+nohup npm run dev > "$DEV_LOG" 2>&1 &
+DEV_PID=$!
+
+# Wait for the server to start (check for "Local:" in Vite output)
+SERVER_URL="http://localhost:3000"
+for i in 1 2 3 4 5; do
+  sleep 1
+  if ! kill -0 "$DEV_PID" 2>/dev/null; then
+    DEV_ERR=$(tail -5 "$DEV_LOG" 2>/dev/null || echo "process exited")
+    jq -n --arg err "dev server failed to start" --arg details "$DEV_ERR" \
+      '{error: $err, details: $details}' >&2
+    exit 1
+  fi
+  # Try to extract actual URL from Vite output
+  ACTUAL_URL=$(grep -o 'http://localhost:[0-9]*' "$DEV_LOG" 2>/dev/null | head -1 || true)
+  if [ -n "$ACTUAL_URL" ]; then
+    SERVER_URL="$ACTUAL_URL"
+    break
+  fi
+done
+
+jq -n \
+  --arg status "running" \
+  --arg url "$SERVER_URL" \
+  --arg pid "$DEV_PID" \
+  --arg project_dir "$PROJECT_DIR" \
+  --arg install "$INSTALL_STATUS" \
+  '{status: $status, url: $url, pid: ($pid | tonumber), project_dir: $project_dir, install: $install}'
diff --git a/forge-skills/local/embedded/codegen-react/scripts/codegen-react-scaffold.sh b/forge-skills/local/embedded/codegen-react/scripts/codegen-react-scaffold.sh
new file mode 100755
index 0000000..1c9691d
--- /dev/null
+++ b/forge-skills/local/embedded/codegen-react/scripts/codegen-react-scaffold.sh
@@ -0,0 +1,197 @@
+#!/usr/bin/env bash
+# codegen-react-scaffold.sh — Scaffold a Vite + React project with Forge dark theme.
+# Usage: ./codegen-react-scaffold.sh '{"project_name": "my-app", "output_dir": "/tmp/my-app"}'
+#
+# Requires: node, npx, jq
+set -euo pipefail
+
+# --- Read input ---
+INPUT="${1:-}"
+if [ -z "$INPUT" ]; then
+  echo '{"error": "usage: codegen-react-scaffold.sh {\"project_name\": \"...\", \"output_dir\": \"...\"}"}' >&2
+  exit 1
+fi
+
+# Validate JSON
+if ! echo "$INPUT" | jq empty 2>/dev/null; then
+  echo '{"error": "invalid JSON input"}' >&2
+  exit 1
+fi
+
+# --- Extract fields ---
+PROJECT_NAME=$(echo "$INPUT" | jq -r '.project_name // empty')
+OUTPUT_DIR=$(echo "$INPUT" | jq -r '.output_dir // empty')
+TITLE=$(echo "$INPUT" | jq -r '.title // empty')
+FORCE=$(echo "$INPUT" | jq -r '.force // false')
+
+if [ -z "$PROJECT_NAME" ]; then
+  echo '{"error": "project_name is required"}' >&2
+  exit 1
+fi
+if [ -z "$OUTPUT_DIR" ]; then
+  echo '{"error": "output_dir is required"}' >&2
+  exit 1
+fi
+
+# Default title to project name
+if [ -z "$TITLE" ]; then
+  TITLE="$PROJECT_NAME"
+fi
+
+# --- Safety: output_dir must be under $HOME or /tmp ---
+RESOLVED_DIR=$(cd "$(dirname "$OUTPUT_DIR")" 2>/dev/null && pwd)/$(basename "$OUTPUT_DIR") 2>/dev/null || RESOLVED_DIR="$OUTPUT_DIR"
+case "$RESOLVED_DIR" in
+  "$HOME"/*|/tmp/*)
+    ;;
+  *)
+    echo '{"error": "output_dir must be under $HOME or /tmp"}' >&2
+    exit 1
+    ;;
+esac
+
+# --- Check non-empty directory ---
+if [ -d "$OUTPUT_DIR" ] && [ "$(ls -A "$OUTPUT_DIR" 2>/dev/null)" ]; then
+  if [ "$FORCE" != "true" ]; then
+    echo '{"error": "output_dir is not empty; set force: true to overwrite"}' >&2
+    exit 1
+  fi
+fi
+
+# --- Create project structure ---
+mkdir -p "$OUTPUT_DIR/src"
+
+# package.json
+cat > "$OUTPUT_DIR/package.json" << 'EOF'
+{
+  "name": "PLACEHOLDER_PROJECT_NAME",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.4.0",
+    "vite": "^6.0.0"
+  }
+}
+EOF
+sed "s|PLACEHOLDER_PROJECT_NAME|${PROJECT_NAME}|g" "$OUTPUT_DIR/package.json" > "$OUTPUT_DIR/package.json.tmp" && mv "$OUTPUT_DIR/package.json.tmp" "$OUTPUT_DIR/package.json"
+
+# vite.config.js
+cat > "$OUTPUT_DIR/vite.config.js" << 'EOF'
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000,
+    open: true,
+  },
+})
+EOF
+
+# index.html
+cat > "$OUTPUT_DIR/index.html" << 'EOF'
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>PLACEHOLDER_TITLE</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-zinc-950 text-zinc-200 antialiased">
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
+EOF
+sed "s|PLACEHOLDER_TITLE|${TITLE}|g" "$OUTPUT_DIR/index.html" > "$OUTPUT_DIR/index.html.tmp" && mv "$OUTPUT_DIR/index.html.tmp" "$OUTPUT_DIR/index.html"
+
+# src/main.jsx
+cat > "$OUTPUT_DIR/src/main.jsx" << 'EOF'
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { App } from './App.jsx'
+import './App.css'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+)
+EOF
+
+# src/App.jsx
+cat > "$OUTPUT_DIR/src/App.jsx" << 'EOF'
+import { useState } from 'react'
+
+export function App() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <div className="min-h-screen bg-zinc-950 text-zinc-200">
+      <div className="max-w-4xl mx-auto px-6 py-12">
+        <header className="text-center mb-8">
+          <h1 className="text-3xl font-bold text-white">PLACEHOLDER_TITLE</h1>
+        </header>
+        <main className="flex flex-col items-center gap-6">
+          <div className="bg-zinc-900 border border-zinc-800 rounded-lg p-8 text-center shadow-lg">
+            <button
+              onClick={() => setCount(c => c + 1)}
+              className="bg-indigo-500 hover:bg-indigo-400 text-white font-semibold px-6 py-3 rounded-lg transition-colors"
+            >
+              Count: {count}
+            </button>
+            <p className="text-zinc-400 mt-4">
+              Edit <code className="bg-zinc-950 px-1.5 py-0.5 rounded text-sm font-mono">src/App.jsx</code> and save to see changes.
+            </p>
+          </div>
+        </main>
+      </div>
+    </div>
+  )
+}
+EOF
+sed "s|PLACEHOLDER_TITLE|${TITLE}|g" "$OUTPUT_DIR/src/App.jsx" > "$OUTPUT_DIR/src/App.jsx.tmp" && mv "$OUTPUT_DIR/src/App.jsx.tmp" "$OUTPUT_DIR/src/App.jsx"
+
+# src/App.css
+cat > "$OUTPUT_DIR/src/App.css" << 'EOF'
+/*
+ * Tailwind CSS is loaded via CDN in index.html — use utility classes for styling.
+ * Add custom styles here only when Tailwind classes are insufficient.
+ */
+EOF
+
+# .gitignore
+cat > "$OUTPUT_DIR/.gitignore" << 'EOF'
+node_modules
+dist
+.env
+.env.local
+*.log
+EOF
+
+# --- Output result ---
+echo "{
+  \"status\": \"created\",
+  \"output_dir\": \"$OUTPUT_DIR\",
+  \"project_name\": \"$PROJECT_NAME\",
+  \"files\": [
+    \"package.json\",
+    \"vite.config.js\",
+    \"index.html\",
+    \"src/main.jsx\",
+    \"src/App.jsx\",
+    \"src/App.css\",
+    \".gitignore\"
+  ]
+}" | jq .
diff --git a/forge-skills/local/embedded/codegen-react/scripts/codegen-react-write.sh b/forge-skills/local/embedded/codegen-react/scripts/codegen-react-write.sh
new file mode 100755
index 0000000..9050de4
--- /dev/null
+++ b/forge-skills/local/embedded/codegen-react/scripts/codegen-react-write.sh
@@ -0,0 +1,85 @@
+#!/usr/bin/env bash
+# codegen-react-write.sh — Write or update a file in a React project.
+# Usage: ./codegen-react-write.sh '{"project_dir": "/tmp/my-app", "file_path": "src/App.jsx", "content": "..."}'
+#
+# Requires: jq
+set -euo pipefail
+
+# --- Read input ---
+INPUT="${1:-}"
+if [ -z "$INPUT" ]; then
+  echo '{"error": "usage: codegen-react-write.sh {\"project_dir\": \"...\", \"file_path\": \"...\", \"content\": \"...\"}"}' >&2
+  exit 1
+fi
+
+if ! echo "$INPUT" | jq empty 2>/dev/null; then
+  echo '{"error": "invalid JSON input"}' >&2
+  exit 1
+fi
+
+# --- Extract fields ---
+PROJECT_DIR=$(echo "$INPUT" | jq -r '.project_dir // empty')
+FILE_PATH=$(echo "$INPUT" | jq -r '.file_path // empty')
+CONTENT=$(echo "$INPUT" | jq -r '.content // empty')
+
+if [ -z "$PROJECT_DIR" ]; then
+  echo '{"error": "project_dir is required"}' >&2
+  exit 1
+fi
+if [ -z "$FILE_PATH" ]; then
+  echo '{"error": "file_path is required"}' >&2
+  exit 1
+fi
+if [ -z "$CONTENT" ]; then
+  echo '{"error": "content is required"}' >&2
+  exit 1
+fi
+
+# --- Path traversal prevention ---
+case "$FILE_PATH" in
+  /*|*..*)
+    echo '{"error": "file_path must be relative and must not contain .."}' >&2
+    exit 1
+    ;;
+esac
+
+if [ ! -d "$PROJECT_DIR" ]; then
+  echo '{"error": "project_dir does not exist"}' >&2
+  exit 1
+fi
+
+# Resolve and verify the target stays within project_dir
+RESOLVED_PROJECT=$(cd "$PROJECT_DIR" && pwd)
+FULL_PATH="$RESOLVED_PROJECT/$FILE_PATH"
+
+# Create parent directory
+PARENT_DIR=$(dirname "$FULL_PATH")
+mkdir -p "$PARENT_DIR"
+
+# Verify resolved path is still under project dir
+RESOLVED_PARENT=$(cd "$PARENT_DIR" && pwd)
+case "$RESOLVED_PARENT" in
+  "$RESOLVED_PROJECT"|"$RESOLVED_PROJECT"/*)
+    ;;
+  *)
+    echo '{"error": "file_path resolves outside project_dir"}' >&2
+    exit 1
+    ;;
+esac
+
+# --- Determine action ---
+ACTION="created"
+if [ -f "$FULL_PATH" ]; then
+  ACTION="updated"
+fi
+
+# --- Write file ---
+echo "$INPUT" | jq -r '.content' > "$FULL_PATH"
+
+SIZE=$(wc -c < "$FULL_PATH" | tr -d ' ')
+
+jq -n \
+  --arg path "$FILE_PATH" \
+  --arg action "$ACTION" \
+  --arg size "$SIZE" \
+  '{path: $path, action: $action, size: ($size | tonumber)}'
diff --git a/forge-skills/local/registry_embedded_test.go b/forge-skills/local/registry_embedded_test.go
index e49497a..91c8eff 100644
--- a/forge-skills/local/registry_embedded_test.go
+++ b/forge-skills/local/registry_embedded_test.go
@@ -16,12 +16,12 @@ func TestEmbeddedRegistry_DiscoverAll(t *testing.T) {
 		t.Fatalf("List error: %v", err)
 	}
 
-	if len(skills) != 8 {
+	if len(skills) != 10 {
 		names := make([]string, len(skills))
 		for i, s := range skills {
 			names[i] = s.Name
 		}
-		t.Fatalf("expected 8 skills, got %d: %v", len(skills), names)
+		t.Fatalf("expected 10 skills, got %d: %v", len(skills), names)
 	}
 
 	// Verify all expected skills are present
@@ -39,6 +39,8 @@ func TestEmbeddedRegistry_DiscoverAll(t *testing.T) {
 		"code-review":           {displayName: "Code Review", hasEnv: false, hasBins: true, hasEgress: true},
 		"code-review-standards": {displayName: "Code Review Standards", hasEnv: false, hasBins: false, hasEgress: false},
 		"code-review-github":    {displayName: "Code Review Github", hasEnv: true, hasBins: true, hasEgress: true},
+		"codegen-react":         {displayName: "Codegen React", hasEnv: false, hasBins: true, hasEgress: true},
+		"codegen-html":          {displayName: "Codegen Html", hasEnv: false, hasBins: true, hasEgress: true},
 	}
 
 	for _, s := range skills {

From 50a14757bf1af292a7fb749d17ee02c827e5338a Mon Sep 17 00:00:00 2001
From: MK <mk@initializ.io>
Date: Tue, 3 Mar 2026 19:18:58 -0500
Subject: [PATCH 2/2] fix: unify skill category from 'dev' to 'developer'

Code-review skills used 'dev' while codegen skills used 'developer'.
Standardize all to 'developer' for consistent filtering.
---
 docs/skills.md                                             | 6 +++---
 forge-skills/local/embedded/code-review-github/SKILL.md    | 2 +-
 forge-skills/local/embedded/code-review-standards/SKILL.md | 2 +-
 forge-skills/local/embedded/code-review/SKILL.md           | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/skills.md b/docs/skills.md
index bbf2fc5..ca3de1f 100644
--- a/docs/skills.md
+++ b/docs/skills.md
@@ -150,9 +150,9 @@ forge skills list --tags kubernetes,incident-response
 | `tavily-search` | — | Search the web using Tavily AI search API | `tavily-search.sh` |
 | `tavily-research` | — | Deep multi-source research via Tavily API | `tavily-research.sh`, `tavily-research-poll.sh` |
 | `k8s-incident-triage` | sre | Read-only Kubernetes incident triage using kubectl | — (binary-backed) |
-| `code-review` | dev | AI-powered code review for diffs and files | `code-review-diff.sh`, `code-review-file.sh` |
-| `code-review-standards` | dev | Initialize and manage code review standards | — (template-based) |
-| `code-review-github` | dev | Post code review results to GitHub PRs | — (binary-backed) |
+| `code-review` | developer | AI-powered code review for diffs and files | `code-review-diff.sh`, `code-review-file.sh` |
+| `code-review-standards` | developer | Initialize and manage code review standards | — (template-based) |
+| `code-review-github` | developer | Post code review results to GitHub PRs | — (binary-backed) |
 | `codegen-react` | developer | Scaffold and iterate on Vite + React apps | `codegen-react-scaffold.sh`, `codegen-react-read.sh`, `codegen-react-write.sh`, `codegen-react-run.sh` |
 | `codegen-html` | developer | Scaffold standalone Preact + HTM apps (zero dependencies) | `codegen-html-scaffold.sh`, `codegen-html-read.sh`, `codegen-html-write.sh` |
 
diff --git a/forge-skills/local/embedded/code-review-github/SKILL.md b/forge-skills/local/embedded/code-review-github/SKILL.md
index 65129ca..e920a3a 100644
--- a/forge-skills/local/embedded/code-review-github/SKILL.md
+++ b/forge-skills/local/embedded/code-review-github/SKILL.md
@@ -1,6 +1,6 @@
 ---
 name: code-review-github
-category: dev
+category: developer
 tags:
   - code-review
   - github
diff --git a/forge-skills/local/embedded/code-review-standards/SKILL.md b/forge-skills/local/embedded/code-review-standards/SKILL.md
index 4ec419f..2f68fb8 100644
--- a/forge-skills/local/embedded/code-review-standards/SKILL.md
+++ b/forge-skills/local/embedded/code-review-standards/SKILL.md
@@ -1,6 +1,6 @@
 ---
 name: code-review-standards
-category: dev
+category: developer
 tags:
   - code-review
   - standards
diff --git a/forge-skills/local/embedded/code-review/SKILL.md b/forge-skills/local/embedded/code-review/SKILL.md
index cecaf23..6bab179 100644
--- a/forge-skills/local/embedded/code-review/SKILL.md
+++ b/forge-skills/local/embedded/code-review/SKILL.md
@@ -1,6 +1,6 @@
 ---
 name: code-review
-category: dev
+category: developer
 tags:
   - code-review
   - diff