Formasty

WORKING SLICE
Build a multi-step form editor, publish a responsive share page and provide a safely resizing iframe embed. Show a private response table with filters and a clean CSV export.

Build this scoped Formasty-inspired workflow with a documented data model and visible failure states.

Architecture
- Next.js App Router and TypeScript for server-rendered pages and validated mutations.
- PostgreSQL with Drizzle migrations; Better Auth sessions for a small private workspace.
- A versioned JSON form schema shared by a controlled builder, public renderer and server-side validator.

Prerequisites and limits
A supported Node release, PostgreSQL, HTTPS for a shared deployment, and a backup destination. Begin with one workspace and explicit owner/member permissions.
Outside this release: Deliverability: their notification email is warmed and authenticated, your SMTP box is not; The integration shelf: Sheets, Slack, Notion, CRM, Zapier style webhooks with retries and mapping UI

Data model and correctness
forms, ordered steps, versioned field IDs, branching expressions, responses and notification jobs
Invariant: A form version is immutable after collecting responses; branching must be evaluated on the server as well as in the browser.
Commit related database changes in one transaction. Use version checks for competing edits and an outbox for external notifications; retry delivery independently of saving the record.

Security and privacy
Authorize every record read and mutation on the server using its workspace membership; validate payloads, protect mutations against CSRF, and escape user-authored HTML. Apply per-form submission limits and spam controls; keep responses private and separate public form IDs from management permissions.

Recovery and export
Export versioned JSON plus attachments and a readable CSV summary. Restore into a separate database and compare record IDs and attachment checksums before switching.

Implementation order
1. Phase 1 — Scope and fixtures. Implement this bounded workflow: Build a multi-step form editor, publish a responsive share page and provide a safely resizing iframe embed. Show a private response table with filters and a clean CSV export. Record prerequisites, select representative user-owned fixtures and document the unsupported features: Deliverability: their notification email is warmed and authenticated, your SMTP box is not; The integration shelf: Sheets, Slack, Notion, CRM, Zapier style webhooks with retries and mapping UI
2. Phase 2 — Durable model. Model forms, ordered steps, versioned field IDs, branching expressions, responses and notification jobs Add migrations or a versioned document format, explicit validation, stable IDs and a visible import-error report. Preserve this rule: A form version is immutable after collecting responses; branching must be evaluated on the server as well as in the browser.
3. Phase 3 — Complete the first useful path. Implement the workflow's input, review and output interface, with clear controls and explicit empty/error states. Commit related database changes in one transaction. Use version checks for competing edits and an outbox for external notifications; retry delivery independently of saving the record.
4. Phase 4 — Permissions and integration failure. Authorize every record read and mutation on the server using its workspace membership; validate payloads, protect mutations against CSRF, and escape user-authored HTML. Apply per-form submission limits and spam controls; keep responses private and separate public form IDs from management permissions. Request integration credentials and permissions only for the enabled feature; show a disconnected state instead of mock results.
5. Phase 5 — Portable handoff. Export versioned JSON plus attachments and a readable CSV summary. Restore into a separate database and compare record IDs and attachment checksums before switching. Include setup, operating limits, fixture walkthrough and shutdown/restart instructions in the README.
6. Phase 6 — Acceptance scenarios. Skip a conditional step and verify its hidden answers are not accepted; an iframe height message from an unapproved origin is ignored. Repeat the workflow after restart and with a denied permission or unavailable dependency; show recoverable failure rather than a success placeholder.

Acceptance
Skip a conditional step and verify its hidden answers are not accepted; an iframe height message from an unapproved origin is ignored.
Use real source data or clearly labeled fixtures. Explain unsupported input and provider failures; do not fabricate analytics, delivery receipts, accuracy claims or security guarantees.

Optional agent guidance
Optional external skill: [web-design-guidelines](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md) — Review web interfaces for accessibility, keyboard focus, forms, navigation and interaction quality. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission.
Optional external skill: [vercel-composition-patterns](https://github.com/vercel-labs/agent-skills/blob/main/skills/composition-patterns/SKILL.md) — Design reusable React components with composition, context and explicit component variants. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission.
Optional external skill: [supabase-postgres-best-practices](https://github.com/supabase/agent-skills/blob/main/skills/supabase-postgres-best-practices/SKILL.md) — Review PostgreSQL schemas, queries, indexes, pooling, concurrency and row-level security. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission.
Project rule — data model: forms, ordered steps, versioned field IDs, branching expressions, responses and notification jobs
Project rule — preserve this invariant: A form version is immutable after collecting responses; branching must be evaluated on the server as well as in the browser.
Project rule — acceptance evidence: Skip a conditional step and verify its hidden answers are not accepted; an iframe height message from an unapproved origin is ignored.

# AGENTS.md — Build guide for Formasty

## Project scope
Build a multi-step form editor, publish a responsive share page and provide a safely resizing iframe embed. Show a private response table with filters and a clean CSV export.

Catalogue verdict: kinda. A form builder is one of the most one-shottable categories there is: a schema, a renderer, a responses table, a CSV export. An agent will get you a working multi-step form with conditional fields and an embed snippet in a single session, and for a personal signup form or client intake that is genuinely enough. The gaps are the boring parts nobody thinks about until they bite: email that actually lands in inboxes, spam that gets past a honeypot, file uploads you have to back up, and the dozen integrations that turn a response into a row in someone else's tool. You also inherit uptime, because a form that is down is a lead you never knew existed. Build it if the form is yours and the volume is low; pay if the form is a business process.
Use the implementation prompt below to define the deliverable. Complete each phase's acceptance checks before extending the scope.

## Working agreement
- Inspect the repository and its existing instructions before choosing paths, dependencies or commands. Keep one coherent stack and explain changes to the proposed architecture.
- Plan a vertical slice that accepts a real input and produces the useful output described below. Persist only the state the prompt calls for; respect memory-only and upstream-managed workflows. Use fixtures only when they are clearly labelled.
- After scaffolding, document the actual install, development, check and build commands in README and keep them synchronized with the package or project manifest. Do not report commands as successful unless they ran.
- Work in small steps. At handoff, list implemented flows, checks actually performed, remaining blockers, and any credentials or provider setup the owner must supply.
- Do not publish, spend money, contact customers, delete source data or run irreversible migrations without the project owner's authorization.

## Prerequisites
- A supported Node release, PostgreSQL, HTTPS for a shared deployment, and a backup destination. Begin with one workspace and explicit owner/member permissions.
- Implementation components: Next.js App Router and TypeScript for server-rendered pages and validated mutations. PostgreSQL with Drizzle migrations; Better Auth sessions for a small private workspace. A versioned JSON form schema shared by a controlled builder, public renderer and server-side validator.
- Scope boundary: Deliverability: their notification email is warmed and authenticated, your SMTP box is not; The integration shelf: Sheets, Slack, Notion, CRM, Zapier style webhooks with retries and mapping UI

## Stack and architecture
- Next.js App Router and TypeScript for server-rendered pages and validated mutations.
- PostgreSQL with Drizzle migrations; Better Auth sessions for a small private workspace.
- A versioned JSON form schema shared by a controlled builder, public renderer and server-side validator.
- Domain model: forms, ordered steps, versioned field IDs, branching expressions, responses and notification jobs

## Security and data integrity
- Authorize every record read and mutation on the server using its workspace membership; validate payloads, protect mutations against CSRF, and escape user-authored HTML. Apply per-form submission limits and spam controls; keep responses private and separate public form IDs from management permissions.
- Correctness boundary: A form version is immutable after collecting responses; branching must be evaluated on the server as well as in the browser.
- Commit related database changes in one transaction. Use version checks for competing edits and an outbox for external notifications; retry delivery independently of saving the record.
- Export versioned JSON plus attachments and a readable CSV summary. Restore into a separate database and compare record IDs and attachment checksums before switching.

## Agent implementation rules
- Project rule — data model: forms, ordered steps, versioned field IDs, branching expressions, responses and notification jobs
- Project rule — preserve this invariant: A form version is immutable after collecting responses; branching must be evaluated on the server as well as in the browser.
- Project rule — acceptance evidence: Skip a conditional step and verify its hidden answers are not accepted; an iframe height message from an unapproved origin is ignored.

## Optional agent skills and references
- Optional external skill: [web-design-guidelines](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md) — Review web interfaces for accessibility, keyboard focus, forms, navigation and interaction quality. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission.
- Optional external skill: [vercel-composition-patterns](https://github.com/vercel-labs/agent-skills/blob/main/skills/composition-patterns/SKILL.md) — Design reusable React components with composition, context and explicit component variants. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission.
- Optional external skill: [supabase-postgres-best-practices](https://github.com/supabase/agent-skills/blob/main/skills/supabase-postgres-best-practices/SKILL.md) — Review PostgreSQL schemas, queries, indexes, pooling, concurrency and row-level security. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission.

Read the linked SKILL.md and its dependencies before adding a skill. Select only the skills matching this project's runtime and task; their documentation does not supply API access, credentials or approval to perform external actions. Pin the reviewed revision where the tool supports it. Follow the chosen agent's documented project-level installation mechanism.

## Distribution ideas
These are optional planning notes. Obtain the owner's approval before publishing or contacting anyone.
- Demonstrate the actual Formasty-inspired workflow with owned or clearly labeled sample data: Build a multi-step form editor, publish a responsive share page and provide a safely resizing iframe embed. Show a private response table with filters and a clean CSV export.
- Publish a reproducible walkthrough with this observable result: Skip a conditional step and verify its hidden answers are not accepted; an iframe height message from an unapproved origin is ignored.
- Explain who can operate this scoped tool, its setup and ongoing costs, and these remaining product gaps: Deliverability: their notification email is warmed and authenticated, your SMTP box is not; The integration shelf: Sheets, Slack, Notion, CRM, Zapier style webhooks with retries and mapping UI Avoid guaranteed savings, performance scores or implied endorsement.

## Engineering roadmap
1. Phase 1 — Scope and fixtures. Implement this bounded workflow: Build a multi-step form editor, publish a responsive share page and provide a safely resizing iframe embed. Show a private response table with filters and a clean CSV export. Record prerequisites, select representative user-owned fixtures and document the unsupported features: Deliverability: their notification email is warmed and authenticated, your SMTP box is not; The integration shelf: Sheets, Slack, Notion, CRM, Zapier style webhooks with retries and mapping UI
2. Phase 2 — Durable model. Model forms, ordered steps, versioned field IDs, branching expressions, responses and notification jobs Add migrations or a versioned document format, explicit validation, stable IDs and a visible import-error report. Preserve this rule: A form version is immutable after collecting responses; branching must be evaluated on the server as well as in the browser.
3. Phase 3 — Complete the first useful path. Implement the workflow's input, review and output interface, with clear controls and explicit empty/error states. Commit related database changes in one transaction. Use version checks for competing edits and an outbox for external notifications; retry delivery independently of saving the record.
4. Phase 4 — Permissions and integration failure. Authorize every record read and mutation on the server using its workspace membership; validate payloads, protect mutations against CSRF, and escape user-authored HTML. Apply per-form submission limits and spam controls; keep responses private and separate public form IDs from management permissions. Request integration credentials and permissions only for the enabled feature; show a disconnected state instead of mock results.
5. Phase 5 — Portable handoff. Export versioned JSON plus attachments and a readable CSV summary. Restore into a separate database and compare record IDs and attachment checksums before switching. Include setup, operating limits, fixture walkthrough and shutdown/restart instructions in the README.
6. Phase 6 — Acceptance scenarios. Skip a conditional step and verify its hidden answers are not accepted; an iframe height message from an unapproved origin is ignored. Repeat the workflow after restart and with a denied permission or unavailable dependency; show recoverable failure rather than a success placeholder.

## Paid-product capabilities outside this build
- Deliverability: their notification email is warmed and authenticated, your SMTP box is not
- The integration shelf: Sheets, Slack, Notion, CRM, Zapier style webhooks with retries and mapping UI
- Template library and builder polish, which is most of what you are paying for in a form tool
- Payment fields, e-signature, and anything that needs a compliance story like a signed DPA
- Uptime and CDN edge delivery, so a form on a busy page fails silently when your box does

## Implementation prompt
WORKING SLICE
Build a multi-step form editor, publish a responsive share page and provide a safely resizing iframe embed. Show a private response table with filters and a clean CSV export.

Build this scoped Formasty-inspired workflow with a documented data model and visible failure states.

Architecture
- Next.js App Router and TypeScript for server-rendered pages and validated mutations.
- PostgreSQL with Drizzle migrations; Better Auth sessions for a small private workspace.
- A versioned JSON form schema shared by a controlled builder, public renderer and server-side validator.

Prerequisites and limits
A supported Node release, PostgreSQL, HTTPS for a shared deployment, and a backup destination. Begin with one workspace and explicit owner/member permissions.
Outside this release: Deliverability: their notification email is warmed and authenticated, your SMTP box is not; The integration shelf: Sheets, Slack, Notion, CRM, Zapier style webhooks with retries and mapping UI

Data model and correctness
forms, ordered steps, versioned field IDs, branching expressions, responses and notification jobs
Invariant: A form version is immutable after collecting responses; branching must be evaluated on the server as well as in the browser.
Commit related database changes in one transaction. Use version checks for competing edits and an outbox for external notifications; retry delivery independently of saving the record.

Security and privacy
Authorize every record read and mutation on the server using its workspace membership; validate payloads, protect mutations against CSRF, and escape user-authored HTML. Apply per-form submission limits and spam controls; keep responses private and separate public form IDs from management permissions.

Recovery and export
Export versioned JSON plus attachments and a readable CSV summary. Restore into a separate database and compare record IDs and attachment checksums before switching.

Implementation order
1. Phase 1 — Scope and fixtures. Implement this bounded workflow: Build a multi-step form editor, publish a responsive share page and provide a safely resizing iframe embed. Show a private response table with filters and a clean CSV export. Record prerequisites, select representative user-owned fixtures and document the unsupported features: Deliverability: their notification email is warmed and authenticated, your SMTP box is not; The integration shelf: Sheets, Slack, Notion, CRM, Zapier style webhooks with retries and mapping UI
2. Phase 2 — Durable model. Model forms, ordered steps, versioned field IDs, branching expressions, responses and notification jobs Add migrations or a versioned document format, explicit validation, stable IDs and a visible import-error report. Preserve this rule: A form version is immutable after collecting responses; branching must be evaluated on the server as well as in the browser.
3. Phase 3 — Complete the first useful path. Implement the workflow's input, review and output interface, with clear controls and explicit empty/error states. Commit related database changes in one transaction. Use version checks for competing edits and an outbox for external notifications; retry delivery independently of saving the record.
4. Phase 4 — Permissions and integration failure. Authorize every record read and mutation on the server using its workspace membership; validate payloads, protect mutations against CSRF, and escape user-authored HTML. Apply per-form submission limits and spam controls; keep responses private and separate public form IDs from management permissions. Request integration credentials and permissions only for the enabled feature; show a disconnected state instead of mock results.
5. Phase 5 — Portable handoff. Export versioned JSON plus attachments and a readable CSV summary. Restore into a separate database and compare record IDs and attachment checksums before switching. Include setup, operating limits, fixture walkthrough and shutdown/restart instructions in the README.
6. Phase 6 — Acceptance scenarios. Skip a conditional step and verify its hidden answers are not accepted; an iframe height message from an unapproved origin is ignored. Repeat the workflow after restart and with a denied permission or unavailable dependency; show recoverable failure rather than a success placeholder.

Acceptance
Skip a conditional step and verify its hidden answers are not accepted; an iframe height message from an unapproved origin is ignored.
Use real source data or clearly labeled fixtures. Explain unsupported input and provider failures; do not fabricate analytics, delivery receipts, accuracy claims or security guarantees.

Optional agent guidance
Optional external skill: [web-design-guidelines](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md) — Review web interfaces for accessibility, keyboard focus, forms, navigation and interaction quality. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission.
Optional external skill: [vercel-composition-patterns](https://github.com/vercel-labs/agent-skills/blob/main/skills/composition-patterns/SKILL.md) — Design reusable React components with composition, context and explicit component variants. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission.
Optional external skill: [supabase-postgres-best-practices](https://github.com/supabase/agent-skills/blob/main/skills/supabase-postgres-best-practices/SKILL.md) — Review PostgreSQL schemas, queries, indexes, pooling, concurrency and row-level security. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission.
Project rule — data model: forms, ordered steps, versioned field IDs, branching expressions, responses and notification jobs
Project rule — preserve this invariant: A form version is immutable after collecting responses; branching must be evaluated on the server as well as in the browser.
Project rule — acceptance evidence: Skip a conditional step and verify its hidden answers are not accepted; an iframe height message from an unapproved origin is ignored.

## Completion evidence
Demonstrate the prompt's acceptance scenarios against the scoped workflow. Include setup from a clean checkout and failure recovery. Check persistence across restart and export/restore only for the state the prompt says to store; for memory-only tools, confirm that temporary content is discarded as specified. Record actual results and remaining limitations. A detailed plan alone does not establish a working replacement.