opencodekit 0.3.3 → 0.5.0

package/dist/template/.opencode/skills/ui-ux-research/SKILL.md

@@ -1,114 +1,73 @@
----
-name: ui-ux-research
-description: Use when analyzing mockups, screenshots, design systems, or conducting UI/UX research - leverages Gemini CLI non-interactive mode for large context image analysis and codebase-wide UI pattern discovery
----
+# UI/UX Research Skill
 
-# UI/UX Research with Gemini CLI
-
-## Overview
-
-Leverage Gemini CLI's 1M token context window and multimodal capabilities for UI/UX research tasks that exceed typical context limits. Use non-interactive mode (`-p` flag) for automated analysis of mockups, screenshots, and large design systems.
+Research UI patterns, design systems, and user experience across codebases.
 
 ## When to Use
 
-- Analyzing multiple UI mockups/screenshots at once
-- Researching UI patterns across large codebases (100KB+)
+- Analyzing UI patterns across large codebases
 - Comparing design system implementations
-- Auditing UI consistency across app
-- Understanding competitor UI patterns
-
-## Choosing the Right Model
-
-For UI/UX research, use **`gemini-2.5-pro`** for all analysis tasks—it has a 1M token context window and excels at understanding images, mockups, and screenshots. This is the default model when you run `gemini`.
-
-If you need faster responses and don't need the full context window, use **`gemini-2.5-flash`** (32K tokens).
+- Auditing UI consistency
+- Understanding existing patterns before implementation
 
-**Important:** Don't confuse analysis with generation. Image generation models like `imagen-3.0-generate-002` are for _creating_ new images, not analyzing existing ones. For reviewing mockups or screenshots, always stick with `gemini-2.5-pro`.
+## Research Patterns
 
-## Gemini CLI Non-Interactive Basics
-
-```bash
-# Basic prompt
-gemini -p "Your prompt here"
-
-# Include files/directories with @ syntax
-gemini -p "@src/components/ Analyze UI patterns used"
-
-# Include all project files
-gemini --all-files -p "Find all React components with accessibility issues"
+### Find All UI Components
 
-# Specify model (Pro has 1M context, best for image analysis)
-gemini -m gemini-2.5-pro -p "@src/ Analyze design system"
 ```
-
-## Image Analysis Workflow
-
-### Step 1: Download Image (if URL)
-
-```bash
-curl -o mockup.png "https://example.com/design.png"
+Analyze the components directory.
+List all UI components with their props interfaces.
 ```
 
-### Step 2: Analyze with Gemini (Interactive Mode Preferred for Images)
+### Audit Design System Consistency
 
-```bash
-# Start interactive session
-gemini
-> @mockup.png Analyze this UI for accessibility issues
 ```
+Check design token usage consistency:
+- Colors
+- Spacing
+- Typography
 
-### Step 3: For Non-Interactive Image Analysis
-
-```bash
-# Use read_file tool through shell
-gemini -p "Read the image at ./mockup.png and analyze the UI layout, color contrast, and typography choices"
+Identify inconsistencies and suggest consolidation.
 ```
 
-## Large-Scale UI Research Commands
-
-### Find All UI Components
+### Compare UI Implementations
 
-```bash
-gemini -p "@src/components/ List all UI components with their props interfaces"
 ```
-
-### Audit Design System Consistency
-
-```bash
-gemini -p "@src/ @styles/ Check design token usage consistency - colors, spacing, typography"
+Compare layout patterns across pages.
+Identify inconsistencies and recommend standardization.
 ```
 
-### Compare UI Implementations
+### Accessibility Audit
 
-```bash
-gemini -p "@src/pages/ @src/components/ Compare layout patterns across pages, identify inconsistencies"
 ```
+Audit components for WCAG compliance:
+- Color contrast
+- ARIA labels
+- Keyboard navigation
 
-### Accessibility Audit
-
-```bash
-gemini -p "@src/components/ Audit for WCAG compliance: color contrast, ARIA labels, keyboard navigation"
+Prioritize issues by severity.
 ```
 
 ### Responsive Design Review
 
-```bash
-gemini -p "@src/ Find all responsive breakpoints and media queries, assess mobile-first compliance"
+```
+Find all responsive breakpoints and media queries.
+Assess mobile-first compliance.
+Identify missing responsive considerations.
 ```
 
-## UI Pattern Research Template
+## Pattern Search Template
+
+```
+Has [PATTERN] been implemented?
 
-```bash
-# Research pattern across codebase
-gemini -p "@src/ @lib/ Has [PATTERN] been implemented?
 Show:
 1. Files containing the pattern
 2. Implementation approach
 3. Consistency across usages
-4. Potential improvements"
+4. Potential improvements
 ```
 
-**Example patterns to search:**
+**Common patterns to search:**
 
 - Dark mode toggle
 - Form validation
@@ -116,76 +75,46 @@ Show:
 - Error boundaries
 - Toast notifications
 - Modal dialogs
-- Data tables with sorting/filtering
+- Data tables
 
-## Integration with OpenCode Workflow
+## Integration with Beads
 
-### For Task-Constrained Research
+For task-constrained research:
 
-1. **Check bead exists:**
+1. Check bead spec constraints
+2. Research within those constraints
+3. Save findings to bead artifacts
 
-   ```bash
-   bd show bd-xxx
-   ```
+## Storage
 
-2. **Research within spec constraints:**
+Save research findings to `.opencode/memory/design/research/`
 
-   ```bash
-   gemini -p "@src/components/ @.beads/artifacts/bd-xxx/spec.md
-   Find implementations matching spec requirements"
-   ```
+## Output Format
 
-3. **Save findings:**
-   ```bash
-   # Save to bead artifacts
-   # Write to .beads/artifacts/bd-xxx/research.md
-   ```
+```markdown
+## Research: [Topic]
 
-### Combining with Frontend Aesthetics Skill
+### Findings
 
-Use this skill for research, then apply `frontend-aesthetics` skill for implementation:
+[Key discoveries]
 
-1. **Research:** `gemini -p "@src/ What typography is currently used?"`
-2. **Implement:** Apply `frontend-aesthetics` prompt to generate improved components
+### Current Implementation
 
-## Output Formats
+[What exists]
 
-```bash
-# JSON output for scripting
-gemini -p "query" --output-format json
+### Recommendations
 
-# Stream for long operations
-gemini -p "query" --output-format stream-json
-```
-
-## Common Use Cases
-
-- **Mockup analysis:** Start interactive mode with `gemini`, then `@mockup.png Analyze UI`
-- **Design token audit:** `gemini -p "@styles/ List all design tokens"`
-- **Component inventory:** `gemini -p "@src/components/ Create component catalog"`
-- **Accessibility check:** `gemini -p "@src/ WCAG compliance audit"`
-- **Pattern search:** `gemini -p "@src/ Find modal implementations"`
-
-## Limitations
+[What to improve]
 
-- `@file` syntax works best in interactive mode
-- Non-interactive image analysis requires workarounds (curl + read)
-- For real-time UI changes, prefer interactive mode
-- Token limits: 1M (`gemini-2.5-pro`), 32K (`gemini-2.5-flash`)
-- Image analysis uses `gemini-2.5-pro`, NOT image generation models
+### Next Steps
 
-## Quick Reference
-
-```bash
-# Start research session
-gemini -m gemini-2.5-pro
-
-# Non-interactive codebase analysis
-gemini -p "@src/ @styles/ [your research question]"
+[Actionable items]
+```
 
-# Include multiple directories
-gemini -p "@frontend/ @shared/ Compare UI patterns"
+## Related Skills
 
-# Save session for resumption
-gemini --checkpointing
-```
+| After Research              | Use Skill             |
+| --------------------------- | --------------------- |
+| Need implementation         | `mockup-to-code`      |
+| Need aesthetic improvements | `frontend-aesthetics` |
+| Need accessibility fixes    | `accessibility-audit` |

package/dist/template/.opencode/skills/visual-analysis/SKILL.md

@@ -0,0 +1,130 @@
+# Visual Analysis Skill
+
+Analyze images, screenshots, and visual content.
+
+## When to Use
+
+- Analyzing UI mockups or screenshots
+- Extracting information from images
+- Comparing visual designs
+- Quick visual assessments
+
+## Quick Mode
+
+Fast, focused analysis for specific questions.
+
+**Prompt pattern:**
+
+```
+Analyze this image: [attach image]
+[specific question]
+```
+
+**Examples:**
+
+- "What text is visible in this UI?"
+- "List all colors used with their hex values"
+- "Identify all interactive elements"
+
+## Deep Mode
+
+Comprehensive analysis with structured output.
+
+**Prompt pattern:**
+
+```
+Analyze this image comprehensively:
+
+1. CONTENT INVENTORY
+   - All UI elements present
+   - Text content
+   - Icons and imagery
+
+2. VISUAL PROPERTIES
+   - Color palette (hex values)
+   - Typography (fonts, sizes, weights)
+   - Spacing patterns
+   - Layout structure
+
+3. OBSERVATIONS
+   - Design patterns used
+   - Potential issues
+   - Notable features
+
+Output as structured markdown.
+```
+
+## Common Analysis Patterns
+
+### UI Component Analysis
+
+```
+Analyze this UI component:
+
+1. Component type and purpose
+2. Visual states (hover, focus, disabled)
+3. Accessibility considerations
+4. Props/variants needed
+5. Similar patterns in common UI libraries
+```
+
+### Screenshot Comparison
+
+```
+Compare these two images:
+
+1. Visual differences (be specific about location)
+2. Missing elements
+3. Spacing/sizing discrepancies
+4. Color accuracy
+5. Priority fixes ranked by visual impact
+```
+
+### Color Extraction
+
+```
+Extract all colors from this image.
+
+Output as JSON:
+{
+  "primary": ["#hex1", "#hex2"],
+  "secondary": ["#hex3"],
+  "neutral": ["#hex4", "#hex5"],
+  "accent": ["#hex6"]
+}
+
+Include approximate usage percentage for each color.
+```
+
+### Layout Analysis
+
+```
+Analyze the layout structure:
+
+1. Grid system (columns, gutters)
+2. Container widths
+3. Section divisions
+4. Responsive breakpoint hints
+5. Flexbox vs Grid recommendations
+
+Output CSS/Tailwind structure.
+```
+
+## Output Formats
+
+- **Markdown** (default): Structured text
+- **JSON**: For design tokens
+- **Code**: Direct implementation
+
+## Storage
+
+Save findings to `.opencode/memory/design/analysis/`
+
+## Related Skills
+
+| Need                        | Skill                 |
+| --------------------------- | --------------------- |
+| Found accessibility issues  | `accessibility-audit` |
+| Need to implement design    | `mockup-to-code`      |
+| Want design tokens          | `design-system-audit` |
+| Need aesthetic improvements | `frontend-aesthetics` |

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "opencodekit",
-	"version": "0.3.3",
+	"version": "0.5.0",
 	"description": "CLI tool for bootstrapping and managing OpenCodeKit projects",
 	"type": "module",
 	"repository": {