# Generate Store Assets Skill

**Description**: Programmatically generate all app store artwork (icons, screenshots, feature graphics) from a single script.

## When to Use

- Preparing for app store releases
- Updating app branding
- Creating assets for multiple platforms
- Maintaining consistent design across stores

## Prerequisites

- Python 3.7+ with Pillow library
- App name and branding decided
- Color palette chosen

## Quick Start

```bash
# From repo root
python3 assets/generate-store-assets.py
```

## Output Overview

The script generates **73 PNG files** across multiple categories:

| Category        | Count | Directory                                             | Platforms                                                  |
| --------------- | ----- | ----------------------------------------------------- | ---------------------------------------------------------- |
| App Icons       | 36    | `assets/store/icons/`                                 | iOS (13), Android (6), macOS (7), Windows (5), Favicon (5) |
| Screenshots     | 32    | `assets/store/screenshots/{ios,android,mac,windows}/` | 4 screens × dark + light themes                            |
| Feature Graphic | 1     | `assets/store/feature/`                               | Google Play Store                                          |
| Splash Screens  | 4     | `assets/store/splash/`                                | Android splash screens                                     |

## Customization

### 1. Color Palette

Edit the color variables at the top of `assets/generate-store-assets.py`:

```python
# Default colors
GREEN_PRIMARY = "#2E7D32"      # Icon circle, badges, section headers
GREEN_ACCENT = "#50FA7B"        # Glowing text, active tabs, highlights
DARK_BG = "#1E1E2E"             # Dark mode background
DARK_SURFACE = "#282A36"       # Cards, inputs, tab bar
MUTED = "#6272A4"               # Secondary text, timestamps
CYAN = "#8BE9FD"                # Transcript card accents
```

After changing colors, re-run the script to regenerate all assets.

### 2. App Icon Design

The icon features a waveform-in-circle with green glow:

```python
# Key parameters in generate_app_icon()
circle_radius = size * 0.28
corner_radius = size * 0.22
num_bars = 7
waveform_heights = [0.3, 0.5, 0.75, 1.0, 0.75, 0.5, 0.3]
glow_rings = 8  # Number of concentric glow rings
```

### 3. Screenshot Content

Each screenshot function uses sample data. Edit these functions:

```python
def generate_screenshot_home():
    # Customize: greeting, stats, activity list
    greeting = "Good afternoon, Sarah"
    stats = {"words": "12,543", "time": "2h 15m", "sessions": 8}

def generate_screenshot_record():
    # Customize: timer display, live preview
    timer = "00:47"
    preview_text = "Meeting notes from the product review..."

def generate_screenshot_history():
    # Customize: transcript cards
    transcripts = [
        {"title": "Product Review", "date": "Today", "words": 1250},
        {"title": "Team Standup", "date": "Yesterday", "words": 340}
    ]

def generate_screenshot_settings():
    # Customize: profile and settings sections
    profile = {"name": "Sarah Chen", "email": "sarah@example.com", "plan": "Pro"}
```

## Platform-Specific Requirements

### iOS Icons

- 1024x1024 (App Store)
- 180x180 (iPhone @3x)
- 120x120 (iPhone @2x)
- 167x167 (iPad Pro @2x)
- 152x152 (iPad @2x)
- 87x87 (Settings @3x)
- 58x58 (Settings @2x)
- 60x60 (Notifications @3x)
- 40x40 (Notifications @2x)
- 80x80 (Spotlight @2x)
- 40x40 (Spotlight @1x)
- 20x20 (Settings @1x)

### Android Icons

- 512x512 (Google Play Store)
- 192x192 (adaptive foreground)
- 432x432 (adaptive background)
- 144x144 (xxxhdpi)
- 96x96 (xxhdpi)
- 72x72 (xhdpi)
- 48x48 (mdpi)

### Additional Sizes

- macOS: 16x16 to 1024x1024
- Windows: 16x16 to 256x256
- Favicon: 16x16, 32x32, 96x96, 192x192

## Screenshot Specifications

### Dimensions

- **iOS**: 1242x2688 (iPhone X/11/12/13) and 2048x2732 (iPad Pro)
- **Android**: 1080x1920 (phone) and 2048x2732 (tablet)
- **macOS**: 1280x800 (Mac App Store)
- **Windows**: 1366x768 (Microsoft Store)

### Themes

- **Light mode**: Light background, dark text
- **Dark mode**: Dark background, light text
- Both generated automatically

## Automation Script

Create `scripts/update-store-assets.sh`:

```bash
#!/bin/bash
# Update store assets after design changes

echo "Generating store assets..."
python3 assets/generate-store-assets.py

echo "Verifying output..."
find assets/store -name "*.png" | wc -l

echo "Opening directory for review..."
open assets/store

echo "Done! Review assets before committing."
```

## Integration with CI/CD

### GitHub Actions

```yaml
name: Generate Store Assets
on:
  push:
    paths:
      - 'assets/generate-store-assets.py'
      - 'assets/store/**'

jobs:
  generate:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-python@v4
        with:
          python-version: '3.11'

      - name: Install dependencies
        run: pip install Pillow

      - name: Generate assets
        run: python3 assets/generate-store-assets.py

      - name: Upload artifacts
        uses: actions/upload-artifact@v3
        with:
          name: store-assets
          path: assets/store/
```

## Best Practices

### Design Guidelines

1. **Keep it simple** - Icons should be recognizable at small sizes
2. **High contrast** - Ensure visibility on various backgrounds
3. **Brand consistency** - Use consistent colors across all assets
4. **Text readability** - Use large, clear fonts in screenshots

### Technical Tips

1. **Vector when possible** - Consider SVG for icons (convert to PNG)
2. **Optimize file size** - Use compression without quality loss
3. **Test on devices** - Verify how assets look on actual devices
4. **Version control** - Commit generated assets or regenerate on build

## Common Issues

### Script Won't Run

```bash
# Install Pillow
pip install Pillow

# Check Python version (3.7+)
python --version
```

### Icons Look Blurry

- Ensure you're generating at the correct resolution
- Check if the source images are high quality
- Verify anti-aliasing settings in the script

### Colors Don't Match

- Colors must be in hex format (#RRGGBB)
- Ensure consistent color space (sRGB)
- Check gamma correction settings

## Before Release Checklist

- [ ] All 73 assets generated successfully
- [ ] Icons look good at all sizes
- [ ] Screenshots show current UI
- [ ] No placeholder text remains
- [ ] Dark/light themes both look good
- [ ] Text is readable in all screenshots
- [ ] App name is correct in all contexts
- [ ] Brand colors are consistent

## Notes

- **Single source of truth** - The Python script is the only place to make changes
- **Regenerate often** - Run after any UI changes
- **Store requirements change** - Check platform guidelines periodically
- **Test on actual devices** - Simulators don't always match real devices

## Related Skills

- [Desktop Release](./desktop-release.md) - Packaging with assets
- [iOS Release](./ios-release.md) - App Store submission
- [Android Development](./android-development.md) - Android-specific assets