[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M699P7J7337DHXB4GJSGQ4H7":3,"skill-same:01M699P7J7337DHXB4GJSGQ4H7":69},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":39,"linkOnly":40,"markdownContent":41,"markdownBody":42,"frontMatter":43,"refName":46,"commitSha":47,"skillDirectory":48,"forksCount":49,"repositoryHtmlUrl":50,"repositoryHomepageUrl":51,"ownerHtmlUrl":52,"ownerBlogUrl":53,"ownerDescription":54,"updatedAt":55,"install":56,"resources":68},"01M699P7J7337DHXB4GJSGQ4H7","preview-screens",null,"Use when the user wants to preview generated screens in a browser without starting Metro \u002F a simulator — for example after \u002Fcreate-mobile-app finishes or after \u002Fedit-app regenerates a screen.","microsoft\u002Fpower-platform-skills","microsoft","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F6154722?v=4","01M698VYDXZ6JW5WH3CRV650R8","Microsoft","01M699JVYJFB75D9JM70BN4H0Q",1134,"MIT","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fpower-platform-skills\u002Fblob\u002Fmain\u002Fplugins\u002Fmobile-apps\u002Fskills\u002Fpreview-screens\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38],"preview","preview screens","use","when","for","true","sonnet","screen","app","mobile","example","generated","user","edit","write","read","grep","Bash","browser","create","2026-11-10 10:12:30",false,"---\nname: preview-screens\ndescription: Use when the user wants to preview generated screens in a browser without starting Metro \u002F a simulator — for example after \u002Fcreate-mobile-app finishes or after \u002Fedit-app regenerates a screen.\nuser-invocable: true\nallowed-tools: Read, Write, Glob, Grep, Bash\nmodel: sonnet\n---\n\n> **Plugin check**: Run `node \"${PLUGIN_ROOT}\u002Fscripts\u002Fcheck-version.js\"` - if it outputs a message, show it to the user before proceeding.\n\n**Shared instructions: [shared-instructions.md](..\u002F..\u002Fshared\u002Fshared-instructions.md)** — read first.\n\n# Preview Screens\n\nGenerates 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\u002Flight toggle. The agent reads TSX files, understands the Tamagui component tree, and produces equivalent HTML\u002FCSS — no programmatic TSX parsing.\n\n## When to use\n\n- After generating screens, to see a quick visual preview without running Metro\u002FExpo\n- To share a screenshot-ready mockup with stakeholders\n- To verify layout before deploying\n\n## When NOT to use\n\n- To run the actual app → use `npm run dev`\n- To modify screens → use `\u002Fedit-app`; `screen-builder` is an internal agent invoked by orchestrator skills\n\n## Workflow\n\n1. 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\n\n---\n\n### Step 1 — Locate project\n\nDetermine the working directory:\n\n- If `$ARGUMENTS` contains `--working-dir \u003Cpath>`, use that.\n- Otherwise use the current working directory.\n\nValidate the project:\n\n```text\nGlob pattern=\"power.config.json\" path=\"\u003Cworking_dir>\"\n```\n\nIf missing, check for `package.json`. If neither exists, report the error and stop.\n\nRead `memory-bank.md` if present to get the project name for the page title:\n\n```text\nGrep pattern=\"^# \" path=\"\u003Cworking_dir>\u002Fmemory-bank.md\"\n```\n\nFallback: read `name` from `package.json`.\n\n### Step 2 — Discover screens\n\n**Telemetry checkpoint: `discover_app_screens`**\n\nFind all TSX files under the app directory:\n\n```text\nGlob pattern=\"app\u002F**\u002F*.tsx\" path=\"\u003Cworking_dir>\"\n```\n\n**Exclude** these patterns — they are not screens:\n- `_layout.tsx` (navigation layouts)\n- `+not-found.tsx` (Expo Router error boundary)\n- Files in directories starting with `.`\n- `index.tsx` at the app root if it only contains an auth redirect (read it to check)\n- The untouched template `app\u002F(app)\u002Fhome.tsx` when at least one other visible screen exists.\n  Recognize it only when its source still contains both `Power Apps Standalone` and\n  `Build your first screen by connecting data sources`.\n  Keep it when it is the only visible screen so the preview is never empty.\n\n**Derive screen names** from file paths:\n- `app\u002F(app)\u002Fhome.tsx` → \"Home\"\n- `app\u002F(app)\u002Frecipes\u002Findex.tsx` → \"Recipes\"\n- `app\u002F(app)\u002Frecipes\u002F[id].tsx` → \"Recipe Detail\"\n- `app\u002Flogin.tsx` → \"Login\"\n- `app\u002Foauth-callback.tsx` → skip (not a visible screen)\n\nIf `native-app-plan.md` exists in the working directory, read its `## Screens` section for human-friendly labels.\n\nBuild an ordered list: `[ { path, screenName, screenId } ]`.\n\n**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.\n\nSort the list with this priority:\n\n1. **Home \u002F dashboard first.** Prefer the screen that `native-app-plan.md` identifies as the\n   home or landing screen.\n   Otherwise, use the first remaining screen matching any of these paths (in this priority):\n   `app\u002F(app)\u002Fhome.tsx`, `app\u002F(app)\u002Findex.tsx`, `app\u002F(app)\u002Fdashboard.tsx`, `app\u002Findex.tsx`\n   (only if it is a real home screen, not an auth redirect or the untouched starter route filtered\n   out in Step 2).\n2. **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\u002F(app)\u002Frecipes\u002F[id].tsx`, `app\u002F(app)\u002Forders\u002F[orderId]\u002Fedit.tsx`). Take the first two in the order they were discovered (alphabetical by path is fine).\n3. **Then everything else** in discovery order.\n\nIf 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.\n\nDo not drop any screens — this rule only reorders. Every discovered screen still gets a tab.\n\n### Step 3 — Read reference mapping\n\nLoad the Tamagui-to-HTML mapping reference:\n\n```text\nRead file_path=\"${PLUGIN_ROOT}\u002Fshared\u002Freferences\u002Ftamagui-html-mapping.md\"\n```\n\nInternalize:\n- Component → HTML element + CSS mappings (Section 1)\n- Token → pixel values for spacing, font-size, color (Section 2)\n- Conversion guidelines — placeholder rules, icon substitutions, what to skip (Section 3)\n- Phone frame HTML template (Section 4) — this is the outer shell\n\nAlso check if the project has custom brand tokens:\n\n```text\nGlob pattern=\"tamagui.config.ts\" path=\"\u003Cworking_dir>\"\n```\n\nIf found, read it and extract any custom color tokens (look for `tokens: { color: { ... } }`). Add them as additional CSS custom properties in the generated HTML.\n\n### Step 4 — Read and convert each screen\n\n**Telemetry checkpoint: `render_screen_preview_frames`**\n\n**Print before starting:**\n> \"→ Reading + converting \u003CN> screens to HTML\u002FCSS (one print per screen as I go).\"\n\nFor each screen in the ordered list from Step 2:\n\n1. **Read the full TSX file.**\n\n2. **Identify the component tree.** Walk the JSX return statement and note every Tamagui component, its props, and its children.\n\n3. **Generate equivalent HTML\u002FCSS** using the mapping from Step 3:\n   - `YStack` → `\u003Cdiv style=\"display:flex; flex-direction:column; ...\">`\n   - Map every shorthand prop to its CSS equivalent (`flex={1}` → `flex:1`, `bg=\"$color2\"` → `background:var(--color2)`, etc.)\n   - Map token values to pixels (`p=\"$4\"` → `padding:16px`)\n   - Replace `\u003CIonicons name=\"...\" \u002F>` icons with Unicode equivalents (see mapping reference Section 3, Guideline 4 — the icon substitution table uses Ionicons names)\n\n4. **Handle dynamic content:**\n   - `.map()` over arrays → generate 3–4 representative placeholder items\n   - `useQuery` \u002F `useMutation` → show the populated state only (skip loading\u002Ferror branches)\n   - Form `defaultValues` → pre-fill inputs with those values\n\n   Native PDF\u002Fpen controls need honest static approximations:\n   - PDF viewer actions → render a compact report\u002FPDF block with a filename, generated timestamp, storage label (for example `Stored in Evidence PDF File` or `On-device share only`), and a disabled `View PDF` button. If the source URL is not visibly HTTPS, label it `Preview unavailable in browser` rather than showing a fake viewer.\n   - Generated PDF reports → render the generated\u002Fready state and any persistence label from the plan or code, such as `Uploads to Evidence PDF File`. Do not embed a browser PDF iframe or imply the native viewer runs in preview.\n   - Pen\u002Fsignature input → render a signature pad placeholder with an ink stroke sample and a captured-preview state. Include the persistence label when known, such as `Stored in Signature Image` or `Uploads to Signature File`.\n   - Do not wire browser click handlers that pretend to capture pen input, open native PDF viewer, share, print, or upload. This preview is visual only.\n\n5. **Produce a `\u003Cdiv class=\"screen\" id=\"screen-{screenId}\">` wrapping the converted HTML.**\n\nUse inline styles on elements. Keep each screen's HTML self-contained (no shared CSS classes between screens, except the theme variables).\n\n### Step 5 — Assemble preview.html\n\nUse the phone frame template from the mapping reference (Section 4) as the outer shell.\n\nReplace the placeholders:\n\n- **`{{APP_NAME}}`** — project name from Step 1\n- **`{{TABS}}`** — one `\u003Cbutton class=\"tab\" ...>` per screen, first tab gets class `active`\n- **`{{SCREENS}}`** — all screen `\u003Cdiv>` blocks from Step 4, first screen gets class `active`\n\nIf the project has custom brand tokens (from Step 3), add them to the `:root` CSS block.\n\n### Step 6 — Write the file\n\n**Telemetry checkpoint: `write_screen_preview_document`**\n\n```text\nWrite file_path=\"\u003Cworking_dir>\u002Fpreview.html\"\n```\n\nPrint confirmation:\n\n```\n✅ Preview generated: \u003Cworking_dir>\u002Fpreview.html\n   Screens: \u003CN> (\u003Ccomma-separated list of screen names>)\n   Toggle: dark\u002Flight mode button in top-right\n```\n\n### Step 7 — Open in browser\n\n**Telemetry checkpoint: `open_screen_preview`**\n\n**Do NOT prompt.** The `visual_companion` flag in `\u003Cworking_dir>\u002Fmemory-bank.md` already encodes the answer; asking again is redundant. The flag is set by `\u002Fdesign-system` (Step 6.75) during project creation, or defaults to `yes` if `\u002Fdesign-system` was not run.\n\nRead the flag and act:\n\n```bash\ngrep -E \"^visual_companion:[[:space:]]*(yes|no)\" '\u003Cworking_dir>\u002Fmemory-bank.md' 2>\u002Fdev\u002Fnull\n```\n\n| Flag | Action |\n|---|---|\n| `MOBILE_APP_EMBED_PREVIEW=1` | Print the link and stop. The owning edit plan embeds the screens. |\n| `visual_companion: no` | Print the link and stop. Do not auto-open. |\n| `visual_companion: yes` (or missing memory-bank, or standalone invocation) | Print the link, then auto-open. |\n\n**`visual_companion: no`** — print:\n\n> \"Preview is at: `file:\u002F\u002F\u003Cworking_dir>\u002Fpreview.html` (Visual Companion off — open manually.)\"\n\n**Otherwise** — print the link AND auto-open in one breath, no prompt:\n\n> \"Preview is at: `file:\u002F\u002F\u003Cworking_dir>\u002Fpreview.html` — opening now.\"\n\nThen try OS-appropriate openers in sequence and fall back to printing the link if none work:\n\n```bash\nopen '\u003Cworking_dir>\u002Fpreview.html' 2>\u002Fdev\u002Fnull \\\n  || xdg-open '\u003Cworking_dir>\u002Fpreview.html' 2>\u002Fdev\u002Fnull \\\n  || MOBILE_APP_PREVIEW_PATH='\u003Cworking_dir>\u002Fpreview.html' \\\n     powershell.exe -NoProfile -Command 'Start-Process -FilePath $env:MOBILE_APP_PREVIEW_PATH' 2>\u002Fdev\u002Fnull \\\n  || printf '%s\\n' 'Could not auto-open. Open this URL in your browser: file:\u002F\u002F\u003Cworking_dir>\u002Fpreview.html'\n```\n\n`open` is macOS-only; the chain also tries Linux (`xdg-open`) and Windows\n(`powershell.exe Start-Process`). The Windows path is passed as data, not\nPowerShell source. On headless or unsupported cross-host sessions, report the\nfailed launch and manual link instead of claiming the browser opened.\n\n---\n\n## Notes\n\n- **Read-only with respect to source code.** This skill only creates\u002Foverwrites `preview.html` — it never modifies TSX files, layouts, configs, or the memory bank.\n- **Static approximation.** The preview does not execute React, handle state, or fetch data. Dynamic lists show placeholder items. Interactions (button taps, navigation) are not functional.\n- **Native capabilities are placeholders.** PDF viewer, PDF report, sharing, printing, and pen\u002Fsignature capture are shown as static states only. Browser preview must not imply native capture\u002Fviewer APIs work there.\n- **Re-running** `\u002Fpreview-screens` overwrites the previous `preview.html`.\n- **No memory-bank update** needed — previews are ephemeral artifacts.\n\n## References\n\n- [tamagui-html-mapping.md](..\u002F..\u002Fshared\u002Freferences\u002Ftamagui-html-mapping.md) — component + token mapping + phone frame template\n- [tamagui-component-recipes.md](..\u002F..\u002Fshared\u002Freferences\u002Ftamagui-component-recipes.md) — copy-paste Tamagui snippets (context for recognizing patterns)\n- [screen-templates.md](..\u002F..\u002Fshared\u002Freferences\u002Fscreen-templates.md) — screen archetype layouts\n","> **Plugin check**: Run `node \"${PLUGIN_ROOT}\u002Fscripts\u002Fcheck-version.js\"` - if it outputs a message, show it to the user before proceeding.\n\n**Shared instructions: [shared-instructions.md](..\u002F..\u002Fshared\u002Fshared-instructions.md)** — read first.\n\n# Preview Screens\n\nGenerates 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\u002Flight toggle. The agent reads TSX files, understands the Tamagui component tree, and produces equivalent HTML\u002FCSS — no programmatic TSX parsing.\n\n## When to use\n\n- After generating screens, to see a quick visual preview without running Metro\u002FExpo\n- To share a screenshot-ready mockup with stakeholders\n- To verify layout before deploying\n\n## When NOT to use\n\n- To run the actual app → use `npm run dev`\n- To modify screens → use `\u002Fedit-app`; `screen-builder` is an internal agent invoked by orchestrator skills\n\n## Workflow\n\n1. 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\n\n---\n\n### Step 1 — Locate project\n\nDetermine the working directory:\n\n- If `$ARGUMENTS` contains `--working-dir \u003Cpath>`, use that.\n- Otherwise use the current working directory.\n\nValidate the project:\n\n```text\nGlob pattern=\"power.config.json\" path=\"\u003Cworking_dir>\"\n```\n\nIf missing, check for `package.json`. If neither exists, report the error and stop.\n\nRead `memory-bank.md` if present to get the project name for the page title:\n\n```text\nGrep pattern=\"^# \" path=\"\u003Cworking_dir>\u002Fmemory-bank.md\"\n```\n\nFallback: read `name` from `package.json`.\n\n### Step 2 — Discover screens\n\n**Telemetry checkpoint: `discover_app_screens`**\n\nFind all TSX files under the app directory:\n\n```text\nGlob pattern=\"app\u002F**\u002F*.tsx\" path=\"\u003Cworking_dir>\"\n```\n\n**Exclude** these patterns — they are not screens:\n- `_layout.tsx` (navigation layouts)\n- `+not-found.tsx` (Expo Router error boundary)\n- Files in directories starting with `.`\n- `index.tsx` at the app root if it only contains an auth redirect (read it to check)\n- The untouched template `app\u002F(app)\u002Fhome.tsx` when at least one other visible screen exists.\n  Recognize it only when its source still contains both `Power Apps Standalone` and\n  `Build your first screen by connecting data sources`.\n  Keep it when it is the only visible screen so the preview is never empty.\n\n**Derive screen names** from file paths:\n- `app\u002F(app)\u002Fhome.tsx` → \"Home\"\n- `app\u002F(app)\u002Frecipes\u002Findex.tsx` → \"Recipes\"\n- `app\u002F(app)\u002Frecipes\u002F[id].tsx` → \"Recipe Detail\"\n- `app\u002Flogin.tsx` → \"Login\"\n- `app\u002Foauth-callback.tsx` → skip (not a visible screen)\n\nIf `native-app-plan.md` exists in the working directory, read its `## Screens` section for human-friendly labels.\n\nBuild an ordered list: `[ { path, screenName, screenId } ]`.\n\n**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.\n\nSort the list with this priority:\n\n1. **Home \u002F dashboard first.** Prefer the screen that `native-app-plan.md` identifies as the\n   home or landing screen.\n   Otherwise, use the first remaining screen matching any of these paths (in this priority):\n   `app\u002F(app)\u002Fhome.tsx`, `app\u002F(app)\u002Findex.tsx`, `app\u002F(app)\u002Fdashboard.tsx`, `app\u002Findex.tsx`\n   (only if it is a real home screen, not an auth redirect or the untouched starter route filtered\n   out in Step 2).\n2. **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\u002F(app)\u002Frecipes\u002F[id].tsx`, `app\u002F(app)\u002Forders\u002F[orderId]\u002Fedit.tsx`). Take the first two in the order they were discovered (alphabetical by path is fine).\n3. **Then everything else** in discovery order.\n\nIf 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.\n\nDo not drop any screens — this rule only reorders. Every discovered screen still gets a tab.\n\n### Step 3 — Read reference mapping\n\nLoad the Tamagui-to-HTML mapping reference:\n\n```text\nRead file_path=\"${PLUGIN_ROOT}\u002Fshared\u002Freferences\u002Ftamagui-html-mapping.md\"\n```\n\nInternalize:\n- Component → HTML element + CSS mappings (Section 1)\n- Token → pixel values for spacing, font-size, color (Section 2)\n- Conversion guidelines — placeholder rules, icon substitutions, what to skip (Section 3)\n- Phone frame HTML template (Section 4) — this is the outer shell\n\nAlso check if the project has custom brand tokens:\n\n```text\nGlob pattern=\"tamagui.config.ts\" path=\"\u003Cworking_dir>\"\n```\n\nIf found, read it and extract any custom color tokens (look for `tokens: { color: { ... } }`). Add them as additional CSS custom properties in the generated HTML.\n\n### Step 4 — Read and convert each screen\n\n**Telemetry checkpoint: `render_screen_preview_frames`**\n\n**Print before starting:**\n> \"→ Reading + converting \u003CN> screens to HTML\u002FCSS (one print per screen as I go).\"\n\nFor each screen in the ordered list from Step 2:\n\n1. **Read the full TSX file.**\n\n2. **Identify the component tree.** Walk the JSX return statement and note every Tamagui component, its props, and its children.\n\n3. **Generate equivalent HTML\u002FCSS** using the mapping from Step 3:\n   - `YStack` → `\u003Cdiv style=\"display:flex; flex-direction:column; ...\">`\n   - Map every shorthand prop to its CSS equivalent (`flex={1}` → `flex:1`, `bg=\"$color2\"` → `background:var(--color2)`, etc.)\n   - Map token values to pixels (`p=\"$4\"` → `padding:16px`)\n   - Replace `\u003CIonicons name=\"...\" \u002F>` icons with Unicode equivalents (see mapping reference Section 3, Guideline 4 — the icon substitution table uses Ionicons names)\n\n4. **Handle dynamic content:**\n   - `.map()` over arrays → generate 3–4 representative placeholder items\n   - `useQuery` \u002F `useMutation` → show the populated state only (skip loading\u002Ferror branches)\n   - Form `defaultValues` → pre-fill inputs with those values\n\n   Native PDF\u002Fpen controls need honest static approximations:\n   - PDF viewer actions → render a compact report\u002FPDF block with a filename, generated timestamp, storage label (for example `Stored in Evidence PDF File` or `On-device share only`), and a disabled `View PDF` button. If the source URL is not visibly HTTPS, label it `Preview unavailable in browser` rather than showing a fake viewer.\n   - Generated PDF reports → render the generated\u002Fready state and any persistence label from the plan or code, such as `Uploads to Evidence PDF File`. Do not embed a browser PDF iframe or imply the native viewer runs in preview.\n   - Pen\u002Fsignature input → render a signature pad placeholder with an ink stroke sample and a captured-preview state. Include the persistence label when known, such as `Stored in Signature Image` or `Uploads to Signature File`.\n   - Do not wire browser click handlers that pretend to capture pen input, open native PDF viewer, share, print, or upload. This preview is visual only.\n\n5. **Produce a `\u003Cdiv class=\"screen\" id=\"screen-{screenId}\">` wrapping the converted HTML.**\n\nUse inline styles on elements. Keep each screen's HTML self-contained (no shared CSS classes between screens, except the theme variables).\n\n### Step 5 — Assemble preview.html\n\nUse the phone frame template from the mapping reference (Section 4) as the outer shell.\n\nReplace the placeholders:\n\n- **`{{APP_NAME}}`** — project name from Step 1\n- **`{{TABS}}`** — one `\u003Cbutton class=\"tab\" ...>` per screen, first tab gets class `active`\n- **`{{SCREENS}}`** — all screen `\u003Cdiv>` blocks from Step 4, first screen gets class `active`\n\nIf the project has custom brand tokens (from Step 3), add them to the `:root` CSS block.\n\n### Step 6 — Write the file\n\n**Telemetry checkpoint: `write_screen_preview_document`**\n\n```text\nWrite file_path=\"\u003Cworking_dir>\u002Fpreview.html\"\n```\n\nPrint confirmation:\n\n```\n✅ Preview generated: \u003Cworking_dir>\u002Fpreview.html\n   Screens: \u003CN> (\u003Ccomma-separated list of screen names>)\n   Toggle: dark\u002Flight mode button in top-right\n```\n\n### Step 7 — Open in browser\n\n**Telemetry checkpoint: `open_screen_preview`**\n\n**Do NOT prompt.** The `visual_companion` flag in `\u003Cworking_dir>\u002Fmemory-bank.md` already encodes the answer; asking again is redundant. The flag is set by `\u002Fdesign-system` (Step 6.75) during project creation, or defaults to `yes` if `\u002Fdesign-system` was not run.\n\nRead the flag and act:\n\n```bash\ngrep -E \"^visual_companion:[[:space:]]*(yes|no)\" '\u003Cworking_dir>\u002Fmemory-bank.md' 2>\u002Fdev\u002Fnull\n```\n\n| Flag | Action |\n|---|---|\n| `MOBILE_APP_EMBED_PREVIEW=1` | Print the link and stop. The owning edit plan embeds the screens. |\n| `visual_companion: no` | Print the link and stop. Do not auto-open. |\n| `visual_companion: yes` (or missing memory-bank, or standalone invocation) | Print the link, then auto-open. |\n\n**`visual_companion: no`** — print:\n\n> \"Preview is at: `file:\u002F\u002F\u003Cworking_dir>\u002Fpreview.html` (Visual Companion off — open manually.)\"\n\n**Otherwise** — print the link AND auto-open in one breath, no prompt:\n\n> \"Preview is at: `file:\u002F\u002F\u003Cworking_dir>\u002Fpreview.html` — opening now.\"\n\nThen try OS-appropriate openers in sequence and fall back to printing the link if none work:\n\n```bash\nopen '\u003Cworking_dir>\u002Fpreview.html' 2>\u002Fdev\u002Fnull \\\n  || xdg-open '\u003Cworking_dir>\u002Fpreview.html' 2>\u002Fdev\u002Fnull \\\n  || MOBILE_APP_PREVIEW_PATH='\u003Cworking_dir>\u002Fpreview.html' \\\n     powershell.exe -NoProfile -Command 'Start-Process -FilePath $env:MOBILE_APP_PREVIEW_PATH' 2>\u002Fdev\u002Fnull \\\n  || printf '%s\\n' 'Could not auto-open. Open this URL in your browser: file:\u002F\u002F\u003Cworking_dir>\u002Fpreview.html'\n```\n\n`open` is macOS-only; the chain also tries Linux (`xdg-open`) and Windows\n(`powershell.exe Start-Process`). The Windows path is passed as data, not\nPowerShell source. On headless or unsupported cross-host sessions, report the\nfailed launch and manual link instead of claiming the browser opened.\n\n---\n\n## Notes\n\n- **Read-only with respect to source code.** This skill only creates\u002Foverwrites `preview.html` — it never modifies TSX files, layouts, configs, or the memory bank.\n- **Static approximation.** The preview does not execute React, handle state, or fetch data. Dynamic lists show placeholder items. Interactions (button taps, navigation) are not functional.\n- **Native capabilities are placeholders.** PDF viewer, PDF report, sharing, printing, and pen\u002Fsignature capture are shown as static states only. Browser preview must not imply native capture\u002Fviewer APIs work there.\n- **Re-running** `\u002Fpreview-screens` overwrites the previous `preview.html`.\n- **No memory-bank update** needed — previews are ephemeral artifacts.\n\n## References\n\n- [tamagui-html-mapping.md](..\u002F..\u002Fshared\u002Freferences\u002Ftamagui-html-mapping.md) — component + token mapping + phone frame template\n- [tamagui-component-recipes.md](..\u002F..\u002Fshared\u002Freferences\u002Ftamagui-component-recipes.md) — copy-paste Tamagui snippets (context for recognizing patterns)\n- [screen-templates.md](..\u002F..\u002Fshared\u002Freferences\u002Fscreen-templates.md) — screen archetype layouts\n",{"name":5,"model":25,"description":7,"allowed-tools":44,"user-invocable":45},"Read, Write, Glob, Grep, Bash",true,"main","0a55a88fa2855404029d1e5450faf92878baf763","plugins\u002Fmobile-apps\u002Fskills\u002Fpreview-screens",228,"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fpower-platform-skills","https:\u002F\u002Fmicrosoft.github.io\u002Fpower-platform-skills\u002F","https:\u002F\u002Fgithub.com\u002Fmicrosoft","https:\u002F\u002Fopensource.microsoft.com","Open source projects and samples from Microsoft","2026-11-12 02:16:25",{"source":8,"skillName":5,"commands":57,"prompt":67,"zipAvailable":45},[58,61,64],{"tool":59,"command":60},"npx","npx skills add microsoft\u002Fpower-platform-skills --skill preview-screens",{"tool":62,"command":63},"bunx","bunx skills add microsoft\u002Fpower-platform-skills --skill preview-screens",{"tool":65,"command":66},"pnpm","pnpm dlx skills add microsoft\u002Fpower-platform-skills --skill preview-screens","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fpower-platform-skills\u002Fblob\u002Fmain\u002Fplugins\u002Fmobile-apps\u002Fskills\u002Fpreview-screens\u002FSKILL.md",[],[70,88,109,127,141,151],{"skillNo":71,"name":72,"nameZh":6,"description":73,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":74,"categories":75,"keywords":76,"publishedAt":39},"01M699WVHX0XN59EPBTTPEKYPG","setup","Use when Process Intelligence needs building, explicit cloud\u002Faccount\u002Fenvironment configuration, sign-in, connection diagnostics, or recovery from an authentication error.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fpower-platform-skills\u002Fblob\u002Fmain\u002Fplugins\u002Fprocess-intelligence\u002Fskills\u002Fsetup\u002FSKILL.md",[],[72,34,22,77,78,79,80,81,21,82,83,84,85,86,87,36],"connection","error","sign","intelligence","configuration","process","diagnostics","environment","authentication","cloud","recovery",{"skillNo":89,"name":90,"nameZh":6,"description":91,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":92,"categories":93,"keywords":99,"publishedAt":39},"01M699WSR9EX55YY1WD9J22FEG","report-issue","Use when the user wants a Process Intelligence bug-report draft or support summary for a failed operation.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fpower-platform-skills\u002Fblob\u002Fmain\u002Fplugins\u002Fprocess-intelligence\u002Fskills\u002Freport-issue\u002FSKILL.md",[94],{"categoryNo":95,"categoryName":96,"taxonomyType":97,"taxonomyTypeDesc":98},"01JBSEEDCAT000000000000034","行政与办公人员","PROFESSION","适用职业",[100,101,102,103,31,82,21,104,105,80,106,107,23,22,108],"report issue","report","issue","support","bug","summary","draft","operation","bug-report",{"skillNo":110,"name":111,"nameZh":6,"description":112,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":113,"categories":114,"keywords":115,"publishedAt":39},"01M699WR26YQ9Q21KE6MJF5B2G","investigate-process","Use when a broad Process Mining business question, observed pattern or competing explanation needs investigation across analytical perspectives.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fpower-platform-skills\u002Fblob\u002Fmain\u002Fplugins\u002Fprocess-intelligence\u002Fskills\u002Finvestigate-process\u002FSKILL.md",[],[82,116,117,118,22,119,120,121,122,34,123,21,124,125,126],"investigate","investigate process","mining","process mining","investigation","perspectives","question","business","pattern","across","analytical",{"skillNo":128,"name":129,"nameZh":6,"description":130,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":131,"categories":132,"keywords":133,"publishedAt":39},"01M699WP9SDG5ZR12P8VYNXKTN","derive-metric","Use when a requested measure is missing, a saved custom metric needs reuse, or an ephemeral formula or derived scalar is needed.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fpower-platform-skills\u002Fblob\u002Fmain\u002Fplugins\u002Fprocess-intelligence\u002Fskills\u002Fderive-metric\u002FSKILL.md",[],[134,135,34,21,136,137,138,139,140,22],"metric","derive metric","formula","missing","reuse","saved","custom",{"skillNo":142,"name":143,"nameZh":6,"description":144,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":145,"categories":146,"keywords":147,"publishedAt":39},"01M699WMG5R8P6SMTDAS1TKF9E","compare-cohorts","Use when comparing process cohorts, departments, periods or before-and-after results under matched definitions.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fpower-platform-skills\u002Fblob\u002Fmain\u002Fplugins\u002Fprocess-intelligence\u002Fskills\u002Fcompare-cohorts\u002FSKILL.md",[],[148,149,22,21,82,150,34],"compare","compare cohorts","results",{"skillNo":152,"name":153,"nameZh":6,"description":154,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":155,"categories":156,"keywords":157,"publishedAt":39},"01M699WJWNVTMP9XK3NCJHV14D","analyze-variants","Use when investigating common or slow variants, repeated work, unusual paths, or a specific Process Mining case.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fpower-platform-skills\u002Fblob\u002Fmain\u002Fplugins\u002Fprocess-intelligence\u002Fskills\u002Fanalyze-variants\u002FSKILL.md",[],[158,159,160,119,22,118,161,162,21,82,34,163,164],"analyze","variants","analyze variants","case","paths","work","common"]