---

name: appshot description: Create and manage App Store screenshot projects using appshot MCP tools. This skill should be used when users want to generate professional App Store screenshots with device frames, gradients, and captions. Triggers include requests to create screenshot projects, add captions, apply styling, or build final screenshots.

AppShot Screenshot Generator

Overview

AppShot generates App Store-ready screenshots with device frames, gradient backgrounds, and captions. This skill orchestrates the appshot MCP tools to create complete screenshot projects.

Available MCP Tools

Project Workflow

1. Initialize Project

Copyappshot_init with force: true

Creates the project structure:

Copy.appshot/
├── config.json          # Main configuration
└── captions/
    ├── iphone.json      # Caption files per device
    ├── ipad.json
    ├── mac.json
    └── watch.json
screenshots/
├── iphone/              # Place screenshots here
├── ipad/
├── mac/
└── watch/
final/                   # Generated output

2. Add Captions

List existing captions:

Copyappshot_captions with device: "iphone", action: "list"

Set a caption:

Copyappshot_captions with device: "iphone", action: "set", filename: "home.png", caption: "Welcome Home", language: "en"

Auto-generate captions from filenames:

Copyappshot_captions with device: "iphone", action: "auto"

This converts filenames like home-screen.png → "Home Screen"

Bulk set multiple captions:

Copyappshot_captions with device: "iphone", action: "bulk-set", captions: "{\"home.png\": \"Welcome\", \"settings.png\": \"Settings\"}"

Add translations:

Copyappshot_captions with device: "iphone", action: "set", filename: "home.png", caption: "Bienvenido", language: "es"

3. Apply Styling

List gradient presets:

Copyappshot_gradients with action: "list"

Apply a gradient:

Copyappshot_gradients with action: "apply", preset: "ocean"

Set background image:

Copyappshot_backgrounds with action: "set", image: "./bg.jpg", fit: "cover"

Configure device settings:

Copyappshot_config with device: "iphone", frameScale: 0.85, captionPosition: "above"

4. Build Screenshots

Build all devices and languages:

Copyappshot_build

Build specific devices:

Copyappshot_build with devices: ["iphone", "ipad"]

Build with App Store presets:

Copyappshot_build with presets: ["iphone-6-9", "ipad-13"]

5. Frame Only (No Background)

Apply device frames without gradients or captions:

Copyappshot_frame with input: "./screenshots/iphone"

Frame with output directory:

Copyappshot_frame with input: "./screenshots/iphone", outputDir: "./framed"

Frame recursively:

Copyappshot_frame with input: "./screenshots", recursive: true

Preview what would be framed:

Copyappshot_frame with input: "./screenshots/iphone", dryRun: true

6. Validate

Check App Store compliance:

Copyappshot_validate

Common Scenarios

New iPhone-Only Project

1. appshot_init with force: true
2. User adds screenshots to screenshots/iphone/
3. appshot_captions - set captions for each screenshot
4. appshot_gradients - apply preferred gradient
5. appshot_build with devices: ["iphone"]

Multi-Language App Store Submission

1. appshot_init with force: true
2. appshot_captions - add English captions
3. appshot_localize with languages: ["es", "fr", "de", "ja"]
4. appshot_build with languages: ["en", "es", "fr", "de", "ja"]
5. appshot_validate

Quick Styling Update

1. appshot_gradients with action: "list" to see options
2. appshot_gradients with action: "apply", preset: "sunset"
3. appshot_build

Quick Auto-Caption Project

When filenames are descriptive (e.g., home-screen.png, settings_page.png):

1. appshot_init with force: true
2. User adds screenshots to screenshots/iphone/
3. appshot_captions with device: "iphone", action: "auto"
4. appshot_gradients with action: "apply", preset: "ocean"
5. appshot_build with devices: ["iphone"]

Captions are auto-generated from filenames (hyphens/underscores become spaces, title case applied).

Frame Only (Design Mockups)

For quick device mockups without backgrounds or captions:

1. appshot_frame with input: "./screenshots/iphone", outputDir: "./framed"

Output has transparent background - perfect for presentations, design comps, or overlaying on custom backgrounds.

Device Resolutions

Required for App Store

• iPhone 6.9": 1290x2796 or 1320x2868
• iPad 13": 2064x2752 or 2048x2732

Optional

• Mac: 2880x1800 (16:10)
• Watch Ultra: 410x502

Configuration Options

Frame Positioning

• frameScale: 0.1-1.5 (default: 0.9)
• framePosition: 0-100 or "center"
• captionPosition: "above", "below", "overlay"

Caption Styling

• captionSize: Font size in pixels
• marginTop: Top margin for caption
• marginBottom: Bottom margin for caption

Resources

• references/templates.md - All 8 templates with styles, colors, and recommendations
• references/gradients.md - All 24 gradient presets with colors
• references/fonts.md - All 10 embedded font families
• references/troubleshooting.md - Common errors and solutions