@nebulit/embuilder 0.1.40 → 0.1.41

package/package.json

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

package/templates/.claude/skills/sample-slices/templates/.slices/index.json

@@ -6,7 +6,7 @@
       "index": 1,
       "context": "Library",
       "folder": "addbook",
-      "status": "Done"
+      "status": "Planned"
     },
     {
       "id": "3458764661595862502",

package/templates/.claude/skills/ui-analyze-slices/SKILL.md

@@ -0,0 +1,102 @@
+---
+skill_name: ui-analyze-slices
+description: Analyze slice JSON files to identify grouping, dependencies, and implementation strategy
+version: 1.0.0
+author: Frontend Development Team
+tags: [ui, analysis, slices, planning, cqrs]
+---
+
+# Slice Analyzer Skill
+
+Analyze slice JSON files to identify grouping, dependencies, and implementation strategy.
+
+## Instructions
+
+You will be provided with one or more slice JSON file paths. Your task is to:
+
+1. **Read all slice JSON files** provided
+2. **Analyze and extract**:
+   - Slice names and types (STATE_VIEW, STATE_CHANGE)
+   - Group IDs (`groupId` field)
+   - Entity names derived from slice names
+   - Read model table names (for STATE_VIEW slices)
+   - Command endpoints (for STATE_CHANGE slices)
+   - UI prompts from `codeGen.uiPrompts` array
+   - Field definitions for each slice
+
+3. **Group slices** by their `groupId`
+
+4. **Identify UI prompt locations**:
+   - Check for `ui-prompt.md` in the slice folder in /backend/src/slices. Those files have been provided by the backend engineers.
+   - Extract prompts from `codeGen.uiPrompts` if present from the slice.json
+
+5. **Recommend implementation strategy**:
+   - Which hooks to create (query hooks for STATE_VIEW, mutation hooks for STATE_CHANGE)
+   - Which components to scaffold (List, Dialog, Page)
+   - How to combine slices in the same group
+
+## Output Format
+
+Provide a structured analysis in the following format:
+
+```
+# Slice Analysis Results
+
+## Groups Found
+
+### Group: "{groupId}" ({count} slices)
+
+**Slices:**
+1. **{sliceName}** (TYPE: {STATE_VIEW|STATE_CHANGE})
+   - Entity: {entityName}
+   - Table/Endpoint: {tableName or commandEndpoint}
+   - Fields: {list of field names}
+   - Recommended Hook: {hookName}()
+
+2. **{sliceName}** ...
+
+**UI Prompts:**
+- codeGen.uiPrompts:
+  - "{prompt1}"
+  - "{prompt2}"
+- ui-prompt.md: {Found/Not Found} at {path}
+
+**Implementation Recommendations:**
+- Create hooks: {list of hook names}
+- Create components: {list of component names}
+- Page composition: {description of how to combine}
+
+---
+
+## Ungrouped Slices
+
+(List any slices without a groupId)
+
+---
+
+## Summary
+
+Total Slices: {count}
+Groups: {count}
+STATE_VIEW slices: {count}
+STATE_CHANGE slices: {count}
+```
+
+## Example Usage
+
+User provides: `src/slices/events/CreateEvent.json`, `src/slices/events/ViewEvents.json`
+
+You should:
+1. Read both JSON files
+2. Identify they belong to the same group (e.g., "event-management")
+3. Determine ViewEvents is STATE_VIEW, CreateEvent is STATE_CHANGE
+4. Check for ui-prompt.md in `src/slices/events/`
+5. Recommend creating `useEvents()` query hook and `useCreateEvent()` mutation hook
+6. Suggest creating EventList component, CreateEventDialog, and EventsPage
+
+## Notes
+
+- Always read the actual JSON files before analyzing
+- Look for common patterns in slice naming to infer entity names
+- Consider whether slices in the same group should be on the same page or separate pages
+- Identify any dependencies between slices (e.g., a create action should refresh a list view)

package/templates/.claude/skills/ui-build-slice-ui/SKILL.md

@@ -0,0 +1,228 @@
+---
+skill_name: ui-build-slice-ui
+description: Orchestrate the complete process of building a UI from slice definitions by coordinating all other frontend skills
+version: 1.0.0
+author: Frontend Development Team
+tags: [ui, orchestrator, slices, automation, full-stack]
+---
+
+# Full Slice Builder Skill (Orchestrator)
+
+Orchestrate the complete process of building a UI from slice definitions by coordinating all other frontend skills.
+
+## Instructions
+
+You will be provided with:
+- Group ID or slice JSON file paths
+- Domain/entity name (optional, can be inferred)
+
+Your task is to execute the full workflow to generate a complete, working UI implementation:
+
+## Workflow Steps
+
+### 1. Analyze Slices
+Use the **ui-analyze-slices** skill to:
+- Identify all slices in the group
+- Determine slice types (STATE_VIEW, STATE_CHANGE)
+- Find grouping and dependencies
+- Create implementation plan
+
+### 2. Read UI Prompts
+Use the **ui-read-ui-prompts** skill to:
+- Extract UI requirements from `ui-prompt.md`
+- Parse `codeGen.uiPrompts`
+- Understand design, validation, and UX flow requirements
+
+### 3. Generate Types
+Use the **ui-generate-types** skill to:
+- Create TypeScript interfaces for entities
+- Create parameter interfaces for commands
+- Add types to `src/types/index.ts`
+
+### 4. Generate API Functions
+Use the **ui-generate-api** skill to:
+- Create Supabase query functions for STATE_VIEW slices
+- Create command POST functions for STATE_CHANGE slices
+- Add functions to `src/lib/api.ts`
+- Update `src/lib/api-client.ts` with command endpoints
+
+### 5. Generate Hooks
+Use the **ui-generate-hook** skill to:
+- Create query hooks for STATE_VIEW slices
+- Create mutation hooks for STATE_CHANGE slices
+- Add hooks to `src/hooks/api/`
+- Update `src/hooks/api/index.ts` with exports
+
+### 6. Scaffold Components
+Use the **ui-scaffold-component** skill to:
+- Create list components for STATE_VIEW slices
+- Create dialog components for STATE_CHANGE slices
+- Create page component to compose list and dialogs
+- Add components to `src/components/{domain}/`
+- Apply UI prompt requirements (Bulma CSS, validation, formatting)
+
+### 7. Verify Integration
+- Check that all imports are correct
+- Verify types are properly exported and imported
+- Ensure hooks are properly exported
+- Confirm components import hooks and types correctly
+
+## Execution Order
+
+```
+1. ui-analyze-slices
+   ↓
+2. ui-read-ui-prompts
+   ↓
+3. ui-generate-types
+   ↓
+4. ui-generate-api
+   ↓
+5. ui-generate-hook
+   ↓
+6. ui-scaffold-component
+   ↓
+7. Integration verification
+```
+
+## Output Format
+
+Provide a comprehensive summary:
+
+```
+# Slice UI Build Complete
+
+## Group: {groupId}
+Domain: {domain}
+
+## Summary
+
+✓ Analyzed {count} slices
+✓ Generated types for {entities}
+✓ Created {count} API functions
+✓ Created {count} hooks
+✓ Scaffolded {count} components
+
+## Files Created/Modified
+
+### Types (src/types/index.ts)
+- {Entity} interface
+- {Action}{Entity}Params interface
+
+### API Functions (src/lib/api.ts)
+- fetch{Entity}()
+- {action}{Entity}()
+
+### API Client (src/lib/api-client.ts)
+- {COMMAND_ENDPOINT} added
+
+### Hooks (src/hooks/api/)
+- use{Entity}.ts
+- use{Action}{Entity}.ts
+- Updated index.ts with exports
+
+### Components (src/components/{domain}/)
+- {Entity}List.tsx
+- {Action}{Entity}Dialog.tsx
+- {Entity}Page.tsx
+
+## Next Steps
+
+1. Add route to router configuration:
+   ```typescript
+   import { {Entity}Page } from '@/components/{domain}/{Entity}Page';
+
+   // In routes:
+   { path: '/{entities}', element: <{Entity}Page /> }
+   ```
+
+2. Test the implementation:
+   ```bash
+   npm run dev
+   ```
+
+3. Navigate to `/{entities}` to see the UI
+
+## Implementation Notes
+
+- {any special notes from UI prompts}
+- {any validation rules applied}
+- {any custom formatting implemented}
+```
+
+## Error Handling
+
+If any step fails:
+1. Report which step failed
+2. Provide the error details
+3. Suggest fixes or next steps
+4. Do not proceed to dependent steps
+
+## Validation Checklist
+
+Before completing, verify:
+
+- [ ] All TypeScript types are properly defined
+- [ ] API functions handle errors appropriately
+- [ ] Hooks are properly exported from index.ts
+- [ ] Components import all necessary dependencies
+- [ ] Bulma CSS classes are used correctly
+- [ ] Form validation matches UI prompt requirements
+- [ ] Date/time formatting matches specifications
+- [ ] Loading and error states are handled
+- [ ] Success/error feedback is implemented
+- [ ] Responsive design is applied (Bulma columns)
+- [ ] All files follow project conventions
+
+## Integration with Existing Code
+
+When modifying existing files:
+
+1. **src/types/index.ts**:
+   - Add new interfaces at the end
+   - Maintain alphabetical ordering if followed
+   - Check for duplicate type names
+
+2. **src/lib/api.ts**:
+   - Add functions in relevant sections (queries/commands)
+   - Follow existing error handling patterns
+   - Import necessary types
+
+3. **src/lib/api-client.ts**:
+   - Add command endpoints to the `commandEndpoints` object
+   - Follow existing naming convention (UPPER_SNAKE_CASE)
+
+4. **src/hooks/api/index.ts**:
+   - Add exports in alphabetical order if followed
+   - Use named exports consistently
+
+## Best Practices
+
+- Generate minimal, focused code (avoid over-engineering)
+- Follow existing project patterns and conventions
+- Use Bulma CSS exclusively (no custom CSS unless necessary)
+- Include JSDoc comments for public APIs
+- Handle edge cases (empty lists, errors, loading)
+- Implement proper TypeScript types (no `any`)
+- Follow React best practices (hooks rules, controlled components)
+- Ensure accessibility (semantic HTML, ARIA when needed)
+
+## Example Usage
+
+```bash
+# Build UI for all slices in the events group
+/build-slice-ui --group "event-management-group"
+
+# Build UI from specific slice files
+/build-slice-ui src/slices/events/ViewEvents.json src/slices/events/CreateEvent.json
+```
+
+## Notes
+
+- This skill orchestrates all other skills in sequence
+- Each step depends on the previous step's output
+- If UI prompts provide specific requirements, prioritize them over defaults
+- Always use Bulma CSS components and utilities
+- Generate clean, maintainable, production-ready code
+- Follow TypeScript strict mode requirements
+- Test the generated code before marking as complete

package/templates/.claude/skills/ui-generate-api/SKILL.md

@@ -0,0 +1,141 @@
+---
+skill_name: ui-generate-api
+description: Generate API layer functions for queries (Supabase reads) and commands (POST requests)
+version: 1.0.0
+author: Frontend Development Team
+tags: [ui, api, supabase, cqrs, commands, queries]
+---
+
+# API Function Generator Skill
+
+Generate API layer functions for queries (Supabase reads) and commands (POST requests).
+
+## Instructions
+
+You will be provided with:
+- Slice JSON file path
+- Slice type (STATE_VIEW or STATE_CHANGE)
+
+Your task is to:
+
+1. **Read the slice JSON file** to understand:
+   - Fields and their types
+   - Read model table name (for STATE_VIEW)
+   - Command endpoint (for STATE_CHANGE)
+   - Field mappings between frontend and backend
+
+2. **Generate API functions**:
+   - For STATE_VIEW: Create Supabase query function in `src/lib/api.ts`
+   - For STATE_CHANGE: Create POST command function in `src/lib/api.ts`
+
+3. **Update API client configuration** in `src/lib/api-client.ts`:
+   - Add command endpoint to `commandEndpoints` object (for STATE_CHANGE only)
+
+4. **Generate TypeScript interfaces** for parameters and return types
+
+## API Function Patterns
+
+### For STATE_VIEW (Supabase Query)
+
+```typescript
+/**
+ * Fetch {entity} from read model
+ */
+export async function fetch{Entity}(): Promise<{Entity}[]> {
+  const { data, error } = await supabase
+    .from('{table_name}')
+    .select('*')
+    .order('created_at', { ascending: false });
+
+  if (error) {
+    throw new Error(`Failed to fetch {entity}: ${error.message}`);
+  }
+
+  return data || [];
+}
+```
+
+### For STATE_CHANGE (Command POST)
+
+```typescript
+/**
+ * {Action description}
+ */
+export async function {actionCamelCase}{Entity}(
+  params: {Action}{Entity}Params
+): Promise<void> {
+  const response = await apiClient.post(
+    commandEndpoints.{ACTION_ENTITY},
+    params
+  );
+
+  if (!response.ok) {
+    throw new Error(`Failed to {action} {entity}`);
+  }
+}
+```
+
+## Command Endpoint Entry
+
+For STATE_CHANGE slices, add to `src/lib/api-client.ts`:
+
+```typescript
+export const commandEndpoints = {
+  // ... existing endpoints
+  {ACTION_ENTITY}: '{commandEndpoint}',
+} as const;
+```
+
+## Output Format
+
+Provide:
+
+1. **API function** to add to `src/lib/api.ts`
+2. **Command endpoint** to add to `src/lib/api-client.ts` (if STATE_CHANGE)
+3. **Type interface** for parameters (if STATE_CHANGE)
+
+Example:
+
+```
+# API Functions Generated
+
+## Add to src/lib/api.ts
+
+[Function code here]
+
+## Add to src/lib/api-client.ts (commandEndpoints)
+
+CREATE_EVENT: '/api/events/create',
+
+## Type Interface (add to src/types/index.ts if not exists)
+
+export interface CreateEventParams {
+  name: string;
+  date: string;
+  startTime: string;
+  endTime: string;
+  persons: number;
+}
+```
+
+## Field Mapping
+
+When generating command functions:
+- Map frontend field names to backend field names based on slice definition
+- Handle camelCase ↔ snake_case conversions
+- Include only fields marked as command parameters in the slice JSON
+
+## Error Handling
+
+- All functions should throw descriptive errors
+- Include the operation context in error messages
+- For Supabase queries, check the `error` object
+- For command POSTs, check response status
+
+## Notes
+
+- Check if the function already exists before adding
+- Ensure TypeScript types are properly imported
+- For queries, use appropriate Supabase filters if specified in slice
+- For commands, ensure all required fields are included
+- Follow existing code patterns in the project

package/templates/.claude/skills/ui-generate-hook/SKILL.md

@@ -0,0 +1,118 @@
+---
+skill_name: ui-generate-hook
+description: Generate React Query hooks from slice definitions for STATE_VIEW (queries) and STATE_CHANGE (mutations)
+version: 1.0.0
+author: Frontend Development Team
+tags: [ui, react-query, hooks, queries, mutations]
+---
+
+# Hook Generator Skill
+
+Generate React Query hooks from slice definitions for STATE_VIEW (queries) and STATE_CHANGE (mutations).
+
+## Instructions
+
+You will be provided with:
+- Slice JSON file path
+- Slice type (STATE_VIEW or STATE_CHANGE)
+- Entity name
+
+Your task is to:
+
+1. **Read the slice JSON file** to understand:
+   - Fields and their types
+   - Read model table name (for STATE_VIEW)
+   - Command endpoint (for STATE_CHANGE)
+   - Required vs optional fields
+
+2. **Generate the appropriate hook file** in `src/hooks/api/`:
+   - For STATE_VIEW: Create `use{Entity}.ts` with a query hook
+   - For STATE_CHANGE: Create `use{Action}{Entity}.ts` with a mutation hook
+
+3. **Follow React Query patterns**:
+   - STATE_VIEW hooks use `useQuery`
+   - STATE_CHANGE hooks use `useMutation`
+   - Include proper TypeScript types
+   - Add JSDoc comments
+
+4. **Generate hook exports** for `src/hooks/api/index.ts`
+
+## Hook Structure
+
+### For STATE_VIEW (Query Hook)
+
+```typescript
+import { useQuery } from '@tanstack/react-query';
+import { fetch{Entity} } from '@/lib/api';
+import type { {Entity} } from '@/types';
+
+/**
+ * Hook to fetch {entity} data
+ */
+export function use{Entity}() {
+  return useQuery<{Entity}[]>({
+    queryKey: ['{entity}'],
+    queryFn: fetch{Entity},
+  });
+}
+```
+
+### For STATE_CHANGE (Mutation Hook)
+
+```typescript
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { {actionCamelCase}{Entity} } from '@/lib/api';
+import type { {Action}{Entity}Params } from '@/types';
+
+/**
+ * Hook to {action description} {entity}
+ */
+export function use{Action}{Entity}() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({actionCamelCase}{Entity}),
+    onSuccess: () => {
+      // Invalidate and refetch related queries
+      queryClient.invalidateQueries({ queryKey: ['{relatedEntity}'] });
+    },
+  });
+}
+```
+
+## Output Format
+
+Provide:
+
+1. **Hook file path and content**
+2. **Export statement** to add to `src/hooks/api/index.ts`
+3. **API function signature** that needs to be created in `src/lib/api.ts`
+
+Example:
+
+```
+# Hook Generated
+
+## File: src/hooks/api/useEvents.ts
+
+[Hook content here]
+
+## Export for src/hooks/api/index.ts
+
+export { useEvents } from './useEvents';
+
+## Required API Function in src/lib/api.ts
+
+export async function fetchEvents(): Promise<Event[]> {
+  // Implementation needed
+}
+```
+
+## Notes
+
+- Always check if the hook file already exists before creating
+- For mutations, determine which queries should be invalidated based on the entity and action
+- Use proper naming conventions: `useEntityName` for queries, `useActionEntity` for mutations
+- Include error handling patterns
+- For create/update actions, typically invalidate the list query
+- For delete actions, invalidate both list and detail queries if applicable