preview-screens

仓库创建 2026年1月22日最近提交 3 小时前SkillHot 收录 20 天前

▸ 精选理由

无需模拟器即可快速检查界面，适合迭代开发。

这个 Skill 做什么

读取 TSX 文件并生成可在浏览器预览的手机框架 HTML，展示所有屏幕。

把项目里的 TSX 文件读出来，自动生成一个可以在浏览器打开的独立 HTML 页面，把每个屏幕按手机外框（375×812）预览出来并带有 tab 导航和深浅色切换。用在你不想启动 Metro 或模拟器、只想快速看看新生成或改了的屏幕长啥样的时候。特别之处是能理解 Tamagui 组件树，直接把界面转成等效的 HTML/CSS，无需运行原生打包。

▸ 展开 SKILL.md 英文原文

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.

开发编程屏幕预览TSXTamagui静态渲染Claude Code

566

Stars

116

Forks

仓库内 Skill

+152

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

帮我安装这个 skill：https://raw.githubusercontent.com/microsoft/power-platform-skills/main/plugins/mobile-apps/skills/preview-screens/SKILL.md

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/microsoft/power-platform-skills/main/plugins/mobile-apps/skills/preview-screens/SKILL.md"

SKILL.MD 节选查看完整文件 ↗

**Shared instructions: [shared-instructions.md](../../shared/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

via SKILL·HOT · 数据来自 GitHub 公开信息 · 原文版权归作者所有