# Plugin Assets Guide
This directory contains the visual assets required for the Claude Code Plugin Marketplace.
## Required Assets
### 1. Plugin Icon (`icon.png`)
**Specifications:**
- **Size:** 512x512 pixels (PNG)
- **Format:** PNG with transparency
- **Style:** Simple, clear, recognizable
- **Content:** Should represent iOS/mobile development
**Suggested Design:**
- iPhone/iPad silhouette
- Xcode logo-inspired
- Swift logo integration
- Terminal/code window with Apple logo
- Minimal and modern design
**Tools to Create:**
- Figma (free)
- Sketch
- Adobe Illustrator
- Canva (templates available)
- GIMP (free)
**Example Concept:**
```
┌─────────────────┐
│ │
│ ┌─────┐ │
│ │ 📱 │ │ ← iPhone outline
│ │ │ │
│ └─────┘ │
│ < > │ ← Code brackets
│ │
└─────────────────┘
```
### 2. Screenshots
Create 2-3 screenshots showing the plugin in action.
**Screenshot 1: Device List (`screenshot-1.png`)**
- **Size:** 1280x800 pixels (PNG)
- **Content:** Show `simulator_list_devices` command with results
- **Caption:** "List all available iOS simulators"
**Screenshot 2: Booting Simulator (`screenshot-2.png`)**
- **Size:** 1280x800 pixels (PNG)
- **Content:** Show `simulator_boot` command with success message
- **Caption:** "Boot and manage iOS simulators with natural language"
**Screenshot 3 (Optional): Info Display (`screenshot-3.png`)**
- **Size:** 1280x800 pixels (PNG)
- **Content:** Show `simulator_get_info` with detailed device information
- **Caption:** "Get detailed simulator information"
## Creating Assets
### Option 1: Use Screenshot Tool
```bash
# macOS built-in screenshot tool
# Cmd + Shift + 4 - Select area
# Cmd + Shift + 3 - Full screen
# Resize if needed
sips -Z 1280 screenshot.png
```
### Option 2: Design Icon
**Using Figma (Free):**
1. Create new design (512x512)
2. Add iPhone frame from assets
3. Add code/terminal elements
4. Use iOS color palette:
- iOS Blue: #007AFF
- iOS Gray: #8E8E93
- Background: #FFFFFF or transparent
5. Export as PNG
**Quick Icon with Text:**
```bash
# Using ImageMagick (if installed)
convert -size 512x512 xc:white \
-font Helvetica-Bold -pointsize 72 \
-draw "text 150,280 'iOS'" \
-fill '#007AFF' icon.png
```
### Option 3: Use Free Resources
**Icon Resources:**
- SF Symbols (Apple's icon library)
- Font Awesome (mobile/code icons)
- Material Icons (Google)
- Noun Project (free with attribution)
**Screenshot Tips:**
- Use high contrast for readability
- Show actual Claude Code interface
- Highlight key features with annotations
- Keep text large enough to read in thumbnails
- Use consistent theme/colors
## Asset Checklist
Before publishing, ensure you have:
- [ ] `icon.png` - 512x512 PNG
- [ ] `screenshot-1.png` - 1280x800 showing device list
- [ ] `screenshot-2.png` - 1280x800 showing device boot
- [ ] All images optimized (< 500KB each)
- [ ] Transparent background on icon (optional but recommended)
- [ ] Clear, readable text in screenshots
- [ ] Professional appearance
## Current Status
⚠️ **Assets Not Yet Created**
This is a development version. To publish to the marketplace, create the required assets using the guidelines above.
**Temporary Placeholders:**
- Icon: Create a 512x512 PNG with iOS theme
- Screenshots: Capture actual Claude Code usage
## Asset Dimensions Reference
| Asset | Width | Height | Format | Max Size |
|-------|-------|--------|--------|----------|
| Icon | 512 | 512 | PNG | 200KB |
| Screenshot 1 | 1280 | 800 | PNG | 500KB |
| Screenshot 2 | 1280 | 800 | PNG | 500KB |
| Screenshot 3 | 1280 | 800 | PNG | 500KB |
## Examples of Good Plugin Icons
- **Simple:** Single iPhone silhouette
- **Clear:** Xcode-inspired play button
- **Branded:** Swift logo + terminal
- **Minimal:** `</>` code brackets
## Need Help?
- Check existing Claude Code plugins for inspiration
- Use Figma community templates
- Hire a designer on Fiverr (typically $5-20)
- Use AI image generators (DALL-E, Midjourney) for concepts
---
Once assets are created, update `plugin.json` to point to the correct files.
