codegen-react

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

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