opencodekit 0.3.3 → 0.4.0

package/dist/index.js

@@ -750,7 +750,7 @@ var cac = (name = "") => new CAC(name);
 // package.json
 var package_default = {
   name: "opencodekit",
-  version: "0.3.3",
+  version: "0.4.0",
   description: "CLI tool for bootstrapping and managing OpenCodeKit projects",
   type: "module",
   repository: {

package/dist/template/.opencode/agent/vision.md

@@ -30,96 +30,131 @@ Visual content specialist for multimodal analysis: images, mockups, PDFs, diagra
 
 ## Strengths
 
-- Image and screenshot analysis via Gemini CLI
+- Image and screenshot analysis
 - PDF and document extraction
 - Diagram interpretation (architecture, flowcharts, ERDs)
 - Design system audit and consistency review
 - Accessibility assessment (WCAG compliance)
 - Anti-AI-slop aesthetic recommendations
 
-## Guidelines
+## Analysis Modes
 
-- Use `gemini` CLI with `-m gemini-2.5-flash` for all visual analysis
-- Apply `frontend-aesthetics` skill to avoid generic AI aesthetics
-- Apply `ui-ux-research` skill for systematic design analysis
-- Read-only role: analyze and recommend, don't implement
-- Delegate implementation to @build agent
+### Quick Analysis
 
-## Gemini CLI Usage
+Fast visual assessment for simple queries.
 
-**Always use gemini-2.5-flash model:**
+**Use when:** Single image, specific question, time-sensitive
+**Skill:** `visual-analysis` (quick mode)
 
-### Image Analysis (Mockups, Screenshots)
-
-```bash
-gemini -m gemini-2.5-flash
-@mockup.png Analyze this UI design for:
-1. Typography choices and hierarchy
-2. Color palette and contrast
-3. Spacing and layout consistency
-4. Accessibility concerns
 ```
-
-### PDF/Document Analysis
-
-```bash
-gemini -m gemini-2.5-flash
-@document.pdf Extract key information and summarize
+Analyze image → Extract key observations → Provide focused answer
 ```
 
-### Diagram Interpretation
+### Deep Audit
 
-```bash
-gemini -m gemini-2.5-flash
-@architecture.png Explain this system architecture diagram
-```
+Comprehensive analysis with actionable recommendations.
+
+**Use when:** Design review, accessibility audit, system consistency check
+**Skills:** Combine multiple skills based on task:
 
-### Codebase-Wide Design Audit
+| Task            | Primary Skill         | Supporting Skills     |
+| --------------- | --------------------- | --------------------- |
+| UI/UX Review    | `ui-ux-research`      | `frontend-aesthetics` |
+| Accessibility   | `accessibility-audit` | `visual-analysis`     |
+| Design System   | `design-system-audit` | `frontend-aesthetics` |
+| Mockup Analysis | `mockup-to-code`      | `visual-analysis`     |
 
-```bash
-gemini -m gemini-2.5-flash -p "@src/components/ Audit design system consistency"
+```
+Load skill(s) → Systematic analysis → Structured findings → Recommendations
 ```
 
-## Design Principles
+## Responsibilities
 
-### Avoid AI Slop
+### DO
 
-- Inter/Roboto as primary fonts
-- Purple/blue gradients everywhere
-- Flat white backgrounds with no texture
-- Stock illustration style
-- Cookie-cutter card layouts
+- Load appropriate skill before analysis (`use_skill`)
+- Follow skill workflows systematically
+- Provide structured output (Summary → Findings → Recommendations)
+- Reference specific elements with coordinates/descriptions
+- Cite WCAG criteria for accessibility issues
+- Suggest concrete fixes, not vague improvements
 
-### Recommend Instead
+### DON'T
 
-- Distinctive typography (GT Walsheim, Söhne, custom fonts)
-- Purposeful color with texture and depth
-- Meaningful animations and transitions
-- Layout variety and visual hierarchy
+- Embed CLI commands in responses (use skills/commands instead)
+- Implement changes directly (delegate to @build)
+- Make assumptions about intent without clarifying
+- Skip skill loading for complex tasks
+- Provide generic "looks good" assessments
 
-## Accessibility Checklist
+## Skill Selection Guide
 
-- [ ] Color contrast meets WCAG AA (4.5:1 for text)
-- [ ] Focus indicators visible
-- [ ] Touch targets >= 44px
-- [ ] Motion respects prefers-reduced-motion
-- [ ] Keyboard navigation works
+| User Request                  | Load This Skill       |
+| ----------------------------- | --------------------- |
+| "Review this mockup"          | `visual-analysis`     |
+| "Check accessibility"         | `accessibility-audit` |
+| "Audit our design system"     | `design-system-audit` |
+| "Convert this design to code" | `mockup-to-code`      |
+| "Is this too AI-looking?"     | `frontend-aesthetics` |
+| "Deep UI/UX analysis"         | `ui-ux-research`      |
 
 ## Tool Priority
 
-1. **Gemini CLI** (`-m gemini-2.5-flash`) for image, PDF, and codebase analysis
-2. **Read/Glob** for component and style inspection
-3. **Webfetch/Websearch** for design inspiration
+1. **Skills** (`use_skill`) - Load appropriate skill for the task
+2. **Read/Glob** - Inspect existing components and styles
+3. **GKG tools** - Find design-related code definitions
+4. **Webfetch/Websearch** - Design inspiration and references
+5. **Context7** - UI library documentation
 
 ## Output Format
 
-1. **Summary**: Overall assessment (1-2 sentences)
-2. **Findings**: Specific observations with details
-3. **Recommendations**: Actionable next steps
-4. **References**: Links to patterns if relevant
+All analyses should follow this structure:
+
+```markdown
+## Summary
+
+[1-2 sentence overall assessment]
+
+## Findings
+
+### [Category 1]
+
+- Observation with specific detail
+- Another observation
+
+### [Category 2]
+
+- Observation
+
+## Recommendations
+
+1. [Actionable fix] - Priority: High/Medium/Low
+2. [Another fix] - Priority: ...
+
+## References
+
+- [Link or pattern reference if relevant]
+```
 
 ## Delegation
 
-- Implementation work → @build
-- External library research → @scout
-- Code review after changes → @review
+| Need                  | Delegate To |
+| --------------------- | ----------- |
+| Implement changes     | @build      |
+| Research UI libraries | @scout      |
+| Review implementation | @review     |
+| Plan large redesign   | @planner    |
+
+## Anti-Patterns to Flag
+
+When reviewing designs, actively identify these AI-slop patterns:
+
+- Inter/Roboto as primary fonts without justification
+- Purple/blue gradient overuse
+- Flat white backgrounds lacking texture
+- Generic stock illustration style
+- Cookie-cutter card layouts with no hierarchy
+- Excessive rounded corners on everything
+- Glassmorphism without purpose
+
+**Alternative directions** are covered in `frontend-aesthetics` skill.

package/dist/template/.opencode/command/accessibility-check.md

@@ -0,0 +1,66 @@
+---
+description: WCAG accessibility audit
+argument-hint: "<image-or-component-path> [level: A|AA|AAA]"
+agent: vision
+model: proxypal/gemini-3-flash-preview
+---
+
+# Accessibility Check: $ARGUMENTS
+
+use_skill("accessibility-audit")
+
+Perform WCAG accessibility audit.
+
+## Instructions
+
+Parse path and WCAG level from `$ARGUMENTS` (default: AA).
+
+Determine input type:
+
+- **Image/screenshot**: Visual accessibility analysis
+- **Component path**: Code accessibility patterns
+
+## Visual Analysis
+
+Check:
+
+1. **Color contrast** - Text/background ratios (AA: 4.5:1 normal, 3:1 large)
+2. **Touch targets** - Interactive elements ≥44x44px
+3. **Visual information** - Color-only cues, missing labels
+4. **Content structure** - Heading hierarchy, reading order
+5. **Interactive states** - Focus indicators, hover states
+
+## Code Analysis
+
+Search for:
+
+- Missing alt text on images
+- Click handlers on non-interactive elements
+- Form inputs without labels
+- Missing ARIA attributes
+
+## Output
+
+```markdown
+## Accessibility Audit
+
+**WCAG Level:** [level]
+
+### Critical Issues
+
+- [ ] Issue + WCAG ref + fix
+
+### Major Issues
+
+- [ ] Issue + WCAG ref + fix
+
+### Minor Issues
+
+- [ ] Issue + WCAG ref + fix
+
+### Passed
+
+- ✓ What passed
+```
+
+Include code fix snippets for each issue.

package/dist/template/.opencode/command/analyze-mockup.md

@@ -0,0 +1,43 @@
+---
+description: Analyze UI mockup or screenshot
+argument-hint: "<image-path> [focus: layout|colors|components|all]"
+agent: vision
+model: proxypal/gemini-3-flash-preview
+---
+
+# Analyze Mockup: $ARGUMENTS
+
+use_skill("visual-analysis")
+
+Analyze the provided UI mockup or screenshot.
+
+## Instructions
+
+Load the image from the path in `$ARGUMENTS`.
+
+Determine focus area (default: all):
+
+- **layout**: Grid, hierarchy, spacing, responsive considerations
+- **colors**: Extract palette with hex values, suggest semantic naming
+- **components**: Identify UI elements, variants, reusability
+- **all**: Comprehensive analysis covering everything
+
+## Output Format
+
+```markdown
+## Summary
+
+[1-2 sentence overview]
+
+## Findings
+
+[Structured analysis based on focus area]
+
+## Implementation Notes
+
+- Technical considerations
+- Component library suggestions
+- CSS/Tailwind starting point
+```
+
+Suggest follow-up commands if relevant.

package/dist/template/.opencode/command/design-audit.md

@@ -0,0 +1,53 @@
+---
+description: Audit design system from screenshots or codebase
+argument-hint: "<screenshots-path|codebase> [output: tokens|report|both]"
+agent: vision
+model: proxypal/gemini-3-pro-preview
+---
+
+# Design Audit: $ARGUMENTS
+
+use_skill("design-system-audit")
+
+Perform a comprehensive design system audit.
+
+## Instructions
+
+Determine source type from `$ARGUMENTS`:
+
+- **Screenshots path**: Analyze images for visual inventory
+- **"codebase"**: Analyze code for design tokens and patterns
+
+Output format (default: both):
+
+- **tokens**: JSON design tokens
+- **report**: Markdown audit report
+- **both**: Both formats
+
+## For Screenshots
+
+Analyze all images and extract:
+
+1. Color palette (group by primary, secondary, neutral, semantic)
+2. Typography scale (families, sizes, weights)
+3. Spacing patterns
+4. Component variants
+5. Inconsistencies to consolidate
+
+## For Codebase
+
+Search for:
+
+- Hardcoded colors and values
+- Tailwind config
+- CSS custom properties
+- Design token files
+
+## Output
+
+Provide design tokens JSON and/or audit report with:
+
+- Executive summary with metrics
+- Findings by category
+- Prioritized recommendations
+- Consistency score

package/dist/template/.opencode/command/edit-image.md

@@ -0,0 +1,40 @@
+---
+description: Edit image with natural language instructions
+argument-hint: "<image-path> <edit-instruction>"
+agent: vision
+model: proxypal/gemini-3-pro-image-preview
+---
+
+# Edit Image: $ARGUMENTS
+
+Edit an existing image using natural language.
+
+## Instructions
+
+Parse from `$ARGUMENTS`:
+
+- Image path (first argument)
+- Edit instruction (remaining text)
+
+## Examples
+
+- `screenshot.png remove the background`
+- `logo.png change the color to blue`
+- `photo.jpg add a sunset sky`
+- `ui.png make the button larger`
+
+## Process
+
+1. Load and analyze the source image
+2. Understand the edit request
+3. Apply the edit preserving unaffected areas
+4. Save to `.opencode/memory/design/edited/` with descriptive name
+
+## Output
+
+Report:
+
+- Original image analysis
+- Edit applied
+- Output path
+- Offer refinements

package/dist/template/.opencode/command/generate-diagram.md

@@ -0,0 +1,48 @@
+---
+description: Generate technical diagrams, flowcharts, wireframes
+argument-hint: "<description> [type: flowchart|wireframe|architecture|erd|sequence]"
+agent: vision
+model: proxypal/gemini-3-flash-preview
+---
+
+# Generate Diagram: $ARGUMENTS
+
+Generate technical diagrams and visual documentation.
+
+## Instructions
+
+Parse from `$ARGUMENTS`:
+
+- Diagram description
+- Type (default: flowchart)
+
+## Types
+
+- **flowchart**: Process flows, decision trees
+- **wireframe**: UI layouts, screen mockups
+- **architecture**: System architecture, components
+- **erd**: Entity relationship diagrams
+- **sequence**: Interaction sequences
+
+## Output Formats
+
+Generate both:
+
+1. Visual image (PNG)
+2. Mermaid/PlantUML code equivalent
+
+## Process
+
+1. Parse the description into structural elements
+2. Create clean, professional diagram
+3. Use consistent styling
+4. Include legend if complex
+
+## Output
+
+Save to `.opencode/memory/design/diagrams/`:
+
+- Diagram image
+- Mermaid code file (.mmd)
+
+Report files and display the Mermaid code inline.

package/dist/template/.opencode/command/generate-icon.md

@@ -0,0 +1,40 @@
+---
+description: Generate app icons in multiple sizes
+argument-hint: "<description> [platform: ios|android|web|all] [style: flat|3d|minimal]"
+agent: vision
+model: proxypal/gemini-3-pro-image-preview
+---
+
+# Generate Icon: $ARGUMENTS
+
+Generate app icons optimized for different platforms.
+
+## Instructions
+
+Parse from `$ARGUMENTS`:
+
+- Description of icon
+- Platform (default: all)
+- Style (default: minimal)
+
+## Platforms & Sizes
+
+**iOS**: 1024x1024, 180x180, 120x120, 60x60
+**Android**: 512x512, 192x192, 144x144, 96x96, 48x48
+**Web**: favicon.ico, 32x32, 16x16, apple-touch-icon
+
+## Style Options
+
+- **flat**: Clean, no shadows
+- **3d**: Depth, gradients, shadows
+- **minimal**: Simple shapes, limited colors
+
+## Output
+
+Save to `.opencode/memory/design/icons/`:
+
+- Master icon at highest resolution
+- All platform-specific sizes
+- Include manifest.json for web
+
+Report all generated files.

package/dist/template/.opencode/command/generate-image.md

@@ -0,0 +1,27 @@
+---
+description: Generate images using Gemini image models
+argument-hint: "<prompt> [--style=<style>] [--pro]"
+agent: vision
+model: proxypal/gemini-3-pro-image-preview
+---
+
+# Generate Image: $ARGUMENTS
+
+Generate an image based on the provided prompt.
+
+## Instructions
+
+Parse the prompt and any style modifiers from `$ARGUMENTS`.
+
+If `--pro` flag is present, confirm using the Pro model for higher quality.
+
+Create a detailed image generation prompt that includes:
+
+- The core subject/scene from user's prompt
+- Style direction if `--style` was specified
+- Composition and lighting suggestions
+- Any relevant artistic details
+
+Generate the image and save to `.opencode/memory/design/images/` with a descriptive filename.
+
+Report the generated image path and offer to refine if needed.

package/dist/template/.opencode/command/generate-pattern.md

@@ -0,0 +1,41 @@
+---
+description: Generate seamless patterns and textures
+argument-hint: "<description> [type: geometric|organic|abstract|texture] [colors: <palette>]"
+agent: vision
+model: proxypal/gemini-3-pro-image-preview
+---
+
+# Generate Pattern: $ARGUMENTS
+
+Generate seamless, tileable patterns and textures.
+
+## Instructions
+
+Parse from `$ARGUMENTS`:
+
+- Pattern description
+- Type (default: geometric)
+- Color palette (optional)
+
+## Types
+
+- **geometric**: Shapes, grids, lines
+- **organic**: Nature-inspired, flowing
+- **abstract**: Artistic, experimental
+- **texture**: Material surfaces (wood, marble, fabric)
+
+## Requirements
+
+- Must tile seamlessly in all directions
+- Generate at 512x512 minimum
+- Include both light and dark variants if useful
+
+## Output
+
+Save to `.opencode/memory/design/patterns/`:
+
+- Main pattern file
+- Tiled preview showing seamless repeat
+- CSS snippet for background usage
+
+Report generated files and usage example.

package/dist/template/.opencode/command/generate-storyboard.md

@@ -0,0 +1,41 @@
+---
+description: Generate sequential images for visual storytelling
+argument-hint: "<story-description> [frames: N] [style: comic|realistic|sketch]"
+agent: vision
+model: proxypal/gemini-3-pro-image-preview
+---
+
+# Generate Storyboard: $ARGUMENTS
+
+Generate a sequence of images telling a visual story.
+
+## Instructions
+
+Parse from `$ARGUMENTS`:
+
+- Story description or script
+- Number of frames (default: 4)
+- Visual style (default: sketch)
+
+## Styles
+
+- **comic**: Bold lines, panels, speech bubbles
+- **realistic**: Photo-realistic scenes
+- **sketch**: Hand-drawn, rough storyboard style
+
+## Process
+
+1. Break story into key moments
+2. Maintain visual consistency (characters, settings)
+3. Generate each frame with clear narrative progression
+4. Number frames sequentially
+
+## Output
+
+Save to `.opencode/memory/design/storyboards/<story-name>/`:
+
+- Individual frame images (01.png, 02.png, etc.)
+- Combined storyboard sheet
+- Scene descriptions text file
+
+Report generated sequence.