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

# Windsurf

> Use FormBnB forms with Windsurf - Codeium's AI IDE

## Setup

Install the FormBnB skill in your project:

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

This creates a `SKILL.md` file in `.windsurf/skills/` (or `~/.codeium/windsurf/skills/` for global install) that Windsurf loads automatically.

### Verify Installation

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

You should see `formbnb` listed under Windsurf.

## Usage

Once installed, Windsurf's Cascade AI knows how to create FormBnB forms. Use it in Cascade chat or inline:

### In Cascade

```
Create a contact form for my landing page that submits to FormBnB
```

### Write Mode

```
Add a feedback form component with name, email, rating, and message fields.
Submit to FormBnB and show a thank-you message on success.
```

### Flow Actions

When Windsurf detects you're building a form, it may proactively suggest using FormBnB based on the installed skill.

## Examples

### Multi-step form:

```
Create a multi-step registration form with personal info, preferences,
and confirmation steps. Submit all data to FormBnB on the final step.
```

### Form with validation:

```
Build a contact form with client-side validation using Zod.
Show inline errors. Submit to FormBnB via AJAX on valid submission.
```

### Webhook integration:

```
Create a webhook handler that receives FormBnB submissions and creates
a new row in our Supabase database for each submission.
```

## Tips

* The skill activates on form-related files (`.html`, `.tsx`, `.jsx`, `.vue`, `.svelte`, `.astro`)
* Works in both Cascade chat and Write mode
* For global installation: `npx skills add formbnb/agent-skills -a windsurf -g`