# Flowcorder Agent Instructions

Use these instructions when creating Flowcorder flows for a web app.

## Goal

Create repeatable demo flows that can be captured and composed into local videos.

## Files

- Commit authored files in `flowcorder/`.
- Treat `.flowcorder/` as generated output.
- Put flows in `flowcorder/flows/*.flow.ts`.
- Put login setup in `flowcorder/auth/login.setup.ts`.
- Put deterministic demo data in `flowcorder/fixtures/`.

## Workflow

1. Inspect the target app.
2. Add or update `flowcorder.config.ts`.
3. Write a focused flow with `defineFlow`.
4. Prefer stable accessible selectors.
5. Run `flowcorder doctor`.
6. Run `flowcorder run <flow-id>`.
7. Compose locally with `flowcorder compose <capture-id>` or open Composer with `flowcorder open`.
8. Report the capture id, output files, and any required app changes.

## Commands

```bash
flowcorder init
flowcorder doctor
flowcorder list
flowcorder run <flow-id>
flowcorder open
flowcorder compose <capture-id>
```

## Starter Flow

```ts
import { defineFlow } from "flowcorder";

export default defineFlow({
  id: "demo",
  name: "Demo",
  description: "A focused product demo.",
  estimatedDuration: "45s",
  async run({ page, app, step, pause }) {
    await step("open", "Open the app", async () => {
      await page.goto(app.url("/"), { waitUntil: "networkidle" });
      await pause(800);
    });
  },
});
```