VerticalSlices: Skill for Claude Code

Workflow

Step 1 — Prerequisites

• Backend query and command endpoints must already exist (see cratis-readmodel and cratis-command skills).
• Run a Debug dotnet build on the backend to regenerate proxies before importing them.

Import DataPage (and its Column/MenuItem helpers) from the subpath, not the root barrel:

import { DataPage, MenuItem } from '@cratis/components/DataPage';
import { Column } from '@cratis/components/DataPage';
import { CommandDialog } from '@cratis/components/CommandDialog';
import { useDialog, DialogProps } from '@cratis/arc.react/dialogs';

---

Step 2 — Basic DataPage setup

DataPage combines a toolbar/menu, a data table, and an optional details component. title, query, emptyMessage, and children are required; columns are declared compositionally inside <DataPage.Columns> using PrimeReact <Column>.

import { DataPage } from '@cratis/components/DataPage';
import { Column } from '@cratis/components/DataPage';
import { AllAccounts } from './AllAccounts';

export const AccountsPage = () => (
    <DataPage
        title="Accounts"
        query={AllAccounts}
        emptyMessage="No accounts yet.">
        <DataPage.Columns>
            <Column field="name" header="Name" />
            <Column field="balance" header="Balance" />
        </DataPage.Columns>
    </DataPage>
);

---

Step 3 — Add menu actions

Toolbar actions go in <DataPage.MenuItems>. MenuItem is a PrimeReact menu item (use command, not onClick); the disableOnUnselected flag greys it out until a row is selected. Create a separate dialog component using DialogProps, then wire it up with useDialog.

Dialog component (CreateAccountDialog.tsx):

import { DialogProps } from '@cratis/arc.react/dialogs';
import { CommandDialog } from '@cratis/components/CommandDialog';
import { InputTextField } from '@cratis/components/CommandForm';
import { CreateAccount } from './CreateAccount';

export const CreateAccountDialog = ({ closeDialog }: DialogProps) => (
    <CommandDialog<CreateAccount> command={CreateAccount} title="Create Account" okLabel="Create">
        <InputTextField<CreateAccount> value={c => c.name} title="Account Name" />
    </CommandDialog>
);