feat: SVG-first image generation and Gemini support (v0.5.0)

- Default provider changed from DALL-E to SVG
- Add Gemini (Nano Banana) image generation support
- Add dark mode support with theme switching
- Add --provider flag to override provider
- Add collapsible prompt display in README
- Update documentation for v0.5.0 changes
- Fix setup command reference in README

Author: zircote

.claude-plugin/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "github-social",
-  "version": "0.4.0",
-  "description": "Optimize GitHub repository presentation with social preview images and engaging metadata (descriptions, topics)",
+  "version": "0.5.0",
+  "description": "Optimize GitHub repository presentation with SVG/AI-generated social preview images, infographics, badges, and metadata",
   "author": {
     "name": "zircote"
   },

CHANGELOG.md

@@ -7,6 +7,37 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.5.0] - 2025-01-18
+
+### Added
+
+- **[social-preview]**: SVG generation as default provider (free, instant, editable)
+  - Claude generates clean SVG graphics directly - no external API needed
+  - Three SVG styles: `minimal` (default), `geometric`, `illustrated`
+  - Domain-specific color palettes (DevTools, AI/ML, Web, Data, Security, Infrastructure, Plugin)
+  - New reference file: `references/svg-templates.md` with complete templates by domain
+  - Example configuration: `examples/config-svg.md`
+- **[social-preview]**: Google Gemini (Nano Banana) image generation support
+  - Models: `gemini-2.5-flash-image` (fast), `gemini-3-pro-image-preview` (quality)
+  - Lower cost than DALL-E (~$0.039/image vs ~$0.08/image)
+  - Example configuration: `examples/config-gemini.md`
+- **[social-preview]**: Dark mode support with `<picture>` element for theme switching
+  - Config option: `dark_mode: false | true | both`
+  - Generates light and dark SVG variants when set to `both`
+- **[readme-enhance]**: Collapsible prompt display pattern
+  - Shows generation prompt in `<details>` section below infographic
+  - Follows NotebookLM-style documentation pattern
+- **[readme-enhance]**: SVG infographic generation as default
+  - New reference file: `references/svg-infographic-patterns.md` with layout templates
+
+### Changed
+
+- **[social-preview]**: Default provider changed from DALL-E to SVG
+- **[commands]**: Added `--provider` flag to override provider (svg, dalle-3, gemini, manual)
+- **[commands]**: Added `--dark-mode` flag for dark mode variant generation
+- Updated plugin description to reflect SVG-first approach
+- Updated plugin version to 0.5.0
+
 ## [0.4.0] - 2025-01-18
 
 ### Added
@@ -73,7 +104,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Configuration via `.claude/github-social.local.md` with YAML frontmatter
 - MIT License
 
-[Unreleased]: https://github.com/zircote/github-social/compare/v0.4.0...HEAD
+[Unreleased]: https://github.com/zircote/github-social/compare/v0.5.0...HEAD
+[0.5.0]: https://github.com/zircote/github-social/compare/v0.4.0...v0.5.0
 [0.4.0]: https://github.com/zircote/github-social/compare/v0.3.0...v0.4.0
 [0.3.0]: https://github.com/zircote/github-social/compare/v0.2.0...v0.3.0
 [0.2.0]: https://github.com/zircote/github-social/compare/v0.1.0...v0.2.0

README.md

@@ -2,7 +2,7 @@
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg?style=for-the-badge)](LICENSE)
 [![Claude Code Plugin](https://img.shields.io/badge/Claude%20Code-Plugin-blueviolet?style=for-the-badge&logo=anthropic&logoColor=white)](https://claude.ai/code)
-[![Version](https://img.shields.io/badge/version-0.4.0-green.svg?style=for-the-badge)](.claude-plugin/plugin.json)
+[![Version](https://img.shields.io/badge/version-0.5.0-green.svg?style=for-the-badge)](.claude-plugin/plugin.json)
 [![GitHub Stars](https://img.shields.io/github/stars/zircote/github-social?style=for-the-badge&logo=github)](https://github.com/zircote/github-social/stargazers)
 [![GitHub Issues](https://img.shields.io/github/issues/zircote/github-social?style=for-the-badge&logo=github)](https://github.com/zircote/github-social/issues)
 [![Last Commit](https://img.shields.io/github/last-commit/zircote/github-social?style=for-the-badge&logo=github)](https://github.com/zircote/github-social/commits)
@@ -18,8 +18,9 @@ A Claude Code plugin that optimizes GitHub repository presentation by analyzing
 
 ### Social Preview Images
 - Analyzes project files (README, package.json, CLAUDE.md, etc.) to understand purpose
-- Generates detailed image prompts capturing the project's spirit
-- Supports multiple image generation providers (DALL-E, Stable Diffusion, etc.)
+- **SVG generation by default** - Free, instant, editable vector graphics
+- Supports multiple providers: SVG (default), DALL-E 3, Gemini, or manual prompts
+- Dark mode support with automatic theme switching
 - Outputs images meeting GitHub's social preview requirements (1280x640px, <1MB)
 
 ### Repository Metadata
@@ -58,14 +59,14 @@ Or use the command:
 /social-preview
 ```
 
-Without configuration, the plugin outputs a detailed image prompt you can use with your preferred image generation tool.
+Without configuration, the plugin generates a clean SVG image directly. Use `--provider=manual` to output a text prompt instead.
 
 ### With Configuration (Optional)
 
 Run the setup command to configure your preferences:
 
 ```
-/social-preview:setup
+/github-social:setup
 ```
 
 This creates `.claude/github-social.local.md` with your settings.
@@ -76,40 +77,41 @@ Create `.claude/github-social.local.md` with YAML frontmatter:
 
 ```yaml
 ---
-provider: dalle-3        # dalle-3 | stable-diffusion | midjourney | manual
-api_key_env: OPENAI_API_KEY  # Environment variable name (NOT the key itself)
-style: abstract          # abstract | illustrated | minimalist | custom
-output_path: .github/social-preview.png
+provider: svg            # svg (default) | dalle-3 | gemini | manual
+svg_style: minimal       # minimal | geometric | illustrated (for SVG provider)
+dark_mode: false         # false | true | both (generate both variants)
+api_key_env: OPENAI_API_KEY  # For dalle-3; use GEMINI_API_KEY for gemini
+output_path: .github/social-preview.svg
 dimensions: 1280x640     # Recommended for GitHub
 include_text: true       # Include project name in image
+upload_to_repo: false    # Auto-upload to GitHub repository
 ---
 
 # Optional: Additional brand guidelines or context
 ```
 
 ### Supported Providers
 
-| Provider | Requirements | Notes |
-|----------|-------------|-------|
-| `dalle-3` | `OPENAI_API_KEY` env var | Best quality, requires OpenAI API |
-| `stable-diffusion` | Local SD installation or API | Flexible, various backends |
-| `midjourney` | Manual process | Plugin outputs optimized prompt |
-| `manual` | None | Outputs prompt only |
+| Provider | Requirements | Cost | Notes |
+|----------|-------------|------|-------|
+| `svg` (default) | None | Free | Claude generates clean SVG graphics directly |
+| `dalle-3` | `OPENAI_API_KEY` env var | ~$0.08/image | Artistic, creative AI images |
+| `gemini` | `GEMINI_API_KEY` env var | ~$0.039/image | Google's image generation |
+| `manual` | None | Free | Outputs optimized prompt only |
 
-### Style Options
+### SVG Style Options
 
-- **abstract**: Clean geometric shapes, gradients, tech-inspired patterns
-- **illustrated**: Hand-drawn style, artistic representations
-- **minimalist**: Simple design with project name and subtle elements
-- **custom**: Specify your own style in `custom_style` field
+- **minimal** (default): Clean design with 3-5 shapes, generous whitespace
+- **geometric**: Complex arrangements with 8-15 shapes representing domain metaphors
+- **illustrated**: Organic paths with hand-drawn aesthetic and warm colors
 
 ## GitHub Requirements
 
 Social preview images must meet these requirements:
 - **Minimum size**: 640x320 pixels
 - **Recommended size**: 1280x640 pixels (2:1 aspect ratio)
 - **Maximum file size**: 1MB
-- **Supported formats**: PNG, JPG, GIF
+- **Supported formats**: SVG, PNG, JPG, GIF
 
 ## Example Output
 

commands/all.md

@@ -1,16 +1,16 @@
 ---
 name: all
 description: Run all github-social skills in sequence - metadata, social preview, and README enhancement
-argument-hint: "[--apply] [--dry-run] [--skip-badges] [--skip-infographic]"
-allowed-tools: ["Read", "Write", "Edit", "Glob", "Grep", "Bash", "MCPSearch"]
+argument-hint: "[--apply] [--dry-run] [--provider svg|dalle-3|gemini|manual] [--skip-badges] [--skip-infographic] [--dark-mode]"
+allowed-tools: ["Read", "Write", "Edit", "Glob", "Grep", "Bash", "MCPSearch", "mcp__github__create_or_update_file"]
 ---
 
 # Complete GitHub Social Enhancement
 
 Run all github-social skills in sequence to fully optimize a repository's presentation:
 
 1. **repo-metadata**: Generate optimized description and topics
-2. **social-preview**: Generate social preview image
+2. **social-preview**: Generate social preview image (SVG by default)
 3. **readme-enhance**: Add badges and infographic to README
 
 ## Execution Steps
@@ -20,19 +20,25 @@ Run all github-social skills in sequence to fully optimize a repository's presen
 Handle optional flags:
 - `--apply`: Apply all changes (update GitHub metadata, modify README, upload images)
 - `--dry-run`: Preview all changes without applying any
+- `--provider [value]`: Override image provider for both social preview and infographic (svg, dalle-3, gemini)
 - `--skip-badges`: Skip badge generation in README enhancement
 - `--skip-infographic`: Skip infographic generation
+- `--dark-mode`: Generate dark mode variants for images
 
-Default behavior: Generate and preview, prompt before applying.
+Default behavior: Generate SVG images, preview changes, prompt before applying.
 
 ### 2. Load Configuration
 
 Read `.claude/github-social.local.md` for all skill settings:
-- Social preview provider and style
+- `provider`: svg (default), dalle-3, gemini, manual
+- `svg_style`: minimal (default), geometric, illustrated
+- `dark_mode`: false (default), true, both
 - Badge style preferences
 - Infographic style preferences
 - Upload settings
 
+Command-line flags override configuration.
+
 ### 3. Analyze Project (Shared)
 
 Perform comprehensive project analysis once, reuse across all skills:
@@ -42,6 +48,7 @@ Perform comprehensive project analysis once, reuse across all skills:
 3. Identify:
    - Project name and version
    - Purpose and key features
+   - Domain (DevTools, AI, Web, Data, Security, Infrastructure, Plugin)
    - Primary language and frameworks
    - CI/CD configuration
    - License type
@@ -60,21 +67,29 @@ Output preview of changes.
 
 #### Step 4b: Social Preview Image
 
-Generate social preview:
-- Create image prompt based on project analysis
-- If provider configured, generate actual image
-- Save to configured output path (default: `.github/social-preview.png`)
+Generate social preview based on provider:
+
+**SVG (default)**:
+- Generate clean SVG using domain templates
+- Save to `.github/social-preview.svg`
+- If `--dark-mode`, generate dark variant
 
-Output the image prompt (and image location if generated).
+**DALL-E 3 / Gemini**:
+- Generate optimized image prompt
+- Call API and save PNG
+- Save to `.github/social-preview.png`
+
+Output the generated file location (or prompt if manual).
 
 #### Step 4c: README Enhancement
 
 Unless `--skip-badges` and `--skip-infographic` both set:
 - Generate shields.io badges (unless `--skip-badges`)
-- Generate infographic prompt (unless `--skip-infographic`)
+- Generate infographic SVG/image (unless `--skip-infographic`)
+- Add collapsible prompt display section
 - Prepare README.md updates
 
-Output badge set and infographic prompt.
+Output badge set and infographic location.
 
 ### 5. Present Summary
 
@@ -88,13 +103,15 @@ Display complete summary:
 - Topics: topic-1, topic-2, topic-3, ...
 
 ### Social Preview
-- Image prompt generated
-- Output: .github/social-preview.png
-- [Generated/Pending generation]
+- Provider: svg (default)
+- Output: .github/social-preview.svg
+- Size: X KB
+- [Generated/Pending]
 
 ### README Enhancement
 - Badges: X badges generated
-- Infographic: Prompt ready
+- Infographic: .github/readme-infographic.svg
+- Dark mode: [yes/no]
 - README changes: [Preview/Applied]
 
 ### Next Steps
@@ -111,22 +128,31 @@ If `--apply` flag or user confirms:
    gh repo edit --add-topic topic-1 --add-topic topic-2 ...
    ```
 
-2. **Generate and upload social preview** (if provider configured):
-   - Generate image via configured provider
+2. **Save/upload social preview**:
+   - Write SVG/PNG to output path
    - Upload to repository if `upload_to_repo: true`
 
 3. **Update README.md**:
    - Insert/update badge section
-   - Add infographic placeholder/image
+   - Add infographic with prompt display section
+   - If dark mode, use `<picture>` element for theme switching
 
 4. **Report results**:
    - Confirm each step completed
    - Provide GitHub settings links for manual steps
 
+## Provider Comparison
+
+| Provider | Social Preview | Infographic | Cost | Speed |
+|----------|---------------|-------------|------|-------|
+| **svg** (default) | SVG file | SVG file | Free | Instant |
+| **dalle-3** | PNG image | PNG image | ~$0.16 | 10-30s |
+| **gemini** | PNG image | PNG image | ~$0.08 | 6-20s |
+
 ## Example Usage
 
 ```bash
-# Preview all enhancements
+# Preview all enhancements (SVG default)
 /github-social:all
 
 # Apply all changes automatically
@@ -135,6 +161,15 @@ If `--apply` flag or user confirms:
 # Dry run to see what would change
 /github-social:all --dry-run
 
+# Use DALL-E for artistic images
+/github-social:all --provider=dalle-3 --apply
+
+# Use Gemini for image generation
+/github-social:all --provider=gemini --apply
+
+# Generate with dark mode support
+/github-social:all --dark-mode --apply
+
 # Skip certain features
 /github-social:all --apply --skip-infographic
 /github-social:all --apply --skip-badges
@@ -143,10 +178,11 @@ If `--apply` flag or user confirms:
 ## Tips
 
 - Run without `--apply` first to review changes
+- SVG generation is free and instant (recommended default)
 - Ensure `gh` CLI is authenticated for metadata updates
-- Configure `.claude/github-social.local.md` for image generation
+- Configure `.claude/github-social.local.md` for custom settings
 - Social preview requires manual GitHub settings update after upload
-- Use `--dry-run` to safely preview all changes
+- Use `--dark-mode` for repositories viewed in both themes
 
 ## Related Commands