Output Structure

Ask AI assistants to return file-based output. This keeps generated VibeFlui code readable and consistent.

Required file groups

File group	Purpose
`schemas/<resource>/...schema.ts`	Declarative VibeFlui schema.
`components/vibeflui/renderers/...`	Custom table/detail value renderers.
`components/vibeflui/fields/...`	Custom form field components.
`lib/vibeflui/registry.tsx`	Registry wiring for renderers, components, validators, handlers, options, permissions, hooks, events, and computed values.
`lib/vibeflui/examples/...`	Reusable local demo data and actions.
`app/<resource>/page.tsx`	Page-level wiring only.

Good output request

TXT

Return the result as separate files with path labels.

For every code block, put the file path above it.
Use this structure:
- schemas/products/product.resource.schema.ts
- components/vibeflui/renderers/products/ProductStatusBadge.tsx
- lib/vibeflui/registry.tsx
- lib/vibeflui/examples/product-data.ts
- lib/vibeflui/examples/product-crud-actions.ts
- app/products/page.tsx

Bad pattern

Do not ask for one large component that includes schema, registry, renderers, data, and page UI in one file.

app/products/page.tsx

TSX

// Avoid this shape.
export default function ProductsPage() {
  const schema = {};
  const registry = createRegistry({
    renderers: {
      ProductStatusBadge({ value }) {
        return <span>{String(value)}</span>;
      }
    }
  });

  return <FluiKit schema={schema} data={rows} />;
}

Good pattern

components/vibeflui/renderers/products/ProductStatusBadge.tsx

TSX

export function ProductStatusBadge({ value }: { value?: unknown }) {
  return <span>{String(value ?? "-")}</span>;
}

lib/vibeflui/registry.tsx

TSX

import { createRegistry } from "@vibeflui/core";
import { ProductStatusBadge } from "@/components/vibeflui/renderers/products/ProductStatusBadge";

export const vibefluiRegistry = createRegistry({
  renderers: {
    ProductStatusBadge
  }
});

lib/vibeflui/examples/product-data.ts

export const products = [
  { id: "prd_001", name: "Starter plan", status: "active" },
  { id: "prd_002", name: "Archive add-on", status: "draft" }
];

app/products/page.tsx

TSX

"use client";

import { FluiKit, FluiKitProvider } from "@vibeflui/core";
import { productResourceSchema } from "@/schemas/products/product.resource.schema";
import { vibefluiRegistry } from "@/lib/vibeflui/registry";
import { products } from "@/lib/vibeflui/examples/product-data";

export default function ProductsPage() {
  return (
    <FluiKitProvider registry={vibefluiRegistry}>
      <FluiKit schema={productResourceSchema} data={products} />
    </FluiKitProvider>
  );
}

Handler rule

Do not inline async handlers inside FluiKit or FluiKitForm props.

app/products/page.tsx

TSX

const productActions = createProductCrudActions(setRows);

<FluiKit
  schema={productResourceSchema}
  data={rows}
  onCreate={productActions.createProduct}
  onUpdate={productActions.updateProduct}
  onDelete={productActions.deleteProduct}
/>;