fluxwing-screen-scaffolder

Name: fluxwing-screen-scaffolder
Author: trabian

18stars1forks

How to install fluxwing-screen-scaffolder?

trabian/fluxwing-skills/fluxwing-screen-scaffolder

$npx -y skills add trabian/fluxwing-skills --skill fluxwing-screen-scaffolder

Installs into the current project.

Summary

Build complete UI screens by composing multiple uxscii components. Use when working with .uxm files, when user wants to create, scaffold, or build .uxm screens like login, dashboard, profile, settings, or checkout pages.

Files · 1

View on GitHub

SKILL.md

1	# Fluxwing Screen Scaffolder
2
3	Create complete screen designs using the uxscii standard by orchestrating specialized agents.
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}/templates/` - 2 screen examples
10	- `{SKILL_ROOT}/docs/` - Documentation
11
12	INVENTORY sources (check all for available components):
13	- `./fluxwing/components/` - User-created components (FIRST PRIORITY)
14	- `./fluxwing/library/` - Customized template copies
15	- `{SKILL_ROOT}/../uxscii-component-creator/templates/` - Bundled templates (READ-ONLY)
16
17	WRITE to (project workspace):
18	- `./fluxwing/screens/` - Your created screens (via composer agent)
19
20	NEVER write to skill directories - they are read-only!
21
22	LOAD for copy-on-update logic:
23	- `{SKILL_ROOT}/../shared/docs/copy-versioning.md` - Versioning pattern for existing screens
24
25	## Your Task
26
27	⚠️ YOU ARE AN ORCHESTRATOR - DO NOT DO THE WORK YOURSELF! ⚠️
28
29	Your role is to spawn agents using the Task tool. You coordinate agents, you don't create components directly.
30
31	Help the user scaffold a complete screen by orchestrating agents in two phases:
32	1. Phase 1 (Parallel): Spawn multiple designer agents - one per missing component using multiple Task tool calls in ONE message
33	2. Phase 2 (Sequential): After all components exist, spawn composer agent
34
35	Concurrency Model:
36	- If 6 components are missing → spawn 6 agents in parallel using 6 Task tool calls in ONE message (~6x faster)
37	- Then wait for all to complete before composing screen
38
39	CRITICAL: Use the Task tool to spawn agents. Do NOT use TodoWrite and work through tasks yourself. Do NOT create files yourself.
40
41	MULTI-SCREEN SCENARIOS:
42
43	If user requests N screens (N > 1):
44	- ⚠️ DO NOT create TodoWrite list with N screen tasks and work through them
45	- ⚠️ DO NOT use Write/Edit tools to create screen files yourself
46	- ⚠️ DO NOT "help" composer agents by pre-creating any files
47	- ✅ DO spawn N composer agents in parallel (one per screen)
48	- ✅ DO send ONE message with ALL Task calls (parallel execution)
49	- ✅ DO let each composer agent independently create all 3 files (.uxm, .md, .rendered.md)
50
51	Example: 6 screens = ONE message with 6 Task tool calls → 18 files created by agents
52
53	You are an ORCHESTRATOR. Your job is to spawn agents, not do their work.
54
55	## Quality Presets
56
57	Scaffolder supports different quality levels for speed vs fidelity tradeoffs:
58
59	### fast (60-90s)
60	- Create components (sketch fidelity)
61	- Compose screen
62	- Skip enhancement
63	- Use when: Rapid prototyping, early iteration
64
65	Output:
66	- Components: sketch fidelity (.uxm only initially, .md by composer)
67	- Screen: .rendered.md with basic quality
68	- Time: ~60-90s for 6 components
69
70	### balanced (90-150s)
71	- Create components (sketch fidelity)
72	- Compose screen
73	- Enhance to basic fidelity
74	- Use when: Quick iteration with decent quality
75
76	Output:
77	- Components: basic fidelity (.uxm + improved .md)
78	- Screen: .rendered.md with good quality
79	- Time: ~90-150s for 6 components
80
81	### detailed (180-240s) [DEFAULT]
82	- Create components (sketch fidelity)
83	- Compose screen
84	- Enhance to detailed fidelity (hover + focus states)
85	- Use when: Production-ready screens, demos
86
87	Output:
88	- Components: detailed fidelity (.uxm + polished .md + states)
89	- Screen: .rendered.md with high quality
90	- Time: ~180-240s for 6 components
91
92	### production (300-400s)
93	- Create components (sketch fidelity)
94	- Compose screen
95	- Enhance to production fidelity (all states + full a11y)
96	- Use when: Final polish, publication
97
98	Output:
99	- Components: production fidelity (complete)
100	- Screen: .rendered.md with publication quality
101	- Time: ~300-400s for 6 components
102
103	Default: detailed (best balance of quality and speed)
104
105	## Workflow
106
107	### Step 1: Understand the Screen
108
109	Ask about the screen they want to create:
110
111	Screen details:
112	- Screen name and purpose: login, dashboard, profile, settings, checkout, etc.
113	- Required components: forms, navigation, cards, modals, lists, etc.
114	- Layout structure: vertical, horizontal, grid, sidebar+main, etc.
115
116	Quality preset (optional):
117	- fast - Quick prototype (60-90s)
118	- balanced - Good quality (90-150s)
119	- detailed - High quality (180-240s) [DEFAULT]
120	- production - Publication ready (300-400s)
121
122	If user doesn't specify, use detailed preset.
123
124	Detect multi-screen requests:
125
126	If the user's request indicates multiple screens, detect by:
127	- Plural language: "screens", "pages", "all of them"
128	- Multiple file references: Glob results showing

People who liked this also viewed

6 picks

Type

fluxwing-screen-scaffolder

18stars1forks

View on GitHub

How to install fluxwing-screen-scaffolder?

trabian/fluxwing-skills/fluxwing-screen-scaffolder

$npx -y skills add trabian/fluxwing-skills --skill fluxwing-screen-scaffolder

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Fluxwing Screen Scaffolder
2
3	Create complete screen designs using the uxscii standard by orchestrating specialized agents.
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}/templates/` - 2 screen examples
10	- `{SKILL_ROOT}/docs/` - Documentation
11
12	INVENTORY sources (check all for available components):
13	- `./fluxwing/components/` - User-created components (FIRST PRIORITY)
14	- `./fluxwing/library/` - Customized template copies
15	- `{SKILL_ROOT}/../uxscii-component-creator/templates/` - Bundled templates (READ-ONLY)
16
17	WRITE to (project workspace):
18	- `./fluxwing/screens/` - Your created screens (via composer agent)
19
20	NEVER write to skill directories - they are read-only!
21
22	LOAD for copy-on-update logic:
23	- `{SKILL_ROOT}/../shared/docs/copy-versioning.md` - Versioning pattern for existing screens
24
25	## Your Task
26
27	⚠️ YOU ARE AN ORCHESTRATOR - DO NOT DO THE WORK YOURSELF! ⚠️
28
29	Your role is to spawn agents using the Task tool. You coordinate agents, you don't create components directly.
30
31	Help the user scaffold a complete screen by orchestrating agents in two phases:
32	1. Phase 1 (Parallel): Spawn multiple designer agents - one per missing component using multiple Task tool calls in ONE message
33	2. Phase 2 (Sequential): After all components exist, spawn composer agent
34
35	Concurrency Model:
36	- If 6 components are missing → spawn 6 agents in parallel using 6 Task tool calls in ONE message (~6x faster)
37	- Then wait for all to complete before composing screen
38
39	CRITICAL: Use the Task tool to spawn agents. Do NOT use TodoWrite and work through tasks yourself. Do NOT create files yourself.
40
41	MULTI-SCREEN SCENARIOS:
42
43	If user requests N screens (N > 1):
44	- ⚠️ DO NOT create TodoWrite list with N screen tasks and work through them
45	- ⚠️ DO NOT use Write/Edit tools to create screen files yourself
46	- ⚠️ DO NOT "help" composer agents by pre-creating any files
47	- ✅ DO spawn N composer agents in parallel (one per screen)
48	- ✅ DO send ONE message with ALL Task calls (parallel execution)
49	- ✅ DO let each composer agent independently create all 3 files (.uxm, .md, .rendered.md)
50
51	Example: 6 screens = ONE message with 6 Task tool calls → 18 files created by agents
52
53	You are an ORCHESTRATOR. Your job is to spawn agents, not do their work.
54
55	## Quality Presets
56
57	Scaffolder supports different quality levels for speed vs fidelity tradeoffs:
58
59	### fast (60-90s)
60	- Create components (sketch fidelity)
61	- Compose screen
62	- Skip enhancement
63	- Use when: Rapid prototyping, early iteration
64
65	Output:
66	- Components: sketch fidelity (.uxm only initially, .md by composer)
67	- Screen: .rendered.md with basic quality
68	- Time: ~60-90s for 6 components
69
70	### balanced (90-150s)
71	- Create components (sketch fidelity)
72	- Compose screen
73	- Enhance to basic fidelity
74	- Use when: Quick iteration with decent quality
75
76	Output:
77	- Components: basic fidelity (.uxm + improved .md)
78	- Screen: .rendered.md with good quality
79	- Time: ~90-150s for 6 components
80
81	### detailed (180-240s) [DEFAULT]
82	- Create components (sketch fidelity)
83	- Compose screen
84	- Enhance to detailed fidelity (hover + focus states)
85	- Use when: Production-ready screens, demos
86
87	Output:
88	- Components: detailed fidelity (.uxm + polished .md + states)
89	- Screen: .rendered.md with high quality
90	- Time: ~180-240s for 6 components
91
92	### production (300-400s)
93	- Create components (sketch fidelity)
94	- Compose screen
95	- Enhance to production fidelity (all states + full a11y)
96	- Use when: Final polish, publication
97
98	Output:
99	- Components: production fidelity (complete)
100	- Screen: .rendered.md with publication quality
101	- Time: ~300-400s for 6 components
102
103	Default: detailed (best balance of quality and speed)
104
105	## Workflow
106
107	### Step 1: Understand the Screen
108
109	Ask about the screen they want to create:
110
111	Screen details:
112	- Screen name and purpose: login, dashboard, profile, settings, checkout, etc.
113	- Required components: forms, navigation, cards, modals, lists, etc.
114	- Layout structure: vertical, horizontal, grid, sidebar+main, etc.
115
116	Quality preset (optional):
117	- fast - Quick prototype (60-90s)
118	- balanced - Good quality (90-150s)
119	- detailed - High quality (180-240s) [DEFAULT]
120	- production - Publication ready (300-400s)
121
122	If user doesn't specify, use detailed preset.
123
124	Detect multi-screen requests:
125
126	If the user's request indicates multiple screens, detect by:
127	- Plural language: "screens", "pages", "all of them"
128	- Multiple file references: Glob results showing

People who liked this also viewed

6 picks

Type