@nebulit/embuilder 0.1.47 → 0.1.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nebulit/embuilder",
-  "version": "0.1.47",
+  "version": "0.1.48",
   "description": "Event-model driven development toolkit for Claude Code",
   "type": "module",
   "bin": {

package/templates/backend/AGENTS.md

@@ -104,20 +104,22 @@ import { ContextEvents } from '../../events/ContextEvents';
 - Use proper `initialState` function (not empty object `{}`) in `DeciderSpecification.for()`
 - Do NOT add explicit type arguments - let TypeScript infer (avoids TS2558)
 - Switch statements: always use explicit `break` to prevent fallthrough bugs
+- you must not change the signature of evolve - it has (state:State, event:Event)
+- you must not change the signature of decide - it has (state:State, command:Command)  - all data to verify the command must be passed via state.
 
 **Structure**:
 ```typescript
 type State = { /* track relevant state */ };
 const initialState = (): State => ({ /* defaults */ });
 const decide = (state: State, cmd: Command): Event[] => {
-  if (invalidCondition) throw 'error.code';
-  return [createEvent(cmd)];
+    if (invalidCondition) throw 'error.code';
+    return [createEvent(cmd)];
 };
 const evolve = (state: State, event: ContextEvents): State => {
-  switch (event.type) {
-    case 'EventType': return { ...state, field: newValue };
-    default: return state;
-  }
+    switch (event.type) {
+        case 'EventType': return { ...state, field: newValue };
+        default: return state;
+    }
 };
 ```
 
@@ -133,14 +135,14 @@ const evolve = (state: State, event: ContextEvents): State => {
 **Projection Structure**:
 ```typescript
 export const ProjectionName = postgreSQLRawSQLProjection({
-  canHandle: ['Event1', 'Event2'],
-  evolve: (event: Event1 | Event2) => {
-    switch (event.type) {
-      case 'Event1': return sql(db(table).insert({...}).onConflict().merge());
-      case 'Event2': return sql(db(table).where({...}).delete());
-      default: return [];
+    canHandle: ['Event1', 'Event2'],
+    evolve: (event: Event1 | Event2) => {
+        switch (event.type) {
+            case 'Event1': return sql(db(table).insert({...}).onConflict().merge());
+            case 'Event2': return sql(db(table).where({...}).delete());
+            default: return [];
+        }
     }
-  }
 });
 ```
 
@@ -158,22 +160,22 @@ import { createServiceClient } from '../../common/supabaseClient';
 const config = { schedule: '*/30 * * * * *', endpoint: "work_queue_table" };
 
 export const processor = {
-  start: () => {
-    cron.schedule(config.schedule, async () => {
-      const client = createServiceClient();
-      const result = await client.from(config.endpoint)
-        .select("*").eq('must_process', true).limit(1);
-
-      if (result.error) return;
-      for (const item of result.data ?? []) {
-        try {
-          await handleCommand(streamId, command, { userId: 'system', ...metadata });
-        } catch (error) {
-          console.error('Processing error:', error);
-        }
-      }
-    });
-  }
+    start: () => {
+        cron.schedule(config.schedule, async () => {
+            const client = createServiceClient();
+            const result = await client.from(config.endpoint)
+                .select("*").eq('must_process', true).limit(1);
+
+            if (result.error) return;
+            for (const item of result.data ?? []) {
+                try {
+                    await handleCommand(streamId, command, { userId: 'system', ...metadata });
+                } catch (error) {
+                    console.error('Processing error:', error);
+                }
+            }
+        });
+    }
 };
 ```
 
@@ -189,9 +191,9 @@ export const processor = {
 ```typescript
 type State = { isActive: boolean };
 const decide = (state: State, cmd: Command): Event[] => {
-  if (state.isActive) throw "already.active";  // Activate guard
-  if (!state.isActive) throw "not.active";     // Deactivate guard
-  return [event];
+    if (state.isActive) throw "already.active";  // Activate guard
+    if (!state.isActive) throw "not.active";     // Deactivate guard
+    return [event];
 };
 ```
 
@@ -201,13 +203,13 @@ const decide = (state: State, cmd: Command): Event[] => {
 ```typescript
 type State = { trackedIds: Set<string> };
 const evolve = (state: State, event: ContextEvents): State => {
-  switch (event.type) {
-    case 'ItemAdded': return { trackedIds: new Set([...state.trackedIds, event.data.id]) };
-    case 'ItemRemoved':
-      const newSet = new Set(state.trackedIds);
-      newSet.delete(event.data.id);
-      return { trackedIds: newSet };
-  }
+    switch (event.type) {
+        case 'ItemAdded': return { trackedIds: new Set([...state.trackedIds, event.data.id]) };
+        case 'ItemRemoved':
+            const newSet = new Set(state.trackedIds);
+            newSet.delete(event.data.id);
+            return { trackedIds: newSet };
+    }
 };
 ```
 
@@ -217,10 +219,10 @@ const evolve = (state: State, event: ContextEvents): State => {
 ```typescript
 type State = { submitted: boolean; reverted: boolean; approved: boolean; declined: boolean };
 const decide = (state: State, cmd: Command): Event[] => {
-  if (state.submitted) throw 'cannot submit twice';
-  if (!state.submitted) throw 'not_submitted';
-  if (state.reverted) throw 'already_reverted';
-  return [event];
+    if (state.submitted) throw 'cannot submit twice';
+    if (!state.submitted) throw 'not_submitted';
+    if (state.reverted) throw 'already_reverted';
+    return [event];
 };
 ```
 
@@ -275,27 +277,27 @@ All endpoints must:
 ### STATE_CHANGE Tests
 ```typescript
 DeciderSpecification.for(decide, evolve, initialState)
-  .given([PrerequisiteEvent1, PrerequisiteEvent2])
-  .when(Command({ field: 'value' }))
-  .then([ExpectedEvent({ field: 'value' })]);
+    .given([PrerequisiteEvent1, PrerequisiteEvent2])
+    .when(Command({ field: 'value' }))
+    .then([ExpectedEvent({ field: 'value' })]);
 ```
 
 ### STATE_VIEW Tests
 ```typescript
 PostgreSQLProjectionSpec.for(ProjectionName)
-  .given([Event1, Event2])
-  .when([])  // Always empty
-  .then(async (state) => {
-    const result = await state.query();
-    assert.equal(result[0].field, expectedValue);
-  });
+    .given([Event1, Event2])
+    .when([])  // Always empty
+    .then(async (state) => {
+        const result = await state.query();
+        assert.equal(result[0].field, expectedValue);
+    });
 ```
 
 ### Error Case Tests
 ```typescript
 .given([EventCreated])
-.when(Command)
-.shouldFail();  // Expects error
+    .when(Command)
+    .shouldFail();  // Expects error
 ```
 
 ### Test Coverage

package/templates/backend/prompt.md

@@ -1,140 +1,509 @@
-# Ralph Agent Instructions
+# Frontend Agent Prompt - UI Component Generation
 
-You are an autonomous coding agent working on the backend of a software project. You apply your skills to build software slices. You only work on one slice at a time.
-
-The structure defined in the Project-Skills is relevant.
+Build React + TypeScript UI components from slice JSON definitions using established patterns.
 
 ## Your Task
 
-0. Do not read the entire code base. Focus on the tasks in this description.
-1. Read the description at `.slices/index.json` (in the same directory as this file). Every item in status "planned"  and assigned to "backend_worker" is a task.
+0. Do not read the entire code base. read /frontend/AGENTS.md. Focus on the tasks in this description.
+1. Read the description at `.slices/index.json` (in the same directory as this file). Every item in status "planned"  and assigned to "ui_worker" is a task.
 2. Read the progress log at `progress.txt` (check Codebase Patterns section first)
-3. Make sure you are on the right branch "feature/<slicename>", if unsure, start from main.
-5. Pick the **highest priority** task assigned to backend_worker. This becomes your PRD. Set the status "InProgress", add a started_date ( including date and time ) in the index.json. If no slice has status planned, reply with:
+3. Make sure you are on the right branch "feature/<slicename>", the branch should exist.
+5. Pick the **highest priority** task assigned to ui_worker. This becomes your PRD. Set the status "InProgress", add a started_date ( including date and time ) in the index.json. If no slice has status planned, reply with:
    <promise>NO_TASKS</promise> and stop. Do not work on other slices.
 6. Pick the slice definition from the project root /.slices in <folder> defined in the prd. Never work on more than one slice per iteration.
-7. A slice can define additional prompts as codegen/backendPrompt. any additional prompts defined in backend are hints for the implementation of the slice and have to be taken into account. If you use the additional prompt, add a line in progress.txt
-7. Define the slice type. If the processors-array is not empty, it´s an automation slice. Load the matching skill (automation-slice, state-change-slice, state-view-slice)
+7. A slice can define additional prompts as codegen/uiPrompt. any additional prompts defined in backend are hints for the implementation of the slice and have to be taken into account. If you use the additional prompt, add a line in progress.txt
 8. Write a short progress one liner after each step to progress.txt
-9. Analyze and Implement that single slice, make use of the skills in the skills directory, but also your previsously collected
-   knowledge. Make a list TODO list for what needs to be done. Also make sure to adjust the implementation according to the json definition. Carefully inspect events, fields and compare against the implemented slice. JSON is the desired state. ATTENTION: A "planned" task can also be just added specifications. So always look at the slice itself, but also the specifications. If specifications were added in json, which are not on code, you need to add them in code.
+9. Analyze and Implement according to the Rest of the instructions in this file, make use of the skills in the skills directory, but also your previsously collected
+   knowledge. Make a list TODO list for what needs to be done. Also make sure to adjust the implementation according to the json definition.
 10. The slice in the json is always true, the code follows what is defined in the json
-11. the backend of a slice is only 'Done' if business logic is implemented as defined in the JSON, APIs are implemented, all scenarios in  JSON are implemented in code and it
-    fulfills the slice.json. There must be no specification in json, that has no equivalent in code.
-12. make sure to write the ui-prompt.md for the ui_worker as defined if defined in the skill
-13. Run quality checks ( npm run build, npm run test ) - Attention - it´s enough to run the tests for the slice. Do not run all tests.
-14. even if the slice is fully implemented, run your test-analyzer skill and provide the code-slice.json file as defined in the skill
-15. if the slice is an automation slice, set status to 'Done'. Otherwise - Update the Slice in the index.json back to status 'Planned' and assign the 'ui-worker'
-16. If checks pass, commit ALL changes with message: `feat: [Slice Name]`. 
-17. if the slice stauts is 'Done', merge back.
+11. the slice is only 'Done' if APIs are implemented.
+12. make sure to read the ui-prompt.md in /backend/src/slices/<slice>
+13. Place the component where it belongs. If you can´t find a place, add a new page with /debug/<page> to showcase the component.
+14. Run quality checks ( npm run build, tsc ) - Attention - it´s enough to run the tests for the slice. Do not run all tests.
+16. Update the Slice in the index.json to status 'Done' and remove assignment
 17. Append your progress to `progress.txt` after each step in the iteration.
-18. append your new learnings to AGENTS.md in a compressed form, reusable for future iterations. Only add learnings if they are not already there.
-19. change the assignee to ui_worker and set it back to planned.
+18. append your new learnings to frontend/AGENTS.md in a compressed form, reusable for future iterations. Only add learnings if they are not already there.
+19. If checks pass, commit ALL changes with message: `feat: [Slice Name]` and merge back to main as FF merge ( update
+    first ). The tash is only 'Done' if the branch is merged back.
 20. Finish the iteration.
 
-## Progress Report Format
+---
+
+## 0. Available Skills (Use These!)
+
+This project has custom skills available in `.claude/skills/` that automate common tasks:
+
+- **`/ui-build-slice-ui`**: Complete orchestrator - builds entire UI from slice definitions (types → API → hooks → components)
+- **`/ui-analyze-slices`**: Analyze slice JSON files to identify grouping, dependencies, and implementation strategy
+- **`/ui-read-ui-prompts`**: Find and parse UI prompts from slice definitions and `ui-prompt.md`
+- **`/ui-generate-types`**: Generate TypeScript interfaces from slice field definitions
+- **`/ui-generate-api`**: Generate API layer functions for queries (Supabase) and commands (POST)
+- **`/ui-generate-hook`**: Generate React Query hooks for STATE_VIEW (queries) and STATE_CHANGE (mutations)
+- **`/ui-scaffold-component`**: Scaffold React components (List, Dialog, Page) using Bulma CSS
+
+**IMPORTANT**: When asked to build UI from slices, USE the `/ui-build-slice-ui` skill first! It will orchestrate all other skills in the correct order. Only use individual skills when you need to regenerate or modify a specific part.
+
+---
+
+## 1. Slice Composition (CRITICAL)
+
+### Slice Types
+
+- **STATE_VIEW**: One read model table → Query hook → List component
+- **STATE_CHANGE**: One command/POST endpoint → Mutation hook → Form/Dialog
+
+### Grouping Rule
+
+**Slices with same `groupId` → Implement together as one component**
+
+```javascript
+// Multiple slices, same groupId → One component
+Slice A: { groupId: "123", sliceType: "STATE_VIEW", title: "Events View" }
+Slice B: { groupId: "123", sliceType: "STATE_CHANGE", title: "Create Event" }
+Slice C: { groupId: "123", sliceType: "STATE_CHANGE", title: "Cancel Event" }
+// → Combine into EventsPage component
+```
+
+### UI Prompts Priority
+
+1. Check `ui-prompt.md` (detailed specs) - Use `/ui-read-ui-prompts` skill
+2. Check `codeGen.uiPrompts` array (high-level guidance) - Use `/ui-read-ui-prompts` skill
+3. Follow this prompt (standard patterns)
+4. Keep it simple if no guidance
+
+---
+
+## 2. Authentication & API Context
+
+```typescript
+// AuthContext: user, session, restaurantId
+import { useAuth } from "@/contexts/AuthContext";
+const { user, session } = useAuth();
+
+// ApiContext: token, restaurantId, userId (auto-injected into headers)
+import { useApiContext } from "@/hooks/useApiContext";
+const ctx = useApiContext();
+```
+
+---
+
+## 3. Hooks Pattern
+
+### Query Hook (STATE_VIEW)
 
-APPEND to progress.txt (never replace, always append):
+```typescript
+// src/hooks/api/useEvents.ts
+import { useQuery } from "@tanstack/react-query";
+import * as api from "@/lib/api";
 
+export function useEvents() {
+    return useQuery({
+        queryKey: ["events"],
+        queryFn: () => api.fetchEvents(),
+    });
+}
+```
+
+### Mutation Hook (STATE_CHANGE)
+
+```typescript
+export function useCreateEvent() {
+    const ctx = useApiContext();
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: (params: api.CreateEventParams) => api.createEvent(params, ctx),
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ["events"] });
+        },
+    });
+}
 ```
-## [Date/Time] - [Slice]
 
-- What was implemented
-- Files changed
-- **Learnings for future iterations:**
-  - Patterns discovered (e.g., "this codebase uses X for Y")
-  - Gotchas encountered (e.g., "don't forget to update Z when changing W")
-  - Useful context (e.g., "the evaluation panel is in component X")
 ---
+
+## 4. API Layer (CQRS)
+
+### Query (Read from Supabase)
+
+```typescript
+// src/lib/api.ts
+export async function fetchEvents(): Promise<Event[]> {
+    const { data, error } = await supabase
+        .from("events_for_planning")  // Read model table
+        .select("*");
+    if (error) throw new Error(error.message);
+    return data || [];
+}
+```
+
+### Command (POST to Backend)
+
+```typescript
+export async function createEvent(params: CreateEventParams, ctx: ApiContext) {
+    const response = await apiRequest(
+        commandEndpoints.createEvent,  // /api/createevent
+        ctx,
+        { method: "POST", body: { ...params } }
+    );
+    if (!response.ok) throw new Error(response.error);
+    return response.data;
+}
+```
+
+**Add endpoint in `src/lib/api-client.ts`**:
+```typescript
+export const commandEndpoints = {
+    createEvent: "/api/createevent",
+    // ...
+};
 ```
 
-The learnings section is critical - it helps future iterations avoid repeating mistakes and understand the codebase
-better.
+---
+
+## 5. Component Patterns
+
+### List Component (STATE_VIEW)
+
+```typescript
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useEvents } from "@/hooks/api/useEvents";
+
+export function EventList() {
+    const { data: events = [], isLoading } = useEvents();
+
+    if (isLoading) {
+        return <Skeleton className="h-20 w-full" />;
+    }
+
+    return (
+        <div className="grid gap-4 md:grid-cols-2">
+            {events.map(event => (
+                    <Card key={event.id}>
+                        <CardHeader><CardTitle>{event.name}</CardTitle></CardHeader>
+            <CardContent>{event.date}</CardContent>
+            </Card>
+    ))}
+    </div>
+);
+}
+```
+
+### Dialog Component (STATE_CHANGE)
+
+```typescript
+import { useState } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { useCreateEvent } from "@/hooks/api/useEvents";
+import { toast } from "sonner";
+
+export function CreateEventDialog({ open, onOpenChange }) {
+    const createEvent = useCreateEvent();
+    const [form, setForm] = useState({ name: "", date: "" });
+
+    const handleSubmit = async () => {
+        if (!form.name) return toast.error("Name required");
+        try {
+            await createEvent.mutateAsync(form);
+            toast.success("Planned");
+            onOpenChange(false);
+        } catch (err) {
+            toast.error(`Error: ${err.message}`);
+        }
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent>
+            <DialogHeader><DialogTitle>Create Event</DialogTitle></DialogHeader>
+    <div className="space-y-4">
+        <div>
+            <Label>Name</Label>
+        <Input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
+    </div>
+    <Button onClick={handleSubmit} disabled={createEvent.isPending}>
+        Create
+        </Button>
+        </div>
+        </DialogContent>
+        </Dialog>
+);
+}
+```
+
+### Page Composition (Combine Slices)
+
+```typescript
+export function EventsPage() {
+    const [dialogOpen, setDialogOpen] = useState(false);
+
+    return (
+        <div className="p-6">
+        <div className="flex justify-between mb-6">
+        <h1 className="text-2xl font-bold">Events</h1>
+            <Button onClick={() => setDialogOpen(true)}>Create Event</Button>
+    </div>
+
+    <EventList />
+    <CreateEventDialog open={dialogOpen} onOpenChange={setDialogOpen} />
+    </div>
+);
+}
+```
+
+---
+
+## 6. Implementation Workflow
 
-## Consolidate Patterns
+### Recommended Approach: Use Skills!
 
-If you discover a **reusable pattern** that future iterations should know, add it to the `## Codebase Patterns` section
-at the TOP of progress.txt (create it if it doesn't exist). This section should consolidate the most important
-learnings:
+**For complete UI generation from slices:**
+```bash
+# Use the orchestrator skill - it handles everything
+/ui-build-slice-ui <slice-file-paths>
+```
 
+This will automatically:
+1. Analyze slices (`/ui-analyze-slices`)
+2. Read UI prompts (`/ui-read-ui-prompts`)
+3. Generate types (`/ui-generate-types`)
+4. Generate API functions (`/ui-generate-api`)
+5. Generate hooks (`/ui-generate-hook`)
+6. Scaffold components (`/ui-scaffold-component`)
+7. Verify integration
+
+**For individual tasks:**
+- **Analyze before coding**: `/ui-analyze-slices <slice-files>` - Understand grouping and dependencies
+- **Read requirements**: `/ui-read-ui-prompts <slice-folder>` - Extract design specs and validation rules
+- **Generate types only**: `/ui-generate-types <slice-file>` - Create TypeScript interfaces
+- **Generate API only**: `/ui-generate-api <slice-file>` - Create Supabase queries or POST commands
+- **Generate hook only**: `/ui-generate-hook <slice-file>` - Create React Query hooks
+- **Generate component only**: `/ui-scaffold-component <slice-files>` - Create React components with Bulma CSS
+
+### Manual Workflow (If not using skills)
+
+### Step 0: Analyze Grouping
+- Find all slices with same `groupId`
+- Check `codeGen.uiPrompts` and `ui-prompt.md`
+- Plan to implement together
+
+### Step 1: Types
+```typescript
+// src/types/index.ts
+export interface Event {
+    event_id: string;
+    name: string;
+    date: string;
+}
+
+export interface CreateEventParams {
+    name: string;
+    date: string;
+}
 ```
-## Codebase Patterns
-- Example: Use `sql<number>` template for aggregations
-- Example: Always use `IF NOT EXISTS` for migrations
-- Example: Export types from actions.ts for UI components
+
+### Step 2: API Functions
+- Add endpoints to `src/lib/api-client.ts`
+- Implement queries (Supabase) in `src/lib/api.ts`
+- Implement commands (POST) in `src/lib/api.ts`
+
+### Step 3: Hooks
+- Create query/mutation hooks in `src/hooks/api/use<Entity>.ts`
+- Export in `src/hooks/api/index.ts`
+
+### Step 4: Components
+- Build list component (STATE_VIEW)
+- Build dialog/form components (STATE_CHANGE)
+- Compose into page component
+
+---
+
+## 7. Field Type Mapping
+
+| JSON Type | TypeScript | UI Component |
+|-----------|-----------|--------------|
+| `string` | `string` | `<Input type="text">` |
+| `number` | `number` | `<Input type="number">` |
+| `date` | `string` | `<Input type="date">` |
+| `time` | `string` | `<Input type="time">` |
+| `boolean` | `boolean` | `<Switch>` or `<Checkbox>` |
+
+---
+
+## 8. Common Patterns
+
+**Loading**: `if (isLoading) return <Skeleton />;`
+
+**Error Handling**:
+```typescript
+try {
+    await mutation.mutateAsync(params);
+    toast.success("Success");
+} catch (err) {
+    toast.error(`Error: ${err.message}`);
+}
 ```
 
-Only add patterns that are **general and reusable**, not story-specific details.
+**Form State**: `const [form, setForm] = useState({ field: "" });`
+
+**Invalidation**: `queryClient.invalidateQueries({ queryKey: ["entity"] });`
+
+---
+
+## 9. UI Components
+
+**NOTE**: The skills in `.claude/skills/` are configured to use **Bulma CSS** for styling. If you're using the skills (especially `/scaffold-component`), components will be generated with Bulma classes.
+
+### Bulma CSS (Used by Skills)
+
+When using skills, components use Bulma classes:
+- Layout: `container`, `section`, `columns`, `column`
+- Components: `card`, `modal`, `button`, `notification`, `box`
+- Forms: `field`, `control`, `label`, `input`, `select`, `textarea`
+- Modifiers: `is-primary`, `is-active`, `is-fullwidth`, `has-text-centered`
+
+### shadcn/ui (Alternative)
+
+If manually implementing (not using skills), you can use shadcn/ui components:
+
+Import from `@/components/ui/*`:
+- `Button`, `Input`, `Label`, `Textarea`, `Select`
+- `Card`, `CardHeader`, `CardTitle`, `CardContent`
+- `Dialog`, `DialogContent`, `DialogHeader`, `DialogTitle`
+- `Table`, `Tabs`, `Skeleton`
+- `toast` from `sonner`
+
+**Recommendation**: Use the skills with Bulma CSS for consistency with project configuration.
 
-## Update AGENTS.md Files
+---
 
-Before committing, check if any edited files have learnings worth preserving in nearby AGENTS.md files:
+## Checklist
 
-1. **Identify directories with edited files** - Look at which directories you modified
-3. **Add valuable learnings that apply to all tasks** to the Agents.md - If you discovered something future developers/agents should know:
-    - API patterns or conventions specific to that module
-    - Gotchas or non-obvious requirements
-    - Dependencies between files
-    - Testing approaches for that area
-    - Configuration or environment requirements
+**Pre-Implementation**:
+- [ ] Check `groupId` - find all related slices
+- [ ] Read `ui-prompt.md` and `codeGen.uiPrompts`
+- [ ] Identify STATE_VIEW vs STATE_CHANGE slices
 
-**Examples of good AGENTS.md additions:**
+**Implementation**:
+- [ ] Define types in `src/types/index.ts`
+- [ ] Add endpoints to `src/lib/api-client.ts`
+- [ ] Implement API functions in `src/lib/api.ts`
+- [ ] Create hooks in `src/hooks/api/use<Entity>.ts`
+- [ ] Build components in `src/components/<domain>/`
+- [ ] Compose page combining all grouped slices
+- [ ] Test loading, error handling, success flows
 
-- "When modifying X, also update Y to keep them in sync"
-- "This module uses pattern Z for all API calls"
-- "Tests require the dev server running on PORT 3000"
-- "Field names must match the template exactly"
+---
 
-**Do NOT add:**
+## Quick Reference
 
-- Slice specific implementation details
-- Story-specific implementation details
-- Temporary debugging notes
-- Information already in progress.txt
-- Task speecific learnings like "- Timesheet approval requires: submitted=true, reverted=false, approved=false, declined=false"
+✅ **Same `groupId`** = Implement together
+✅ **STATE_VIEW** = Read table → Query hook → List
+✅ **STATE_CHANGE** = Command → Mutation hook → Form/Dialog
+✅ **Keep modular** = Sub-components for each slice capability
+✅ **Keep simple** = Follow existing patterns, don't over-engineer
 
-Only update AGENTS.md if you have **genuinely reusable knowledge** that would help future work
+---
 
-## Quality Requirements
+## 10. Skills Usage Examples
 
-- ALL commits must pass your project's quality checks (typecheck, lint, test)
-- run 'npm run build'
-- run 'npm run test'
-- Do NOT commit broken code
-- Keep changes focused and minimal
-- Follow existing code patterns
+### Example 1: Building Complete UI from Scratch
 
-## Skills
+**User Request**: "Build the UI for the events management slices"
 
-Use the provided skills in the skills folder as guidance.
-Update skill definitions if you find an improvement you can make.
+**Your Response**:
+```bash
+# First, analyze what we're working with
+/ui-analyze-slices src/slices/events/*.json
 
-## Specifications
+# Then build everything at once
+/ui-build-slice-ui src/slices/events/ViewEvents.json src/slices/events/CreateEvent.json
+```
 
-For every specification added to the Slice, you need to implement one use executable Specification in Code.
+### Example 2: Just Need to Understand Slices
 
-A Slice is not complete if specifications are missing or can´t be executed.
+**User Request**: "What slices are in the orders group?"
 
-## Stop Condition
+**Your Response**:
+```bash
+# Use ui-analyze-slices to understand the grouping
+/ui-analyze-slices src/slices/orders/*.json
+```
+
+### Example 3: Regenerating Just Types
 
-After completing a user story, check if ALL slices have `status: Done`.
+**User Request**: "The Event interface is wrong, regenerate it from the slice"
 
-If ALL stories are complete and passing, reply with:
-<promise>COMPLETE</promise>
+**Your Response**:
+```bash
+# Use ui-generate-types to recreate just the TypeScript interfaces
+/ui-generate-types src/slices/events/ViewEvents.json
+```
 
-If there are no stories with `status: Planned` (but not all are Done), reply with:
-<promise>NO_TASKS</promise>
+### Example 4: Adding New API Endpoint
 
-If there are still stories with `status: Planned`, end your response normally (another iteration will pick up the next
-story).
+**User Request**: "Add the API function for the CancelEvent command"
+
+**Your Response**:
+```bash
+# Use ui-generate-api to create the API layer
+/ui-generate-api src/slices/events/CancelEvent.json
+```
+
+### Example 5: Understanding UI Requirements
+
+**User Request**: "What are the validation rules for the event form?"
+
+**Your Response**:
+```bash
+# Use ui-read-ui-prompts to extract requirements
+/ui-read-ui-prompts src/slices/events/
+```
 
-## Important
+### Example 6: Fixing Component Styling
 
-- Work on ONE slice per iteration
-- Commit frequently
-- update progress.txt frequently
-- Read the Codebase Patterns section in progress.txt before starting
+**User Request**: "The EventList component doesn't look right, regenerate it with proper Bulma styling"
+
+**Your Response**:
+```bash
+# Use ui-scaffold-component to regenerate with Bulma CSS
+/ui-scaffold-component src/slices/events/ViewEvents.json
+```
+
+### Decision Tree: Which Skill to Use?
+
+```
+Need to build complete UI from slices?
+  └─> /ui-build-slice-ui (orchestrates everything)
+
+Just exploring/understanding?
+  └─> /ui-analyze-slices (analysis only)
+
+Just need to understand UI requirements?
+  └─> /ui-read-ui-prompts (extract specs)
+
+Need to fix/regenerate specific layer?
+  ├─> Types wrong? → /ui-generate-types
+  ├─> API functions wrong? → /ui-generate-api
+  ├─> Hooks wrong? → /ui-generate-hook
+  └─> Components wrong? → /ui-scaffold-component
+
+Don't know which skill to use?
+  └─> Start with /ui-analyze-slices, then use /ui-build-slice-ui
+```
+
+---
 
-## When an iteration completes
+## Remember
 
-Use all the key learnings from the project.txt and update the Agends.md file with those learning.
+**ALWAYS** prefer using the skills over manual implementation! They ensure:
+- Consistency across the codebase
+- Proper use of Bulma CSS
+- Correct CQRS patterns
+- Proper TypeScript types
+- React Query best practices
+- Adherence to UI prompts and validation rules

package/templates/frontend/prompt.md

@@ -4,6 +4,8 @@ Build React + TypeScript UI components from slice JSON definitions using establi
 
 ## Your Task
 
+If a slice is in status 'planned', Even if a slice seems to have been implemented, make sure to verify the implementation, check for new fields, additional custom prompts in the slice json. A "planned" slice can also be an update of an existing slice. If that is the case, match the implemenetation to the updated slice definition.
+
 0. Do not read the entire code base. read /frontend/AGENTS.md. Focus on the tasks in this description.
 1. Read the description at `.slices/index.json` (in the same directory as this file). Every item in status "planned"  and assigned to "ui_worker" is a task.
 2. Read the progress log at `progress.txt` (check Codebase Patterns section first)
@@ -18,8 +20,8 @@ Build React + TypeScript UI components from slice JSON definitions using establi
 10. The slice in the json is always true, the code follows what is defined in the json
 11. the slice is only 'Done' if APIs are implemented.
 12. make sure to read the ui-prompt.md in /backend/src/slices/<slice>
-13. Place the component where it belongs. If you can´t find a place, add a new page with /debug/<page> to showcase the component.
-14. Run quality checks ( npm run build, tsc ) - Attention - it´s enough to run the tests for the slice. Do not run all tests.
+13. If a custom uiPrompt in the slice.json defines where  the  component should be mounted, this always has to be done. If no mount point is defined in uiPrompt, verify if there is natural place where to mount a component. If there is no natural place, create a new page,  name it after the componenet and define a Route in App.tsx
+14. Run quality checks ( npm run build, tsc ) - Attention - the slice is only done if the component is placed somewhere.
 16. Update the Slice in the index.json to status 'Done' and remove assignment
 17. If checks pass, commit ALL changes with message: `feat: [Slice Name]` and merge back to main as FF merge ( update
     first )
@@ -42,6 +44,7 @@ This project has custom skills available in `.claude/skills/` that automate comm
 - **`/ui-scaffold-component`**: Scaffold React components (List, Dialog, Page) using Bulma CSS
 
 **IMPORTANT**: When asked to build UI from slices, USE the `/ui-build-slice-ui` skill first! It will orchestrate all other skills in the correct order. Only use individual skills when you need to regenerate or modify a specific part.
+**IMPORTANT**: Unless stated in a custom prompt, components read directly from the tables provided, not from api-endpoints via HTTP
 
 ---
 

package/templates/prompt.md

@@ -9,4 +9,5 @@ You assign tasks to workers. Only one task can be assigned and in status planned
 2. if the slice is in status planned and not assigned, assign it to backend_worker (property "assigned" ) and continue with backend/prompt.md. Ignore the rest of this file.
 3. if the status is in status "InProgress" and assigned to backend_worker, updated started_time and continue with backend/prompt.md. Ignore the rest of this file.
 4. if the status is "done" and assigned to "backend_worker", assign the task to "ui_worker" and move it back to status "planned". continue with frontend/prompt.md. Ignore the rest of this file.
-4. if there is no task in status planned, return <promise>NO_TASKS</promise>
+5. if there is no task in status planned, return <promise>NO_TASKS</promise>
+6. If one task is done. Finish your work, do not continue with the next slice.