preview-screens

preview-screens is a skill for Claude Code from microsoft/power-platform-skills. It costs 41 tokens per session (2,587 once invoked), scanned A, original, MIT.

A browser-based preview of a mobile app’s generated screens, shown inside phone-sized frames with tabs and a light/dark switch.

In plain words
What is it for?
It helps preview every generated screen, check layouts before deployment, and create a screenshot-ready HTML mockup.
Why use it?
It lets developers inspect layout and share a visual mockup without starting Metro, the development server used by Expo and React Native, or a simulator.

Skill for Claude Code ✓ vendor

Written for Claude Code: allowed-tools in frontmatter. Also seen: model in frontmatter; positional $N argument.

Part of the mobile-app plugin — 23 skills, 5 agents shipped together

Good fit It helps preview every generated screen, check layouts before deployment, and create a screenshot-ready HTML mockup.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/microsoft/power-platform-skills/preview-screens
About the project

microsoft/power-platform-skills is a plugin marketplace containing reusable skills, agents, and commands for developing with Microsoft Power Platform. Developers use it to build and deploy Power Pages sites, model-driven Power Apps, and related solutions through Claude Code or GitHub Copilot. The catalogue entries are the marketplace's included skills, agents, plugins, and other agent components.

microsoft/power-platform-skills · 844 stars · on GitHub · aka.ms

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add microsoft/power-platform-skills --skill preview-screens
Clone the repo
git clone --depth 1 https://github.com/microsoft/power-platform-skills

Made for: Claude Code.

Or install mobile-app, the plugin that ships this one along with the rest of its 23 skills, 5 agents.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for preview-screens

README.md
[![agentmods](https://agentmods.dev/badge/skills/microsoft/power-platform-skills/preview-screens/github.svg)](https://agentmods.dev/skills/microsoft/power-platform-skills/preview-screens)
Your own site
<a href="https://agentmods.dev/skills/microsoft/power-platform-skills/preview-screens"><img src="https://agentmods.dev/badge/skills/microsoft/power-platform-skills/preview-screens/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for preview-screens

Your own site · 80×15
<a href="https://agentmods.dev/skills/microsoft/power-platform-skills/preview-screens"><img src="https://agentmods.dev/badge/skills/microsoft/power-platform-skills/preview-screens.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 41 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,587 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • NVIDIA SkillSpector warn 7 Sept 2026
SkillSpector: 3 findings, up to medium

These are SkillSpector’s own severities. On a checked sample its high-severity flags on skills were ~96% false positives — a documented command, a public API, a “never do X” rule — so we show them as a caution to read, not a verdict. Why →

  • medium Excessive Agency · line 6
    Skill selects an external model or provider that may use a different account or billing plan than the operator expects. Undisclosed model switches can cause unexpected cost or quota consumption.
    Fix: Remove the model/provider override or disclose it prominently and require explicit operator approval before invoking an external coding CLI or billed model.
  • medium MCP Rug Pull · line 23
    npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.
    Fix: Pin the version: npx @scope/[email protected]
  • medium Memory Poisoning · line 138
    Skill attempts to fill the context window with filler content, displacing legitimate instructions and safety constraints. This can degrade agent performance or bypass safety boundaries.
    Fix: Implement context-window management that detects and rejects padding or stuffing attempts. Prioritize system instructions over user-injected content.
How audits are shown
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00041 $0.02587
Opus 5 $0.00020 $0.01293
Sonnet 5 $0.00008 $0.00517
Haiku 4.5 $0.00004 $0.00259

Measured yesterday against content hash a6342f9cf61e, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-09, from the pricing page.

Security

Grade A, and why

preview-screens scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured yesterday.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

plugins/mobile-apps/skills/preview-screens/SKILL.md · 229 lines

How it starts

The opening of the file, as written. The whole thing — 229 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Shared instructions: shared-instructions.md — read first.

Preview Screens

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.

When to use

  • After generating screens, to see a quick visual preview without running Metro/Expo
  • To share a screenshot-ready mockup with stakeholders
  • To verify layout before deploying

When NOT to use

  • To run the actual app → use npx expo start
  • To modify screens → use /edit-app; screen-builder is an internal agent invoked by orchestrator skills

Workflow

  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

Step 1 — Locate project

Determine the working directory:

  • If $ARGUMENTS contains --working-dir <path>, use that.
  • Otherwise use the current working directory.

Validate the project:

Glob pattern="power.config.json" path="<working_dir>"

If missing, check for package.json. If neither exists, report the error and stop.

Read memory-bank.md if present to get the project name for the page title:

Grep pattern="^# " path="<working_dir>/memory-bank.md"

Fallback: read name from package.json.

Step 2 — Discover screens

Telemetry checkpoint: discover_app_screens

Find all TSX files under the app directory:

Glob pattern="app/**/*.tsx" path="<working_dir>"

Exclude these patterns — they are not screens:

  • _layout.tsx (navigation layouts)
  • +not-found.tsx (Expo Router error boundary)
  • Files in directories starting with .
  • index.tsx at the app root if it only contains an auth redirect (read it to check)

Derive screen names from file paths:

  • app/(app)/home.tsx → "Home"
  • app/(app)/recipes/index.tsx → "Recipes"
  • app/(app)/recipes/[id].tsx → "Recipe Detail"
  • app/login.tsx → "Login"
  • app/oauth-callback.tsx → skip (not a visible screen)

Read the full file on GitHub · 229 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. yesterday Changed · +8 lines a6342f9cf61e
  2. 5d ago Changed 2ded602827ee
  3. 9d ago First seen · 221 lines · 41 tokens per session scan A 44a7fdfc07b3

Subscribe to this mod's changes

preview-screens is a skill published in the GitHub repository microsoft/power-platform-skills (844 stars, last pushed today), licensed MIT. It adds 41 tokens to every session and 2,587 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

canvas-apps-ui-gen

Generates paste-ready Power Apps Canvas App YAML. Invoke when the user wants to replicate a UI mockup, improve an existing Canvas app screen, or build a new screen from a text description. Also invoke when the user asks to "improve", "redesign", or "generate YAML" for a Canvas app screen.

ToluVictor/canvas-apps-tools · 71 tokens

vertical-fintech-mobile

Domain-knowledge pack for money on a phone — wallets, payments, custody and signing, transaction lifecycle, KYC/AML gates, and offline reconciliation. The rules that separate a payments app from a CRUD app with a currency symbol: a balance is a claim about a server, an idempotency key must outlive the process that…

avelikiy/great_cto · 119 tokens

validate-mobile

Run a Maestro flow on an explicitly selected iOS or Android device and report behavioral evidence.

johnkozaris/jko-claude-plugins · 20 tokens

fec-pwa-implementation

A guide for adding Progressive Web App features to a website. A Progressive Web App, or PWA, is a website that can be installed like an app and can offer limited offline use through a web app manifest and a service worker.

bovinphang/frontend-craft · 87 tokens

fec-web-workers

A Web Worker moves expensive JavaScript calculations into a separate browser thread so the page's main thread can handle input, scrolling, and animation. Workers cannot directly access the page's DOM.

bovinphang/frontend-craft · 78 tokens

fec-browser-storage

A guide for choosing and implementing browser storage, which lets a website keep data on a user’s device. It covers localStorage, sessionStorage, IndexedDB, cookies, offline data, security, and cleanup.

bovinphang/frontend-craft · 59 tokens