App Mockup

Use this skill when a user wants an existing screenshot wrapped in a browser or device frame.

Do use it for

• browser-framed web app screenshots
• phone, tablet, or laptop mockups for real app screens
• deterministic export workflows from terminal commands
• marketing or documentation visuals generated from existing UI screenshots

Do not use it for

• imaginary UI generation from text only
• lifestyle scenes or product photography
• diffusion/ML image editing
• claiming photoreal exports when only vector framing is requested

Renderer contract

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>

Supported presets

• browser-chrome
• browser-safari
• iphone-14-pro
• pixel-6-pro
• ipad-pro
• macbook-pro
• window
• plain

Workflow

1. Identify the screenshot source.

   • If the user gives a file path, use it directly.
   • If the user gives a webpage URL, capture a screenshot first with browser tooling, then render the mockup.
   • If the user gives an image URL that already points to a screenshot, pass it directly to the renderer.

2. Infer the right preset.

   • web app or dashboard -> browser-chrome unless Safari styling is explicitly requested
   • iOS mobile app -> iphone-14-pro
   • Android mobile app -> pixel-6-pro
   • tablet layout -> ipad-pro
   • laptop hero shot -> macbook-pro

3. Render with explicit options.

   • Prefer SVG output unless the user explicitly requires a raster export pipeline.
   • Use descriptive output names.
   • Add title, subtitle, URL label, background, padding, and shadow only when they improve the requested result.

4. Verify the artifact.

   • Confirm the output file exists.
   • Report the output path, preset, and notable options used.

Example commands

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"

Notes for agents

• This plugin is standalone and should work in any host that understands Claude-style plugin folders or reusable skills.
• Screenshot capture is separate from mockup rendering.
• The included reference notes explain how this package borrows the deterministic framing idea from Screenshot.rocks while exposing a terminal-first interface for agents.