@floegence/floe-webapp-init 0.32.0 → 0.33.1
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 +1 -1
- package/templates/full/AGENTS.md +134 -0
- package/templates/full/skills/floe-webapp/SKILL.md +54 -0
- package/templates/full/skills/floe-webapp/references/playbooks.md +59 -0
- package/templates/minimal/AGENTS.md +134 -0
- package/templates/minimal/skills/floe-webapp/SKILL.md +54 -0
- package/templates/minimal/skills/floe-webapp/references/playbooks.md +59 -0
package/package.json
CHANGED
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
# Floe-Webapp AI Coding Skill
|
|
2
|
+
|
|
3
|
+
> Tool-agnostic framework guidance for AI coding tools
|
|
4
|
+
> to generate maintainable floe-webapp applications.
|
|
5
|
+
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
## 0. Open Agent Skill Package
|
|
9
|
+
|
|
10
|
+
This template includes a portable skill package at:
|
|
11
|
+
|
|
12
|
+
- `skills/floe-webapp/SKILL.md`
|
|
13
|
+
- `skills/floe-webapp/references/playbooks.md`
|
|
14
|
+
|
|
15
|
+
The `SKILL.md` format follows the open Agent Skills shape (frontmatter + structured sections).
|
|
16
|
+
Agent runtimes may use different discovery paths, but this project stores the skill in a neutral location for reuse.
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
## 1. Identity & Stack
|
|
21
|
+
|
|
22
|
+
**Floe-Webapp** is a VSCode-style web application framework built on **Solid.js**.
|
|
23
|
+
|
|
24
|
+
Core stack (version source of truth):
|
|
25
|
+
|
|
26
|
+
- Solid.js
|
|
27
|
+
- TypeScript
|
|
28
|
+
- Vite
|
|
29
|
+
- Tailwind CSS v4
|
|
30
|
+
- pnpm
|
|
31
|
+
- `@floegence/floe-webapp-core`
|
|
32
|
+
|
|
33
|
+
Version rule:
|
|
34
|
+
|
|
35
|
+
- **Always** follow versions declared in the target project's `package.json` (and lockfile), not assumptions in generated text.
|
|
36
|
+
|
|
37
|
+
---
|
|
38
|
+
|
|
39
|
+
## 2. Hard Constraints (Must Follow)
|
|
40
|
+
|
|
41
|
+
### Solid.js, not React
|
|
42
|
+
|
|
43
|
+
- Use `createSignal`, `createEffect`, `createMemo` (no React hooks)
|
|
44
|
+
- Use `class=` (no `className=`)
|
|
45
|
+
- Read signals as function calls: `value()`
|
|
46
|
+
- Write signals via setters: `setValue(next)`
|
|
47
|
+
|
|
48
|
+
### Import boundaries
|
|
49
|
+
|
|
50
|
+
- Use public package exports only, such as:
|
|
51
|
+
- `@floegence/floe-webapp-core`
|
|
52
|
+
- `@floegence/floe-webapp-core/app`
|
|
53
|
+
- `@floegence/floe-webapp-core/ui`
|
|
54
|
+
- `@floegence/floe-webapp-core/layout`
|
|
55
|
+
- `@floegence/floe-webapp-core/icons`
|
|
56
|
+
- **Never** import internal source paths like `@floegence/floe-webapp-core/src/...`
|
|
57
|
+
|
|
58
|
+
### Theme consistency
|
|
59
|
+
|
|
60
|
+
- Prefer design-token classes (`text-foreground`, `bg-card`, `border-border`, etc.)
|
|
61
|
+
- Avoid hardcoded colors unless there is a clear product requirement
|
|
62
|
+
|
|
63
|
+
---
|
|
64
|
+
|
|
65
|
+
## 3. App Architecture Essentials
|
|
66
|
+
|
|
67
|
+
### FloeApp shell
|
|
68
|
+
|
|
69
|
+
```tsx
|
|
70
|
+
import type { FloeComponent } from '@floegence/floe-webapp-core';
|
|
71
|
+
import { FloeApp, ActivityAppsMain } from '@floegence/floe-webapp-core/app';
|
|
72
|
+
|
|
73
|
+
const components: FloeComponent[] = [/* ... */];
|
|
74
|
+
|
|
75
|
+
export default function App() {
|
|
76
|
+
return (
|
|
77
|
+
<FloeApp components={components} config={{ layout: { sidebar: { defaultActiveTab: 'home' } } }}>
|
|
78
|
+
<ActivityAppsMain />
|
|
79
|
+
</FloeApp>
|
|
80
|
+
);
|
|
81
|
+
}
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
### FloeComponent registration
|
|
85
|
+
|
|
86
|
+
Key fields (current core API):
|
|
87
|
+
|
|
88
|
+
- `id`, `name`, `component`
|
|
89
|
+
- `sidebar.order`
|
|
90
|
+
- `sidebar.badge`
|
|
91
|
+
- `sidebar.fullScreen`
|
|
92
|
+
- `sidebar.renderIn: 'sidebar' | 'main'`
|
|
93
|
+
- `sidebar.hiddenOnMobile`
|
|
94
|
+
- `commands`, `statusBar`
|
|
95
|
+
- `onMount`, `onUnmount`
|
|
96
|
+
|
|
97
|
+
Design note:
|
|
98
|
+
|
|
99
|
+
- `fullScreen: true` implies main-area behavior.
|
|
100
|
+
- Use `renderIn: 'main'` when you want main-content rendering semantics without relying only on `fullScreen`.
|
|
101
|
+
|
|
102
|
+
---
|
|
103
|
+
|
|
104
|
+
## 4. Coding Guidelines (Priority, Not Absolute Bans)
|
|
105
|
+
|
|
106
|
+
- In JSX lists/branches, **prefer** Solid control flow (`<For>`, `<Show>`, `<Switch>/<Match>`) for consistency.
|
|
107
|
+
- `.map()` / ternary are still valid for pure data transforms outside JSX rendering decisions.
|
|
108
|
+
- For reactive component props, **prefer** `splitProps()` or `props.x` access patterns.
|
|
109
|
+
- Keep commands and sidebar behavior aligned: command navigation should target registered component ids.
|
|
110
|
+
|
|
111
|
+
---
|
|
112
|
+
|
|
113
|
+
## 5. Practical Import Map
|
|
114
|
+
|
|
115
|
+
```ts
|
|
116
|
+
import { FloeApp, ActivityAppsMain } from '@floegence/floe-webapp-core/app';
|
|
117
|
+
import { Button, Card, Dialog, Input, Tabs } from '@floegence/floe-webapp-core/ui';
|
|
118
|
+
import { Shell, Sidebar, Panel, KeepAliveStack } from '@floegence/floe-webapp-core/layout';
|
|
119
|
+
import { Files, Settings, Sun, Moon } from '@floegence/floe-webapp-core/icons';
|
|
120
|
+
import { useTheme, useFloeConfig, cn, type FloeComponent } from '@floegence/floe-webapp-core';
|
|
121
|
+
import '@floegence/floe-webapp-core/tailwind';
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
---
|
|
125
|
+
|
|
126
|
+
## 6. Delivery Checklist
|
|
127
|
+
|
|
128
|
+
Before finalizing generated code:
|
|
129
|
+
|
|
130
|
+
1. Confirm imports use only public subpath exports.
|
|
131
|
+
2. Confirm Solid patterns are used (`class`, signals, control flow where appropriate).
|
|
132
|
+
3. Confirm theme tokens are used for color/background/border.
|
|
133
|
+
4. Confirm `FloeComponent` ids, sidebar behavior, and command navigation are consistent.
|
|
134
|
+
5. Confirm any API usage matches the installed package versions in `package.json`.
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: floe-webapp
|
|
3
|
+
description: Implement, refactor, and debug Floe-Webapp Solid.js applications with @floegence/floe-webapp-core public exports. Use for FloeApp shell wiring, FloeComponent sidebar or command registration, lifecycle hooks, design-token-first styling, and build or typecheck failures in Floe-Webapp projects.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Floe-Webapp Skill
|
|
7
|
+
|
|
8
|
+
## Scope
|
|
9
|
+
|
|
10
|
+
- Implement or refactor pages/components in a Floe-Webapp app.
|
|
11
|
+
- Add or update `FloeComponent` registration (`sidebar`, `commands`, lifecycle hooks).
|
|
12
|
+
- Diagnose framework-usage issues and local build/lint/typecheck/test failures.
|
|
13
|
+
|
|
14
|
+
## Required Inputs
|
|
15
|
+
|
|
16
|
+
- Read project-root `AGENTS.md` before editing code.
|
|
17
|
+
- Load [references/playbooks.md](references/playbooks.md) and pick the closest playbook for the task.
|
|
18
|
+
|
|
19
|
+
## Execution Protocol
|
|
20
|
+
|
|
21
|
+
1. Verify package versions in `package.json` and lockfile before using any API surface.
|
|
22
|
+
2. Locate entry points and registration flow (`src/App.tsx`, component modules, command handlers).
|
|
23
|
+
3. Implement using only public exports from `@floegence/floe-webapp-core` (`/app`, `/ui`, `/layout`, `/icons`, root).
|
|
24
|
+
4. Align `FloeComponent.id`, sidebar items, and command navigation targets.
|
|
25
|
+
5. Keep styling on design tokens (`text-foreground`, `bg-card`, `border-border`, etc.).
|
|
26
|
+
6. Run deterministic checks before finishing:
|
|
27
|
+
|
|
28
|
+
```bash
|
|
29
|
+
pnpm lint
|
|
30
|
+
pnpm typecheck
|
|
31
|
+
pnpm test -- --run
|
|
32
|
+
pnpm build
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Constraints
|
|
36
|
+
|
|
37
|
+
- Solid.js only: do not use React hooks/patterns.
|
|
38
|
+
- Use `class=` in JSX, not `className=`.
|
|
39
|
+
- Do not import `@floegence/floe-webapp-core/src/...` internal paths.
|
|
40
|
+
- Keep command navigation ids aligned with registered component ids.
|
|
41
|
+
- Prefer Solid control flow in JSX (`<For>`, `<Show>`, `<Switch>/<Match>`).
|
|
42
|
+
- If API behavior is unclear, inspect installed type declarations before guessing.
|
|
43
|
+
|
|
44
|
+
## Failure Handling
|
|
45
|
+
|
|
46
|
+
- If checks fail, report the exact failing command and first actionable error.
|
|
47
|
+
- Fix root causes instead of adding compatibility shims for old code paths.
|
|
48
|
+
- If task requires risky incompatible behavior change, stop and ask for confirmation.
|
|
49
|
+
|
|
50
|
+
## Output Format
|
|
51
|
+
|
|
52
|
+
1. Brief summary of intent and implementation.
|
|
53
|
+
2. Changed files with behavior impact.
|
|
54
|
+
3. Verification result for each executed command.
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
# Floe-Webapp Skill Playbooks
|
|
2
|
+
|
|
3
|
+
Use this file after reading `../SKILL.md`.
|
|
4
|
+
|
|
5
|
+
## Playbook A: Add Or Update A FloeComponent
|
|
6
|
+
|
|
7
|
+
1. Find the registration list:
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
rg "const components|FloeComponent\\[]" src --hidden
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
2. Keep every component entry aligned:
|
|
14
|
+
- Stable `id` string.
|
|
15
|
+
- `sidebar` metadata (`order`, `renderIn`, `fullScreen`, optional `badge`).
|
|
16
|
+
- `commands` targets using the same `id`.
|
|
17
|
+
|
|
18
|
+
3. Validate shell wiring still renders through:
|
|
19
|
+
- `FloeApp`
|
|
20
|
+
- `ActivityAppsMain`
|
|
21
|
+
|
|
22
|
+
## Playbook B: Add Command Navigation
|
|
23
|
+
|
|
24
|
+
1. Search command contribution points:
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
rg "commands|useCommand|command" src --hidden
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
2. Ensure each command action targets a registered component id.
|
|
31
|
+
3. Keep labels, ids, and sidebar destination consistent.
|
|
32
|
+
|
|
33
|
+
## Playbook C: Implement UI With Public Exports
|
|
34
|
+
|
|
35
|
+
Allowed imports:
|
|
36
|
+
- `@floegence/floe-webapp-core`
|
|
37
|
+
- `@floegence/floe-webapp-core/app`
|
|
38
|
+
- `@floegence/floe-webapp-core/ui`
|
|
39
|
+
- `@floegence/floe-webapp-core/layout`
|
|
40
|
+
- `@floegence/floe-webapp-core/icons`
|
|
41
|
+
|
|
42
|
+
Forbidden:
|
|
43
|
+
- `@floegence/floe-webapp-core/src/...`
|
|
44
|
+
|
|
45
|
+
## Playbook D: Verify And Diagnose
|
|
46
|
+
|
|
47
|
+
Run:
|
|
48
|
+
|
|
49
|
+
```bash
|
|
50
|
+
pnpm lint
|
|
51
|
+
pnpm typecheck
|
|
52
|
+
pnpm test -- --run
|
|
53
|
+
pnpm build
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
If a command fails:
|
|
57
|
+
1. Capture the first actionable error.
|
|
58
|
+
2. Fix the nearest root cause.
|
|
59
|
+
3. Re-run from the failed command onward.
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
# Floe-Webapp AI Coding Skill
|
|
2
|
+
|
|
3
|
+
> Tool-agnostic framework guidance for AI coding tools
|
|
4
|
+
> to generate maintainable floe-webapp applications.
|
|
5
|
+
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
## 0. Open Agent Skill Package
|
|
9
|
+
|
|
10
|
+
This template includes a portable skill package at:
|
|
11
|
+
|
|
12
|
+
- `skills/floe-webapp/SKILL.md`
|
|
13
|
+
- `skills/floe-webapp/references/playbooks.md`
|
|
14
|
+
|
|
15
|
+
The `SKILL.md` format follows the open Agent Skills shape (frontmatter + structured sections).
|
|
16
|
+
Agent runtimes may use different discovery paths, but this project stores the skill in a neutral location for reuse.
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
## 1. Identity & Stack
|
|
21
|
+
|
|
22
|
+
**Floe-Webapp** is a VSCode-style web application framework built on **Solid.js**.
|
|
23
|
+
|
|
24
|
+
Core stack (version source of truth):
|
|
25
|
+
|
|
26
|
+
- Solid.js
|
|
27
|
+
- TypeScript
|
|
28
|
+
- Vite
|
|
29
|
+
- Tailwind CSS v4
|
|
30
|
+
- pnpm
|
|
31
|
+
- `@floegence/floe-webapp-core`
|
|
32
|
+
|
|
33
|
+
Version rule:
|
|
34
|
+
|
|
35
|
+
- **Always** follow versions declared in the target project's `package.json` (and lockfile), not assumptions in generated text.
|
|
36
|
+
|
|
37
|
+
---
|
|
38
|
+
|
|
39
|
+
## 2. Hard Constraints (Must Follow)
|
|
40
|
+
|
|
41
|
+
### Solid.js, not React
|
|
42
|
+
|
|
43
|
+
- Use `createSignal`, `createEffect`, `createMemo` (no React hooks)
|
|
44
|
+
- Use `class=` (no `className=`)
|
|
45
|
+
- Read signals as function calls: `value()`
|
|
46
|
+
- Write signals via setters: `setValue(next)`
|
|
47
|
+
|
|
48
|
+
### Import boundaries
|
|
49
|
+
|
|
50
|
+
- Use public package exports only, such as:
|
|
51
|
+
- `@floegence/floe-webapp-core`
|
|
52
|
+
- `@floegence/floe-webapp-core/app`
|
|
53
|
+
- `@floegence/floe-webapp-core/ui`
|
|
54
|
+
- `@floegence/floe-webapp-core/layout`
|
|
55
|
+
- `@floegence/floe-webapp-core/icons`
|
|
56
|
+
- **Never** import internal source paths like `@floegence/floe-webapp-core/src/...`
|
|
57
|
+
|
|
58
|
+
### Theme consistency
|
|
59
|
+
|
|
60
|
+
- Prefer design-token classes (`text-foreground`, `bg-card`, `border-border`, etc.)
|
|
61
|
+
- Avoid hardcoded colors unless there is a clear product requirement
|
|
62
|
+
|
|
63
|
+
---
|
|
64
|
+
|
|
65
|
+
## 3. App Architecture Essentials
|
|
66
|
+
|
|
67
|
+
### FloeApp shell
|
|
68
|
+
|
|
69
|
+
```tsx
|
|
70
|
+
import type { FloeComponent } from '@floegence/floe-webapp-core';
|
|
71
|
+
import { FloeApp, ActivityAppsMain } from '@floegence/floe-webapp-core/app';
|
|
72
|
+
|
|
73
|
+
const components: FloeComponent[] = [/* ... */];
|
|
74
|
+
|
|
75
|
+
export default function App() {
|
|
76
|
+
return (
|
|
77
|
+
<FloeApp components={components} config={{ layout: { sidebar: { defaultActiveTab: 'home' } } }}>
|
|
78
|
+
<ActivityAppsMain />
|
|
79
|
+
</FloeApp>
|
|
80
|
+
);
|
|
81
|
+
}
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
### FloeComponent registration
|
|
85
|
+
|
|
86
|
+
Key fields (current core API):
|
|
87
|
+
|
|
88
|
+
- `id`, `name`, `component`
|
|
89
|
+
- `sidebar.order`
|
|
90
|
+
- `sidebar.badge`
|
|
91
|
+
- `sidebar.fullScreen`
|
|
92
|
+
- `sidebar.renderIn: 'sidebar' | 'main'`
|
|
93
|
+
- `sidebar.hiddenOnMobile`
|
|
94
|
+
- `commands`, `statusBar`
|
|
95
|
+
- `onMount`, `onUnmount`
|
|
96
|
+
|
|
97
|
+
Design note:
|
|
98
|
+
|
|
99
|
+
- `fullScreen: true` implies main-area behavior.
|
|
100
|
+
- Use `renderIn: 'main'` when you want main-content rendering semantics without relying only on `fullScreen`.
|
|
101
|
+
|
|
102
|
+
---
|
|
103
|
+
|
|
104
|
+
## 4. Coding Guidelines (Priority, Not Absolute Bans)
|
|
105
|
+
|
|
106
|
+
- In JSX lists/branches, **prefer** Solid control flow (`<For>`, `<Show>`, `<Switch>/<Match>`) for consistency.
|
|
107
|
+
- `.map()` / ternary are still valid for pure data transforms outside JSX rendering decisions.
|
|
108
|
+
- For reactive component props, **prefer** `splitProps()` or `props.x` access patterns.
|
|
109
|
+
- Keep commands and sidebar behavior aligned: command navigation should target registered component ids.
|
|
110
|
+
|
|
111
|
+
---
|
|
112
|
+
|
|
113
|
+
## 5. Practical Import Map
|
|
114
|
+
|
|
115
|
+
```ts
|
|
116
|
+
import { FloeApp, ActivityAppsMain } from '@floegence/floe-webapp-core/app';
|
|
117
|
+
import { Button, Card, Dialog, Input, Tabs } from '@floegence/floe-webapp-core/ui';
|
|
118
|
+
import { Shell, Sidebar, Panel, KeepAliveStack } from '@floegence/floe-webapp-core/layout';
|
|
119
|
+
import { Files, Settings, Sun, Moon } from '@floegence/floe-webapp-core/icons';
|
|
120
|
+
import { useTheme, useFloeConfig, cn, type FloeComponent } from '@floegence/floe-webapp-core';
|
|
121
|
+
import '@floegence/floe-webapp-core/tailwind';
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
---
|
|
125
|
+
|
|
126
|
+
## 6. Delivery Checklist
|
|
127
|
+
|
|
128
|
+
Before finalizing generated code:
|
|
129
|
+
|
|
130
|
+
1. Confirm imports use only public subpath exports.
|
|
131
|
+
2. Confirm Solid patterns are used (`class`, signals, control flow where appropriate).
|
|
132
|
+
3. Confirm theme tokens are used for color/background/border.
|
|
133
|
+
4. Confirm `FloeComponent` ids, sidebar behavior, and command navigation are consistent.
|
|
134
|
+
5. Confirm any API usage matches the installed package versions in `package.json`.
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: floe-webapp
|
|
3
|
+
description: Implement, refactor, and debug Floe-Webapp Solid.js applications with @floegence/floe-webapp-core public exports. Use for FloeApp shell wiring, FloeComponent sidebar or command registration, lifecycle hooks, design-token-first styling, and build or typecheck failures in Floe-Webapp projects.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Floe-Webapp Skill
|
|
7
|
+
|
|
8
|
+
## Scope
|
|
9
|
+
|
|
10
|
+
- Implement or refactor pages/components in a Floe-Webapp app.
|
|
11
|
+
- Add or update `FloeComponent` registration (`sidebar`, `commands`, lifecycle hooks).
|
|
12
|
+
- Diagnose framework-usage issues and local build/lint/typecheck/test failures.
|
|
13
|
+
|
|
14
|
+
## Required Inputs
|
|
15
|
+
|
|
16
|
+
- Read project-root `AGENTS.md` before editing code.
|
|
17
|
+
- Load [references/playbooks.md](references/playbooks.md) and pick the closest playbook for the task.
|
|
18
|
+
|
|
19
|
+
## Execution Protocol
|
|
20
|
+
|
|
21
|
+
1. Verify package versions in `package.json` and lockfile before using any API surface.
|
|
22
|
+
2. Locate entry points and registration flow (`src/App.tsx`, component modules, command handlers).
|
|
23
|
+
3. Implement using only public exports from `@floegence/floe-webapp-core` (`/app`, `/ui`, `/layout`, `/icons`, root).
|
|
24
|
+
4. Align `FloeComponent.id`, sidebar items, and command navigation targets.
|
|
25
|
+
5. Keep styling on design tokens (`text-foreground`, `bg-card`, `border-border`, etc.).
|
|
26
|
+
6. Run deterministic checks before finishing:
|
|
27
|
+
|
|
28
|
+
```bash
|
|
29
|
+
pnpm lint
|
|
30
|
+
pnpm typecheck
|
|
31
|
+
pnpm test -- --run
|
|
32
|
+
pnpm build
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Constraints
|
|
36
|
+
|
|
37
|
+
- Solid.js only: do not use React hooks/patterns.
|
|
38
|
+
- Use `class=` in JSX, not `className=`.
|
|
39
|
+
- Do not import `@floegence/floe-webapp-core/src/...` internal paths.
|
|
40
|
+
- Keep command navigation ids aligned with registered component ids.
|
|
41
|
+
- Prefer Solid control flow in JSX (`<For>`, `<Show>`, `<Switch>/<Match>`).
|
|
42
|
+
- If API behavior is unclear, inspect installed type declarations before guessing.
|
|
43
|
+
|
|
44
|
+
## Failure Handling
|
|
45
|
+
|
|
46
|
+
- If checks fail, report the exact failing command and first actionable error.
|
|
47
|
+
- Fix root causes instead of adding compatibility shims for old code paths.
|
|
48
|
+
- If task requires risky incompatible behavior change, stop and ask for confirmation.
|
|
49
|
+
|
|
50
|
+
## Output Format
|
|
51
|
+
|
|
52
|
+
1. Brief summary of intent and implementation.
|
|
53
|
+
2. Changed files with behavior impact.
|
|
54
|
+
3. Verification result for each executed command.
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
# Floe-Webapp Skill Playbooks
|
|
2
|
+
|
|
3
|
+
Use this file after reading `../SKILL.md`.
|
|
4
|
+
|
|
5
|
+
## Playbook A: Add Or Update A FloeComponent
|
|
6
|
+
|
|
7
|
+
1. Find the registration list:
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
rg "const components|FloeComponent\\[]" src --hidden
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
2. Keep every component entry aligned:
|
|
14
|
+
- Stable `id` string.
|
|
15
|
+
- `sidebar` metadata (`order`, `renderIn`, `fullScreen`, optional `badge`).
|
|
16
|
+
- `commands` targets using the same `id`.
|
|
17
|
+
|
|
18
|
+
3. Validate shell wiring still renders through:
|
|
19
|
+
- `FloeApp`
|
|
20
|
+
- `ActivityAppsMain`
|
|
21
|
+
|
|
22
|
+
## Playbook B: Add Command Navigation
|
|
23
|
+
|
|
24
|
+
1. Search command contribution points:
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
rg "commands|useCommand|command" src --hidden
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
2. Ensure each command action targets a registered component id.
|
|
31
|
+
3. Keep labels, ids, and sidebar destination consistent.
|
|
32
|
+
|
|
33
|
+
## Playbook C: Implement UI With Public Exports
|
|
34
|
+
|
|
35
|
+
Allowed imports:
|
|
36
|
+
- `@floegence/floe-webapp-core`
|
|
37
|
+
- `@floegence/floe-webapp-core/app`
|
|
38
|
+
- `@floegence/floe-webapp-core/ui`
|
|
39
|
+
- `@floegence/floe-webapp-core/layout`
|
|
40
|
+
- `@floegence/floe-webapp-core/icons`
|
|
41
|
+
|
|
42
|
+
Forbidden:
|
|
43
|
+
- `@floegence/floe-webapp-core/src/...`
|
|
44
|
+
|
|
45
|
+
## Playbook D: Verify And Diagnose
|
|
46
|
+
|
|
47
|
+
Run:
|
|
48
|
+
|
|
49
|
+
```bash
|
|
50
|
+
pnpm lint
|
|
51
|
+
pnpm typecheck
|
|
52
|
+
pnpm test -- --run
|
|
53
|
+
pnpm build
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
If a command fails:
|
|
57
|
+
1. Capture the first actionable error.
|
|
58
|
+
2. Fix the nearest root cause.
|
|
59
|
+
3. Re-run from the failed command onward.
|