@floegence/floe-webapp-init 0.33.3 → 0.33.5
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/skills/floe-webapp/SKILL.md +24 -0
- package/skills/floe-webapp/references/playbooks.md +27 -0
- package/templates/full/skills/floe-webapp/SKILL.md +24 -0
- package/templates/full/skills/floe-webapp/references/playbooks.md +27 -0
- package/templates/minimal/skills/floe-webapp/SKILL.md +24 -0
- package/templates/minimal/skills/floe-webapp/references/playbooks.md +27 -0
package/package.json
CHANGED
|
@@ -42,6 +42,30 @@ pnpm build
|
|
|
42
42
|
- Prefer Solid control flow in JSX (`<For>`, `<Show>`, `<Switch>/<Match>`).
|
|
43
43
|
- If API behavior is unclear, inspect installed type declarations before guessing.
|
|
44
44
|
|
|
45
|
+
## Mobile Compatibility
|
|
46
|
+
|
|
47
|
+
- Treat mobile as first-class behavior, not a fallback.
|
|
48
|
+
- For sidebar components that should not appear on small screens, set `sidebar.hiddenOnMobile: true`.
|
|
49
|
+
- Ensure primary navigation actions remain reachable on small screens (top bar or mobile tab bar paths).
|
|
50
|
+
- Avoid hover-only interactions; provide click/tap equivalent behavior.
|
|
51
|
+
- Avoid fixed-width layouts that can overflow narrow viewports.
|
|
52
|
+
- Keep interactive targets comfortably tappable (buttons, menu items, toggles).
|
|
53
|
+
- Validate behavior at common widths before finishing:
|
|
54
|
+
- Small phone: `390x844`
|
|
55
|
+
- Large phone: `430x932`
|
|
56
|
+
- Tablet: `768x1024`
|
|
57
|
+
- Desktop: `>=1280px`
|
|
58
|
+
|
|
59
|
+
## Styling Guidelines
|
|
60
|
+
|
|
61
|
+
- Use design tokens for color, border, and background (`text-*`, `bg-*`, `border-*` token classes).
|
|
62
|
+
- Avoid raw hex colors and ad-hoc opacity values unless product requirements explicitly demand them.
|
|
63
|
+
- Keep spacing and sizing on a consistent scale (`gap-*`, `p-*`, `m-*`, `rounded-*`).
|
|
64
|
+
- Ensure readable contrast in both light and dark themes.
|
|
65
|
+
- Define clear interactive states for controls (default, hover, active, focus, disabled).
|
|
66
|
+
- Keep motion subtle and optional; avoid animations that block core interaction.
|
|
67
|
+
- When introducing new visual patterns, keep them consistent across pages and components.
|
|
68
|
+
|
|
45
69
|
## Failure Handling
|
|
46
70
|
|
|
47
71
|
- If checks fail, report the exact failing command and first actionable error.
|
|
@@ -57,3 +57,30 @@ If a command fails:
|
|
|
57
57
|
1. Capture the first actionable error.
|
|
58
58
|
2. Fix the nearest root cause.
|
|
59
59
|
3. Re-run from the failed command onward.
|
|
60
|
+
|
|
61
|
+
## Playbook E: Mobile And Styling QA
|
|
62
|
+
|
|
63
|
+
1. Check mobile-related configuration:
|
|
64
|
+
|
|
65
|
+
```bash
|
|
66
|
+
rg "hiddenOnMobile|renderIn|fullScreen|MobileTabBar|sidebar" src --hidden
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
2. Validate responsive behavior manually in browser devtools at:
|
|
70
|
+
- `390x844`
|
|
71
|
+
- `430x932`
|
|
72
|
+
- `768x1024`
|
|
73
|
+
- `>=1280px`
|
|
74
|
+
|
|
75
|
+
3. Check style tokens and prevent hardcoded color drift:
|
|
76
|
+
|
|
77
|
+
```bash
|
|
78
|
+
rg "#[0-9A-Fa-f]{3,8}|rgba\\(|hsla\\(" src --hidden
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
4. Verify interaction behavior on touch-like flows:
|
|
82
|
+
- Navigation still reachable without hover.
|
|
83
|
+
- Buttons, menus, and toggles remain usable on small screens.
|
|
84
|
+
- No clipped text or horizontal overflow in primary views.
|
|
85
|
+
|
|
86
|
+
5. Finalize only after lint/typecheck/test/build pass.
|
|
@@ -42,6 +42,30 @@ pnpm build
|
|
|
42
42
|
- Prefer Solid control flow in JSX (`<For>`, `<Show>`, `<Switch>/<Match>`).
|
|
43
43
|
- If API behavior is unclear, inspect installed type declarations before guessing.
|
|
44
44
|
|
|
45
|
+
## Mobile Compatibility
|
|
46
|
+
|
|
47
|
+
- Treat mobile as first-class behavior, not a fallback.
|
|
48
|
+
- For sidebar components that should not appear on small screens, set `sidebar.hiddenOnMobile: true`.
|
|
49
|
+
- Ensure primary navigation actions remain reachable on small screens (top bar or mobile tab bar paths).
|
|
50
|
+
- Avoid hover-only interactions; provide click/tap equivalent behavior.
|
|
51
|
+
- Avoid fixed-width layouts that can overflow narrow viewports.
|
|
52
|
+
- Keep interactive targets comfortably tappable (buttons, menu items, toggles).
|
|
53
|
+
- Validate behavior at common widths before finishing:
|
|
54
|
+
- Small phone: `390x844`
|
|
55
|
+
- Large phone: `430x932`
|
|
56
|
+
- Tablet: `768x1024`
|
|
57
|
+
- Desktop: `>=1280px`
|
|
58
|
+
|
|
59
|
+
## Styling Guidelines
|
|
60
|
+
|
|
61
|
+
- Use design tokens for color, border, and background (`text-*`, `bg-*`, `border-*` token classes).
|
|
62
|
+
- Avoid raw hex colors and ad-hoc opacity values unless product requirements explicitly demand them.
|
|
63
|
+
- Keep spacing and sizing on a consistent scale (`gap-*`, `p-*`, `m-*`, `rounded-*`).
|
|
64
|
+
- Ensure readable contrast in both light and dark themes.
|
|
65
|
+
- Define clear interactive states for controls (default, hover, active, focus, disabled).
|
|
66
|
+
- Keep motion subtle and optional; avoid animations that block core interaction.
|
|
67
|
+
- When introducing new visual patterns, keep them consistent across pages and components.
|
|
68
|
+
|
|
45
69
|
## Failure Handling
|
|
46
70
|
|
|
47
71
|
- If checks fail, report the exact failing command and first actionable error.
|
|
@@ -57,3 +57,30 @@ If a command fails:
|
|
|
57
57
|
1. Capture the first actionable error.
|
|
58
58
|
2. Fix the nearest root cause.
|
|
59
59
|
3. Re-run from the failed command onward.
|
|
60
|
+
|
|
61
|
+
## Playbook E: Mobile And Styling QA
|
|
62
|
+
|
|
63
|
+
1. Check mobile-related configuration:
|
|
64
|
+
|
|
65
|
+
```bash
|
|
66
|
+
rg "hiddenOnMobile|renderIn|fullScreen|MobileTabBar|sidebar" src --hidden
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
2. Validate responsive behavior manually in browser devtools at:
|
|
70
|
+
- `390x844`
|
|
71
|
+
- `430x932`
|
|
72
|
+
- `768x1024`
|
|
73
|
+
- `>=1280px`
|
|
74
|
+
|
|
75
|
+
3. Check style tokens and prevent hardcoded color drift:
|
|
76
|
+
|
|
77
|
+
```bash
|
|
78
|
+
rg "#[0-9A-Fa-f]{3,8}|rgba\\(|hsla\\(" src --hidden
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
4. Verify interaction behavior on touch-like flows:
|
|
82
|
+
- Navigation still reachable without hover.
|
|
83
|
+
- Buttons, menus, and toggles remain usable on small screens.
|
|
84
|
+
- No clipped text or horizontal overflow in primary views.
|
|
85
|
+
|
|
86
|
+
5. Finalize only after lint/typecheck/test/build pass.
|
|
@@ -42,6 +42,30 @@ pnpm build
|
|
|
42
42
|
- Prefer Solid control flow in JSX (`<For>`, `<Show>`, `<Switch>/<Match>`).
|
|
43
43
|
- If API behavior is unclear, inspect installed type declarations before guessing.
|
|
44
44
|
|
|
45
|
+
## Mobile Compatibility
|
|
46
|
+
|
|
47
|
+
- Treat mobile as first-class behavior, not a fallback.
|
|
48
|
+
- For sidebar components that should not appear on small screens, set `sidebar.hiddenOnMobile: true`.
|
|
49
|
+
- Ensure primary navigation actions remain reachable on small screens (top bar or mobile tab bar paths).
|
|
50
|
+
- Avoid hover-only interactions; provide click/tap equivalent behavior.
|
|
51
|
+
- Avoid fixed-width layouts that can overflow narrow viewports.
|
|
52
|
+
- Keep interactive targets comfortably tappable (buttons, menu items, toggles).
|
|
53
|
+
- Validate behavior at common widths before finishing:
|
|
54
|
+
- Small phone: `390x844`
|
|
55
|
+
- Large phone: `430x932`
|
|
56
|
+
- Tablet: `768x1024`
|
|
57
|
+
- Desktop: `>=1280px`
|
|
58
|
+
|
|
59
|
+
## Styling Guidelines
|
|
60
|
+
|
|
61
|
+
- Use design tokens for color, border, and background (`text-*`, `bg-*`, `border-*` token classes).
|
|
62
|
+
- Avoid raw hex colors and ad-hoc opacity values unless product requirements explicitly demand them.
|
|
63
|
+
- Keep spacing and sizing on a consistent scale (`gap-*`, `p-*`, `m-*`, `rounded-*`).
|
|
64
|
+
- Ensure readable contrast in both light and dark themes.
|
|
65
|
+
- Define clear interactive states for controls (default, hover, active, focus, disabled).
|
|
66
|
+
- Keep motion subtle and optional; avoid animations that block core interaction.
|
|
67
|
+
- When introducing new visual patterns, keep them consistent across pages and components.
|
|
68
|
+
|
|
45
69
|
## Failure Handling
|
|
46
70
|
|
|
47
71
|
- If checks fail, report the exact failing command and first actionable error.
|
|
@@ -57,3 +57,30 @@ If a command fails:
|
|
|
57
57
|
1. Capture the first actionable error.
|
|
58
58
|
2. Fix the nearest root cause.
|
|
59
59
|
3. Re-run from the failed command onward.
|
|
60
|
+
|
|
61
|
+
## Playbook E: Mobile And Styling QA
|
|
62
|
+
|
|
63
|
+
1. Check mobile-related configuration:
|
|
64
|
+
|
|
65
|
+
```bash
|
|
66
|
+
rg "hiddenOnMobile|renderIn|fullScreen|MobileTabBar|sidebar" src --hidden
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
2. Validate responsive behavior manually in browser devtools at:
|
|
70
|
+
- `390x844`
|
|
71
|
+
- `430x932`
|
|
72
|
+
- `768x1024`
|
|
73
|
+
- `>=1280px`
|
|
74
|
+
|
|
75
|
+
3. Check style tokens and prevent hardcoded color drift:
|
|
76
|
+
|
|
77
|
+
```bash
|
|
78
|
+
rg "#[0-9A-Fa-f]{3,8}|rgba\\(|hsla\\(" src --hidden
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
4. Verify interaction behavior on touch-like flows:
|
|
82
|
+
- Navigation still reachable without hover.
|
|
83
|
+
- Buttons, menus, and toggles remain usable on small screens.
|
|
84
|
+
- No clipped text or horizontal overflow in primary views.
|
|
85
|
+
|
|
86
|
+
5. Finalize only after lint/typecheck/test/build pass.
|