skills.rest
microsoft
microsoftOFFICIAL
Explore all skills by this author →
Website𝕏@OpenAtMicrosoftGitHub

preview-screens

Generates a static HTML phone-frame preview of Tamagui mobile app screens.

808|167|Updated Jan 21, 2026
Search Tags:#HTML#preview#react native#mobile app#expo#mockup#tamagui
One-click install
npx skills add https://github.com/microsoft/power-platform-skills --skill preview-screens
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: preview-screens
Source: https://github.com/microsoft/power-platform-skills/tree/main/plugins/mobile-apps/skills/preview-screens
Command: npx skills add https://github.com/microsoft/power-platform-skills --skill preview-screens

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Previewing generated mobile app screens normally requires starting Metro or an Expo simulator, which is slow and heavy. This Skill converts TSX screens into a self-contained HTML file so you can visually review layouts directly in a browser.

Core Features & Use Cases

  • TSX-to-HTML Conversion: Reads Tamagui component trees and maps them to equivalent HTML/CSS using a token and component mapping reference.
  • Phone-Frame Mockups: Renders every screen at 375 × 812 with tab navigation and a dark/light mode toggle.
  • Static Native Placeholders: Represents PDF viewers, signature pads, and dynamic lists as honest static approximations without fake interactivity.
  • Use Case: After running /create-mobile-app or /edit-app, generate preview.html to share a screenshot-ready mockup with stakeholders before deploying.

Quick Start

Ask the agent to preview the generated screens of the current mobile app project in the browser without starting Metro.

Frequently Asked Questions about preview-screens

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I preview React Native screens without running Expo or Metro?▼

This Skill converts each TSX screen into equivalent HTML/CSS and writes a self-contained preview.html file you can open in any browser. It renders phone-frame mockups with tab navigation, so no Metro bundler or simulator is needed.

How does the Tamagui to HTML conversion work?▼

The agent reads each TSX file, walks the JSX component tree, and maps Tamagui components like YStack to HTML elements using a mapping reference. Token values such as spacing and colors are converted to pixel values and CSS custom properties.

Does the HTML preview run the actual app logic?▼

No, the preview is a static visual approximation. It does not execute React, handle state, fetch data, or support interactions like button taps and navigation; dynamic lists show placeholder items instead.

Can the preview show PDF viewers or signature capture?▼

Native capabilities like PDF viewing and pen/signature input are rendered as static placeholder states with honest labels. The preview never wires browser handlers that pretend to capture input or open native viewers.

When should I not use this screen preview approach?▼

Do not use it to run or test the actual app; use npx expo start for that. It is also not for modifying screens, which should be done through the edit-app workflow instead.

Related Skills

Explore More Software Engineering Skills→
Alejandro05-afkAlejandro05-afk

expo-mobile-ui

Generate Expo/React Native mobile UI code with NativeWind, Tamagui, or StyleSheet.

Community
Intermediate
ckt520728ckt520728

design-deploy-ios-app

Design and deploy iOS apps with Expo and React Native.

Community
Advanced
MilUX-LtdMilUX-Ltd

design-system-setup

Generates a complete design system with tokens, styles, and templates from a JSON file of brand preferences.

Official
Advanced
luxury-yachtluxury-yacht
411

new-story

Generate Storybook stories with real rendering, CSS classes, and mocked data.

Official
Intermediate