VVibeFlui

Migration Prompts

Use these prompts when an existing React page should be converted to VibeFlui.

Manual React to VibeFlui prompt

TXT
Migrate this existing React table/form page to VibeFlui.

Return separate files with path labels:
- schemas/products/product.resource.schema.ts
- components/vibeflui/renderers/products/ProductStatusBadge.tsx
- lib/vibeflui/registry.tsx
- lib/vibeflui/examples/product-crud-actions.ts
- app/products/page.tsx

Rules:
- Preserve the current data fields first.
- Move table columns into table.columns.
- Move form inputs into form.fields.
- Move custom cell UI into renderer components.
- Move create/update/delete state changes into product-crud-actions.ts.
- Use createProductCrudActions(setRows) in the page.
- Do not inline async handlers inside <FluiKit> or <FluiKitForm>.
- Do not inline JSX inside createRegistry.
- Registry should only import and register components/functions.
- Use { status: true, code: 200, message } for successful local actions.
- Keep backend validation and authorization as backend responsibilities.

Refactor generated output prompt

TXT
Refactor this generated VibeFlui code into the official structure.

Problems to fix:
- schema, registry, custom components, data, and page code are mixed in one file
- createRegistry contains inline JSX
- <FluiKit> or <FluiKitForm> uses inline async handlers

Target structure:
- schemas/<resource>/<resource>.resource.schema.ts
- components/vibeflui/renderers/<resource>/
- components/vibeflui/fields/
- lib/vibeflui/registry.tsx
- lib/vibeflui/examples/<resource>-crud-actions.ts
- app/<resource>/page.tsx

Output rules:
- add a file path label before every code block
- keep schema declarative
- only use keys from current @vibeflui/core types
- explain any removed unsupported keys

Manual fetch to VibeFlui endpoint config prompt

This does not migrate anything on the backend. It only replaces hand-written fetch/axios calls in the React page with VibeFlui's declarative endpoint config, so the same existing backend API is now called through the schema instead of manual code. VibeFlui still runs entirely in the browser.

TXT
Convert this manually fetched table page to VibeFlui's REST endpoint config (dataMode: server), keeping the same existing backend API — do not regenerate the backend.

Return separate files:
- schemas/orders/order.resource.schema.ts
- app/orders/page.tsx

Rules:
- schema mode is server
- provider.type is rest
- endpoint map includes list, create, update, delete, pointing at the existing backend URLs already used by the manual fetch code
- table.dataPath is data
- table.totalPath is total
- assume the existing backend already returns { status, code, message, data } for mutations; if it uses different field names, map them explicitly instead of assuming a match (see the mutation response mapping prompt)
- expected business rejection can return status: false and code: 409
- false status with 4xx code must be described as warning feedback, not a UI feedback status
- do not add provider plugins unless the package and export exist in the current source

Migration review prompt

TXT
Audit this VibeFlui migration.

Check:
- the migrated schema still matches the original data fields
- no unsupported schema keys were invented
- plugin and adapter claims were verified against the current package source
- custom UI was moved out of the registry
- registry only wires imported components/functions
- page only wires provider, schema, data, and named handlers
- no inline async handler is passed to FluiKit or FluiKitForm
- response objects use code: 200 for docs/local examples
- backend validation and authorization are not replaced by frontend permissions