@electric-agent/agent 1.4.1 → 1.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@electric-agent/agent",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.2",
|
|
4
4
|
"description": "CLI tool that turns natural-language app descriptions into running reactive Electric SQL + TanStack DB applications",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"bin": {
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"commander": "^13.1.0",
|
|
27
27
|
"dotenv": "^17.3.1",
|
|
28
28
|
"zod": "^3.24.1",
|
|
29
|
-
"@electric-agent/studio": "1.
|
|
29
|
+
"@electric-agent/studio": "1.13.0",
|
|
30
30
|
"@electric-agent/protocol": "1.8.0"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
@@ -175,6 +175,11 @@ API routes use `createFileRoute` + `server.handlers` (NOT `createAPIFileRoute`).
|
|
|
175
175
|
**Before writing UI code**, read the ui-design skill:
|
|
176
176
|
- `.claude/skills/ui-design/SKILL.md` — design system, Radix UI Themes component patterns
|
|
177
177
|
|
|
178
|
+
The `__root.tsx` Theme wrapper MUST use the Electric brand defaults:
|
|
179
|
+
```tsx
|
|
180
|
+
<Theme accentColor="violet" grayColor="mauve" radius="medium" panelBackground="translucent">
|
|
181
|
+
```
|
|
182
|
+
|
|
178
183
|
Also read the `react-db` and `meta-framework` skills for hook usage and SSR patterns.
|
|
179
184
|
|
|
180
185
|
Key constraints:
|
|
@@ -216,11 +221,6 @@ After the app is running, write:
|
|
|
216
221
|
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.
|
|
217
222
|
2. `ARCHITECTURE.md` — brief reference: entities, routes, components.
|
|
218
223
|
|
|
219
|
-
Then invoke the UI design skill for interactive refinement:
|
|
220
|
-
```
|
|
221
|
-
/ui-design
|
|
222
|
-
```
|
|
223
|
-
|
|
224
224
|
---
|
|
225
225
|
|
|
226
226
|
## Scaffold Gotchas (not in playbooks)
|
|
@@ -103,6 +103,17 @@ Before making changes, commit to a coherent aesthetic:
|
|
|
103
103
|
- Giant forms without structure — group related fields, use Dialog for create/edit
|
|
104
104
|
- Tables without visual anchoring — use `variant="surface"` or Card wrappers
|
|
105
105
|
|
|
106
|
+
### Design Thinking — Advanced
|
|
107
|
+
|
|
108
|
+
Beyond the baseline Radix patterns, aim for **distinctive, memorable interfaces**:
|
|
109
|
+
|
|
110
|
+
- **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.
|
|
111
|
+
- **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.
|
|
112
|
+
- **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.
|
|
113
|
+
- **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.
|
|
114
|
+
- **Atmosphere and depth**: Create visual atmosphere through Card `variant="surface"`, translucent panel backgrounds, and subtle layering. The interface should feel crafted, not generated.
|
|
115
|
+
- **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.
|
|
116
|
+
|
|
106
117
|
### Import Rules
|
|
107
118
|
|
|
108
119
|
- Use `@radix-ui/themes` for all components (NOT `@radix-ui/react-*`)
|