preview-screens Skill
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. Published by microsoft in power-platform-skills.
What is preview-screens Skill?
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. Published by microsoft in power-platform-skills. This profile combines repository metadata with install, compatibility, and usage signals so developers can quickly decide whether it fits their agent workflow before opening the source repository.
Automated repository signals based on public metadata such as recency, license, installation evidence, and adoption. These are not a security audit or endorsement.
Key capabilities
- Includes SKILL.md support
- Reusable instructions support
- Browser automation
- Writing
- Browser automation use cases
- Writing use cases
Technical details
- Install or run with Copy skill directory
When to use preview-screens Skill
- Use it for browser automation.
- Use it for writing.
Built with
Editorial notes
Source
- Creator: microsoft
- Repository: microsoft/power-platform-skills
- Skill file: plugins/mobile-apps/skills/preview-screens/SKILL.md
What it does
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.
Skill instructions
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 tha
Explore related resources
Frequently asked questions
What is preview-screens?
preview-screens is a open-source AI agent skill with Copy skill directory. 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.
Who is preview-screens best for?
preview-screens is best for reusing agent instructions, scripts, and references, browser automation workflows, writing workflows.
How do I install preview-screens?
Install or run preview-screens using Copy skill directory. Check preview-screens for the latest setup command.
Is preview-screens actively maintained?
preview-screens may need a closer maintenance check before production use.
Auto-fetched from GitHub.
