File size: 3,159 Bytes
391c43e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | /**
* React Domain Prompt
*
* Per-project .PROMPT.md content for React/TypeScript projects.
* Guides the AI to write TSX components, use CDN imports for npm packages,
* and follow the /src/ directory structure.
*/
export const REACT_DOMAIN_PROMPT = `PROJECT TYPE: React + TypeScript (auto-bundled)
This project uses React with TypeScript. Source files are compiled by esbuild-wasm in the browser — no build tools or npm needed during development.
ARCHITECTURE:
- /index.html — HTML shell with <div id="root"> and <script type="module" src="/bundle.js">
- /src/main.tsx — Entry point: createRoot + render <App />
- /src/App.tsx — Root component
- /src/components/ — Reusable components (one per file)
- .css files — Imported directly in TSX: import "./styles.css"
WRITING COMPONENTS:
- Create components in /src/components/Name.tsx
- Use functional components with hooks
- No need for "import React" — JSX transform is automatic
- Export components as default or named exports
IMPORTING NPM PACKAGES:
- Import by package name — resolved via CDN automatically:
import { useState } from "react";
import { motion } from "framer-motion";
import confetti from "canvas-confetti";
import { format } from "date-fns";
- Do NOT use require() or CommonJS
- Do NOT create node_modules or package.json
CSS STYLING:
- Import CSS files directly: import "./App.css"
- CSS modules are NOT supported — use plain CSS with unique class names
- For Tailwind CSS, add to index.html <head>: <script src="https://cdn.tailwindcss.com"></script>
- For other CSS frameworks, use CDN links in index.html
ROUTING (Single Page App):
- Use hash-based routing for SPAs: window.location.hash
- Example: #/about, #/contact
- Create a simple router component or use a hash-based approach
- Do NOT use react-router-dom (requires server-side config)
STATE MANAGEMENT:
- useState / useReducer for local state
- useContext for shared state
- For complex state: import { create } from "zustand"
FILE STRUCTURE EXAMPLE:
/index.html
/src/main.tsx
/src/App.tsx
/src/App.css
/src/components/Header.tsx
/src/components/Footer.tsx
/src/components/Button.tsx
/src/hooks/useLocalStorage.ts
/src/utils/helpers.ts
DO NOT:
- Create .hbs / .handlebars files (those are for the HTML/Handlebars pipeline)
- Create /templates/ or /data.json (Handlebars-specific)
- Write vanilla DOM manipulation (document.getElementById, etc.)
- Use require() or CommonJS modules
- Create build configs (vite.config.ts, webpack.config.js, etc.)
- Try to install packages with npm/yarn
BUILD OUTPUT:
- The project auto-compiles when files change
- Build errors appear in the Terminal panel (esbuild compilation errors)
- /bundle.js and /bundle.css are generated files visible in the file explorer
- If bundle.js is missing, the build failed — check Terminal for errors
- Use 'cat /bundle.js' to inspect the compiled output if needed
IMPORTANT:
- The preview rebuilds automatically when any file changes
- React state is lost on rebuild (expected behavior)
- TypeScript types are stripped, not checked (like Vite)
- All imports resolve at runtime from esm.sh CDN — internet required`;
|