@sylphx/flow 2.28.8 → 2.28.10
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/CHANGELOG.md +16 -0
- package/assets/skills/uiux/SKILL.md +17 -12
- package/assets/slash-commands/continue.md +15 -11
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @sylphx/flow
|
|
2
2
|
|
|
3
|
+
## 2.28.10 (2026-01-05)
|
|
4
|
+
|
|
5
|
+
Make Radix UI mandatory - if Radix has it, you MUST use it
|
|
6
|
+
|
|
7
|
+
### 📚 Documentation
|
|
8
|
+
|
|
9
|
+
- make Radix UI mandatory - if Radix has it, MUST use it ([a270d90](https://github.com/SylphxAI/flow/commit/a270d90c3a8c5ccc0caa970ab741281ea37e23f8))
|
|
10
|
+
|
|
11
|
+
## 2.28.9 (2026-01-05)
|
|
12
|
+
|
|
13
|
+
Specify @iconify-icon/react for icons
|
|
14
|
+
|
|
15
|
+
### 📚 Documentation
|
|
16
|
+
|
|
17
|
+
- specify @iconify-icon/react for icons ([8602e04](https://github.com/SylphxAI/flow/commit/8602e040ac8fdc338c51a88c06b39a66f96be0c1))
|
|
18
|
+
|
|
3
19
|
## 2.28.8 (2026-01-05)
|
|
4
20
|
|
|
5
21
|
Switch back to Tailwind CSS, require Turbopack, use Iconify Icon web component
|
|
@@ -10,40 +10,45 @@ description: UI/UX - design system, accessibility. Use when building interfaces.
|
|
|
10
10
|
* **Framework**: Next.js (with Turbopack)
|
|
11
11
|
* **Components**: Radix UI
|
|
12
12
|
* **Styling**: Tailwind CSS
|
|
13
|
-
* **Icons**:
|
|
13
|
+
* **Icons**: @iconify-icon/react
|
|
14
14
|
|
|
15
|
-
## Radix UI Everywhere
|
|
15
|
+
## Radix UI Everywhere (Mandatory)
|
|
16
16
|
|
|
17
|
-
|
|
18
|
-
No custom implementations
|
|
19
|
-
|
|
17
|
+
Radix UI is mandatory. If Radix has a primitive for it, you MUST use it.
|
|
18
|
+
No exceptions. No custom implementations. No alternative libraries.
|
|
19
|
+
|
|
20
|
+
Before building any interactive component, check Radix first.
|
|
21
|
+
If Radix provides it, use Radix. Period.
|
|
20
22
|
|
|
21
23
|
Radix primitives are the SSOT for:
|
|
22
|
-
- Dialogs, modals, sheets
|
|
24
|
+
- Dialogs, modals, sheets, drawers
|
|
23
25
|
- Dropdowns, menus, context menus
|
|
24
26
|
- Popovers, tooltips, hover cards
|
|
25
27
|
- Tabs, accordions, collapsibles
|
|
26
|
-
- Select, combobox, radio, checkbox, switch
|
|
28
|
+
- Select, combobox, radio, checkbox, switch, toggle
|
|
27
29
|
- Sliders, progress, scroll areas
|
|
28
|
-
- Navigation, breadcrumbs
|
|
29
|
-
- Toasts, alerts
|
|
30
|
+
- Navigation menus, breadcrumbs
|
|
31
|
+
- Toasts, alerts, alert dialogs
|
|
30
32
|
- Avatar, aspect ratio, separator
|
|
33
|
+
- Forms, labels, toolbar
|
|
34
|
+
- Toggle groups, toggle buttons
|
|
31
35
|
|
|
32
|
-
|
|
36
|
+
Any custom implementation of something Radix already provides is a bug.
|
|
37
|
+
When similar UI problems arise, solve once with Radix, reuse everywhere.
|
|
33
38
|
|
|
34
39
|
## Non-Negotiables
|
|
35
40
|
|
|
36
41
|
* WCAG AA accessibility compliance
|
|
37
42
|
* Radix UI for all interactive components
|
|
38
43
|
* Tailwind CSS for styling
|
|
39
|
-
*
|
|
44
|
+
* @iconify-icon/react for all icons
|
|
40
45
|
* Responsive design for all viewports
|
|
41
46
|
|
|
42
47
|
## Context
|
|
43
48
|
|
|
44
49
|
UI/UX determines how users perceive and interact with the product. A great UI isn't just "correct" — it's delightful, intuitive, and makes complex tasks feel simple.
|
|
45
50
|
|
|
46
|
-
Radix provides accessible, unstyled primitives. Tailwind provides utility-first styling.
|
|
51
|
+
Radix provides accessible, unstyled primitives. Tailwind provides utility-first styling. @iconify-icon/react provides unified icon access. Together they enable consistent, accessible UI without reinventing components.
|
|
47
52
|
|
|
48
53
|
## Driving Questions
|
|
49
54
|
|
|
@@ -52,25 +52,29 @@ The system must remain:
|
|
|
52
52
|
- Testable
|
|
53
53
|
- Observable
|
|
54
54
|
|
|
55
|
-
## UI: Radix UI Everywhere
|
|
55
|
+
## UI: Radix UI Everywhere (Mandatory)
|
|
56
56
|
|
|
57
|
-
|
|
58
|
-
No custom implementations
|
|
59
|
-
|
|
57
|
+
Radix UI is mandatory. If Radix has a primitive for it, you MUST use it.
|
|
58
|
+
No exceptions. No custom implementations. No alternative libraries.
|
|
59
|
+
|
|
60
|
+
Before building any interactive component, check Radix first.
|
|
61
|
+
If Radix provides it, use Radix. Period.
|
|
60
62
|
|
|
61
63
|
Radix primitives are the SSOT for:
|
|
62
|
-
- Dialogs, modals, sheets
|
|
64
|
+
- Dialogs, modals, sheets, drawers
|
|
63
65
|
- Dropdowns, menus, context menus
|
|
64
66
|
- Popovers, tooltips, hover cards
|
|
65
67
|
- Tabs, accordions, collapsibles
|
|
66
|
-
- Select, combobox, radio, checkbox, switch
|
|
68
|
+
- Select, combobox, radio, checkbox, switch, toggle
|
|
67
69
|
- Sliders, progress, scroll areas
|
|
68
|
-
- Navigation, breadcrumbs
|
|
69
|
-
- Toasts, alerts
|
|
70
|
+
- Navigation menus, breadcrumbs
|
|
71
|
+
- Toasts, alerts, alert dialogs
|
|
70
72
|
- Avatar, aspect ratio, separator
|
|
73
|
+
- Forms, labels, toolbar
|
|
74
|
+
- Toggle groups, toggle buttons
|
|
71
75
|
|
|
72
|
-
|
|
73
|
-
solve
|
|
76
|
+
Any custom implementation of something Radix already provides is a bug.
|
|
77
|
+
When similar UI problems arise, solve once with Radix, reuse everywhere.
|
|
74
78
|
|
|
75
79
|
## Bootstrap: Super Admin
|
|
76
80
|
|
|
@@ -120,7 +124,7 @@ tRPC, Next.js (with Turbopack), Radix UI, next-intl, Drizzle,
|
|
|
120
124
|
Better Auth, Stripe, Upstash, Neon, Vercel,
|
|
121
125
|
Resend (email), Vercel Blob (storage),
|
|
122
126
|
AI SDK with OpenRouter provider,
|
|
123
|
-
Tailwind CSS (styling),
|
|
127
|
+
Tailwind CSS (styling), @iconify-icon/react (icons),
|
|
124
128
|
Bun, Biome, Bun test,
|
|
125
129
|
Responsive Web Design.
|
|
126
130
|
|
package/package.json
CHANGED