@nebulit/embuilder 0.1.50 → 0.1.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nebulit/embuilder",
-  "version": "0.1.50",
+  "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)
             }));