fluxwing-component-creator

Name: fluxwing-component-creator
Author: trabian

18stars1forks

How to install fluxwing-component-creator?

trabian/fluxwing-skills/fluxwing-component-creator

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

Installs into the current project.

Summary

Create uxscii components with ASCII art and structured metadata when user wants to create, build, or design UI components. Use when working with .uxm files, when user mentions .uxm components, or when creating buttons, inputs, cards, forms, modals, or navigation.

Files · 1

View on GitHub

SKILL.md

1	# Fluxwing Component Creator
2
3	You are helping the user create uxscii component(s) using the uxscii standard by orchestrating the designer agent.
4
5	## Data Location Rules
6
7	READ from (bundled templates - reference only):
8	- `{SKILL_ROOT}/templates/` - 11 component templates
9	- `{SKILL_ROOT}/docs/` - Documentation
10
11	INVENTORY sources:
12	- `./fluxwing/components/` - User components
13	- `./fluxwing/library/` - Customized templates
14	- `{SKILL_ROOT}/templates/` - Bundled templates (READ-ONLY)
15
16	WRITE to (project workspace - via designer agent):
17	- `./fluxwing/components/` - Your created components
18
19	NEVER write to skill directory - it's read-only!
20
21	LOAD for copy-on-update logic:
22	- `{SKILL_ROOT}/../shared/docs/copy-versioning.md` - Versioning pattern for existing components
23
24	## Your Task
25
26	Help the user create uxscii component(s) by gathering requirements and spawning designer agent(s).
27
28	Supports both single and multi-component creation:
29	- Single: "Create a submit button"
30	- Multiple: "Create submit-button, cancel-button, and email-input" (agents run in parallel)
31
32	## Speed Modes
33
34	Fluxwing supports two creation modes optimized for different use cases:
35
36	### Fast Mode (Scaffolding)
37	When: Scaffolder creates multiple components in parallel
38	Speed: ~10 seconds per component
39	Output: `.uxm` only (fidelity: sketch)
40	Method: Template-based variable substitution
41
42	Fast mode skips:
43	- Documentation loading
44	- ASCII art generation
45	- Detailed metadata
46
47	### Detailed Mode (Standalone)
48	When: User explicitly creates single component
49	Speed: ~60-90 seconds per component
50	Output: `.uxm` + `.md` (fidelity: detailed)
51	Method: Full docs, careful ASCII generation
52
53	Detailed mode includes:
54	- Complete documentation reference
55	- Hand-crafted ASCII art
56	- Rich metadata with examples
57
58	Default: Fast mode when called by scaffolder, detailed mode otherwise
59
60	## Workflow
61
62	### Step 1: Determine Creation Mode & Parse Request
63
64	First, determine creation mode:
65
66	Check context to decide fast vs detailed mode:
67
68	Use Fast Mode if:
69	- Called by scaffolder skill (check for "screen context" in request)
70	- User explicitly requests "fast" or "quick" component
71	- Creating multiple components (6+ components)
72
73	Use Detailed Mode if:
74	- User creating single component interactively
75	- User requests "detailed" or "production" quality
76	- No screen context provided
77
78	Default: Detailed mode (safer, better quality)
79
80	Then, detect if user wants single or multiple components:
81
82	1. Single component request:
83	- "Create a submit button"
84	- "I need a card component"
85	- Proceed with single-component workflow (Steps 2-4)
86
87	2. Multiple component request:
88	- "Create submit-button, cancel-button, and email-input"
89	- "I need a button, input, and card"
90	- "Create these components: [list]"
91	- Proceed with multi-component workflow (see Step 3b)
92
93	For each component, gather:
94	- Component name (will be converted to kebab-case, e.g., "Submit Button" → "submit-button")
95	- Component type: button, input, card, navigation, form, list, modal, table, badge, alert, container, text, image, divider, or custom
96	- Key properties: What should be configurable? (text, colors, sizes, etc.)
97	- Visual style preferences: rounded, sharp, minimal, detailed, etc.
98
99	If details are missing: Make reasonable assumptions based on component type and common patterns. Don't over-ask.
100
101	Note: Components are created with default state only for fast MVP prototyping. Users can expand components later to add interactive states (hover, focus, disabled, etc.).
102
103	### Step 2: Check for Similar Templates
104
105	Browse available templates to offer starting points:
106
107	```typescript
108	// Check bundled templates
109	const bundledTemplates = glob('{SKILL_ROOT}/templates/*.uxm');
110	// Check user library
111	const libraryTemplates = glob('./fluxwing/library/*.uxm');
112
113	// Suggest similar templates if found
114	if (similarTemplates.length > 0) {
115	console.log(`Similar templates found: ${similarTemplates.join(', ')}`);
116	console.log('Would you like to base this on an existing template or create from scratch?');
117	}
118	```
119
120	### Step 3: Pre-Creation Validation (Check for Existing Component)
121
122	IMPORTANT: Before creating any component, check if it already exists to prevent data loss.
123
124	For each component you plan to create:
125
126	1. Convert to kebab-case ID:
127	```
128	"Submit Button" → "submit-button"
129	"User Profile Card" → "user-profile-card"
130	```
131
132	2. Check if component exists:
133	```bash
134	# Check for existing component
135	test -f ./fluxwing/components/{comp

People who liked this also viewed

6 picks

Type

fluxwing-component-creator

18stars1forks

View on GitHub

How to install fluxwing-component-creator?

trabian/fluxwing-skills/fluxwing-component-creator

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

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Fluxwing Component Creator
2
3	You are helping the user create uxscii component(s) using the uxscii standard by orchestrating the designer agent.
4
5	## Data Location Rules
6
7	READ from (bundled templates - reference only):
8	- `{SKILL_ROOT}/templates/` - 11 component templates
9	- `{SKILL_ROOT}/docs/` - Documentation
10
11	INVENTORY sources:
12	- `./fluxwing/components/` - User components
13	- `./fluxwing/library/` - Customized templates
14	- `{SKILL_ROOT}/templates/` - Bundled templates (READ-ONLY)
15
16	WRITE to (project workspace - via designer agent):
17	- `./fluxwing/components/` - Your created components
18
19	NEVER write to skill directory - it's read-only!
20
21	LOAD for copy-on-update logic:
22	- `{SKILL_ROOT}/../shared/docs/copy-versioning.md` - Versioning pattern for existing components
23
24	## Your Task
25
26	Help the user create uxscii component(s) by gathering requirements and spawning designer agent(s).
27
28	Supports both single and multi-component creation:
29	- Single: "Create a submit button"
30	- Multiple: "Create submit-button, cancel-button, and email-input" (agents run in parallel)
31
32	## Speed Modes
33
34	Fluxwing supports two creation modes optimized for different use cases:
35
36	### Fast Mode (Scaffolding)
37	When: Scaffolder creates multiple components in parallel
38	Speed: ~10 seconds per component
39	Output: `.uxm` only (fidelity: sketch)
40	Method: Template-based variable substitution
41
42	Fast mode skips:
43	- Documentation loading
44	- ASCII art generation
45	- Detailed metadata
46
47	### Detailed Mode (Standalone)
48	When: User explicitly creates single component
49	Speed: ~60-90 seconds per component
50	Output: `.uxm` + `.md` (fidelity: detailed)
51	Method: Full docs, careful ASCII generation
52
53	Detailed mode includes:
54	- Complete documentation reference
55	- Hand-crafted ASCII art
56	- Rich metadata with examples
57
58	Default: Fast mode when called by scaffolder, detailed mode otherwise
59
60	## Workflow
61
62	### Step 1: Determine Creation Mode & Parse Request
63
64	First, determine creation mode:
65
66	Check context to decide fast vs detailed mode:
67
68	Use Fast Mode if:
69	- Called by scaffolder skill (check for "screen context" in request)
70	- User explicitly requests "fast" or "quick" component
71	- Creating multiple components (6+ components)
72
73	Use Detailed Mode if:
74	- User creating single component interactively
75	- User requests "detailed" or "production" quality
76	- No screen context provided
77
78	Default: Detailed mode (safer, better quality)
79
80	Then, detect if user wants single or multiple components:
81
82	1. Single component request:
83	- "Create a submit button"
84	- "I need a card component"
85	- Proceed with single-component workflow (Steps 2-4)
86
87	2. Multiple component request:
88	- "Create submit-button, cancel-button, and email-input"
89	- "I need a button, input, and card"
90	- "Create these components: [list]"
91	- Proceed with multi-component workflow (see Step 3b)
92
93	For each component, gather:
94	- Component name (will be converted to kebab-case, e.g., "Submit Button" → "submit-button")
95	- Component type: button, input, card, navigation, form, list, modal, table, badge, alert, container, text, image, divider, or custom
96	- Key properties: What should be configurable? (text, colors, sizes, etc.)
97	- Visual style preferences: rounded, sharp, minimal, detailed, etc.
98
99	If details are missing: Make reasonable assumptions based on component type and common patterns. Don't over-ask.
100
101	Note: Components are created with default state only for fast MVP prototyping. Users can expand components later to add interactive states (hover, focus, disabled, etc.).
102
103	### Step 2: Check for Similar Templates
104
105	Browse available templates to offer starting points:
106
107	```typescript
108	// Check bundled templates
109	const bundledTemplates = glob('{SKILL_ROOT}/templates/*.uxm');
110	// Check user library
111	const libraryTemplates = glob('./fluxwing/library/*.uxm');
112
113	// Suggest similar templates if found
114	if (similarTemplates.length > 0) {
115	console.log(`Similar templates found: ${similarTemplates.join(', ')}`);
116	console.log('Would you like to base this on an existing template or create from scratch?');
117	}
118	```
119
120	### Step 3: Pre-Creation Validation (Check for Existing Component)
121
122	IMPORTANT: Before creating any component, check if it already exists to prevent data loss.
123
124	For each component you plan to create:
125
126	1. Convert to kebab-case ID:
127	```
128	"Submit Button" → "submit-button"
129	"User Profile Card" → "user-profile-card"
130	```
131
132	2. Check if component exists:
133	```bash
134	# Check for existing component
135	test -f ./fluxwing/components/{comp

People who liked this also viewed

6 picks

Type