fluxwing-screenshot-importer

Name: fluxwing-screenshot-importer
Author: trabian

18stars1forks

How to install fluxwing-screenshot-importer?

trabian/fluxwing-skills/fluxwing-screenshot-importer

$npx -y skills add trabian/fluxwing-skills --skill fluxwing-screenshot-importer

Installs into the current project.

Summary

Import UI screenshots and generate uxscii components automatically using vision analysis. Use when user wants to import, convert, or generate .uxm components from screenshots or images.

Files · 1

View on GitHub

SKILL.md

1	# Fluxwing Screenshot Importer
2
3	Import UI screenshots and convert them to the uxscii standard by orchestrating specialized vision agents.
4
5	## Data Location Rules
6
7	READ from (bundled templates - reference only):
8	- `{SKILL_ROOT}/../uxscii-component-creator/templates/` - 11 component templates (for reference)
9	- `{SKILL_ROOT}/docs/` - Screenshot processing documentation
10
11	WRITE to (project workspace):
12	- `./fluxwing/components/` - Extracted components (.uxm + .md)
13	- `./fluxwing/screens/` - Screen composition (.uxm + .md + .rendered.md)
14
15	NEVER write to skill directories - they are read-only!
16
17	## Your Task
18
19	Import a screenshot of a UI design and automatically generate uxscii components and screens by orchestrating specialized agents:
20
21	1. Vision Coordinator Agent - Spawns 3 parallel vision agents (layout + components + properties)
22	2. Component Generator Agents - Generate component files in parallel (atomic + composite)
23	3. Screen Scaffolder Skill - Delegates to fluxwing-screen-scaffolder for screen composition
24
25	⚠️ ORCHESTRATION RULES:
26
27	YOU CAN (as orchestrator):
28	- ✅ Spawn vision analysis agents
29	- ✅ Spawn component generator agents
30	- ✅ Invoke fluxwing-screen-scaffolder skill
31	- ✅ Read screenshots
32	- ✅ Validate vision data
33
34	YOU CANNOT (worker mode - forbidden):
35	- ⚠️ Create screen files yourself using Write/Edit tools
36	- ⚠️ Generate .uxm, .md, or .rendered.md files for screens
37	- ⚠️ "Help" the scaffolder by pre-creating screen files
38	- ⚠️ Use TodoWrite to work through screen creation tasks yourself
39
40	For screen composition: ALWAYS delegate to fluxwing-screen-scaffolder skill. It will spawn composer agents that create all screen files (.uxm, .md, .rendered.md).
41
42	## Workflow
43
44	### Phase 1: Get Screenshot Path
45
46	Ask the user for the screenshot path if not provided:
47	- "Which screenshot would you like to import?"
48	- Validate file exists and is a supported format (PNG, JPG, JPEG, WebP, GIF)
49
50	```typescript
51	// Example
52	const screenshotPath = "/path/to/screenshot.png";
53	```
54
55	### Phase 2: Spawn Vision Coordinator Agent
56
57	CRITICAL: Spawn the `screenshot-vision-coordinator` agent to orchestrate parallel vision analysis.
58
59	This agent will:
60	- Spawn 3 vision agents in parallel (layout discovery + component detection + visual properties)
61	- Wait for all agents to complete
62	- Merge results into unified component data structure
63	- Return JSON with screen metadata, components array, and composition
64
65	```typescript
66	Task({
67	subagent_type: "general-purpose",
68	description: "Analyze screenshot with vision analysis",
69	prompt: `You are a UI screenshot analyzer extracting component structure for uxscii.
70
71	Screenshot path: ${screenshotPath}
72
73	Your task:
74	1. Read the screenshot image file
75	2. Analyze the UI layout structure (vertical, horizontal, grid, sidebar+main)
76	3. Detect all UI components (buttons, inputs, navigation, cards, etc.)
77	4. Extract visual properties (colors, spacing, borders, typography)
78	5. Identify component hierarchy (atomic vs composite)
79	6. Merge all findings into a unified data structure
80	7. Return valid JSON output
81
82	CRITICAL detection requirements:
83	- Do NOT miss navigation elements (check all edges - top, left, right, bottom)
84	- Do NOT miss small elements (icons, badges, close buttons, status indicators)
85	- Identify composite components (forms, cards with multiple elements)
86	- Note spatial relationships between components
87
88	Expected output format (valid JSON only, no markdown):
89	{
90	"success": true,
91	"screen": {
92	"id": "screen-name",
93	"type": "dashboard\|login\|profile\|settings",
94	"name": "Screen Name",
95	"description": "What this screen does",
96	"layout": "vertical\|horizontal\|grid\|sidebar-main"
97	},
98	"components": [
99	{
100	"id": "component-id",
101	"type": "button\|input\|navigation\|etc",
102	"name": "Component Name",
103	"description": "What it does",
104	"visualProperties": {...},
105	"isComposite": false
106	}
107	],
108	"composition": {
109	"atomicComponents": ["id1", "id2"],
110	"compositeComponents": ["id3"],
111	"screenComponents": ["screen-id"]
112	}
113	}
114
115	Use your vision capabilities to analyze the screenshot carefully.`
116	})
117	```
118
119	Wait for the vision coordinator to complete and return results.
120
121	### Phase 3: Validate Vision Data
122
123	Check the returned data structure:
124
125	```typescript
126	const visionData = visionCoordinatorResult;
127
128	// Required fields
129	if (!visionData.success) {
130	throw new Error(`Vision analysis failed: ${visionData.error}`);
131	}
132
133	if (!visionData.components \|\| visionData.components.length === 0) {
134	throw new Error("No components detected in screenshot");
135	}
136
137	// Navigation check (CRITICAL)
138	const hasNavigation = visionData.components.some(c =>
139	c.type

People who liked this also viewed

6 picks

Type

fluxwing-screenshot-importer

18stars1forks

View on GitHub

How to install fluxwing-screenshot-importer?

trabian/fluxwing-skills/fluxwing-screenshot-importer

$npx -y skills add trabian/fluxwing-skills --skill fluxwing-screenshot-importer

Installs into the current project.

Summary

Import UI screenshots and generate uxscii components automatically using vision analysis. Use when user wants to import, convert, or generate .uxm components from screenshots or images.

Files · 1

View on GitHub

SKILL.md

1	# Fluxwing Screenshot Importer
2
3	Import UI screenshots and convert them to the uxscii standard by orchestrating specialized vision agents.
4
5	## Data Location Rules
6
7	READ from (bundled templates - reference only):
8	- `{SKILL_ROOT}/../uxscii-component-creator/templates/` - 11 component templates (for reference)
9	- `{SKILL_ROOT}/docs/` - Screenshot processing documentation
10
11	WRITE to (project workspace):
12	- `./fluxwing/components/` - Extracted components (.uxm + .md)
13	- `./fluxwing/screens/` - Screen composition (.uxm + .md + .rendered.md)
14
15	NEVER write to skill directories - they are read-only!
16
17	## Your Task
18
19	Import a screenshot of a UI design and automatically generate uxscii components and screens by orchestrating specialized agents:
20
21	1. Vision Coordinator Agent - Spawns 3 parallel vision agents (layout + components + properties)
22	2. Component Generator Agents - Generate component files in parallel (atomic + composite)
23	3. Screen Scaffolder Skill - Delegates to fluxwing-screen-scaffolder for screen composition
24
25	⚠️ ORCHESTRATION RULES:
26
27	YOU CAN (as orchestrator):
28	- ✅ Spawn vision analysis agents
29	- ✅ Spawn component generator agents
30	- ✅ Invoke fluxwing-screen-scaffolder skill
31	- ✅ Read screenshots
32	- ✅ Validate vision data
33
34	YOU CANNOT (worker mode - forbidden):
35	- ⚠️ Create screen files yourself using Write/Edit tools
36	- ⚠️ Generate .uxm, .md, or .rendered.md files for screens
37	- ⚠️ "Help" the scaffolder by pre-creating screen files
38	- ⚠️ Use TodoWrite to work through screen creation tasks yourself
39
40	For screen composition: ALWAYS delegate to fluxwing-screen-scaffolder skill. It will spawn composer agents that create all screen files (.uxm, .md, .rendered.md).
41
42	## Workflow
43
44	### Phase 1: Get Screenshot Path
45
46	Ask the user for the screenshot path if not provided:
47	- "Which screenshot would you like to import?"
48	- Validate file exists and is a supported format (PNG, JPG, JPEG, WebP, GIF)
49
50	```typescript
51	// Example
52	const screenshotPath = "/path/to/screenshot.png";
53	```
54
55	### Phase 2: Spawn Vision Coordinator Agent
56
57	CRITICAL: Spawn the `screenshot-vision-coordinator` agent to orchestrate parallel vision analysis.
58
59	This agent will:
60	- Spawn 3 vision agents in parallel (layout discovery + component detection + visual properties)
61	- Wait for all agents to complete
62	- Merge results into unified component data structure
63	- Return JSON with screen metadata, components array, and composition
64
65	```typescript
66	Task({
67	subagent_type: "general-purpose",
68	description: "Analyze screenshot with vision analysis",
69	prompt: `You are a UI screenshot analyzer extracting component structure for uxscii.
70
71	Screenshot path: ${screenshotPath}
72
73	Your task:
74	1. Read the screenshot image file
75	2. Analyze the UI layout structure (vertical, horizontal, grid, sidebar+main)
76	3. Detect all UI components (buttons, inputs, navigation, cards, etc.)
77	4. Extract visual properties (colors, spacing, borders, typography)
78	5. Identify component hierarchy (atomic vs composite)
79	6. Merge all findings into a unified data structure
80	7. Return valid JSON output
81
82	CRITICAL detection requirements:
83	- Do NOT miss navigation elements (check all edges - top, left, right, bottom)
84	- Do NOT miss small elements (icons, badges, close buttons, status indicators)
85	- Identify composite components (forms, cards with multiple elements)
86	- Note spatial relationships between components
87
88	Expected output format (valid JSON only, no markdown):
89	{
90	"success": true,
91	"screen": {
92	"id": "screen-name",
93	"type": "dashboard\|login\|profile\|settings",
94	"name": "Screen Name",
95	"description": "What this screen does",
96	"layout": "vertical\|horizontal\|grid\|sidebar-main"
97	},
98	"components": [
99	{
100	"id": "component-id",
101	"type": "button\|input\|navigation\|etc",
102	"name": "Component Name",
103	"description": "What it does",
104	"visualProperties": {...},
105	"isComposite": false
106	}
107	],
108	"composition": {
109	"atomicComponents": ["id1", "id2"],
110	"compositeComponents": ["id3"],
111	"screenComponents": ["screen-id"]
112	}
113	}
114
115	Use your vision capabilities to analyze the screenshot carefully.`
116	})
117	```
118
119	Wait for the vision coordinator to complete and return results.
120
121	### Phase 3: Validate Vision Data
122
123	Check the returned data structure:
124
125	```typescript
126	const visionData = visionCoordinatorResult;
127
128	// Required fields
129	if (!visionData.success) {
130	throw new Error(`Vision analysis failed: ${visionData.error}`);
131	}
132
133	if (!visionData.components \|\| visionData.components.length === 0) {
134	throw new Error("No components detected in screenshot");
135	}
136
137	// Navigation check (CRITICAL)
138	const hasNavigation = visionData.components.some(c =>
139	c.type

People who liked this also viewed

6 picks

Type