@nebulit/embuilder 0.1.49 → 0.1.51

package/package.json

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

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

@@ -59,7 +59,7 @@ Use the **ui-scaffold-component** skill to:
 - 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)
+- Apply UI prompt requirements (tailwind CSS, validation, formatting)
 
 ### 7. Verify Integration
 - Check that all imports are correct
@@ -166,12 +166,12 @@ Before completing, verify:
 - [ ] API functions handle errors appropriately
 - [ ] Hooks are properly exported from index.ts
 - [ ] Components import all necessary dependencies
-- [ ] Bulma CSS classes are used correctly
+- [ ] tailwind 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)
+- [ ] Responsive design is applied (tailwind columns)
 - [ ] All files follow project conventions
 
 ## Integration with Existing Code
@@ -200,7 +200,7 @@ When modifying existing files:
 
 - Generate minimal, focused code (avoid over-engineering)
 - Follow existing project patterns and conventions
-- Use Bulma CSS exclusively (no custom CSS unless necessary)
+- Use tailwind 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`)
@@ -222,7 +222,7 @@ When modifying existing files:
 - 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
+- Always use tailwind 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-read-ui-prompts/SKILL.md

@@ -153,7 +153,7 @@ Your output would be:
 - Layout: Card layout for event list with 3-column grid (desktop) / 1-column (mobile)
 - Date Format: DD.MM.YYYY
 - Time Format: 24-hour format (HH:mm)
-- Component: Use Bulma cards and columns
+- Component: Use tailwind cards and columns
 
 #### Validation Rules:
 | Field | Rule | Message |
@@ -174,7 +174,7 @@ Your output would be:
 
 ### Implementation Guidance:
 
-1. Use Bulma modal with `is-active` class for dialog
+1. Use tailwind modal with `is-active` class for dialog
 2. Implement date formatting with `toLocaleDateString('de-DE')`
 3. Add form validation before submit
 4. Use `useMutation` onSuccess callback for toast and list refresh

package/templates/.claude/skills/ui-scaffold-component/SKILL.md

@@ -1,14 +1,14 @@
 ---
 skill_name: ui-scaffold-component
-description: Scaffold React components (List, Dialog, Page) from slice definitions using Bulma CSS
+description: Scaffold React components (List, Dialog, Page) from slice definitions using tailwind CSS
 version: 1.0.0
 author: Frontend Development Team
-tags: [ui, components, react, bulma, scaffolding]
+tags: [ui, components, react, tailwind, scaffolding]
 ---
 
 # Component Scaffolder Skill
 
-Scaffold React components (List, Dialog, Page) from slice definitions using Bulma CSS.
+Scaffold React components (List, Dialog, Page) from slice definitions using tailwind CSS.
 
 ## Instructions
 
@@ -30,7 +30,7 @@ Your task is to:
    - **Dialog Component**: For STATE_CHANGE slices (forms for create/update)
    - **Page Component**: Combines list and dialogs into a complete page
 
-3. **Use Bulma CSS exclusively** for all styling:
+3. **Use tailwind CSS exclusively** for all styling:
    - Layout: `columns`, `column`, `container`, `section`
    - Components: `card`, `button`, `modal`, `box`, `table`
    - Form elements: `field`, `control`, `label`, `input`, `select`, `textarea`
@@ -252,7 +252,7 @@ import { EventsPage } from '@/components/events/EventsPage';
 { path: '/events', element: <EventsPage /> }
 ```
 
-## Bulma CSS Guidelines
+## tailwind CSS Guidelines
 
 - Use `columns` and `column` for responsive grid layouts
 - Use `card` for displaying entity items

package/templates/Claude.md

@@ -4,13 +4,13 @@ Read Events in src/events to understand the global structure.
 
 ## Framework & Styling
 
-- **CSS Framework**: Use Bulma CSS exclusively for all styling
-- **Assumption**: Bulma CSS is already available and imported in the project
+- **CSS Framework**: Use Tailwind CSS exclusively for all styling
+- **Assumption**: Tailwind CSS is already available and imported in the project
 - **Styling Guidelines**:
-    - Use Bulma's utility classes and components
-    - Follow Bulma's naming conventions and class structure
-    - Leverage Bulma's responsive design features
-    - Prefer Bulma components over custom CSS
+    - Use tailwind's utility classes and components
+    - Follow Tailwind's naming conventions and class structure
+    - Leverage Tailwind's responsive design features
+    - Prefer Tailwind components over custom CSS
 
 ## File Structure Constraints
 
@@ -26,7 +26,7 @@ Read Events in src/events to understand the global structure.
 ## Development Guidelines
 
 1. Each slice should be self-contained and focused on a specific domain
-2. Use Bulma's grid system, components, and utilities for all UI-related code
+2. Use tailwind's grid system, components, and utilities for all UI-related code
 3. Maintain clear separation of concerns within each slice
 4. Follow TypeScript best practices for type definitions and interfaces
 
@@ -49,10 +49,10 @@ src/slices/
 │   └── routes.ts
 ```
 
-## Bulma Integration Notes
+## tailwind Integration Notes
 
-- Utilize Bulma's component library: navbar, cards, buttons, forms, modals, etc.
-- Apply Bulma's spacing utilities: `m-*`, `p-*`, `has-text-*`, `has-background-*`
-- Use Bulma's flexbox utilities for layouts
-- Implement responsive design with Bulma's breakpoint classes
-- Leverage Bulma's color palette and typography classes
+- Utilize tailwind's component library: navbar, cards, buttons, forms, modals, etc.
+- Apply tailwind's spacing utilities: `m-*`, `p-*`, `has-text-*`, `has-background-*`
+- Use tailwind's flexbox utilities for layouts
+- Implement responsive design with tailwind's breakpoint classes
+- Leverage tailwind's color palette and typography classes

package/templates/frontend/prompt.md

@@ -41,7 +41,7 @@ This project has custom skills available in `.claude/skills/` that automate comm
 - **`/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
+- **`/ui-scaffold-component`**: Scaffold React components (List, Dialog, Page) using Tailwind 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
@@ -285,7 +285,7 @@ This will automatically:
 - **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
+- **Generate component only**: `/ui-scaffold-component <slice-files>` - Create React components with Tailwind CSS
 
 ### Manual Workflow (If not using skills)
 
@@ -359,15 +359,7 @@ try {
 
 ## 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`
+**NOTE**: The skills in `.claude/skills/` are configured to use **Tailwind CSS** for styling. If you're using the skills (especially `/scaffold-component`), components will be generated with Tailwind classes.
 
 ### shadcn/ui (Alternative)
 
@@ -380,7 +372,7 @@ Import from `@/components/ui/*`:
 - `Table`, `Tabs`, `Skeleton`
 - `toast` from `sonner`
 
-**Recommendation**: Use the skills with Bulma CSS for consistency with project configuration.
+**Recommendation**: Use the skills with Tailwind CSS for consistency with project configuration.
 
 ---
 
@@ -469,11 +461,11 @@ Import from `@/components/ui/*`:
 
 ### Example 6: Fixing Component Styling
 
-**User Request**: "The EventList component doesn't look right, regenerate it with proper Bulma styling"
+**User Request**: "The EventList component doesn't look right, regenerate it with proper Tailwind styling"
 
 **Your Response**:
 ```bash
-# Use ui-scaffold-component to regenerate with Bulma CSS
+# Use ui-scaffold-component to regenerate with Tailwind CSS
 /ui-scaffold-component src/slices/events/ViewEvents.json
 ```
 
@@ -505,7 +497,7 @@ Don't know which skill to use?
 
 **ALWAYS** prefer using the skills over manual implementation! They ensure:
 - Consistency across the codebase
-- Proper use of Bulma CSS
+- Proper use of Tailwind CSS
 - Correct CQRS patterns
 - Proper TypeScript types
 - React Query best practices

package/templates/server.mjs

@@ -275,7 +275,7 @@ const server = createServer(async (req, res) => {
             const allSlices = indexData.slices.map(s => ({
                 title: s.slice,
                 status: s.status,
-                assignee: s.assignee,
+                assigned: s.assigned,
                 id: s.id,
                 specifications: specificationsMap.get(s.id)
             }));

package/templates/.slices/Context/event/slice.json

@@ -1,117 +0,0 @@
-{
-  "id": "3458764661682330686",
-  "status": "Created",
-  "title": "slice: Event",
-  "context": "Context",
-  "sliceType": "STATE_CHANGE",
-  "commands": [
-    {
-      "id": "3458764661682330640",
-      "tags": [],
-      "modelContext": "Context",
-      "slice": "slice: Event",
-      "title": " Event",
-      "fields": [],
-      "type": "COMMAND",
-      "description": "",
-      "aggregate": "default",
-      "aggregateDependencies": [],
-      "dependencies": [
-        {
-          "id": "3458764661682330558",
-          "type": "OUTBOUND",
-          "title": "event",
-          "elementType": "EVENT"
-        },
-        {
-          "id": "3458764661682330666",
-          "type": "INBOUND",
-          "title": "screen",
-          "elementType": "SCREEN"
-        }
-      ],
-      "createsAggregate": false,
-      "triggers": [],
-      "sketched": false,
-      "prototype": {
-        "activeByDefault": false
-      }
-    }
-  ],
-  "events": [
-    {
-      "id": "3458764661682330558",
-      "tags": [],
-      "elementContext": "INTERNAL",
-      "modelContext": "Context",
-      "context": "INTERNAL",
-      "slice": "slice: Event",
-      "title": "event",
-      "fields": [],
-      "type": "EVENT",
-      "description": "",
-      "aggregate": "default",
-      "aggregateDependencies": [],
-      "dependencies": [
-        {
-          "id": "3458764661682330640",
-          "type": "INBOUND",
-          "title": " Event",
-          "elementType": "COMMAND"
-        }
-      ],
-      "createsAggregate": false,
-      "triggers": [],
-      "sketched": false,
-      "prototype": {
-        "activeByDefault": false
-      }
-    }
-  ],
-  "readmodels": [],
-  "screens": [
-    {
-      "id": "3458764661682330666",
-      "tags": [],
-      "groupId": "3458764661682330671",
-      "modelContext": "Context",
-      "slice": "slice: Event",
-      "title": "screen",
-      "fields": [],
-      "type": "SCREEN",
-      "description": "",
-      "aggregate": "default",
-      "aggregateDependencies": [],
-      "dependencies": [
-        {
-          "id": "3458764661682330640",
-          "type": "OUTBOUND",
-          "title": " Event",
-          "elementType": "COMMAND"
-        }
-      ],
-      "createsAggregate": false,
-      "triggers": [],
-      "sketched": false,
-      "prototype": {
-        "activeByDefault": false
-      }
-    }
-  ],
-  "screenImages": [],
-  "screenLayouts": [],
-  "processors": [],
-  "tables": [],
-  "specifications": [],
-  "actors": [],
-  "codeGen": {
-    "backendPrompts": [
-      "slice be prompt",
-      "group be prompt"
-    ],
-    "uiPrompts": [
-      "group fe prompt"
-    ]
-  },
-  "aggregates": []
-}

package/templates/.slices/index.json

@@ -1,12 +0,0 @@
-{
-  "slices": [
-    {
-      "id": "3458764661682330686",
-      "slice": "slice: Event",
-      "index": 1,
-      "context": "Context",
-      "folder": "event",
-      "status": "Created"
-    }
-  ]
-}

package/templates/config.json

@@ -1,133 +0,0 @@
-{
-  "slices": [
-    {
-      "id": "3458764661682330686",
-      "status": "Created",
-      "index": 1,
-      "title": "slice: Event",
-      "context": "Context",
-      "sliceType": "STATE_CHANGE",
-      "commands": [
-        {
-          "id": "3458764661682330640",
-          "tags": [],
-          "modelContext": "Context",
-          "slice": "slice: Event",
-          "title": " Event",
-          "fields": [],
-          "type": "COMMAND",
-          "description": "",
-          "aggregate": "default",
-          "aggregateDependencies": [],
-          "dependencies": [
-            {
-              "id": "3458764661682330558",
-              "type": "OUTBOUND",
-              "title": "event",
-              "elementType": "EVENT"
-            },
-            {
-              "id": "3458764661682330666",
-              "type": "INBOUND",
-              "title": "screen",
-              "elementType": "SCREEN"
-            }
-          ],
-          "createsAggregate": false,
-          "triggers": [],
-          "sketched": false,
-          "prototype": {
-            "activeByDefault": false
-          }
-        }
-      ],
-      "events": [
-        {
-          "id": "3458764661682330558",
-          "tags": [],
-          "elementContext": "INTERNAL",
-          "modelContext": "Context",
-          "context": "INTERNAL",
-          "slice": "slice: Event",
-          "title": "event",
-          "fields": [],
-          "type": "EVENT",
-          "description": "",
-          "aggregate": "default",
-          "aggregateDependencies": [],
-          "dependencies": [
-            {
-              "id": "3458764661682330640",
-              "type": "INBOUND",
-              "title": " Event",
-              "elementType": "COMMAND"
-            }
-          ],
-          "createsAggregate": false,
-          "triggers": [],
-          "sketched": false,
-          "prototype": {
-            "activeByDefault": false
-          }
-        }
-      ],
-      "readmodels": [],
-      "screens": [
-        {
-          "id": "3458764661682330666",
-          "tags": [],
-          "groupId": "3458764661682330671",
-          "modelContext": "Context",
-          "slice": "slice: Event",
-          "title": "screen",
-          "fields": [],
-          "type": "SCREEN",
-          "description": "",
-          "aggregate": "default",
-          "aggregateDependencies": [],
-          "dependencies": [
-            {
-              "id": "3458764661682330640",
-              "type": "OUTBOUND",
-              "title": " Event",
-              "elementType": "COMMAND"
-            }
-          ],
-          "createsAggregate": false,
-          "triggers": [],
-          "sketched": false,
-          "prototype": {
-            "activeByDefault": false
-          }
-        }
-      ],
-      "screenImages": [],
-      "screenLayouts": [],
-      "processors": [],
-      "tables": [],
-      "specifications": [],
-      "actors": [],
-      "codeGen": {
-        "backendPrompts": [
-          "slice be prompt",
-          "group be prompt"
-        ],
-        "uiPrompts": [
-          "group fe prompt"
-        ]
-      },
-      "aggregates": []
-    }
-  ],
-  "flows": [],
-  "aggregates": [],
-  "actors": [],
-  "context": "Context",
-  "codeGen": {
-    "application": "Context"
-  },
-  "boardId": "uXjVJ13p-9M=",
-  "sliceGroups": [],
-  "sliceImages": [],
-  "sliceLayouts": []
-}