@nebulit/embuilder 0.1.39 → 0.1.41

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

@@ -0,0 +1,223 @@
+---
+skill_name: ui-generate-types
+description: Generate TypeScript interfaces from slice field definitions
+version: 1.0.0
+author: Frontend Development Team
+tags: [ui, typescript, types, interfaces, codegen]
+---
+
+# Type Generator Skill
+
+Generate TypeScript interfaces from slice field definitions.
+
+## Instructions
+
+You will be provided with:
+- Slice JSON file path
+- Entity name
+
+Your task is to:
+
+1. **Read the slice JSON file** to understand:
+   - All fields and their types
+   - Required vs optional fields
+   - Field descriptions
+
+2. **Generate TypeScript interfaces**:
+   - **Entity interface**: Represents the domain object (for STATE_VIEW slices)
+   - **Params interface**: Represents parameters for commands (for STATE_CHANGE slices)
+
+3. **Map slice field types to TypeScript types**:
+   - String → `string`
+   - Int, Long, Double, Decimal → `number`
+   - Boolean → `boolean`
+   - Date, DateTime → `string` (ISO format)
+   - Time → `string`
+   - UUID → `string`
+   - Enum → `union type` or `enum`
+
+4. **Add interfaces to** `src/types/index.ts`
+
+## Type Mapping
+
+| Slice Type | TypeScript Type | Notes |
+|------------|----------------|-------|
+| String | `string` | |
+| Int | `number` | |
+| Long | `number` | |
+| Double | `number` | |
+| Decimal | `number` | |
+| Boolean | `boolean` | |
+| Date | `string` | ISO date string (YYYY-MM-DD) |
+| DateTime | `string` | ISO datetime string |
+| Time | `string` | HH:mm format |
+| UUID | `string` | |
+| Enum | `'value1' \| 'value2'` | Union type |
+
+## Interface Templates
+
+### For STATE_VIEW (Entity Interface)
+
+```typescript
+/**
+ * {Entity description}
+ */
+export interface {Entity} {
+  /** Unique identifier */
+  {id_field}: string;
+
+  /** {Field description} */
+  {field_name}: {field_type};
+
+  /** Optional field */
+  {optional_field}?: {field_type};
+
+  /** Created timestamp */
+  created_at?: string;
+
+  /** Updated timestamp */
+  updated_at?: string;
+}
+```
+
+### For STATE_CHANGE (Params Interface)
+
+```typescript
+/**
+ * Parameters for {action} {entity}
+ */
+export interface {Action}{Entity}Params {
+  /** {Field description} */
+  {field_name}: {field_type};
+
+  /** Optional parameter */
+  {optional_field}?: {field_type};
+}
+```
+
+## Output Format
+
+Provide:
+
+1. **TypeScript interfaces** formatted and documented
+2. **Location** where to add (typically `src/types/index.ts`)
+3. **Notes** on any special type considerations
+
+Example:
+
+```
+# Types Generated
+
+## Add to src/types/index.ts
+
+/**
+ * Represents an event in the system
+ */
+export interface Event {
+  /** Unique event identifier */
+  event_id: string;
+
+  /** Event name */
+  name: string;
+
+  /** Event date in YYYY-MM-DD format */
+  date: string;
+
+  /** Start time in HH:mm format */
+  start_time: string;
+
+  /** End time in HH:mm format */
+  end_time: string;
+
+  /** Number of persons */
+  persons: number;
+
+  /** Created timestamp */
+  created_at?: string;
+}
+
+/**
+ * Parameters for creating a new event
+ */
+export interface CreateEventParams {
+  /** Event name (max 100 characters) */
+  name: string;
+
+  /** Event date in YYYY-MM-DD format */
+  date: string;
+
+  /** Start time in HH:mm format */
+  startTime: string;
+
+  /** End time in HH:mm format */
+  endTime: string;
+
+  /** Number of persons (must be positive) */
+  persons: number;
+}
+
+## Notes
+
+- Date fields use ISO string format for compatibility with HTML date inputs
+- Time fields use HH:mm format
+- Field names in params use camelCase (frontend convention)
+- Field names in entity match database column names (snake_case)
+```
+
+## Special Cases
+
+### Optional Fields
+
+Mark fields as optional with `?` when:
+- The slice indicates the field is not required
+- The field has a default value
+- The field is generated (like timestamps, IDs)
+
+### Enums
+
+For enum fields, create either:
+
+**Option 1: Union Type (preferred for simple cases)**
+```typescript
+export type EventStatus = 'pending' | 'confirmed' | 'cancelled';
+
+export interface Event {
+  status: EventStatus;
+}
+```
+
+**Option 2: Enum (for complex cases with values)**
+```typescript
+export enum EventStatus {
+  Pending = 'PENDING',
+  Confirmed = 'CONFIRMED',
+  Cancelled = 'CANCELLED',
+}
+```
+
+### Nested Objects
+
+If the slice includes nested structures:
+```typescript
+export interface Address {
+  street: string;
+  city: string;
+  zipCode: string;
+}
+
+export interface Customer {
+  id: string;
+  name: string;
+  address: Address;
+}
+```
+
+## Notes
+
+- Always add JSDoc comments for interfaces and fields
+- Include validation constraints in comments (max length, min/max values, etc.)
+- Keep entity interfaces separate from params interfaces
+- For params, use camelCase field names (frontend convention)
+- For entities, match the database schema field names
+- Check if types already exist before adding duplicates
+- Export all types from `src/types/index.ts`

package/templates/.claude/skills/ui-read-ui-prompts/SKILL.md

@@ -0,0 +1,192 @@
+---
+skill_name: ui-read-ui-prompts
+description: Find and parse UI prompts from slice definitions and related files
+version: 1.0.0
+author: Frontend Development Team
+tags: [ui, prompts, requirements, design, validation]
+---
+
+# UI Prompt Reader Skill
+
+Find and parse UI prompts from slice definitions and related files.
+
+## Instructions
+
+You will be provided with:
+- Slice JSON file path
+- Slice folder path (e.g., `/backend/src/slices/<slice name>/`)
+
+Your task is to:
+
+1. **Read the slice JSON file** to extract:
+   - `codeGen.uiPrompts` array (if present)
+   - Any UI-related metadata in the slice definition
+
+2. **Check for `ui-prompt.md`** in the slice folder:
+   - Read the file if it exists
+   - Parse its content for design requirements, validation rules, and UX flows
+
+3. **Extract and organize UI requirements**:
+   - Design specifications (layout, styling, format)
+   - Validation rules (required fields, formats, constraints)
+   - UX flow instructions (user journey, interactions)
+   - Accessibility requirements
+   - Error handling specifications
+
+4. **Provide structured output** that can guide component implementation
+
+## UI Prompt Structure
+
+UI prompts typically contain:
+
+### Design Specifications
+- Layout preferences (grid, cards, table, list)
+- Styling guidelines (colors, spacing, typography)
+- Format requirements (date formats, number formats)
+- Responsive design considerations
+
+### Validation Rules
+- Required fields
+- Field length constraints (min/max)
+- Value constraints (min/max values, ranges)
+- Format validations (email, phone, URL, patterns)
+- Cross-field validations (end date > start date)
+
+### UX Flow
+- User journey steps
+- Interaction patterns (click → open dialog → fill form → submit → refresh)
+- Success/error feedback (toasts, notifications, messages)
+- Loading states
+- Empty states
+
+### Accessibility
+- ARIA labels
+- Keyboard navigation
+- Screen reader support
+- Focus management
+
+## Output Format
+
+Provide a structured summary:
+
+```
+# UI Prompts Analysis
+
+## Source: {slice name}
+
+### From codeGen.uiPrompts:
+1. "{prompt text}"
+2. "{prompt text}"
+
+### From ui-prompt.md:
+
+#### Design Specifications:
+- Layout: {description}
+- Styling: {description}
+- Formats: {description}
+
+#### Validation Rules:
+| Field | Rule | Message |
+|-------|------|---------|
+| {field} | {rule} | {error message} |
+
+#### UX Flow:
+1. {step}
+2. {step}
+3. {step}
+
+#### Special Requirements:
+- {requirement}
+- {requirement}
+
+### Implementation Guidance:
+
+Based on the prompts, the implementation should:
+1. {specific action based on prompt}
+2. {specific action based on prompt}
+
+### Code Snippets:
+
+{Any specific code patterns or examples from the prompts}
+```
+
+## Example
+
+For an events management slice with ui-prompt.md:
+
+```markdown
+# Events Management UI
+
+## Design
+- Use card layout for event list
+- Display date in DD.MM.YYYY format
+- Show time in 24-hour format (HH:mm)
+- Use responsive 3-column grid on desktop, 1-column on mobile
+
+## Validation
+- Name: Required, max 100 characters
+- Date: Required, cannot be in the past
+- Start time: Required
+- End time: Required, must be after start time
+- Persons: Required, must be > 0
+
+## UX Flow
+1. User clicks "Create Event" button
+2. Modal dialog opens with form
+3. User fills form fields
+4. On submit, show loading state
+5. On success, close dialog and show success toast
+6. Refresh event list automatically
+7. On error, show error message in dialog
+```
+
+Your output would be:
+
+```
+# UI Prompts Analysis
+
+## Source: Events Management
+
+### From ui-prompt.md:
+
+#### Design Specifications:
+- 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
+
+#### Validation Rules:
+| Field | Rule | Message |
+|-------|------|---------|
+| name | Required, max 100 chars | "Name is required (max 100 characters)" |
+| date | Required, not in past | "Date cannot be in the past" |
+| start_time | Required | "Start time is required" |
+| end_time | Required, > start_time | "End time must be after start time" |
+| persons | Required, > 0 | "Number of persons must be positive" |
+
+#### UX Flow:
+1. Click "Create Event" button
+2. Modal dialog opens with form
+3. Fill form fields with validation
+4. Submit → Loading state
+5. Success → Close dialog + Success toast + Refresh list
+6. Error → Show error in dialog
+
+### Implementation Guidance:
+
+1. Use Bulma 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
+5. Implement responsive grid with `columns is-multiline` and `column is-one-third`
+6. Add cross-field validation for start/end time comparison
+```
+
+## Notes
+
+- If no `ui-prompt.md` exists, rely solely on `codeGen.uiPrompts`
+- If no UI prompts are found, provide general best practices
+- Extract specific implementation details (formats, layouts, validations)
+- Translate requirements into actionable coding tasks
+- Identify any custom components or patterns needed
+- Note any conflicts between prompts and suggest resolutions

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

@@ -0,0 +1,274 @@
+---
+skill_name: ui-scaffold-component
+description: Scaffold React components (List, Dialog, Page) from slice definitions using Bulma CSS
+version: 1.0.0
+author: Frontend Development Team
+tags: [ui, components, react, bulma, scaffolding]
+---
+
+# Component Scaffolder Skill
+
+Scaffold React components (List, Dialog, Page) from slice definitions using Bulma CSS.
+
+## Instructions
+
+You will be provided with:
+- Slice JSON file paths (one or more in the same group)
+- Component type to scaffold (List, Dialog, Page, or Auto)
+- Domain/entity name
+
+Your task is to:
+
+1. **Read all slice JSON files** to understand:
+   - Fields and their types
+   - Which slices are STATE_VIEW (for lists)
+   - Which slices are STATE_CHANGE (for forms/dialogs)
+   - UI prompts from `codeGen.uiPrompts`
+
+2. **Scaffold appropriate components**:
+   - **List Component**: For STATE_VIEW slices (displays data in cards/table)
+   - **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:
+   - Layout: `columns`, `column`, `container`, `section`
+   - Components: `card`, `button`, `modal`, `box`, `table`
+   - Form elements: `field`, `control`, `label`, `input`, `select`, `textarea`
+   - Utilities: `is-primary`, `is-fullwidth`, `has-text-centered`, etc.
+
+4. **Integrate generated hooks**:
+   - Import and use query hooks in list components
+   - Import and use mutation hooks in dialog components
+   - Handle loading and error states
+
+## Component Templates
+
+### List Component (for STATE_VIEW)
+
+```typescript
+import React from 'react';
+import { use{Entity} } from '@/hooks/api';
+import type { {Entity} } from '@/types';
+
+export function {Entity}List() {
+  const { data: {entities}, isLoading, error } = use{Entity}();
+
+  if (isLoading) {
+    return <div className="has-text-centered p-6">Loading...</div>;
+  }
+
+  if (error) {
+    return (
+      <div className="notification is-danger">
+        Error loading {entities}: {error.message}
+      </div>
+    );
+  }
+
+  if (!{entities} || {entities}.length === 0) {
+    return (
+      <div className="notification is-info">
+        No {entities} found.
+      </div>
+    );
+  }
+
+  return (
+    <div className="columns is-multiline">
+      {{entities}.map(({entity}) => (
+        <div key={{entity}.id} className="column is-one-third">
+          <div className="card">
+            <div className="card-content">
+              <p className="title is-5">{{entity}.name}</p>
+              {/* Add more fields based on slice definition */}
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+### Dialog Component (for STATE_CHANGE)
+
+```typescript
+import React, { useState } from 'react';
+import { use{Action}{Entity} } from '@/hooks/api';
+import type { {Action}{Entity}Params } from '@/types';
+
+interface {Action}{Entity}DialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function {Action}{Entity}Dialog({ isOpen, onClose }: {Action}{Entity}DialogProps) {
+  const { mutate: {actionCamelCase}{Entity}, isPending } = use{Action}{Entity}();
+  const [formData, setFormData] = useState<{Action}{Entity}Params>({
+    // Initialize with default values based on slice fields
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    {actionCamelCase}{Entity}(formData, {
+      onSuccess: () => {
+        onClose();
+        // Reset form or show success message
+      },
+    });
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className={`modal ${isOpen ? 'is-active' : ''}`}>
+      <div className="modal-background" onClick={onClose}></div>
+      <div className="modal-card">
+        <header className="modal-card-head">
+          <p className="modal-card-title">{Action} {Entity}</p>
+          <button className="delete" onClick={onClose}></button>
+        </header>
+        <section className="modal-card-body">
+          <form onSubmit={handleSubmit}>
+            {/* Generate form fields based on slice definition */}
+            <div className="field">
+              <label className="label">Field Name</label>
+              <div className="control">
+                <input
+                  className="input"
+                  type="text"
+                  value={formData.fieldName}
+                  onChange={(e) => setFormData({ ...formData, fieldName: e.target.value })}
+                  required
+                />
+              </div>
+            </div>
+          </form>
+        </section>
+        <footer className="modal-card-foot">
+          <button
+            className="button is-primary"
+            onClick={handleSubmit}
+            disabled={isPending}
+          >
+            {isPending ? 'Saving...' : 'Save'}
+          </button>
+          <button className="button" onClick={onClose}>
+            Cancel
+          </button>
+        </footer>
+      </div>
+    </div>
+  );
+}
+```
+
+### Page Component (Composition)
+
+```typescript
+import React, { useState } from 'react';
+import { {Entity}List } from './{Entity}List';
+import { Create{Entity}Dialog } from './Create{Entity}Dialog';
+
+export function {Entity}Page() {
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+
+  return (
+    <div className="container">
+      <section className="section">
+        <div className="level">
+          <div className="level-left">
+            <div className="level-item">
+              <h1 className="title">{Entities}</h1>
+            </div>
+          </div>
+          <div className="level-right">
+            <div className="level-item">
+              <button
+                className="button is-primary"
+                onClick={() => setIsCreateDialogOpen(true)}
+              >
+                Create {Entity}
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <{Entity}List />
+
+        <Create{Entity}Dialog
+          isOpen={isCreateDialogOpen}
+          onClose={() => setIsCreateDialogOpen(false)}
+        />
+      </section>
+    </div>
+  );
+}
+```
+
+## Form Field Generation
+
+Based on field types in slice JSON, generate appropriate form inputs:
+
+- **String**: `<input className="input" type="text" />`
+- **Number**: `<input className="input" type="number" />`
+- **Date**: `<input className="input" type="date" />`
+- **Time**: `<input className="input" type="time" />`
+- **Boolean**: `<input type="checkbox" className="checkbox" />`
+- **Enum/Select**: `<div className="select"><select>...</select></div>`
+- **Textarea**: `<textarea className="textarea" />`
+
+## Output Format
+
+Provide:
+
+1. **Component files** with full paths
+2. **Import statements** needed
+3. **Integration notes** for adding to routes or parent components
+
+Example:
+
+```
+# Components Scaffolded
+
+## File: src/components/events/EventList.tsx
+
+[Component code]
+
+## File: src/components/events/CreateEventDialog.tsx
+
+[Component code]
+
+## File: src/components/events/EventsPage.tsx
+
+[Component code]
+
+## Integration
+
+Add to routes:
+import { EventsPage } from '@/components/events/EventsPage';
+
+// In router configuration:
+{ path: '/events', element: <EventsPage /> }
+```
+
+## Bulma CSS Guidelines
+
+- Use `columns` and `column` for responsive grid layouts
+- Use `card` for displaying entity items
+- Use `modal` for dialogs (add `is-active` class when open)
+- Use `button is-primary` for primary actions
+- Use `notification` for messages (with `is-danger`, `is-info`, etc.)
+- Use `field`, `control`, `label`, `input` for forms
+- Use `level` for horizontal layouts with items on left/right
+- Use `section` and `container` for page layout
+
+## Notes
+
+- Always create components in `src/components/{domain}/` directory
+- Use TypeScript with proper types imported from `@/types`
+- Include loading and error states
+- Handle form validation based on required fields
+- Close dialogs on successful mutations
+- Use semantic HTML elements
+- Follow React best practices (controlled components, proper event handling)