---
name: agent-integration-prompt
description: Write a copy-paste integration prompt that lets any coding agent (Claude Code, Cursor, Codex, Antigravity, OpenCode, Windsurf, Copilot) drop a component, snippet or module into someone else's project. Use when publishing components, writing "how to add this" docs, or when a user asks for "a prompt I can give my AI to install this".
---

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