compound-engineering-pi 0.2.3

package/plugins/compound-engineering/skills/file-todos/SKILL.md

@@ -0,0 +1,252 @@
+---
+name: file-todos
+description: This skill should be used when managing the file-based todo tracking system in the todos/ directory. It provides workflows for creating todos, managing status and dependencies, conducting triage, and integrating with slash commands and code review processes.
+disable-model-invocation: true
+---
+
+# File-Based Todo Tracking Skill
+
+## Overview
+
+The `todos/` directory contains a file-based tracking system for managing code review feedback, technical debt, feature requests, and work items. Each todo is a markdown file with YAML frontmatter and structured sections.
+
+This skill should be used when:
+- Creating new todos from findings or feedback
+- Managing todo lifecycle (pending → ready → complete)
+- Triaging pending items for approval
+- Checking or managing dependencies
+- Converting PR comments or code findings into tracked work
+- Updating work logs during todo execution
+
+## File Naming Convention
+
+Todo files follow this naming pattern:
+
+```
+{issue_id}-{status}-{priority}-{description}.md
+```
+
+**Components:**
+- **issue_id**: Sequential number (001, 002, 003...) - never reused
+- **status**: `pending` (needs triage), `ready` (approved), `complete` (done)
+- **priority**: `p1` (critical), `p2` (important), `p3` (nice-to-have)
+- **description**: kebab-case, brief description
+
+**Examples:**
+```
+001-pending-p1-mailer-test.md
+002-ready-p1-fix-n-plus-1.md
+005-complete-p2-refactor-csv.md
+```
+
+## File Structure
+
+Each todo is a markdown file with YAML frontmatter and structured sections. Use the template at [todo-template.md](./assets/todo-template.md) as a starting point when creating new todos.
+
+**Required sections:**
+- **Problem Statement** - What is broken, missing, or needs improvement?
+- **Findings** - Investigation results, root cause, key discoveries
+- **Proposed Solutions** - Multiple options with pros/cons, effort, risk
+- **Recommended Action** - Clear plan (filled during triage)
+- **Acceptance Criteria** - Testable checklist items
+- **Work Log** - Chronological record with date, actions, learnings
+
+**Optional sections:**
+- **Technical Details** - Affected files, related components, DB changes
+- **Resources** - Links to errors, tests, PRs, documentation
+- **Notes** - Additional context or decisions
+
+**YAML frontmatter fields:**
+```yaml
+---
+status: ready              # pending | ready | complete
+priority: p1              # p1 | p2 | p3
+issue_id: "002"
+tags: [rails, performance, database]
+dependencies: ["001"]     # Issue IDs this is blocked by
+---
+```
+
+## Common Workflows
+
+### Creating a New Todo
+
+**To create a new todo from findings or feedback:**
+
+1. Determine next issue ID: `ls todos/ | grep -o '^[0-9]\+' | sort -n | tail -1`
+2. Copy template: `cp assets/todo-template.md todos/{NEXT_ID}-pending-{priority}-{description}.md`
+3. Edit and fill required sections:
+   - Problem Statement
+   - Findings (if from investigation)
+   - Proposed Solutions (multiple options)
+   - Acceptance Criteria
+   - Add initial Work Log entry
+4. Determine status: `pending` (needs triage) or `ready` (pre-approved)
+5. Add relevant tags for filtering
+
+**When to create a todo:**
+- Requires more than 15-20 minutes of work
+- Needs research, planning, or multiple approaches considered
+- Has dependencies on other work
+- Requires manager approval or prioritization
+- Part of larger feature or refactor
+- Technical debt needing documentation
+
+**When to act immediately instead:**
+- Issue is trivial (< 15 minutes)
+- Complete context available now
+- No planning needed
+- User explicitly requests immediate action
+- Simple bug fix with obvious solution
+
+### Triaging Pending Items
+
+**To triage pending todos:**
+
+1. List pending items: `ls todos/*-pending-*.md`
+2. For each todo:
+   - Read Problem Statement and Findings
+   - Review Proposed Solutions
+   - Make decision: approve, defer, or modify priority
+3. Update approved todos:
+   - Rename file: `mv {file}-pending-{pri}-{desc}.md {file}-ready-{pri}-{desc}.md`
+   - Update frontmatter: `status: pending` → `status: ready`
+   - Fill "Recommended Action" section with clear plan
+   - Adjust priority if different from initial assessment
+4. Deferred todos stay in `pending` status
+
+**Use slash command:** `/triage` for interactive approval workflow
+
+### Managing Dependencies
+
+**To track dependencies:**
+
+```yaml
+dependencies: ["002", "005"]  # This todo blocked by issues 002 and 005
+dependencies: []               # No blockers - can work immediately
+```
+
+**To check what blocks a todo:**
+```bash
+grep "^dependencies:" todos/003-*.md
+```
+
+**To find what a todo blocks:**
+```bash
+grep -l 'dependencies:.*"002"' todos/*.md
+```
+
+**To verify blockers are complete before starting:**
+```bash
+for dep in 001 002 003; do
+  [ -f "todos/${dep}-complete-*.md" ] || echo "Issue $dep not complete"
+done
+```
+
+### Updating Work Logs
+
+**When working on a todo, always add a work log entry:**
+
+```markdown
+### YYYY-MM-DD - Session Title
+
+**By:** Claude Code / Developer Name
+
+**Actions:**
+- Specific changes made (include file:line references)
+- Commands executed
+- Tests run
+- Results of investigation
+
+**Learnings:**
+- What worked / what didn't
+- Patterns discovered
+- Key insights for future work
+```
+
+Work logs serve as:
+- Historical record of investigation
+- Documentation of approaches attempted
+- Knowledge sharing for team
+- Context for future similar work
+
+### Completing a Todo
+
+**To mark a todo as complete:**
+
+1. Verify all acceptance criteria checked off
+2. Update Work Log with final session and results
+3. Rename file: `mv {file}-ready-{pri}-{desc}.md {file}-complete-{pri}-{desc}.md`
+4. Update frontmatter: `status: ready` → `status: complete`
+5. Check for unblocked work: `grep -l 'dependencies:.*"002"' todos/*-ready-*.md`
+6. Commit with issue reference: `feat: resolve issue 002`
+
+## Integration with Development Workflows
+
+| Trigger | Flow | Tool |
+|---------|------|------|
+| Code review | `/workflows:review` → Findings → `/triage` → Todos | Review agent + skill |
+| PR comments | `/resolve_pr_parallel` → Individual fixes → Todos | gh CLI + skill |
+| Code TODOs | `/resolve_todo_parallel` → Fixes + Complex todos | Agent + skill |
+| Planning | Brainstorm → Create todo → Work → Complete | Skill |
+| Feedback | Discussion → Create todo → Triage → Work | Skill + slash |
+
+## Quick Reference Commands
+
+**Finding work:**
+```bash
+# List highest priority unblocked work
+grep -l 'dependencies: \[\]' todos/*-ready-p1-*.md
+
+# List all pending items needing triage
+ls todos/*-pending-*.md
+
+# Find next issue ID
+ls todos/ | grep -o '^[0-9]\+' | sort -n | tail -1 | awk '{printf "%03d", $1+1}'
+
+# Count by status
+for status in pending ready complete; do
+  echo "$status: $(ls -1 todos/*-$status-*.md 2>/dev/null | wc -l)"
+done
+```
+
+**Dependency management:**
+```bash
+# What blocks this todo?
+grep "^dependencies:" todos/003-*.md
+
+# What does this todo block?
+grep -l 'dependencies:.*"002"' todos/*.md
+```
+
+**Searching:**
+```bash
+# Search by tag
+grep -l "tags:.*rails" todos/*.md
+
+# Search by priority
+ls todos/*-p1-*.md
+
+# Full-text search
+grep -r "payment" todos/
+```
+
+## Key Distinctions
+
+**File-todos system (this skill):**
+- Markdown files in `todos/` directory
+- Development/project tracking
+- Standalone markdown files with YAML frontmatter
+- Used by humans and agents
+
+**Rails Todo model:**
+- Database model in `app/models/todo.rb`
+- User-facing feature in the application
+- Active Record CRUD operations
+- Different from this file-based system
+
+**TodoWrite tool:**
+- In-memory task tracking during agent sessions
+- Temporary tracking for single conversation
+- Not persisted to disk
+- Different from both systems above

package/plugins/compound-engineering/skills/file-todos/assets/todo-template.md

@@ -0,0 +1,155 @@
+---
+status: pending
+priority: p2
+issue_id: "XXX"
+tags: []
+dependencies: []
+---
+
+# Brief Task Title
+
+Replace with a concise title describing what needs to be done.
+
+## Problem Statement
+
+What is broken, missing, or needs improvement? Provide clear context about why this matters.
+
+**Example:**
+- Template system lacks comprehensive test coverage for edge cases discovered during PR review
+- Email service is missing proper error handling for rate-limit scenarios
+- Documentation doesn't cover the new authentication flow
+
+## Findings
+
+Investigation results, root cause analysis, and key discoveries.
+
+- Finding 1 (with specifics: file, line number if applicable)
+- Finding 2
+- Key discovery with impact assessment
+- Related issues or patterns discovered
+
+**Example format:**
+- Identified 12 missing test scenarios in `app/models/user_test.rb`
+- Current coverage: 60% of code paths
+- Missing: empty inputs, special characters, large payloads
+- Similar issues exist in `app/models/post_test.rb` (~8 scenarios)
+
+## Proposed Solutions
+
+Present multiple options with pros, cons, effort estimates, and risk assessment.
+
+### Option 1: [Solution Name]
+
+**Approach:** Describe the solution clearly.
+
+**Pros:**
+- Benefit 1
+- Benefit 2
+
+**Cons:**
+- Drawback 1
+- Drawback 2
+
+**Effort:** 2-3 hours
+
+**Risk:** Low / Medium / High
+
+---
+
+### Option 2: [Solution Name]
+
+**Approach:** Describe the solution clearly.
+
+**Pros:**
+- Benefit 1
+- Benefit 2
+
+**Cons:**
+- Drawback 1
+- Drawback 2
+
+**Effort:** 4-6 hours
+
+**Risk:** Low / Medium / High
+
+---
+
+### Option 3: [Solution Name]
+
+(Include if you have alternatives)
+
+## Recommended Action
+
+**To be filled during triage.** Clear, actionable plan for resolving this todo.
+
+**Example:**
+"Implement both unit tests (covering each scenario) and integration tests (full pipeline) before merging. Estimated 4 hours total effort. Target coverage > 85% for this module."
+
+## Technical Details
+
+Affected files, related components, database changes, or architectural considerations.
+
+**Affected files:**
+- `app/models/user.rb:45` - full_name method
+- `app/services/user_service.rb:12` - validation logic
+- `test/models/user_test.rb` - existing tests
+
+**Related components:**
+- UserMailer (depends on user validation)
+- AccountPolicy (authorization checks)
+
+**Database changes (if any):**
+- Migration needed? Yes / No
+- New columns/tables? Describe here
+
+## Resources
+
+Links to errors, tests, PRs, documentation, similar issues.
+
+- **PR:** #1287
+- **Related issue:** #456
+- **Error log:** [link to AppSignal incident]
+- **Documentation:** [relevant docs]
+- **Similar patterns:** Issue #200 (completed, ref for approach)
+
+## Acceptance Criteria
+
+Testable checklist items for verifying completion.
+
+- [ ] All acceptance criteria checked
+- [ ] Tests pass (unit + integration if applicable)
+- [ ] Code reviewed and approved
+- [ ] (Example) Test coverage > 85%
+- [ ] (Example) Performance metrics acceptable
+- [ ] (Example) Documentation updated
+
+## Work Log
+
+Chronological record of work sessions, actions taken, and learnings.
+
+### 2025-11-12 - Initial Discovery
+
+**By:** Claude Code
+
+**Actions:**
+- Identified 12 missing test scenarios
+- Analyzed existing test coverage (file:line references)
+- Reviewed similar patterns in codebase
+- Drafted 3 solution approaches
+
+**Learnings:**
+- Similar issues exist in related modules
+- Current test setup supports both unit and integration tests
+- Performance testing would be valuable addition
+
+---
+
+(Add more entries as work progresses)
+
+## Notes
+
+Additional context, decisions, or reminders.
+
+- Decision: Include both unit and integration tests for comprehensive coverage
+- Blocker: Depends on completion of issue #001
+- Timeline: Priority for sprint due to blocking other work

package/plugins/compound-engineering/skills/frontend-design/SKILL.md

@@ -0,0 +1,42 @@
+---
+name: frontend-design
+description: This skill should be used when creating distinctive, production-grade frontend interfaces with high design quality. It applies when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
+license: Complete terms in LICENSE.txt
+---
+
+This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
+
+The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
+
+## Design Thinking
+
+Before coding, understand the context and commit to a BOLD aesthetic direction:
+- **Purpose**: What problem does this interface solve? Who uses it?
+- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
+- **Constraints**: Technical requirements (framework, performance, accessibility).
+- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
+
+**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
+
+Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
+- Production-grade and functional
+- Visually striking and memorable
+- Cohesive with a clear aesthetic point-of-view
+- Meticulously refined in every detail
+
+## Frontend Aesthetics Guidelines
+
+Focus on:
+- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
+- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
+- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
+- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
+- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.
+
+NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
+
+Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
+
+**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
+
+Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

package/plugins/compound-engineering/skills/gemini-imagegen/SKILL.md

@@ -0,0 +1,237 @@
+---
+name: gemini-imagegen
+description: This skill should be used when generating and editing images using the Gemini API (Nano Banana Pro). It applies when creating images from text prompts, editing existing images, applying style transfers, generating logos with text, creating stickers, product mockups, or any image generation/manipulation task. Supports text-to-image, image editing, multi-turn refinement, and composition from multiple reference images.
+---
+
+# Gemini Image Generation (Nano Banana Pro)
+
+Generate and edit images using Google's Gemini API. The environment variable `GEMINI_API_KEY` must be set.
+
+## Default Model
+
+| Model | Resolution | Best For |
+|-------|------------|----------|
+| `gemini-3-pro-image-preview` | 1K-4K | All image generation (default) |
+
+**Note:** Always use this Pro model. Only use a different model if explicitly requested.
+
+## Quick Reference
+
+### Default Settings
+- **Model:** `gemini-3-pro-image-preview`
+- **Resolution:** 1K (default, options: 1K, 2K, 4K)
+- **Aspect Ratio:** 1:1 (default)
+
+### Available Aspect Ratios
+`1:1`, `2:3`, `3:2`, `3:4`, `4:3`, `4:5`, `5:4`, `9:16`, `16:9`, `21:9`
+
+### Available Resolutions
+`1K` (default), `2K`, `4K`
+
+## Core API Pattern
+
+```python
+import os
+from google import genai
+from google.genai import types
+
+client = genai.Client(api_key=os.environ["GEMINI_API_KEY"])
+
+# Basic generation (1K, 1:1 - defaults)
+response = client.models.generate_content(
+    model="gemini-3-pro-image-preview",
+    contents=["Your prompt here"],
+    config=types.GenerateContentConfig(
+        response_modalities=['TEXT', 'IMAGE'],
+    ),
+)
+
+for part in response.parts:
+    if part.text:
+        print(part.text)
+    elif part.inline_data:
+        image = part.as_image()
+        image.save("output.png")
+```
+
+## Custom Resolution & Aspect Ratio
+
+```python
+from google.genai import types
+
+response = client.models.generate_content(
+    model="gemini-3-pro-image-preview",
+    contents=[prompt],
+    config=types.GenerateContentConfig(
+        response_modalities=['TEXT', 'IMAGE'],
+        image_config=types.ImageConfig(
+            aspect_ratio="16:9",  # Wide format
+            image_size="2K"       # Higher resolution
+        ),
+    )
+)
+```
+
+### Resolution Examples
+
+```python
+# 1K (default) - Fast, good for previews
+image_config=types.ImageConfig(image_size="1K")
+
+# 2K - Balanced quality/speed
+image_config=types.ImageConfig(image_size="2K")
+
+# 4K - Maximum quality, slower
+image_config=types.ImageConfig(image_size="4K")
+```
+
+### Aspect Ratio Examples
+
+```python
+# Square (default)
+image_config=types.ImageConfig(aspect_ratio="1:1")
+
+# Landscape wide
+image_config=types.ImageConfig(aspect_ratio="16:9")
+
+# Ultra-wide panoramic
+image_config=types.ImageConfig(aspect_ratio="21:9")
+
+# Portrait
+image_config=types.ImageConfig(aspect_ratio="9:16")
+
+# Photo standard
+image_config=types.ImageConfig(aspect_ratio="4:3")
+```
+
+## Editing Images
+
+Pass existing images with text prompts:
+
+```python
+from PIL import Image
+
+img = Image.open("input.png")
+response = client.models.generate_content(
+    model="gemini-3-pro-image-preview",
+    contents=["Add a sunset to this scene", img],
+    config=types.GenerateContentConfig(
+        response_modalities=['TEXT', 'IMAGE'],
+    ),
+)
+```
+
+## Multi-Turn Refinement
+
+Use chat for iterative editing:
+
+```python
+from google.genai import types
+
+chat = client.chats.create(
+    model="gemini-3-pro-image-preview",
+    config=types.GenerateContentConfig(response_modalities=['TEXT', 'IMAGE'])
+)
+
+response = chat.send_message("Create a logo for 'Acme Corp'")
+# Save first image...
+
+response = chat.send_message("Make the text bolder and add a blue gradient")
+# Save refined image...
+```
+
+## Prompting Best Practices
+
+### Photorealistic Scenes
+Include camera details: lens type, lighting, angle, mood.
+> "A photorealistic close-up portrait, 85mm lens, soft golden hour light, shallow depth of field"
+
+### Stylized Art
+Specify style explicitly:
+> "A kawaii-style sticker of a happy red panda, bold outlines, cel-shading, white background"
+
+### Text in Images
+Be explicit about font style and placement:
+> "Create a logo with text 'Daily Grind' in clean sans-serif, black and white, coffee bean motif"
+
+### Product Mockups
+Describe lighting setup and surface:
+> "Studio-lit product photo on polished concrete, three-point softbox setup, 45-degree angle"
+
+## Advanced Features
+
+### Google Search Grounding
+Generate images based on real-time data:
+
+```python
+response = client.models.generate_content(
+    model="gemini-3-pro-image-preview",
+    contents=["Visualize today's weather in Tokyo as an infographic"],
+    config=types.GenerateContentConfig(
+        response_modalities=['TEXT', 'IMAGE'],
+        tools=[{"google_search": {}}]
+    )
+)
+```
+
+### Multiple Reference Images (Up to 14)
+Combine elements from multiple sources:
+
+```python
+response = client.models.generate_content(
+    model="gemini-3-pro-image-preview",
+    contents=[
+        "Create a group photo of these people in an office",
+        Image.open("person1.png"),
+        Image.open("person2.png"),
+        Image.open("person3.png"),
+    ],
+    config=types.GenerateContentConfig(
+        response_modalities=['TEXT', 'IMAGE'],
+    ),
+)
+```
+
+## Important: File Format & Media Type
+
+**CRITICAL:** The Gemini API returns images in JPEG format by default. When saving, always use `.jpg` extension to avoid media type mismatches.
+
+```python
+# CORRECT - Use .jpg extension (Gemini returns JPEG)
+image.save("output.jpg")
+
+# WRONG - Will cause "Image does not match media type" errors
+image.save("output.png")  # Creates JPEG with PNG extension!
+```
+
+### Converting to PNG (if needed)
+
+If you specifically need PNG format:
+
+```python
+from PIL import Image
+
+# Generate with Gemini
+for part in response.parts:
+    if part.inline_data:
+        img = part.as_image()
+        # Convert to PNG by saving with explicit format
+        img.save("output.png", format="PNG")
+```
+
+### Verifying Image Format
+
+Check actual format vs extension with the `file` command:
+
+```bash
+file image.png
+# If output shows "JPEG image data" - rename to .jpg!
+```
+
+## Notes
+
+- All generated images include SynthID watermarks
+- Gemini returns **JPEG format by default** - always use `.jpg` extension
+- Image-only mode (`responseModalities: ["IMAGE"]`) won't work with Google Search grounding
+- For editing, describe changes conversationally—the model understands semantic masking
+- Default to 1K resolution for speed; use 2K/4K when quality is critical

package/plugins/compound-engineering/skills/gemini-imagegen/requirements.txt

@@ -0,0 +1,2 @@
+google-genai>=1.0.0
+Pillow>=10.0.0