fluxwing-component-expander

Name: fluxwing-component-expander
Author: trabian

18stars1forks

How to install fluxwing-component-expander?

trabian/fluxwing-skills/fluxwing-component-expander

$npx -y skills add trabian/fluxwing-skills --skill fluxwing-component-expander

Installs into the current project.

Summary

Add interaction states like hover, focus, disabled, active, error to existing uxscii components. Use when working with .uxm files, when user wants to expand, enhance, or add states to .uxm components.

Files · 1

View on GitHub

SKILL.md

1	# Fluxwing Component Expander
2
3	Expand existing uxscii components by adding interaction states.
4
5	## Data Location Rules
6
7	READ from:
8	- `./fluxwing/components/` - User-created components to expand
9	- `./fluxwing/library/` - User library components to expand
10	- `{SKILL_ROOT}/docs/` - Documentation for state definitions
11
12	WRITE to:
13	- `./fluxwing/components/` - Updated components (overwrite existing)
14	- `./fluxwing/library/` - Updated library components (overwrite existing)
15
16	## Your Task
17
18	Expand an existing uxscii component by adding interaction states.
19
20	## Workflow
21
22	### 1. Locate Component
23
24	Ask for the component name if not provided:
25	- "Which component do you want to expand?"
26	- Search in `./fluxwing/components/` and `./fluxwing/library/`
27	- Display current states if component found
28
29	### 2. Determine States to Add
30
31	Default behavior (no instructions): Add ALL standard states for component type
32
33	Smart defaults by type:
34	- button: hover, active, disabled
35	- input: focus, error, disabled
36	- checkbox/radio: checked, disabled
37	- select: open, disabled
38	- link: hover, visited, active
39	- card: hover, selected
40	- modal: open, closing
41	- alert: success, warning, error, info
42	- badge: active, inactive
43	- navigation: active, hover
44	- toggle: on, off, disabled
45	- slider: dragging, disabled
46	- tab: selected, hover
47	- list: selected, hover
48	- table: sorted, hover
49
50	User can override: "Only add hover and focus" or "Add error state only"
51
52	### 3. Read Existing Component Files
53
54	Read both files:
55	- `{component-name}.uxm` - Current JSON metadata
56	- `{component-name}.md` - Current ASCII template
57
58	Extract:
59	- Current states (from behavior.states array)
60	- Component type (from type field)
61	- Visual properties (from ascii section)
62	- Variables (from ascii.variables array)
63	- Border style from default state (from behavior.states[0].properties.border)
64
65	### 4. Generate New States
66
67	For each new state to add:
68
69	A. Add state definition to .uxm file
70
71	Insert into the `behavior.states` array. Each state needs:
72
73	```json
74	{
75	"name": "hover",
76	"properties": {
77	"border": "heavy",
78	"background": "primary-dark",
79	"textColor": "default"
80	},
81	"triggers": ["mouseenter"]
82	}
83	```
84
85	State property patterns by state name:
86
87	- hover:
88	- border: "heavy"
89	- background: slightly darker than default
90	- triggers: ["mouseenter"]
91
92	- focus:
93	- border: "double"
94	- background: same as default
95	- textColor: "primary"
96	- triggers: ["focus"]
97
98	- active:
99	- border: "heavy"
100	- background: "filled"
101	- triggers: ["mousedown"]
102
103	- disabled:
104	- border: "dashed"
105	- opacity: 0.5
106	- cursor: "not-allowed"
107
108	- error:
109	- border: "heavy"
110	- borderColor: "red"
111	- textColor: "error"
112
113	- success:
114	- border: "heavy"
115	- borderColor: "green"
116	- textColor: "success"
117
118	- loading:
119	- opacity: 0.7
120	- cursor: "wait"
121
122	- checked (checkbox/radio):
123	- border: "heavy"
124	- background: "filled"
125	- textColor: "primary"
126
127	- selected:
128	- border: "heavy"
129	- background: "highlight"
130	- textColor: "primary"
131
132	- open (modal/select):
133	- visible: true
134	- triggers: ["click"]
135
136	- visited (link):
137	- textColor: "visited"
138
139	B. Generate ASCII for new state in .md file
140
141	Use appropriate box-drawing characters for each state:
142
143	- hover: Heavy border `┏━┓┃┗━┛`
144	- focus: Double border `╔═╗║╚═╝`
145	- active: Heavy filled `┏━┓┃┗━┛` with darker interior
146	- disabled: Dashed border `┌┄┄┐┆└┄┄┘`
147	- error: Heavy border with indicator `┏━┓┃┗━┛ ⚠`
148	- success: Heavy border with indicator `┏━┓┃┗━┛ ✓`
149	- checked: Box with checkmark `[✓]` or filled indicator
150	- selected: Heavy border with highlight background
151	- loading: Spinner or progress indicator
152
153	Template for new state section in .md file:
154
155	```markdown
156	## {State Name} State
157
158	\`\`\`
159	{ASCII art using appropriate border style}
160	\`\`\`
161	```
162
163	### 5. Update Files
164
165	Write updated files:
166	- Overwrite `{component-name}.uxm` with expanded states array
167	- Append new state sections to `{component-name}.md`
168
169	Preserve:
170	- All existing metadata (name, description, author, created, tags, category)
171	- All existing variables
172	- All existing states
173	- All existing props
174	- Component ID and version
175
176	Update:
177	- `metadata.modified` timestamp (set to current ISO 8601 timestamp)
178	- `behavior.states` array (add new states to end)
179	- `.md` file (append new state sections before Variables section if it exists, otherwise at end)
180
181	Important: When updating the .md file, insert new state sections AFTER existing state sections but BEFORE the Variables, Accessibility, and Usage sections.
182
183	### 5a. Validate Expanded Comp

People who liked this also viewed

6 picks

Type

fluxwing-component-expander

18stars1forks

View on GitHub

How to install fluxwing-component-expander?

trabian/fluxwing-skills/fluxwing-component-expander

$npx -y skills add trabian/fluxwing-skills --skill fluxwing-component-expander

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Fluxwing Component Expander
2
3	Expand existing uxscii components by adding interaction states.
4
5	## Data Location Rules
6
7	READ from:
8	- `./fluxwing/components/` - User-created components to expand
9	- `./fluxwing/library/` - User library components to expand
10	- `{SKILL_ROOT}/docs/` - Documentation for state definitions
11
12	WRITE to:
13	- `./fluxwing/components/` - Updated components (overwrite existing)
14	- `./fluxwing/library/` - Updated library components (overwrite existing)
15
16	## Your Task
17
18	Expand an existing uxscii component by adding interaction states.
19
20	## Workflow
21
22	### 1. Locate Component
23
24	Ask for the component name if not provided:
25	- "Which component do you want to expand?"
26	- Search in `./fluxwing/components/` and `./fluxwing/library/`
27	- Display current states if component found
28
29	### 2. Determine States to Add
30
31	Default behavior (no instructions): Add ALL standard states for component type
32
33	Smart defaults by type:
34	- button: hover, active, disabled
35	- input: focus, error, disabled
36	- checkbox/radio: checked, disabled
37	- select: open, disabled
38	- link: hover, visited, active
39	- card: hover, selected
40	- modal: open, closing
41	- alert: success, warning, error, info
42	- badge: active, inactive
43	- navigation: active, hover
44	- toggle: on, off, disabled
45	- slider: dragging, disabled
46	- tab: selected, hover
47	- list: selected, hover
48	- table: sorted, hover
49
50	User can override: "Only add hover and focus" or "Add error state only"
51
52	### 3. Read Existing Component Files
53
54	Read both files:
55	- `{component-name}.uxm` - Current JSON metadata
56	- `{component-name}.md` - Current ASCII template
57
58	Extract:
59	- Current states (from behavior.states array)
60	- Component type (from type field)
61	- Visual properties (from ascii section)
62	- Variables (from ascii.variables array)
63	- Border style from default state (from behavior.states[0].properties.border)
64
65	### 4. Generate New States
66
67	For each new state to add:
68
69	A. Add state definition to .uxm file
70
71	Insert into the `behavior.states` array. Each state needs:
72
73	```json
74	{
75	"name": "hover",
76	"properties": {
77	"border": "heavy",
78	"background": "primary-dark",
79	"textColor": "default"
80	},
81	"triggers": ["mouseenter"]
82	}
83	```
84
85	State property patterns by state name:
86
87	- hover:
88	- border: "heavy"
89	- background: slightly darker than default
90	- triggers: ["mouseenter"]
91
92	- focus:
93	- border: "double"
94	- background: same as default
95	- textColor: "primary"
96	- triggers: ["focus"]
97
98	- active:
99	- border: "heavy"
100	- background: "filled"
101	- triggers: ["mousedown"]
102
103	- disabled:
104	- border: "dashed"
105	- opacity: 0.5
106	- cursor: "not-allowed"
107
108	- error:
109	- border: "heavy"
110	- borderColor: "red"
111	- textColor: "error"
112
113	- success:
114	- border: "heavy"
115	- borderColor: "green"
116	- textColor: "success"
117
118	- loading:
119	- opacity: 0.7
120	- cursor: "wait"
121
122	- checked (checkbox/radio):
123	- border: "heavy"
124	- background: "filled"
125	- textColor: "primary"
126
127	- selected:
128	- border: "heavy"
129	- background: "highlight"
130	- textColor: "primary"
131
132	- open (modal/select):
133	- visible: true
134	- triggers: ["click"]
135
136	- visited (link):
137	- textColor: "visited"
138
139	B. Generate ASCII for new state in .md file
140
141	Use appropriate box-drawing characters for each state:
142
143	- hover: Heavy border `┏━┓┃┗━┛`
144	- focus: Double border `╔═╗║╚═╝`
145	- active: Heavy filled `┏━┓┃┗━┛` with darker interior
146	- disabled: Dashed border `┌┄┄┐┆└┄┄┘`
147	- error: Heavy border with indicator `┏━┓┃┗━┛ ⚠`
148	- success: Heavy border with indicator `┏━┓┃┗━┛ ✓`
149	- checked: Box with checkmark `[✓]` or filled indicator
150	- selected: Heavy border with highlight background
151	- loading: Spinner or progress indicator
152
153	Template for new state section in .md file:
154
155	```markdown
156	## {State Name} State
157
158	\`\`\`
159	{ASCII art using appropriate border style}
160	\`\`\`
161	```
162
163	### 5. Update Files
164
165	Write updated files:
166	- Overwrite `{component-name}.uxm` with expanded states array
167	- Append new state sections to `{component-name}.md`
168
169	Preserve:
170	- All existing metadata (name, description, author, created, tags, category)
171	- All existing variables
172	- All existing states
173	- All existing props
174	- Component ID and version
175
176	Update:
177	- `metadata.modified` timestamp (set to current ISO 8601 timestamp)
178	- `behavior.states` array (add new states to end)
179	- `.md` file (append new state sections before Variables section if it exists, otherwise at end)
180
181	Important: When updating the .md file, insert new state sections AFTER existing state sections but BEFORE the Variables, Accessibility, and Usage sections.
182
183	### 5a. Validate Expanded Comp

People who liked this also viewed

6 picks

Type