Flowtape — Development skill for Claude Code

flowtape

flowtape records a user journey in your running Vite + React app and turns it into a prompt that Claude Code can replay and explore. You click **Record** in a small in-app overlay, use the app as normal, then click **Stop** and **Export**. flowtape writes the flow as JSON and as a Markdown prompt with steps, assertions, fuzz hints and limits. In development it also keeps a **session history**: an always-on, redacted log of what you did in each browser session, so an agent can review recent activity. It is local-first. There is no account, no cloud service and no browser extension. Passwords, masked fields and secret-looking values are redacted before anything is stored.

Add it to a Vite app

npm install -D @vedantb/flowtape

Add the plugin. It serves `/__flowtape/*` during `vite dev` only.

// vite.config.ts
import react from '@vitejs/plugin-react';
import { flowtape } from '@vedantb/flowtape/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [flowtape(), react()],
});

Mount the overlay once, next to your app.

import { FlowtapeOverlay } from '@vedantb/flowtape';

createRoot(root).render(
  <>
    
    
  ,
);

The overlay renders only outside production builds. Pass `enabled` to force it on or off. To keep it out of your production bundle entirely, render it behind `import.meta.env.DEV`.

Plugin option	Default	Meaning
enabled	on for vite dev	Turn the middleware on or off.
dir	.flowtape	Output folder, relative to the Vite root.

Overlay prop	Default	Meaning
enabled	on outside production	Show or hide the overlay.
endpoint	/__flowtape	Base URL of the middleware.
recorder	shared page recorder	Supply your own createRecorder() instance.
sessionHistory	shared page history	Supply your own createSessionHistory({ capture }), for example with `