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

# Kiro

> Use FormBnB forms with Kiro - Amazon's AI IDE

## Setup

Install the FormBnB skill in your project:

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

This creates a `SKILL.md` file in `.kiro/skills/` that Kiro loads automatically.

### Verify Installation

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

You should see `formbnb` listed under Kiro CLI.

<Note>
  After installing, if you're using Kiro's custom agents, add the skill to your agent's `resources` in `.kiro/agents/<agent>.json`:

  ```json theme={null}
  {
    "resources": ["skill://.kiro/skills/**/SKILL.md"]
  }
  ```
</Note>

## Usage

Once installed, Kiro knows how to create FormBnB forms. Use it in chat or let it work through specs:

### In Chat

```
Add a contact form to the homepage that submits to FormBnB
```

### With Specs

When building a feature with Kiro's spec system, mention FormBnB in your requirements:

```
The contact page should include a form that submits to FormBnB for backend handling.
Include name, email, and message fields with spam protection.
```

Kiro will generate the implementation tasks with FormBnB integration built in.

### Autopilot Mode

In autopilot mode, Kiro can build entire form flows end-to-end:

```
Create a complete contact page with a FormBnB form, success state,
and a webhook handler that sends submissions to Slack.
```

## Examples

### React form with hooks:

```
Create a useContactForm hook that submits to FormBnB and returns
loading, success, and error states. Then build a ContactForm component using it.
```

### Form with file uploads:

```
Add a job application form with resume upload. Use FormBnB for the backend.
Accept PDF and DOCX files.
```

### Full-stack form flow:

```
Build a feedback form that:
1. Submits to FormBnB
2. Shows a success animation
3. Sends a webhook to our API
4. The API route verifies the FormBnB signature and saves to the database
```

## Tips

* The skill activates on form-related files (`.html`, `.tsx`, `.jsx`, `.vue`, `.svelte`, `.astro`)
* Works in both chat and spec-driven development
* Kiro's steering files can reference FormBnB docs for consistent form patterns across your project
* For global installation: `npx skills add formbnb/agent-skills -a kiro-cli -g`