AppShot Screenshot Generator

---
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

| Tool | Purpose |
|------|---------|
| `appshot_init` | Initialize new project structure |
| `appshot_captions` | Read/write/auto-generate caption text |
| `appshot_gradients` | List/apply gradient presets |
| `appshot_backgrounds` | Configure background images |
| `appshot_fonts` | List/validate available fonts |
| `appshot_config` | Modify device-specific settings |
| `appshot_build` | Generate final screenshots |
| `appshot_validate` | Check App Store compliance |
| `appshot_specs` | View App Store specifications |
| `appshot_doctor` | System diagnostics |
| `appshot_presets` | App Store preset configurations |
| `appshot_localize` | AI-powered caption translation |
| `appshot_languages` | Discover available translations |
| `appshot_frame` | Apply device frames only |
| `appshot_export` | Export for Fastlane |
| `appshot_clean` | Remove generated files |

## Project Workflow

### 1. Initialize Project

```
appshot_init with force: true
```

Creates the project structure:
```
.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:
```
appshot_captions with device: "iphone", action: "list"
```

Set a caption:
```
appshot_captions with device: "iphone", action: "set", filename: "home.png", caption: "Welcome Home", language: "en"
```

Auto-generate captions from filenames:
```
appshot_captions with device: "iphone", action: "auto"
```
This converts filenames like `home-screen.png` → "Home Screen"

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

Add translations:
```
appshot_captions with device: "iphone", action: "set", filename: "home.png", caption: "Bienvenido", language: "es"
```

### 3. Apply Styling

List gradient presets:
```
appshot_gradients with action: "list"
```

Apply a gradient:
```
appshot_gradients with action: "apply", preset: "ocean"
```

Set background image:
```
appshot_backgrounds with action: "set", image: "./bg.jpg", fit: "cover"
```

Configure device settings:
```
appshot_config with device: "iphone", frameScale: 0.85, captionPosition: "above"
```

### 4. Build Screenshots

Build all devices and languages:
```
appshot_build
```

Build specific devices:
```
appshot_build with devices: ["iphone", "ipad"]
```

Build with App Store presets:
```
appshot_build with presets: ["iphone-6-9", "ipad-13"]
```

### 5. Frame Only (No Background)

Apply device frames without gradients or captions:
```
appshot_frame with input: "./screenshots/iphone"
```

Frame with output directory:
```
appshot_frame with input: "./screenshots/iphone", outputDir: "./framed"
```

Frame recursively:
```
appshot_frame with input: "./screenshots", recursive: true
```

Preview what would be framed:
```
appshot_frame with input: "./screenshots/iphone", dryRun: true
```

### 6. Validate

Check App Store compliance:
```
appshot_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

> Note: The options below describe **v1 legacy layout controls**. v2 uses fixed layout modes and removes manual positioning. See `docs/layout-v2.md`.

### 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` - Legacy v1 templates (modern/minimal/etc.)
- `docs/layout-v2.md` - v2 fixed-layout rules (header/footer/screenshot-only)
- `docs/migration-v2.md` - v1 to v2 migration guide
- `references/gradients.md` - All 24 gradient presets with colors
- `references/fonts.md` - All 10 embedded font families
- `references/troubleshooting.md` - Common errors and solutions