@floegence/floe-webapp-init 0.32.0 → 0.33.0

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.
Files changed (6) hide show
  1. package/dist/index.mjs +1 -1
  2. package/package.json +1 -1
  3. package/templates/full/AGENTS.md +122 -0
  4. package/templates/full/_claude/commands/floe-webapp.md +24 -0
  5. package/templates/minimal/AGENTS.md +122 -0
  6. package/templates/minimal/_claude/commands/floe-webapp.md +24 -0
package/dist/index.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  #!/usr/bin/env node
2
- import t from"node:fs";import a from"node:path";import{fileURLToPath as d}from"node:url";import y from"prompts";import{red as c,bold as g,cyan as f,green as x}from"kolorist";const h=[{name:"minimal",value:"minimal",description:"Basic setup with FloeApp"},{name:"full",value:"full",description:"Full setup with sample pages"}],v={"_package.json":"package.json",_gitignore:".gitignore","_env.example":".env.example"};async function S(){console.log(`
2
+ import t from"node:fs";import a from"node:path";import{fileURLToPath as d}from"node:url";import y from"prompts";import{red as c,bold as g,cyan as f,green as x}from"kolorist";const h=[{name:"minimal",value:"minimal",description:"Basic setup with FloeApp"},{name:"full",value:"full",description:"Full setup with sample pages"}],v={"_package.json":"package.json",_gitignore:".gitignore","_env.example":".env.example",_claude:".claude"};async function S(){console.log(`
3
3
  ${g(f("Floe Webapp"))}
4
4
  `);const n=process.argv.slice(2);let o=n[0],l;(n.includes("--help")||n.includes("-h"))&&(console.log(`Usage: npx @floegence/floe-webapp-init [project-name] [options]
5
5
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@floegence/floe-webapp-init",
3
- "version": "0.32.0",
3
+ "version": "0.33.0",
4
4
  "type": "module",
5
5
  "description": "Scaffolding tool for Floe Webapp applications",
6
6
  "repository": {
package/templates/full/AGENTS.md ADDED
@@ -0,0 +1,122 @@
1
+ # Floe-Webapp AI Coding Skill
2
+
3
+ > Tool-agnostic framework guidance for AI coding tools (Claude Code, Codex, Cursor, Copilot, etc.)
4
+ > to generate maintainable floe-webapp applications.
5
+
6
+ ---
7
+
8
+ ## 1. Identity & Stack
9
+
10
+ **Floe-Webapp** is a VSCode-style web application framework built on **Solid.js**.
11
+
12
+ Core stack (version source of truth):
13
+
14
+ - Solid.js
15
+ - TypeScript
16
+ - Vite
17
+ - Tailwind CSS v4
18
+ - pnpm
19
+ - `@floegence/floe-webapp-core`
20
+
21
+ Version rule:
22
+
23
+ - **Always** follow versions declared in the target project's `package.json` (and lockfile), not assumptions in generated text.
24
+
25
+ ---
26
+
27
+ ## 2. Hard Constraints (Must Follow)
28
+
29
+ ### Solid.js, not React
30
+
31
+ - Use `createSignal`, `createEffect`, `createMemo` (no React hooks)
32
+ - Use `class=` (no `className=`)
33
+ - Read signals as function calls: `value()`
34
+ - Write signals via setters: `setValue(next)`
35
+
36
+ ### Import boundaries
37
+
38
+ - Use public package exports only, such as:
39
+ - `@floegence/floe-webapp-core`
40
+ - `@floegence/floe-webapp-core/app`
41
+ - `@floegence/floe-webapp-core/ui`
42
+ - `@floegence/floe-webapp-core/layout`
43
+ - `@floegence/floe-webapp-core/icons`
44
+ - **Never** import internal source paths like `@floegence/floe-webapp-core/src/...`
45
+
46
+ ### Theme consistency
47
+
48
+ - Prefer design-token classes (`text-foreground`, `bg-card`, `border-border`, etc.)
49
+ - Avoid hardcoded colors unless there is a clear product requirement
50
+
51
+ ---
52
+
53
+ ## 3. App Architecture Essentials
54
+
55
+ ### FloeApp shell
56
+
57
+ ```tsx
58
+ import type { FloeComponent } from '@floegence/floe-webapp-core';
59
+ import { FloeApp, ActivityAppsMain } from '@floegence/floe-webapp-core/app';
60
+
61
+ const components: FloeComponent[] = [/* ... */];
62
+
63
+ export default function App() {
64
+ return (
65
+ <FloeApp components={components} config={{ layout: { sidebar: { defaultActiveTab: 'home' } } }}>
66
+ <ActivityAppsMain />
67
+ </FloeApp>
68
+ );
69
+ }
70
+ ```
71
+
72
+ ### FloeComponent registration
73
+
74
+ Key fields (current core API):
75
+
76
+ - `id`, `name`, `component`
77
+ - `sidebar.order`
78
+ - `sidebar.badge`
79
+ - `sidebar.fullScreen`
80
+ - `sidebar.renderIn: 'sidebar' | 'main'`
81
+ - `sidebar.hiddenOnMobile`
82
+ - `commands`, `statusBar`
83
+ - `onMount`, `onUnmount`
84
+
85
+ Design note:
86
+
87
+ - `fullScreen: true` implies main-area behavior.
88
+ - Use `renderIn: 'main'` when you want main-content rendering semantics without relying only on `fullScreen`.
89
+
90
+ ---
91
+
92
+ ## 4. Coding Guidelines (Priority, Not Absolute Bans)
93
+
94
+ - In JSX lists/branches, **prefer** Solid control flow (`<For>`, `<Show>`, `<Switch>/<Match>`) for consistency.
95
+ - `.map()` / ternary are still valid for pure data transforms outside JSX rendering decisions.
96
+ - For reactive component props, **prefer** `splitProps()` or `props.x` access patterns.
97
+ - Keep commands and sidebar behavior aligned: command navigation should target registered component ids.
98
+
99
+ ---
100
+
101
+ ## 5. Practical Import Map
102
+
103
+ ```ts
104
+ import { FloeApp, ActivityAppsMain } from '@floegence/floe-webapp-core/app';
105
+ import { Button, Card, Dialog, Input, Tabs } from '@floegence/floe-webapp-core/ui';
106
+ import { Shell, Sidebar, Panel, KeepAliveStack } from '@floegence/floe-webapp-core/layout';
107
+ import { Files, Settings, Sun, Moon } from '@floegence/floe-webapp-core/icons';
108
+ import { useTheme, useFloeConfig, cn, type FloeComponent } from '@floegence/floe-webapp-core';
109
+ import '@floegence/floe-webapp-core/tailwind';
110
+ ```
111
+
112
+ ---
113
+
114
+ ## 6. Delivery Checklist
115
+
116
+ Before finalizing generated code:
117
+
118
+ 1. Confirm imports use only public subpath exports.
119
+ 2. Confirm Solid patterns are used (`class`, signals, control flow where appropriate).
120
+ 3. Confirm theme tokens are used for color/background/border.
121
+ 4. Confirm `FloeComponent` ids, sidebar behavior, and command navigation are consistent.
122
+ 5. Confirm any API usage matches the installed package versions in `package.json`.
package/templates/full/_claude/commands/floe-webapp.md ADDED
@@ -0,0 +1,24 @@
1
+ # Floe-Webapp Coding Skill
2
+
3
+ Load the floe-webapp coding skill and apply it to implementation tasks.
4
+
5
+ ## Instructions
6
+
7
+ 1. Read `AGENTS.md` at the project root first.
8
+ 2. Treat `AGENTS.md` as tool-agnostic framework guidance.
9
+ 3. Use the current project's `package.json`/lockfile as the version source of truth.
10
+ 4. Follow hard constraints first:
11
+ - Solid.js patterns (not React)
12
+ - public subpath imports only
13
+ - design-token-first styling
14
+ 5. Then apply the recommended coding priorities in `AGENTS.md`.
15
+
16
+ ## Quick Start
17
+
18
+ When implementing a floe-webapp feature:
19
+
20
+ 1. Read `AGENTS.md`.
21
+ 2. Build with `@floegence/floe-webapp-core` public exports (`/app`, `/ui`, `/layout`, `/icons`, root).
22
+ 3. Register features as `FloeComponent` and align `sidebar` + `commands` behavior.
23
+ 4. Keep styles token-based (`text-foreground`, `bg-card`, `border-border`, etc.).
24
+ 5. Validate API usage against installed dependency versions.
package/templates/minimal/AGENTS.md ADDED
@@ -0,0 +1,122 @@
1
+ # Floe-Webapp AI Coding Skill
2
+
3
+ > Tool-agnostic framework guidance for AI coding tools (Claude Code, Codex, Cursor, Copilot, etc.)
4
+ > to generate maintainable floe-webapp applications.
5
+
6
+ ---
7
+
8
+ ## 1. Identity & Stack
9
+
10
+ **Floe-Webapp** is a VSCode-style web application framework built on **Solid.js**.
11
+
12
+ Core stack (version source of truth):
13
+
14
+ - Solid.js
15
+ - TypeScript
16
+ - Vite
17
+ - Tailwind CSS v4
18
+ - pnpm
19
+ - `@floegence/floe-webapp-core`
20
+
21
+ Version rule:
22
+
23
+ - **Always** follow versions declared in the target project's `package.json` (and lockfile), not assumptions in generated text.
24
+
25
+ ---
26
+
27
+ ## 2. Hard Constraints (Must Follow)
28
+
29
+ ### Solid.js, not React
30
+
31
+ - Use `createSignal`, `createEffect`, `createMemo` (no React hooks)
32
+ - Use `class=` (no `className=`)
33
+ - Read signals as function calls: `value()`
34
+ - Write signals via setters: `setValue(next)`
35
+
36
+ ### Import boundaries
37
+
38
+ - Use public package exports only, such as:
39
+ - `@floegence/floe-webapp-core`
40
+ - `@floegence/floe-webapp-core/app`
41
+ - `@floegence/floe-webapp-core/ui`
42
+ - `@floegence/floe-webapp-core/layout`
43
+ - `@floegence/floe-webapp-core/icons`
44
+ - **Never** import internal source paths like `@floegence/floe-webapp-core/src/...`
45
+
46
+ ### Theme consistency
47
+
48
+ - Prefer design-token classes (`text-foreground`, `bg-card`, `border-border`, etc.)
49
+ - Avoid hardcoded colors unless there is a clear product requirement
50
+
51
+ ---
52
+
53
+ ## 3. App Architecture Essentials
54
+
55
+ ### FloeApp shell
56
+
57
+ ```tsx
58
+ import type { FloeComponent } from '@floegence/floe-webapp-core';
59
+ import { FloeApp, ActivityAppsMain } from '@floegence/floe-webapp-core/app';
60
+
61
+ const components: FloeComponent[] = [/* ... */];
62
+
63
+ export default function App() {
64
+ return (
65
+ <FloeApp components={components} config={{ layout: { sidebar: { defaultActiveTab: 'home' } } }}>
66
+ <ActivityAppsMain />
67
+ </FloeApp>
68
+ );
69
+ }
70
+ ```
71
+
72
+ ### FloeComponent registration
73
+
74
+ Key fields (current core API):
75
+
76
+ - `id`, `name`, `component`
77
+ - `sidebar.order`
78
+ - `sidebar.badge`
79
+ - `sidebar.fullScreen`
80
+ - `sidebar.renderIn: 'sidebar' | 'main'`
81
+ - `sidebar.hiddenOnMobile`
82
+ - `commands`, `statusBar`
83
+ - `onMount`, `onUnmount`
84
+
85
+ Design note:
86
+
87
+ - `fullScreen: true` implies main-area behavior.
88
+ - Use `renderIn: 'main'` when you want main-content rendering semantics without relying only on `fullScreen`.
89
+
90
+ ---
91
+
92
+ ## 4. Coding Guidelines (Priority, Not Absolute Bans)
93
+
94
+ - In JSX lists/branches, **prefer** Solid control flow (`<For>`, `<Show>`, `<Switch>/<Match>`) for consistency.
95
+ - `.map()` / ternary are still valid for pure data transforms outside JSX rendering decisions.
96
+ - For reactive component props, **prefer** `splitProps()` or `props.x` access patterns.
97
+ - Keep commands and sidebar behavior aligned: command navigation should target registered component ids.
98
+
99
+ ---
100
+
101
+ ## 5. Practical Import Map
102
+
103
+ ```ts
104
+ import { FloeApp, ActivityAppsMain } from '@floegence/floe-webapp-core/app';
105
+ import { Button, Card, Dialog, Input, Tabs } from '@floegence/floe-webapp-core/ui';
106
+ import { Shell, Sidebar, Panel, KeepAliveStack } from '@floegence/floe-webapp-core/layout';
107
+ import { Files, Settings, Sun, Moon } from '@floegence/floe-webapp-core/icons';
108
+ import { useTheme, useFloeConfig, cn, type FloeComponent } from '@floegence/floe-webapp-core';
109
+ import '@floegence/floe-webapp-core/tailwind';
110
+ ```
111
+
112
+ ---
113
+
114
+ ## 6. Delivery Checklist
115
+
116
+ Before finalizing generated code:
117
+
118
+ 1. Confirm imports use only public subpath exports.
119
+ 2. Confirm Solid patterns are used (`class`, signals, control flow where appropriate).
120
+ 3. Confirm theme tokens are used for color/background/border.
121
+ 4. Confirm `FloeComponent` ids, sidebar behavior, and command navigation are consistent.
122
+ 5. Confirm any API usage matches the installed package versions in `package.json`.
package/templates/minimal/_claude/commands/floe-webapp.md ADDED
@@ -0,0 +1,24 @@
1
+ # Floe-Webapp Coding Skill
2
+
3
+ Load the floe-webapp coding skill and apply it to implementation tasks.
4
+
5
+ ## Instructions
6
+
7
+ 1. Read `AGENTS.md` at the project root first.
8
+ 2. Treat `AGENTS.md` as tool-agnostic framework guidance.
9
+ 3. Use the current project's `package.json`/lockfile as the version source of truth.
10
+ 4. Follow hard constraints first:
11
+ - Solid.js patterns (not React)
12
+ - public subpath imports only
13
+ - design-token-first styling
14
+ 5. Then apply the recommended coding priorities in `AGENTS.md`.
15
+
16
+ ## Quick Start
17
+
18
+ When implementing a floe-webapp feature:
19
+
20
+ 1. Read `AGENTS.md`.
21
+ 2. Build with `@floegence/floe-webapp-core` public exports (`/app`, `/ui`, `/layout`, `/icons`, root).
22
+ 3. Register features as `FloeComponent` and align `sidebar` + `commands` behavior.
23
+ 4. Keep styles token-based (`text-foreground`, `bg-card`, `border-border`, etc.).
24
+ 5. Validate API usage against installed dependency versions.