fluxwing-component-viewer

Name: fluxwing-component-viewer
Author: trabian

18stars1forks

How to install fluxwing-component-viewer?

trabian/fluxwing-skills/fluxwing-component-viewer

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

Installs into the current project.

Summary

View detailed information about a specific uxscii component including metadata, states, props, and ASCII preview. Use when working with .uxm files, when user wants to see, view, inspect, or get details about a .uxm component.

Files · 1

View on GitHub

SKILL.md

1	# Fluxwing Component Viewer
2
3	View detailed information about a specific uxscii component from any source.
4
5	## Data Location Rules
6
7	READ from (bundled templates - reference only):
8	- `{SKILL_ROOT}/../uxscii-component-creator/templates/` - 11 component templates
9	- `{SKILL_ROOT}/../uxscii-screen-scaffolder/templates/` - 2 screen examples (if available)
10
11	READ from (project workspace):
12	- `./fluxwing/components/` - Your created components
13	- `./fluxwing/library/` - Customized template copies
14	- `./fluxwing/screens/` - Your created screens
15
16	NEVER write - this is a read-only viewer!
17
18	## Your Task
19
20	Display comprehensive details about a single uxscii component, including metadata, ASCII template preview, and context-appropriate actions.
21
22	## Component Lookup Process
23
24	### 1. Parse Component Name
25	- Extract component name from user request
26	- If no name provided: Ask "Which component would you like to view?"
27	- Normalize name to lowercase with hyphens
28
29	### 2. Search Priority Order (Stop at First Match)
30	Search these locations in order and stop at the first match:
31
32	1. Project Components: `./fluxwing/components/[name].uxm`
33	- User/agent-created custom components
34	- Fully editable
35	- Tag as: "Your Component"
36
37	2. Project Library: `./fluxwing/library/[name].uxm`
38	- Customized copies of bundled templates
39	- Fully editable
40	- Tag as: "Your Library"
41
42	3. Bundled Templates: `{SKILL_ROOT}/../uxscii-component-creator/templates/[name].uxm`
43	- Read-only reference templates
44	- Must be copied to edit
45	- Tag as: "Bundled Template"
46
47	Important: Stop searching after first match. If found in bundled templates, check if it also exists in user's project and add a note: "💡 You also have a customized version in ./fluxwing/library/"
48
49	### 3. Read Component Files
50	For the matched component, read both files:
51	- `[name].uxm` - JSON metadata
52	- `[name].md` - ASCII template
53
54	## Display Format
55
56	### Concise View (Default)
57
58	Present component information in a clean, scannable format:
59
60	```
61	📄 PRIMARY-BUTTON
62	─────────────────────────────────────────────────────
63	📦 Source: Bundled Template
64	📍 Location: Component Creator Templates
65	⏱️ Modified: 2024-10-11 10:30:00
66	🔖 Version: 1.0.0
67
68	Description:
69	Standard clickable button with hover, focus, and disabled states
70
71	Component Details:
72	• Type: button
73	• Props: text (string), variant (string), disabled (boolean)
74	• States: default, hover, focus, disabled
75	• Accessibility: ✓ Role (button), ✓ Focusable, ✓ Keyboard (Space, Enter)
76
77	ASCII Template Preview (first 20 lines):
78
79	Default State:
80	▓▓▓▓▓▓▓▓▓▓▓▓
81	▓ {{text}} ▓
82	▓▓▓▓▓▓▓▓▓▓▓▓
83
84	Hover State:
85	░▓▓▓▓▓▓▓▓▓▓▓░
86	░▓ {{text}} ▓░
87	░▓▓▓▓▓▓▓▓▓▓░
88
89	Disabled State:
90	┌ ─ ─ ─ ─ ─┐
91	│ {{text}} │
92	└ ─ ─ ─ ─ ─┘
93
94	[... 1 more state]
95
96	Template has 4 states total. View full template?
97	─────────────────────────────────────────────────────
98	```
99
100	### Format Guidelines
101
102	Header Section:
103	- Component name in CAPS
104	- Emoji indicators:
105	- 📦 = Bundled Template
106	- ✏️ = Your Library
107	- 🎨 = Your Component
108	- Full file path for clarity
109	- Last modified timestamp (if available)
110	- Version from metadata
111
112	Description:
113	- Use the `metadata.description` field from .uxm file
114	- Keep it concise (1-2 lines)
115
116	Component Details:
117	- Type: Direct from .uxm `type` field
118	- Props: List prop names with types in parentheses
119	- Format: `propName (type)`
120	- Example: `text (string), disabled (boolean)`
121	- States: Comma-separated list of state names
122	- Accessibility: Show checkmarks for present features
123	- Role, Focusable, Keyboard shortcuts, ARIA labels
124
125	ASCII Template Preview:
126	- Show first 20 lines by default
127	- If template has multiple states, show state labels
128	- If template exceeds 20 lines, add: `[... N more states/lines]`
129	- Preserve exact spacing and box-drawing characters
130	- Show variables as `{{variableName}}`
131
132	### Truncation Logic
133
134	If `.md` template exceeds 20 lines:
135	1. Count total states/sections in template
136	2. Show first 2-3 states completely
137	3. Add summary line: `[... N more states]`
138	4. Offer: "View full template?" as interactive option
139
140	## Interactive Options
141
142	After displaying the component, offer context-appropriate actions:
143
144	### For Bundled Templates (read-only)
145
146	```
147	What would you like to do?
148
149	1️⃣ Copy to project library (makes it editable)
150	2️⃣ View full template file (all states)
151	3️⃣ View full metadata (complete .uxm)
152	4️⃣ Browse all components
153	```
154
155	Action Details:
156	- Copy: Copy both .uxm and .md to `./fluxwing/library/`
157	- View full template: Display complete .md file (no truncation)
158	- View full metadata: Display complete .uxm JSON
159	- Browse: Return to library browser
160
161	### For Project Files (./fluxwing/li

People who liked this also viewed

6 picks

Type

fluxwing-component-viewer

18stars1forks

View on GitHub

How to install fluxwing-component-viewer?

trabian/fluxwing-skills/fluxwing-component-viewer

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

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Fluxwing Component Viewer
2
3	View detailed information about a specific uxscii component from any source.
4
5	## Data Location Rules
6
7	READ from (bundled templates - reference only):
8	- `{SKILL_ROOT}/../uxscii-component-creator/templates/` - 11 component templates
9	- `{SKILL_ROOT}/../uxscii-screen-scaffolder/templates/` - 2 screen examples (if available)
10
11	READ from (project workspace):
12	- `./fluxwing/components/` - Your created components
13	- `./fluxwing/library/` - Customized template copies
14	- `./fluxwing/screens/` - Your created screens
15
16	NEVER write - this is a read-only viewer!
17
18	## Your Task
19
20	Display comprehensive details about a single uxscii component, including metadata, ASCII template preview, and context-appropriate actions.
21
22	## Component Lookup Process
23
24	### 1. Parse Component Name
25	- Extract component name from user request
26	- If no name provided: Ask "Which component would you like to view?"
27	- Normalize name to lowercase with hyphens
28
29	### 2. Search Priority Order (Stop at First Match)
30	Search these locations in order and stop at the first match:
31
32	1. Project Components: `./fluxwing/components/[name].uxm`
33	- User/agent-created custom components
34	- Fully editable
35	- Tag as: "Your Component"
36
37	2. Project Library: `./fluxwing/library/[name].uxm`
38	- Customized copies of bundled templates
39	- Fully editable
40	- Tag as: "Your Library"
41
42	3. Bundled Templates: `{SKILL_ROOT}/../uxscii-component-creator/templates/[name].uxm`
43	- Read-only reference templates
44	- Must be copied to edit
45	- Tag as: "Bundled Template"
46
47	Important: Stop searching after first match. If found in bundled templates, check if it also exists in user's project and add a note: "💡 You also have a customized version in ./fluxwing/library/"
48
49	### 3. Read Component Files
50	For the matched component, read both files:
51	- `[name].uxm` - JSON metadata
52	- `[name].md` - ASCII template
53
54	## Display Format
55
56	### Concise View (Default)
57
58	Present component information in a clean, scannable format:
59
60	```
61	📄 PRIMARY-BUTTON
62	─────────────────────────────────────────────────────
63	📦 Source: Bundled Template
64	📍 Location: Component Creator Templates
65	⏱️ Modified: 2024-10-11 10:30:00
66	🔖 Version: 1.0.0
67
68	Description:
69	Standard clickable button with hover, focus, and disabled states
70
71	Component Details:
72	• Type: button
73	• Props: text (string), variant (string), disabled (boolean)
74	• States: default, hover, focus, disabled
75	• Accessibility: ✓ Role (button), ✓ Focusable, ✓ Keyboard (Space, Enter)
76
77	ASCII Template Preview (first 20 lines):
78
79	Default State:
80	▓▓▓▓▓▓▓▓▓▓▓▓
81	▓ {{text}} ▓
82	▓▓▓▓▓▓▓▓▓▓▓▓
83
84	Hover State:
85	░▓▓▓▓▓▓▓▓▓▓▓░
86	░▓ {{text}} ▓░
87	░▓▓▓▓▓▓▓▓▓▓░
88
89	Disabled State:
90	┌ ─ ─ ─ ─ ─┐
91	│ {{text}} │
92	└ ─ ─ ─ ─ ─┘
93
94	[... 1 more state]
95
96	Template has 4 states total. View full template?
97	─────────────────────────────────────────────────────
98	```
99
100	### Format Guidelines
101
102	Header Section:
103	- Component name in CAPS
104	- Emoji indicators:
105	- 📦 = Bundled Template
106	- ✏️ = Your Library
107	- 🎨 = Your Component
108	- Full file path for clarity
109	- Last modified timestamp (if available)
110	- Version from metadata
111
112	Description:
113	- Use the `metadata.description` field from .uxm file
114	- Keep it concise (1-2 lines)
115
116	Component Details:
117	- Type: Direct from .uxm `type` field
118	- Props: List prop names with types in parentheses
119	- Format: `propName (type)`
120	- Example: `text (string), disabled (boolean)`
121	- States: Comma-separated list of state names
122	- Accessibility: Show checkmarks for present features
123	- Role, Focusable, Keyboard shortcuts, ARIA labels
124
125	ASCII Template Preview:
126	- Show first 20 lines by default
127	- If template has multiple states, show state labels
128	- If template exceeds 20 lines, add: `[... N more states/lines]`
129	- Preserve exact spacing and box-drawing characters
130	- Show variables as `{{variableName}}`
131
132	### Truncation Logic
133
134	If `.md` template exceeds 20 lines:
135	1. Count total states/sections in template
136	2. Show first 2-3 states completely
137	3. Add summary line: `[... N more states]`
138	4. Offer: "View full template?" as interactive option
139
140	## Interactive Options
141
142	After displaying the component, offer context-appropriate actions:
143
144	### For Bundled Templates (read-only)
145
146	```
147	What would you like to do?
148
149	1️⃣ Copy to project library (makes it editable)
150	2️⃣ View full template file (all states)
151	3️⃣ View full metadata (complete .uxm)
152	4️⃣ Browse all components
153	```
154
155	Action Details:
156	- Copy: Copy both .uxm and .md to `./fluxwing/library/`
157	- View full template: Display complete .md file (no truncation)
158	- View full metadata: Display complete .uxm JSON
159	- Browse: Return to library browser
160
161	### For Project Files (./fluxwing/li

People who liked this also viewed

6 picks

Type