cap-screen

AI-friendly screenshot automation for Capacitor applications. It captures configured routes at App Store phone and tablet dimensions, preserves raw screenshots, copies full-bleed store screenshots, and creates centered marketing mockups.

Install

pnpm add -D cap-screen
pnpm exec cap-screen init
pnpm exec cap-screen capture

The host project must provide a development command that serves the app. cap-screen init creates cap-screen.config.mjs and CAP-SCREEN.md. Add a package script such as "cap-screen": "cap-screen capture" for a shorter command.

Configuration

Define screens explicitly when routes are known. An AI agent may inspect the router and update this list when it is empty or incomplete.

export default {
  baseUrl: 'http://localhost:3000',
  start: { command: 'pnpm', args: ['dev', '--port', '3000'], env: {} },
  devices: ['iphone-6.9-alt', 'ipad-13'],
  outputDir: './screenshots',
  marketing: {
    enabled: true,
    background: { from: '#14532d', to: '#16a34a', angle: 170 },
    frameColor: '#111111',
    shadow: '#000000',
  },
  screens: [
    { name: 'home', path: '/', waitFor: 'Dashboard', delay: 800, title: 'Your money, clearly', subtitle: 'A calmer way to manage every day' },
  ],
}

Outputs

• screenshots/raw/<device>/portrait/: unmodified captures
• screenshots/store/<device>/: full-bleed store images
• screenshots/marketing/<device>/: centered device mockups

Agent Workflow

Read CAP-SCREEN.md before changing the config. Inspect the Capacitor app routes, select onboarding and representative product flows, add reliable waitFor text, and write concise marketing title and subtitle copy. Run the capture command, verify image dimensions, and inspect generated marketing images before reporting completion.