Agent integration prompt

A good integration prompt is self-contained: the agent needs nothing but the prompt and the target repo. It is the format React Bits and 21st.dev popularised; this is the version that also carries tokens, companions and verification.

Structure (keep the headings — agents key on them)

## Integrate the <Name /> component from <source>

You are helping integrate a React component into an existing application. <one line of agent brief>

### Component: Name
### Variant: TypeScript + Tailwind CSS (React 18)
### Dependencies: pkg-a, pkg-b        Install: `npm i pkg-a pkg-b`
### Files: src/components/ui/name.tsx, src/components/ui/companion.tsx

<one-paragraph description of what it does and when to use it>

### Usage Example
```tsx … ```

### Props
- `prop` — what it does (default)

### Design tokens
<the CSS variables / Tailwind theme the component expects, with real values>

### Integration Instructions
1. Install dependencies. 2. Create each file at its path (note the `@/` alias). 3. Add tokens or remap classes. 4. Add global CSS if any. 5. Render using the usage example. 6. Run the type-checker and build.

### Global CSS (only if needed)
### Full Component Source
#### path/one.tsx
```tsx … ```
#### path/two.tsx
```tsx … ```

---
Source: <url> · <attribution line>

Agent briefs (first paragraph, one line each)

• Claude Code / Codex / OpenCode: "Work directly in this repository: create the files at the given paths, install the dependencies, wire the usage example into the page I name, run the type-checker before you finish."
• Cursor / Windsurf / Copilot: same, plus "Use Agent mode."
• Antigravity: "Plan first, then execute … and verify in the browser."
• Generic chat: "Explain how to add this, then provide the finished files."

Rules

• Every file the component imports relatively must be included, or the agent will invent it.
• List packages by parsing the imports; exclude react/react-dom; never guess versions.
• Give tokens as values, not names: --fire-orange: 16 100% 50%, not "the brand orange".
• Put verification last and make it concrete: tsc --noEmit, npm run build, "open /page and check at 375px".
• Add an attribution line; do not claim a license you do not hold.
• Keep the whole thing under ~40 KB; split companion files into a second prompt if larger.