fimo 2.8.0-staging.17 → 2.8.0-staging.18
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/assets/skills/fimo-studio/SKILL.md +0 -1
- package/assets/skills/fimo-studio/references/ai-chat.md +2 -3
- package/dist/cli/bundle.json +1 -1
- package/dist/cli/index.js +2 -2
- package/package.json +8 -8
- package/templates/astro/package.json +3 -3
- package/templates/nextjs/package.json +4 -4
- package/templates/react-router/package.json +5 -5
- package/templates/sveltekit/package.json +3 -3
- package/templates/vite/package.json +5 -5
- package/assets/skills/fimo-studio/references/drawing-and-wireframing.md +0 -61
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "fimo",
|
|
3
|
-
"version": "2.8.0-staging.
|
|
3
|
+
"version": "2.8.0-staging.18",
|
|
4
4
|
"description": "Fimo CLI - create, deploy, and manage Fimo sites",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"astro-component"
|
|
@@ -194,13 +194,13 @@
|
|
|
194
194
|
"devDependencies": {
|
|
195
195
|
"@clack/core": "^1.2.0",
|
|
196
196
|
"@clack/prompts": "^1.2.0",
|
|
197
|
-
"@fimo/agents-bundle": "2.8.0-staging.
|
|
198
|
-
"@fimo/api-contracts": "2.8.0-staging.
|
|
199
|
-
"@fimo/cli-kit": "2.8.0-staging.
|
|
200
|
-
"@fimo/framework-detect": "2.8.0-staging.
|
|
201
|
-
"@fimo/routes": "2.8.0-staging.
|
|
202
|
-
"@fimo/sdk": "2.8.0-staging.
|
|
203
|
-
"@fimo/tsconfig": "2.8.0-staging.
|
|
197
|
+
"@fimo/agents-bundle": "2.8.0-staging.18",
|
|
198
|
+
"@fimo/api-contracts": "2.8.0-staging.18",
|
|
199
|
+
"@fimo/cli-kit": "2.8.0-staging.18",
|
|
200
|
+
"@fimo/framework-detect": "2.8.0-staging.18",
|
|
201
|
+
"@fimo/routes": "2.8.0-staging.18",
|
|
202
|
+
"@fimo/sdk": "2.8.0-staging.18",
|
|
203
|
+
"@fimo/tsconfig": "2.8.0-staging.18",
|
|
204
204
|
"@types/node": "22.18.6",
|
|
205
205
|
"agent-install": "^0.0.5",
|
|
206
206
|
"astro": "^7.1.6",
|
|
@@ -9,9 +9,9 @@
|
|
|
9
9
|
"check": "astro sync && astro check"
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
|
-
"fimo": "2.8.0-staging.
|
|
13
|
-
"fimo-analytics": "2.8.0-staging.
|
|
14
|
-
"fimo-astro": "2.8.0-staging.
|
|
12
|
+
"fimo": "2.8.0-staging.18",
|
|
13
|
+
"fimo-analytics": "2.8.0-staging.18",
|
|
14
|
+
"fimo-astro": "2.8.0-staging.18",
|
|
15
15
|
"zod": "^4.4.3"
|
|
16
16
|
},
|
|
17
17
|
"devDependencies": {
|
|
@@ -12,10 +12,10 @@
|
|
|
12
12
|
},
|
|
13
13
|
"dependencies": {
|
|
14
14
|
"@tanstack/react-query": "^5.80.6",
|
|
15
|
-
"fimo": "2.8.0-staging.
|
|
16
|
-
"fimo-analytics": "2.8.0-staging.
|
|
17
|
-
"fimo-next": "2.8.0-staging.
|
|
18
|
-
"fimo-react": "2.8.0-staging.
|
|
15
|
+
"fimo": "2.8.0-staging.18",
|
|
16
|
+
"fimo-analytics": "2.8.0-staging.18",
|
|
17
|
+
"fimo-next": "2.8.0-staging.18",
|
|
18
|
+
"fimo-react": "2.8.0-staging.18",
|
|
19
19
|
"next": "16.3.8",
|
|
20
20
|
"react": "^19.2.7",
|
|
21
21
|
"react-dom": "^19.2.7",
|
|
@@ -21,11 +21,11 @@
|
|
|
21
21
|
"cn": "0.2.4",
|
|
22
22
|
"date-fns": "^4.1.0",
|
|
23
23
|
"embla-carousel-react": "^8.6.0",
|
|
24
|
-
"fimo": "2.8.0-staging.
|
|
25
|
-
"fimo-analytics": "2.8.0-staging.
|
|
26
|
-
"fimo-react": "2.8.0-staging.
|
|
27
|
-
"fimo-react-router": "2.8.0-staging.
|
|
28
|
-
"fimo-vite": "2.8.0-staging.
|
|
24
|
+
"fimo": "2.8.0-staging.18",
|
|
25
|
+
"fimo-analytics": "2.8.0-staging.18",
|
|
26
|
+
"fimo-react": "2.8.0-staging.18",
|
|
27
|
+
"fimo-react-router": "2.8.0-staging.18",
|
|
28
|
+
"fimo-vite": "2.8.0-staging.18",
|
|
29
29
|
"input-otp": "^1.4.2",
|
|
30
30
|
"isbot": "^5",
|
|
31
31
|
"lucide-react": "^0.577.0",
|
|
@@ -11,9 +11,9 @@
|
|
|
11
11
|
"prepare": "svelte-kit sync"
|
|
12
12
|
},
|
|
13
13
|
"dependencies": {
|
|
14
|
-
"fimo": "2.8.0-staging.
|
|
15
|
-
"fimo-analytics": "2.8.0-staging.
|
|
16
|
-
"fimo-sveltekit": "2.8.0-staging.
|
|
14
|
+
"fimo": "2.8.0-staging.18",
|
|
15
|
+
"fimo-analytics": "2.8.0-staging.18",
|
|
16
|
+
"fimo-sveltekit": "2.8.0-staging.18",
|
|
17
17
|
"zod": "^4.4.3"
|
|
18
18
|
},
|
|
19
19
|
"devDependencies": {
|
|
@@ -11,11 +11,11 @@
|
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
13
|
"@tanstack/react-query": "^5.80.6",
|
|
14
|
-
"fimo": "2.8.0-staging.
|
|
15
|
-
"fimo-analytics": "2.8.0-staging.
|
|
16
|
-
"fimo-react": "2.8.0-staging.
|
|
17
|
-
"fimo-react-router": "2.8.0-staging.
|
|
18
|
-
"fimo-vite": "2.8.0-staging.
|
|
14
|
+
"fimo": "2.8.0-staging.18",
|
|
15
|
+
"fimo-analytics": "2.8.0-staging.18",
|
|
16
|
+
"fimo-react": "2.8.0-staging.18",
|
|
17
|
+
"fimo-react-router": "2.8.0-staging.18",
|
|
18
|
+
"fimo-vite": "2.8.0-staging.18",
|
|
19
19
|
"react": "^19.2.7",
|
|
20
20
|
"react-dom": "^19.2.7",
|
|
21
21
|
"react-router": "^8.3.0",
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
## Opening the Drawing Tool
|
|
2
|
-
|
|
3
|
-
Inside an existing site, open the wireframe canvas from the chat attachment dropdown: click the add-attachments (**+**) button next to the chat input, then choose **Draw**. (This option is hidden on mobile.)
|
|
4
|
-
|
|
5
|
-
Selecting **Draw** opens a large drawing canvas powered by Excalidraw, displayed in a centered dialog.
|
|
6
|
-
|
|
7
|
-
## Toolbar Basics
|
|
8
|
-
|
|
9
|
-
Across the top of the canvas you will find these tools:
|
|
10
|
-
|
|
11
|
-
- **Hand** -- pan around the canvas without selecting anything.
|
|
12
|
-
- **Select** -- select and move elements.
|
|
13
|
-
- **Rectangle** -- draw rectangular shapes.
|
|
14
|
-
- **Diamond** -- draw diamond shapes.
|
|
15
|
-
- **Ellipse** -- draw circles and ovals.
|
|
16
|
-
- **Arrow** -- draw arrows to show flow or connections.
|
|
17
|
-
- **Line** -- draw straight lines.
|
|
18
|
-
- **Draw (freehand)** -- draw anything by hand for quick annotations or custom shapes.
|
|
19
|
-
- **Text** -- click anywhere to add labels like "Header", "Hero Image", or "Sign Up Button".
|
|
20
|
-
- **Image** -- insert an image onto the canvas.
|
|
21
|
-
|
|
22
|
-
Pick a tool, draw on the canvas, and switch tools as needed. Zoom ranges from 10% to 300%.
|
|
23
|
-
|
|
24
|
-
## Component Library
|
|
25
|
-
|
|
26
|
-
The canvas comes with a library panel of **pre-made UI wireframe components**:
|
|
27
|
-
|
|
28
|
-
- Buttons, input fields, and form elements.
|
|
29
|
-
- Cards, containers, and navigation bars.
|
|
30
|
-
- Common layout blocks you would find on a typical website.
|
|
31
|
-
|
|
32
|
-
Drag any component from the library onto the canvas to use it. They are meant to be building blocks, so mix and match freely.
|
|
33
|
-
|
|
34
|
-
## Sketching Tips
|
|
35
|
-
|
|
36
|
-
You do not need to be an artist. The AI is good at interpreting rough layouts:
|
|
37
|
-
|
|
38
|
-
- Draw **boxes with text labels** for each section (Header, Hero, Features, Footer).
|
|
39
|
-
- Use **arrows** to show flow or relationships between elements.
|
|
40
|
-
- Indicate approximate **sizing and placement** -- a tall box for a sidebar, a wide box for a hero banner.
|
|
41
|
-
- Rough shapes and simple labels are enough. Pixel-perfect drawings are not necessary.
|
|
42
|
-
|
|
43
|
-
## Attaching Your Drawing
|
|
44
|
-
|
|
45
|
-
When you are happy with your sketch:
|
|
46
|
-
|
|
47
|
-
1. Click **Attach drawing**.
|
|
48
|
-
2. The canvas is exported as an image and added to your message.
|
|
49
|
-
3. The AI uses your wireframe as a visual guide alongside any text you write.
|
|
50
|
-
|
|
51
|
-
## Clearing the Canvas
|
|
52
|
-
|
|
53
|
-
Click the **clear canvas** button to start fresh. A confirmation dialog appears before clearing to prevent accidental loss.
|
|
54
|
-
|
|
55
|
-
Your work is retained while you close and reopen the canvas within the same session, so you can step away and come back to it. It is cleared once you attach the drawing, and it is not persisted across page reloads or navigating away from the site.
|
|
56
|
-
|
|
57
|
-
## Getting the Best Results
|
|
58
|
-
|
|
59
|
-
- **Combine a wireframe with a text description.** Tell the AI what each section should contain and how you want it styled. The wireframe handles layout; the text handles details.
|
|
60
|
-
- **Label everything.** A box labeled "Testimonials" tells the AI much more than an unlabeled rectangle.
|
|
61
|
-
- **Keep it simple.** A few well-placed shapes communicate layout faster than a detailed illustration.
|