Feature Image

---
name: feature-image
description: "Generate a branded social media image announcing a new feature or update. Auto-detects brand from your codebase and captures via Playwright."
---

Generate a branded social media image for announcing a feature or update. The image is built as an HTML page styled to match the project's brand, then screenshotted with Playwright.

## Phase 1: Ensure Playwright is Available

```bash
npx playwright --version 2>/dev/null || (echo "Installing Playwright..." && npx playwright install chromium)
```

If installation fails, inform the user and suggest `npm install -D playwright && npx playwright install chromium`.

## Phase 2: Understand What Changed (Git-Aware)

Analyze the recent git history to understand what feature/update to announce:

1. **Check recent commits:**
   ```bash
   git log --oneline -20
   ```

2. **Check current diff (staged + unstaged):**
   ```bash
   git diff HEAD --stat
   git diff HEAD -- '*.tsx' '*.jsx' '*.vue' '*.svelte' '*.html' '*.css' '*.scss' '*.rb' '*.erb'
   ```

3. **Check recent branch name** (often describes the feature):
   ```bash
   git branch --show-current
   ```

4. **Synthesize** what the feature/update is from this context.

5. **Present findings to user** with `AskUserQuestion`:
   - Header: "Feature"
   - Question: "Based on recent changes, it looks like you're working on [X]. What should this announcement be about?"
   - Options:
     - "[Auto-detected feature description]" - Use what was detected
     - "Something else" - Let user describe it
   - If `$1` was provided as an argument, use that instead of asking.

## Phase 3: Auto-Generate Announcement Text

Generate text elements for the image:

- **Headline**: A punchy, short headline (3-8 words) about the feature
- **Tagline**: A one-sentence supporting description
- **Badge/Label**: Optional category label (e.g., "New Feature", "Update", "Improvement")

Present these to the user with `AskUserQuestion`:
- Header: "Copy"
- Question: "Here's the text I'd put on the image. Want to adjust anything?"
- Options:
  - "Looks good" - Use as-is
  - "Edit headline" - User provides custom headline
  - "Edit everything" - User provides all text
  - "No text overlay" - Generate image without text

## Phase 4: Choose Platform & Size

Use `AskUserQuestion`:
- Header: "Platform"
- Question: "What platform is this image for?"
- Options:
  - "Twitter/X (1200x675)" - Standard Twitter card size
  - "LinkedIn (1200x627)" - LinkedIn share image
  - "Instagram (1080x1080)" - Square format
  - "Open Graph (1200x630)" - Universal social preview

Store the chosen width and height for the Playwright viewport.

## Phase 5: Choose Visual Style

Use `AskUserQuestion`:
- Header: "Style"
- Question: "What visual style should the image use?"
- Options:
  - "Stylized mockup (Recommended)" - Simplified, polished recreation of UI elements using the app's actual components and CSS. Recognizable but not pixel-perfect.
  - "Screenshot + overlay" - Takes a real screenshot of the running app and adds branded text overlays, gradients, and annotations.
  - "Abstract/illustrative" - Uses brand colors and typography to create a geometric or gradient design that suggests the feature without replicating specific UI.

### Style: Stylized Mockup

This is the most involved style. The goal is to create a representation of the UI that *feels* like the app without being a literal screenshot.

1. **Find relevant UI components** related to the feature:
   - Search for component files that match the feature (e.g., if the feature is "dark mode", find theme toggle components)
   - Read the component markup to understand the UI structure
   - Note key visual elements: buttons, cards, inputs, tables, navigation items

2. **Extract visual patterns from components:**
   - Border radius values
   - Shadow styles
   - Specific layout patterns (sidebar + main, card grids, etc.)
   - Icon usage
   - Interactive element styles (buttons, toggles, inputs)

3. **Build a simplified HTML mockup** that:
   - Shows the key UI elements of the feature in a stylized, editorial layout
   - Uses the actual brand colors, fonts, and border-radius from the codebase
   - Adds subtle visual polish (soft shadows, slight gradients, generous whitespace)
   - Frames the UI in a "browser window" or "device frame" if appropriate
   - Is NOT a full working page -- it's a curated, art-directed composition

### Style: Screenshot + Overlay

1. Ask the user for the URL of the running app (suggest common localhost URLs)
2. Navigate to the relevant page with Playwright
3. Take a base screenshot
4. Create an HTML overlay page that:
   - Embeds the screenshot as a background image
   - Adds a gradient overlay (using brand colors) for text readability
   - Places headline and tagline text on top
   - Adds a badge/label if applicable
5. Screenshot the overlay page

### Style: Abstract/Illustrative

Build an HTML page with:
- A gradient or geometric background using brand colors
- The project logo (if found in `/public`, `/assets`, or `/src/assets`)
- Large, bold headline text using the project's font
- Supporting tagline
- Abstract shapes, lines, or patterns that evoke the feature category
- Clean, modern aesthetic with generous whitespace

## Phase 6: Deep Brand Analysis