菜单
Create deterministic browser, tablet, laptop, and phone mockups from real screenshots via the local TypeScript renderer in this plugin. Use for marketing visuals, store screenshots, and framed UI previews without ML image generation.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | app-mockup |
| description | Create deterministic browser, tablet, laptop, and phone mockups from real screenshots via the local TypeScript renderer in this plugin. Use for marketing visuals, store screenshots, and framed UI previews without ML image generation. |
| allowed-tools | ["executeCommand","readFile","writeFile","chromiumWorkspace"] |
Use this skill when a user wants an existing screenshot wrapped in a browser or device frame.
Run the local renderer in this plugin:
npm --prefix selene-plugins/app-mockup-kit run render -- \
--input <path-or-image-url> \
--output <output.svg> \
--preset <preset>
browser-chromebrowser-safariiphone-14-propixel-6-proipad-promacbook-prowindowplainIdentify the screenshot source.
Infer the right preset.
browser-chrome unless Safari styling is explicitly requestediphone-14-propixel-6-proipad-promacbook-proRender with explicit options.
Verify the artifact.
npm --prefix selene-plugins/app-mockup-kit run render -- \
--input ./tmp/pricing-page.png \
--output ./out/pricing-browser-mockup.svg \
--preset browser-chrome \
--url selene.so/pricing \
--background gradient:#0f172a,#2563eb \
--padding 80 \
--shadow lifted
npm --prefix selene-plugins/app-mockup-kit run render -- \
--input ./tmp/mobile-home.png \
--output ./out/mobile-hero.svg \
--preset iphone-14-pro \
--title "Inbox, rethought" \
--subtitle "Zero-noise triage for support teams"
Build, scaffold, refactor, and troubleshoot ChatGPT Apps SDK applications that combine an MCP server and widget UI. Use when Codex needs to design tools, register UI resources, wire the MCP Apps bridge or ChatGPT compatibility APIs, apply Apps SDK metadata or CSP or domain settings, or produce a docs-aligned project scaffold. Prefer a docs-first workflow by invoking the openai-docs skill or OpenAI developer docs MCP tools before generating code.
Use when Codex is building or iterating on a web game (HTML/JS) and needs a reliable development + testing loop: implement small changes, run a Playwright-based test script with short input bursts and intentional pauses, inspect screenshots/text, and review console errors with render_game_to_text.
Use when the task involves reading, creating, or editing `.docx` documents, especially when formatting or layout fidelity matters; prefer `python-docx` plus the bundled `${SELENE_SKILL_ROOT}/scripts/render_docx.py` for visual checks.
Help address review/issue comments on the open GitHub PR for the current branch using gh CLI; verify gh auth first and prompt the user to authenticate if not logged in.
Use when a user asks to debug or fix failing GitHub PR checks that run in GitHub Actions; use `gh` to inspect checks and logs, summarize failure context, draft a fix plan, and implement only after explicit approval. Treat external providers (for example Buildkite) as out of scope and report only the details URL.
Use when the user asks to generate or edit images via the OpenAI Image API (for example: generate image, edit/inpaint/mask, background removal or replacement, transparent background, product shots, concept art, covers, or batch variants); run the bundled CLI (`${SELENE_SKILL_ROOT}/scripts/image_gen.py`) and require `OPENAI_API_KEY` for live calls.