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

# Claude Code

> Use FormBnB forms with Claude Code - Anthropic's CLI coding agent

## Setup

Install the FormBnB skill in your project:

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

This creates a `SKILL.md` file in `.claude/skills/` that Claude Code loads automatically.

### Verify Installation

```bash theme={null}
npx skills list
```

You should see `formbnb` listed under Claude Code.

## Usage

Once installed, Claude Code knows how to create FormBnB forms. Just describe what you need:

### Basic Contact Form

```
> Add a contact form to the homepage that sends submissions to FormBnB
```

Claude Code will create a form with the correct endpoint, honeypot spam protection, and proper field structure.

### React Form with State

```
> Create a React contact form component that submits to FormBnB via AJAX
```

Claude Code will build a component with loading states, error handling, and success messages.

### File Upload Form

```
> Add a job application form with resume upload that sends to FormBnB
```

Claude Code will use `enctype="multipart/form-data"` and include file input fields.

### Webhook Handler

```
> Create a Next.js API route that receives FormBnB webhook submissions and verifies the signature
```

Claude Code will set up HMAC-SHA256 signature verification using the `X-FormBnB-Signature` header.

## What Claude Code Learns

The skill teaches Claude Code:

| Capability     | What It Knows                                       |
| -------------- | --------------------------------------------------- |
| HTML forms     | Correct `action` URL format, `method="POST"`        |
| React/Next.js  | `fetch` with `FormData`, state management           |
| JSON API       | `Content-Type: application/json` submissions        |
| File uploads   | `enctype="multipart/form-data"`, file inputs        |
| Special fields | `_next`, `_subject`, `_replyto`, `_gotcha`          |
| Webhooks       | Payload format, HMAC signature verification         |
| API access     | `sk_` API keys, all REST endpoints                  |
| Auto-create    | Submitting to new slugs creates forms automatically |

## Tips

* The skill activates automatically when you're working on `.html`, `.tsx`, `.jsx`, `.vue`, `.svelte`, or `.astro` files
* You don't need to mention "FormBnB" — just ask for a "contact form" and Claude Code will use FormBnB if the skill is installed
* For global installation (all projects): `npx skills add formbnb/agent-skills -a claude-code -g`