fluxwing-library-browser

Name: fluxwing-library-browser
Author: trabian

18stars1forks

How to install fluxwing-library-browser?

trabian/fluxwing-skills/fluxwing-library-browser

$npx -y skills add trabian/fluxwing-skills --skill fluxwing-library-browser

Installs into the current project.

Summary

Browse and view all available uxscii components including bundled templates, user components, and screens. Use when working with .uxm files, when user wants to see, list, browse, or search .uxm components or screens.

Files · 1

View on GitHub

SKILL.md

1	# Fluxwing Library Browser
2
3	Browse all available uxscii components: bundled templates, user-created components, and complete screens.
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	- `{SKILL_ROOT}/docs/` - Documentation
11
12	READ from (project workspace):
13	- `./fluxwing/components/` - Your created components
14	- `./fluxwing/screens/` - Your created screens
15	- `./fluxwing/library/` - Customized template copies
16
17	NEVER write to skill directories - they are read-only!
18
19	## Your Task
20
21	Show the user what uxscii components are available across four sources:
22	1. Bundled Templates - 11 curated examples from skill templates (read-only reference)
23	2. Project Components - User/agent-created reusable components in `./fluxwing/components/` (editable)
24	3. Project Library - Customized template copies in `./fluxwing/library/` (editable)
25	4. Project Screens - Complete screen compositions in `./fluxwing/screens/` (editable)
26
27	Key Distinction: Bundled templates are READ-ONLY reference materials. To customize them, copy to your project workspace first.
28
29	## Fast Browsing with Pre-Built Index
30
31	IMPORTANT: Use the pre-built template index for instant browsing (10x faster than globbing):
32
33	```typescript
34	// Load the pre-built index (1 file read = instant results!)
35	const index = JSON.parse(read('{SKILL_ROOT}/data/template-index.json'));
36
37	// Browse by type
38	const buttons = index.by_type.button; // ["primary-button", "secondary-button"]
39	const inputs = index.by_type.input; // ["email-input"]
40
41	// Search by tag
42	const formComponents = index.by_tag.form; // All form-related components
43	const interactiveComponents = index.by_tag.interactive; // All interactive components
44
45	// Get component info instantly (no file reads needed!)
46	const buttonInfo = index.bundled_templates.find(t => t.id === "primary-button");
47	console.log(buttonInfo.name); // "Primary Button"
48	console.log(buttonInfo.description); // Full description
49	console.log(buttonInfo.preview); // ASCII preview already extracted!
50	console.log(buttonInfo.states); // ["default", "hover", "active", "disabled"]
51	console.log(buttonInfo.props); // ["text", "variant", "size"]
52	console.log(buttonInfo.tags); // ["button", "primary", "action", "interactive"]
53	```
54
55	Performance Benefits:
56	- ✅ 1 file read vs 11+ file reads (10x faster!)
57	- ✅ Instant type/tag filtering (no parsing needed)
58	- ✅ Pre-extracted ASCII previews (show immediately)
59	- ✅ Metadata summary (no JSON parsing per component)
60
61	Index Structure:
62	```json
63	{
64	"version": "1.0.0",
65	"generated": "2025-10-18T12:00:00Z",
66	"template_count": 11,
67	"bundled_templates": [ /* array of component metadata */ ],
68	"by_type": { /* components grouped by type */ },
69	"by_tag": { /* components grouped by tags */ }
70	}
71	```
72
73	When to use full file reads:
74	- User requests detailed view of a specific component
75	- User wants to copy a template (need full .uxm and .md content)
76	- User searches for a very specific property not in the index
77
78	## Display Format
79
80	Present in a clear, hierarchical structure:
81
82	```
83	🎁 BUNDLED TEMPLATES
84	📁 Component Creator Templates
85	─────────────────────────────────────────────────────
86	These are starter templates you can copy and customize.
87
88	Buttons (2 variants)
89	├─ primary-button.uxm
90	│ └─ Standard clickable button with hover, focus, and disabled states
91	│ ▓▓▓▓▓▓▓▓▓▓▓▓
92	│ ▓ Click Me ▓
93	│ ▓▓▓▓▓▓▓▓▓▓▓▓
94	│
95	└─ icon-button.uxm
96	└─ Button with icon support for visual emphasis
97	[🔍 Search]
98
99	Inputs (2 variants)
100	├─ text-input.uxm
101	│ └─ Basic text input with validation states
102	│ [________________]
103	│
104	└─ email-input.uxm
105	└─ Email-specific input with format validation
106	[user@example.com ]
107
108	Cards (1 variant)
109	└─ card.uxm
110	└─ Container for grouping related content
111	╭─────────────╮
112	│ Card Title │
113	├─────────────┤
114	│ Content... │
115	╰─────────────╯
116
117	Modals (1 variant)
118	└─ modal.uxm
119	└─ Overlay dialog for focused interactions
120	╔═══════════════╗
121	║ Modal Title ║
122	╠═══════════════╣
123	║ Content... ║
124	╚═══════════════╝
125
126	Navigation (1 variant)
127	└─ navigation.uxm
128	└─ Primary navigation menu
129	• Home • About • Contact
130
131	Feedback (2 variants)
132	├─ alert.uxm
133	│ └─ User notification with severity levels
134	│ ⚠️ Warning: Action required
135	│
136	└─ badge.uxm
137	└─ Small status indicator or label
138	● New
139
140	Lists (1 variant)
141	└─ list.uxm
142	└─ V

People who liked this also viewed

6 picks

Type

fluxwing-library-browser

18stars1forks

View on GitHub

How to install fluxwing-library-browser?

trabian/fluxwing-skills/fluxwing-library-browser

$npx -y skills add trabian/fluxwing-skills --skill fluxwing-library-browser

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Fluxwing Library Browser
2
3	Browse all available uxscii components: bundled templates, user-created components, and complete screens.
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	- `{SKILL_ROOT}/docs/` - Documentation
11
12	READ from (project workspace):
13	- `./fluxwing/components/` - Your created components
14	- `./fluxwing/screens/` - Your created screens
15	- `./fluxwing/library/` - Customized template copies
16
17	NEVER write to skill directories - they are read-only!
18
19	## Your Task
20
21	Show the user what uxscii components are available across four sources:
22	1. Bundled Templates - 11 curated examples from skill templates (read-only reference)
23	2. Project Components - User/agent-created reusable components in `./fluxwing/components/` (editable)
24	3. Project Library - Customized template copies in `./fluxwing/library/` (editable)
25	4. Project Screens - Complete screen compositions in `./fluxwing/screens/` (editable)
26
27	Key Distinction: Bundled templates are READ-ONLY reference materials. To customize them, copy to your project workspace first.
28
29	## Fast Browsing with Pre-Built Index
30
31	IMPORTANT: Use the pre-built template index for instant browsing (10x faster than globbing):
32
33	```typescript
34	// Load the pre-built index (1 file read = instant results!)
35	const index = JSON.parse(read('{SKILL_ROOT}/data/template-index.json'));
36
37	// Browse by type
38	const buttons = index.by_type.button; // ["primary-button", "secondary-button"]
39	const inputs = index.by_type.input; // ["email-input"]
40
41	// Search by tag
42	const formComponents = index.by_tag.form; // All form-related components
43	const interactiveComponents = index.by_tag.interactive; // All interactive components
44
45	// Get component info instantly (no file reads needed!)
46	const buttonInfo = index.bundled_templates.find(t => t.id === "primary-button");
47	console.log(buttonInfo.name); // "Primary Button"
48	console.log(buttonInfo.description); // Full description
49	console.log(buttonInfo.preview); // ASCII preview already extracted!
50	console.log(buttonInfo.states); // ["default", "hover", "active", "disabled"]
51	console.log(buttonInfo.props); // ["text", "variant", "size"]
52	console.log(buttonInfo.tags); // ["button", "primary", "action", "interactive"]
53	```
54
55	Performance Benefits:
56	- ✅ 1 file read vs 11+ file reads (10x faster!)
57	- ✅ Instant type/tag filtering (no parsing needed)
58	- ✅ Pre-extracted ASCII previews (show immediately)
59	- ✅ Metadata summary (no JSON parsing per component)
60
61	Index Structure:
62	```json
63	{
64	"version": "1.0.0",
65	"generated": "2025-10-18T12:00:00Z",
66	"template_count": 11,
67	"bundled_templates": [ /* array of component metadata */ ],
68	"by_type": { /* components grouped by type */ },
69	"by_tag": { /* components grouped by tags */ }
70	}
71	```
72
73	When to use full file reads:
74	- User requests detailed view of a specific component
75	- User wants to copy a template (need full .uxm and .md content)
76	- User searches for a very specific property not in the index
77
78	## Display Format
79
80	Present in a clear, hierarchical structure:
81
82	```
83	🎁 BUNDLED TEMPLATES
84	📁 Component Creator Templates
85	─────────────────────────────────────────────────────
86	These are starter templates you can copy and customize.
87
88	Buttons (2 variants)
89	├─ primary-button.uxm
90	│ └─ Standard clickable button with hover, focus, and disabled states
91	│ ▓▓▓▓▓▓▓▓▓▓▓▓
92	│ ▓ Click Me ▓
93	│ ▓▓▓▓▓▓▓▓▓▓▓▓
94	│
95	└─ icon-button.uxm
96	└─ Button with icon support for visual emphasis
97	[🔍 Search]
98
99	Inputs (2 variants)
100	├─ text-input.uxm
101	│ └─ Basic text input with validation states
102	│ [________________]
103	│
104	└─ email-input.uxm
105	└─ Email-specific input with format validation
106	[user@example.com ]
107
108	Cards (1 variant)
109	└─ card.uxm
110	└─ Container for grouping related content
111	╭─────────────╮
112	│ Card Title │
113	├─────────────┤
114	│ Content... │
115	╰─────────────╯
116
117	Modals (1 variant)
118	└─ modal.uxm
119	└─ Overlay dialog for focused interactions
120	╔═══════════════╗
121	║ Modal Title ║
122	╠═══════════════╣
123	║ Content... ║
124	╚═══════════════╝
125
126	Navigation (1 variant)
127	└─ navigation.uxm
128	└─ Primary navigation menu
129	• Home • About • Contact
130
131	Feedback (2 variants)
132	├─ alert.uxm
133	│ └─ User notification with severity levels
134	│ ⚠️ Warning: Action required
135	│
136	└─ badge.uxm
137	└─ Small status indicator or label
138	● New
139
140	Lists (1 variant)
141	└─ list.uxm
142	└─ V

People who liked this also viewed

6 picks

Type