{
  "generatedFrom": "src/registry/aiRecipes.ts",
  "generatedDate": "2026-09-02",
  "note": "Each recipe uses only public exports and is verified to resolve in the live sandbox.",
  "recipes": [
    {
      "id": "notification-settings",
      "title": "Notification settings",
      "prompt": "Build a notification-settings section: email and push toggles, a digest frequency select, and a save button.",
      "components": [
        "Stack",
        "Switch",
        "Select",
        "Button"
      ],
      "code": "import { Button, Select, Stack, Switch } from \"@crossroads/ui\";\n\n<Stack.Root direction=\"column\" gap=\"4\">\n  <Switch defaultChecked label=\"Email notifications\" />\n  <Switch label=\"Push notifications\" />\n  <Select.Root defaultValue=\"weekly\" label=\"Digest frequency\">\n    <Select.Option value=\"daily\">Daily</Select.Option>\n    <Select.Option value=\"weekly\">Weekly</Select.Option>\n    <Select.Option value=\"monthly\">Monthly</Select.Option>\n  </Select.Root>\n  <Button color=\"primary\" label=\"Save changes\" variant=\"contained\" />\n</Stack.Root>"
    },
    {
      "id": "members-table",
      "title": "Members table",
      "prompt": "Show a table of team members with their status.",
      "components": [
        "Table",
        "Badge"
      ],
      "code": "import { Badge, Table, TableBody, TableCaption, TableCell, TableHead, TableHeaderCell, TableRow } from \"@crossroads/ui\";\n\n<Table responsiveLabel=\"Scrollable member table\">\n  <TableCaption>Team members</TableCaption>\n  <TableHead>\n    <TableRow>\n      <TableHeaderCell>Name</TableHeaderCell>\n      <TableHeaderCell>Role</TableHeaderCell>\n      <TableHeaderCell>Status</TableHeaderCell>\n    </TableRow>\n  </TableHead>\n  <TableBody>\n    <TableRow>\n      <TableCell>Ada Lovelace</TableCell>\n      <TableCell>Engineering</TableCell>\n      <TableCell><Badge color=\"success\">Active</Badge></TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>Grace Hopper</TableCell>\n      <TableCell>Design</TableCell>\n      <TableCell><Badge>Invited</Badge></TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"
    },
    {
      "id": "empty-state",
      "title": "Empty state with a next step",
      "prompt": "Show a friendly empty state when there are no projects yet.",
      "components": [
        "EmptyState"
      ],
      "code": "import { EmptyState } from \"@crossroads/ui\";\n\n<EmptyState\n  icon=\"folder\"\n  title=\"No projects yet\"\n  description=\"Create your first project to start collecting reports.\"\n  actions={[{ label: \"New project\", onClick: () => {}, variant: \"contained\" }]}\n/>"
    },
    {
      "id": "loading-placeholder",
      "title": "Loading placeholder",
      "prompt": "Show placeholder rows while the list is loading.",
      "components": [
        "Skeleton",
        "Stack"
      ],
      "code": "import { Skeleton, Stack } from \"@crossroads/ui\";\n\n<Stack.Root direction=\"column\" gap=\"3\">\n  <Skeleton blockSize=\"1.25rem\" inlineSize=\"40%\" shape=\"text\" />\n  <Skeleton blockSize=\"3rem\" shape=\"block\" />\n  <Skeleton blockSize=\"3rem\" shape=\"block\" />\n</Stack.Root>"
    },
    {
      "id": "save-confirmation",
      "title": "Save confirmation",
      "prompt": "Confirm to the user that their settings were saved, with an undo.",
      "components": [
        "Toast"
      ],
      "code": "import { Toast } from \"@crossroads/ui\";\n\n<Toast.Provider\n  defaultToasts={[{\n    id: \"settings-saved\",\n    title: \"Saved\",\n    description: \"Your notification settings were updated.\",\n    tone: \"success\",\n    action: { label: \"Undo\", onAction: () => {} }\n  }]}\n  labels={{ close: \"Dismiss notification\" }}\n  regionLabel=\"Notifications\"\n>\n  <main />\n</Toast.Provider>"
    }
  ]
}