preview-screens

Name: preview-screens
Author: microsoft

523stars103forks

How to install preview-screens?

microsoft/power-platform-skills/preview-screens

$npx -y skills add microsoft/power-platform-skills --skill preview-screens

Installs into the current project.

Summary

Use when the user wants to preview generated screens in a browser without starting Metro / a simulator — for example after /create-mobile-app finishes or after /edit-app regenerates a screen.

Files · 1

View on GitHub

SKILL.md

1	Shared instructions: [shared-instructions.md](../../shared/shared-instructions.md) — read first.
2
3	# Preview Screens
4
5	Generates a self-contained HTML file that renders every screen in the app as a phone-frame mockup (375 × 812) with tab navigation and a dark/light toggle. The agent reads TSX files, understands the Tamagui component tree, and produces equivalent HTML/CSS — no programmatic TSX parsing.
6
7	## When to use
8
9	- After generating screens, to see a quick visual preview without running Metro/Expo
10	- To share a screenshot-ready mockup with stakeholders
11	- To verify layout before deploying
12
13	## When NOT to use
14
15	- To run the actual app → use `npx expo start`
16	- To modify screens → use `/edit-app`; `screen-builder` is an internal agent invoked by orchestrator skills
17
18	## Workflow
19
20	1. Locate project → 2. Discover screens → 3. Read reference mapping → 4. Read & convert each screen → 5. Assemble preview.html → 6. Write file → 7. Open in browser
21
22	---
23
24	### Step 1 — Locate project
25
26	Determine the working directory:
27
28	- If `$ARGUMENTS` contains `--working-dir <path>`, use that.
29	- Otherwise use the current working directory.
30
31	Validate the project:
32
33	```text
34	Glob pattern="power.config.json" path="<working_dir>"
35	```
36
37	If missing, check for `package.json`. If neither exists, report the error and stop.
38
39	Read `memory-bank.md` if present to get the project name for the page title:
40
41	```text
42	Grep pattern="^# " path="<working_dir>/memory-bank.md"
43	```
44
45	Fallback: read `name` from `package.json`.
46
47	### Step 2 — Discover screens
48
49	Find all TSX files under the app directory:
50
51	```text
52	Glob pattern="app/*/.tsx" path="<working_dir>"
53	```
54
55	Exclude these patterns — they are not screens:
56	- `_layout.tsx` (navigation layouts)
57	- `+not-found.tsx` (Expo Router error boundary)
58	- Files in directories starting with `.`
59	- `index.tsx` at the app root if it only contains an auth redirect (read it to check)
60
61	Derive screen names from file paths:
62	- `app/(app)/home.tsx` → "Home"
63	- `app/(app)/recipes/index.tsx` → "Recipes"
64	- `app/(app)/recipes/[id].tsx` → "Recipe Detail"
65	- `app/login.tsx` → "Login"
66	- `app/oauth-callback.tsx` → skip (not a visible screen)
67
68	If `native-app-plan.md` exists in the working directory, read its `## Screens` section for human-friendly labels.
69
70	Build an ordered list: `[ { path, screenName, screenId } ]`.
71
72	Default tab ordering — Home first, then two details, then the rest. Step 5 marks the first entry as `active`, so the order below directly controls which screen the user lands on when `preview.html` opens.
73
74	Sort the list with this priority:
75
76	1. Home / dashboard first. The first screen matching any of these paths (in this priority): `app/(app)/home.tsx`, `app/(app)/index.tsx`, `app/(app)/dashboard.tsx`, `app/index.tsx` (only if it's a real home screen — not the auth redirect you already filtered out in Step 2). If `native-app-plan.md` flags one screen as the home/landing screen, prefer that.
77	2. Then up to two detail screens. A "detail" screen is any TSX whose route segment uses a dynamic param — file path contains `[` and `]` (e.g. `app/(app)/recipes/[id].tsx`, `app/(app)/orders/[orderId]/edit.tsx`). Take the first two in the order they were discovered (alphabetical by path is fine).
78	3. Then everything else in discovery order.
79
80	If there are fewer than two detail screens, just include whatever exists and continue with the rest — do not pad with non-detail screens to force a count of 3.
81
82	Do not drop any screens — this rule only reorders. Every discovered screen still gets a tab.
83
84	### Step 3 — Read reference mapping
85
86	Load the Tamagui-to-HTML mapping reference:
87
88	```text
89	Read file_path="${CLAUDE_SKILL_DIR}/../../shared/references/tamagui-html-mapping.md"
90	```
91
92	Internalize:
93	- Component → HTML element + CSS mappings (Section 1)
94	- Token → pixel values for spacing, font-size, color (Section 2)
95	- Conversion guidelines — placeholder rules, icon substitutions, what to skip (Section 3)
96	- Phone frame HTML template (Section 4) — this is the outer shell
97
98	Also check if the project has custom brand tokens:
99
100	```text
101	Glob pattern="tamagui.config.ts" path="<working_dir>"
102	```
103
104	If found, read it and extract any custom color tokens (look for `tokens: { color: { ... } }`). Add them as additional CSS custom properties in the generated HTML.
105
106	### Step 4 — Read and convert each screen
107
108	Print before starting:
109	> "→ Reading + converting <N> screens to HTML/CSS (one print per screen as I go)."
110
111	For each screen in the ordered list from Step 2:
112
113	1. Read the full TSX file.
114
115	2. Identify the component tree. Walk the JSX return statement and note every Tamagui component, its props, and its children.
116
117	3. **Generate equivalent HT

People who liked this also viewed

6 picks

Type

preview-screens

523stars103forks

View on GitHub

How to install preview-screens?

microsoft/power-platform-skills/preview-screens

$npx -y skills add microsoft/power-platform-skills --skill preview-screens

Installs into the current project.

Summary

Use when the user wants to preview generated screens in a browser without starting Metro / a simulator — for example after /create-mobile-app finishes or after /edit-app regenerates a screen.

Files · 1

View on GitHub

SKILL.md

1	Shared instructions: [shared-instructions.md](../../shared/shared-instructions.md) — read first.
2
3	# Preview Screens
4
5	Generates a self-contained HTML file that renders every screen in the app as a phone-frame mockup (375 × 812) with tab navigation and a dark/light toggle. The agent reads TSX files, understands the Tamagui component tree, and produces equivalent HTML/CSS — no programmatic TSX parsing.
6
7	## When to use
8
9	- After generating screens, to see a quick visual preview without running Metro/Expo
10	- To share a screenshot-ready mockup with stakeholders
11	- To verify layout before deploying
12
13	## When NOT to use
14
15	- To run the actual app → use `npx expo start`
16	- To modify screens → use `/edit-app`; `screen-builder` is an internal agent invoked by orchestrator skills
17
18	## Workflow
19
20	1. Locate project → 2. Discover screens → 3. Read reference mapping → 4. Read & convert each screen → 5. Assemble preview.html → 6. Write file → 7. Open in browser
21
22	---
23
24	### Step 1 — Locate project
25
26	Determine the working directory:
27
28	- If `$ARGUMENTS` contains `--working-dir <path>`, use that.
29	- Otherwise use the current working directory.
30
31	Validate the project:
32
33	```text
34	Glob pattern="power.config.json" path="<working_dir>"
35	```
36
37	If missing, check for `package.json`. If neither exists, report the error and stop.
38
39	Read `memory-bank.md` if present to get the project name for the page title:
40
41	```text
42	Grep pattern="^# " path="<working_dir>/memory-bank.md"
43	```
44
45	Fallback: read `name` from `package.json`.
46
47	### Step 2 — Discover screens
48
49	Find all TSX files under the app directory:
50
51	```text
52	Glob pattern="app/*/.tsx" path="<working_dir>"
53	```
54
55	Exclude these patterns — they are not screens:
56	- `_layout.tsx` (navigation layouts)
57	- `+not-found.tsx` (Expo Router error boundary)
58	- Files in directories starting with `.`
59	- `index.tsx` at the app root if it only contains an auth redirect (read it to check)
60
61	Derive screen names from file paths:
62	- `app/(app)/home.tsx` → "Home"
63	- `app/(app)/recipes/index.tsx` → "Recipes"
64	- `app/(app)/recipes/[id].tsx` → "Recipe Detail"
65	- `app/login.tsx` → "Login"
66	- `app/oauth-callback.tsx` → skip (not a visible screen)
67
68	If `native-app-plan.md` exists in the working directory, read its `## Screens` section for human-friendly labels.
69
70	Build an ordered list: `[ { path, screenName, screenId } ]`.
71
72	Default tab ordering — Home first, then two details, then the rest. Step 5 marks the first entry as `active`, so the order below directly controls which screen the user lands on when `preview.html` opens.
73
74	Sort the list with this priority:
75
76	1. Home / dashboard first. The first screen matching any of these paths (in this priority): `app/(app)/home.tsx`, `app/(app)/index.tsx`, `app/(app)/dashboard.tsx`, `app/index.tsx` (only if it's a real home screen — not the auth redirect you already filtered out in Step 2). If `native-app-plan.md` flags one screen as the home/landing screen, prefer that.
77	2. Then up to two detail screens. A "detail" screen is any TSX whose route segment uses a dynamic param — file path contains `[` and `]` (e.g. `app/(app)/recipes/[id].tsx`, `app/(app)/orders/[orderId]/edit.tsx`). Take the first two in the order they were discovered (alphabetical by path is fine).
78	3. Then everything else in discovery order.
79
80	If there are fewer than two detail screens, just include whatever exists and continue with the rest — do not pad with non-detail screens to force a count of 3.
81
82	Do not drop any screens — this rule only reorders. Every discovered screen still gets a tab.
83
84	### Step 3 — Read reference mapping
85
86	Load the Tamagui-to-HTML mapping reference:
87
88	```text
89	Read file_path="${CLAUDE_SKILL_DIR}/../../shared/references/tamagui-html-mapping.md"
90	```
91
92	Internalize:
93	- Component → HTML element + CSS mappings (Section 1)
94	- Token → pixel values for spacing, font-size, color (Section 2)
95	- Conversion guidelines — placeholder rules, icon substitutions, what to skip (Section 3)
96	- Phone frame HTML template (Section 4) — this is the outer shell
97
98	Also check if the project has custom brand tokens:
99
100	```text
101	Glob pattern="tamagui.config.ts" path="<working_dir>"
102	```
103
104	If found, read it and extract any custom color tokens (look for `tokens: { color: { ... } }`). Add them as additional CSS custom properties in the generated HTML.
105
106	### Step 4 — Read and convert each screen
107
108	Print before starting:
109	> "→ Reading + converting <N> screens to HTML/CSS (one print per screen as I go)."
110
111	For each screen in the ordered list from Step 2:
112
113	1. Read the full TSX file.
114
115	2. Identify the component tree. Walk the JSX return statement and note every Tamagui component, its props, and its children.
116
117	3. **Generate equivalent HT

People who liked this also viewed

6 picks

Type