> ## Documentation Index
> Fetch the complete documentation index at: https://formbnb.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# AI Agent Skills

> Teach any AI coding agent how to create FormBnB forms

## What Are Agent Skills?

Agent skills are reusable instruction sets that teach AI coding agents how to work with specific tools and services. When you install the FormBnB skill, your AI agent learns how to create forms, handle submissions, set up file uploads, configure webhooks, and use the FormBnB API — without you having to explain it every time.

The FormBnB skill works with **40+ AI coding agents** including Claude Code, Cursor, GitHub Copilot, Windsurf, Kiro, and many more.

## Install

Run this in your project directory:

```bash theme={null}
npx skills add formbnb/agent-skills
```

The CLI auto-detects which agents you have installed and adds the skill to each one.

### Install Options

```bash theme={null}
# Install to specific agents
npx skills add formbnb/agent-skills -a cursor -a claude-code

# Install globally (available in all projects)
npx skills add formbnb/agent-skills -g

# Non-interactive (CI/CD friendly)
npx skills add formbnb/agent-skills -a cursor -y
```

## What the Skill Teaches Your Agent

Once installed, your AI agent knows how to:

* Create HTML forms that POST to your FormBnB endpoint
* Build React/Next.js forms with proper state handling
* Submit forms via JSON API
* Handle file uploads with `multipart/form-data`
* Use special fields (`_next`, `_subject`, `_replyto`, `_gotcha`)
* Set up webhooks with HMAC signature verification
* Use the FormBnB REST API with `sk_` API keys
* Auto-create forms by submitting to new slugs

## How It Works

The skill is a `SKILL.md` file that gets loaded into your agent's context when you work on form-related files (`.html`, `.tsx`, `.jsx`, `.vue`, `.svelte`, `.astro`). It contains structured instructions and code examples that the agent follows.

You don't need to prompt the agent with FormBnB-specific instructions. Just say:

> "Add a contact form that sends to FormBnB"

And the agent knows exactly what to do.

## Supported Agents

<CardGroup cols={3}>
  <Card title="Claude Code" icon="terminal" href="/agents/claude-code">
    Anthropic's CLI coding agent
  </Card>

  <Card title="Cursor" icon="code" href="/agents/cursor">
    AI-first code editor
  </Card>

  <Card title="GitHub Copilot" icon="github" href="/agents/github-copilot">
    GitHub's AI pair programmer
  </Card>

  <Card title="Windsurf" icon="wind" href="/agents/windsurf">
    Codeium's AI IDE
  </Card>

  <Card title="Kiro" icon="wand-magic-sparkles" href="/agents/kiro">
    Amazon's AI IDE
  </Card>

  <Card title="Lovable" icon="heart" href="/agents/lovable">
    AI full-stack app builder
  </Card>

  <Card title="Bolt" icon="bolt" href="/agents/bolt">
    StackBlitz AI app builder
  </Card>

  <Card title="v0" icon="sparkles" href="/agents/v0">
    Vercel's AI UI generator
  </Card>

  <Card title="Replit" icon="laptop-code" href="/agents/replit">
    AI-powered cloud IDE
  </Card>
</CardGroup>

See the full list of [40+ supported agents](/agents/all-agents).

## Quick Example

After installing the skill, here's what a typical interaction looks like:

**You:** "Create a contact form for my portfolio site"

**Agent:**

```html theme={null}
<form action="https://api.formbnb.com/f/YOUR_ORG/YOUR_FORM" method="POST">
  <input type="text" name="_gotcha" style="display:none">

  <label for="name">Name</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Message</label>
  <textarea id="message" name="message" required></textarea>

  <button type="submit">Send Message</button>
</form>
```

The agent automatically includes the honeypot field, proper field names, and the correct endpoint format — because the skill taught it how.

## Managing Skills

```bash theme={null}
# List installed skills
npx skills list

# Update to latest version
npx skills update formbnb

# Remove the skill
npx skills remove formbnb
```

## Next Steps

<CardGroup cols={2}>
  <Card title="Agent-Specific Guides" icon="robot" href="/agents/claude-code">
    Setup instructions for each agent
  </Card>

  <Card title="Quick Start" icon="rocket" href="/quickstart">
    Get your first form working
  </Card>
</CardGroup>