@electric-agent/agent 1.4.0 → 1.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electric-agent/agent",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "description": "CLI tool that turns natural-language app descriptions into running reactive Electric SQL + TanStack DB applications",
   "type": "module",
   "bin": {
@@ -26,8 +26,8 @@
     "commander": "^13.1.0",
     "dotenv": "^17.3.1",
     "zod": "^3.24.1",
-    "@electric-agent/protocol": "1.8.0",
-    "@electric-agent/studio": "1.12.0"
+    "@electric-agent/studio": "1.13.0",
+    "@electric-agent/protocol": "1.8.0"
   },
   "devDependencies": {
     "@types/node": "^22.15.0",

package/template/.claude/skills/create-app/SKILL.md

@@ -61,7 +61,8 @@ Write a `PLAN.md` file with this structure:
 - [ ] Phase 4: Collections & API routes
 - [ ] Phase 5: UI components
 - [ ] Phase 6: Build, lint & test
-- [ ] Phase 7: Deploy & preview
+- [ ] Phase 7: README.md & ARCHITECTURE.md
+- [ ] Phase 8: Deploy & preview
 
 ## Design Conventions
 - UUID primary keys with defaultRandom()
@@ -174,6 +175,11 @@ API routes use `createFileRoute` + `server.handlers` (NOT `createAPIFileRoute`).
 **Before writing UI code**, read the ui-design skill:
 - `.claude/skills/ui-design/SKILL.md` — design system, Radix UI Themes component patterns
 
+The `__root.tsx` Theme wrapper MUST use the Electric brand defaults:
+```tsx
+<Theme accentColor="violet" grayColor="mauve" radius="medium" panelBackground="translucent">
+```
+
 Also read the `react-db` and `meta-framework` skills for hook usage and SSR patterns.
 
 Key constraints:
@@ -211,12 +217,9 @@ pnpm dev:start
 
 **IMPORTANT**: Always use `pnpm dev:start` from the project directory.
 
-After the app is running, write `ARCHITECTURE.md` (brief reference: entities, routes, components).
-
-Then invoke the UI design skill for interactive refinement:
-```
-/ui-design
-```
+After the app is running, write:
+1. `README.md` — overwrite the scaffold README with a project-specific one: app name, one-line description, screenshot placeholder, how to run (`pnpm install && pnpm dev:start`), tech stack (Electric SQL, TanStack DB, Drizzle, TanStack Start), and a brief feature list.
+2. `ARCHITECTURE.md` — brief reference: entities, routes, components.
 
 ---
 

package/template/.claude/skills/ui-design/SKILL.md

@@ -103,6 +103,17 @@ Before making changes, commit to a coherent aesthetic:
 - Giant forms without structure — group related fields, use Dialog for create/edit
 - Tables without visual anchoring — use `variant="surface"` or Card wrappers
 
+### Design Thinking — Advanced
+
+Beyond the baseline Radix patterns, aim for **distinctive, memorable interfaces**:
+
+- **Typography with character**: Work the full typographic range. Use size, weight, and color to establish clear hierarchy. Heading `size="7"` or `size="8"` for page titles creates presence. Pair display-weight headings with lighter body text.
+- **Color with conviction**: Dominant colors with sharp accents outperform timid palettes. The violet accent should feel intentional, not decorative. Use contrast to draw the eye.
+- **Motion and micro-interactions**: Add subtle transitions for state changes. Focus on high-impact moments — a well-orchestrated page load with staggered reveals creates more delight than scattered animations. Use CSS transitions for hover states.
+- **Spatial composition**: Break out of everything-centered layouts. Use asymmetry, `justify="between"` for headers, generous negative space, and visual weight through surfaces. Let content breathe.
+- **Atmosphere and depth**: Create visual atmosphere through Card `variant="surface"`, translucent panel backgrounds, and subtle layering. The interface should feel crafted, not generated.
+- **Contextual design**: Every app has a different purpose and audience. A task manager feels different from a data dashboard. Match the aesthetic to the domain — colors, density, and component choices should reflect the content.
+
 ### Import Rules
 
 - Use `@radix-ui/themes` for all components (NOT `@radix-ui/react-*`)