opencodekit 0.3.2 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/dist/index.js +1 -1
  2. package/dist/template/.opencode/agent/vision.md +95 -60
  3. package/dist/template/.opencode/command/accessibility-check.md +66 -0
  4. package/dist/template/.opencode/command/analyze-mockup.md +43 -0
  5. package/dist/template/.opencode/command/design-audit.md +53 -0
  6. package/dist/template/.opencode/command/edit-image.md +40 -0
  7. package/dist/template/.opencode/command/generate-diagram.md +48 -0
  8. package/dist/template/.opencode/command/generate-icon.md +40 -0
  9. package/dist/template/.opencode/command/generate-image.md +27 -0
  10. package/dist/template/.opencode/command/generate-pattern.md +41 -0
  11. package/dist/template/.opencode/command/generate-storyboard.md +41 -0
  12. package/dist/template/.opencode/command/new-feature.md +137 -0
  13. package/dist/template/.opencode/command/research-ui.md +34 -27
  14. package/dist/template/.opencode/command/restore-image.md +39 -0
  15. package/dist/template/.opencode/command/revert-feature.md +127 -0
  16. package/dist/template/.opencode/command/setup-project.md +152 -0
  17. package/dist/template/.opencode/command/ui-review.md +26 -34
  18. package/dist/template/.opencode/memory/project/README.md +28 -0
  19. package/dist/template/.opencode/opencode.json +52 -25
  20. package/dist/template/.opencode/package.json +1 -1
  21. package/dist/template/.opencode/skills/accessibility-audit/SKILL.md +180 -0
  22. package/dist/template/.opencode/skills/design-system-audit/SKILL.md +141 -0
  23. package/dist/template/.opencode/skills/frontend-aesthetics/SKILL.md +40 -65
  24. package/dist/template/.opencode/skills/mockup-to-code/SKILL.md +158 -0
  25. package/dist/template/.opencode/skills/ui-ux-research/SKILL.md +60 -131
  26. package/dist/template/.opencode/skills/visual-analysis/SKILL.md +130 -0
  27. package/package.json +1 -1
@@ -0,0 +1,137 @@
1
+ ---
2
+ description: Create a new feature with bead, spec, and plan
3
+ argument-hint: "<feature-name> [--priority=high|medium|low] [--type=feature|bug|refactor]"
4
+ agent: planner
5
+ model: proxypal/gemini-3-flash-preview
6
+ ---
7
+
8
+ # New Feature: $ARGUMENTS
9
+
10
+ Create a complete feature track with bead, specification, and implementation plan.
11
+
12
+ ## Instructions
13
+
14
+ Parse from `$ARGUMENTS`:
15
+
16
+ - Feature name (required)
17
+ - Priority (default: medium)
18
+ - Type (default: feature)
19
+
20
+ ## Workflow
21
+
22
+ ### Step 1: Create Bead
23
+
24
+ ```bash
25
+ bd new [type] "[feature-name]" --priority [priority]
26
+ ```
27
+
28
+ Capture the bead ID from output.
29
+
30
+ ### Step 2: Create Specification
31
+
32
+ Create `.beads/[bead-id]/spec.md`:
33
+
34
+ ```markdown
35
+ # [Feature Name] Specification
36
+
37
+ ## Overview
38
+
39
+ [Brief description of the feature]
40
+
41
+ ## Problem Statement
42
+
43
+ [What problem does this solve?]
44
+
45
+ ## User Stories
46
+
47
+ - As a [user], I want [goal], so that [benefit]
48
+
49
+ ## Acceptance Criteria
50
+
51
+ - [ ] [Criterion 1]
52
+ - [ ] [Criterion 2]
53
+ - [ ] [Criterion 3]
54
+
55
+ ## Technical Considerations
56
+
57
+ - [Consideration 1]
58
+ - [Consideration 2]
59
+
60
+ ## Out of Scope
61
+
62
+ - [What we're NOT doing]
63
+
64
+ ## Dependencies
65
+
66
+ - [Other features/systems this depends on]
67
+ ```
68
+
69
+ ### Step 3: Create Plan
70
+
71
+ Create `.beads/[bead-id]/plan.md`:
72
+
73
+ ```markdown
74
+ # [Feature Name] Implementation Plan
75
+
76
+ ## Phases
77
+
78
+ ### Phase 1: [Name]
79
+
80
+ **Estimate:** [X hours]
81
+
82
+ Tasks:
83
+
84
+ 1. [ ] [Task 1]
85
+ 2. [ ] [Task 2]
86
+
87
+ ### Phase 2: [Name]
88
+
89
+ **Estimate:** [X hours]
90
+
91
+ Tasks:
92
+
93
+ 1. [ ] [Task 1]
94
+ 2. [ ] [Task 2]
95
+
96
+ ## Testing Strategy
97
+
98
+ - [ ] Unit tests for [what]
99
+ - [ ] Integration tests for [what]
100
+
101
+ ## Rollout Plan
102
+
103
+ 1. [Step 1]
104
+ 2. [Step 2]
105
+
106
+ ## Rollback Plan
107
+
108
+ [How to revert if needed]
109
+ ```
110
+
111
+ ### Step 4: Update Bead
112
+
113
+ ```bash
114
+ bd update [bead-id] --status planning
115
+ ```
116
+
117
+ ## Output
118
+
119
+ Report:
120
+
121
+ - Bead ID created
122
+ - Spec file path
123
+ - Plan file path
124
+ - Next command to run: `/implement [bead-id]`
125
+
126
+ ## Follow-up Commands
127
+
128
+ ```bash
129
+ # View the feature
130
+ bd show [bead-id]
131
+
132
+ # Start implementation
133
+ /implement [bead-id]
134
+
135
+ # Check status
136
+ /status [bead-id]
137
+ ```
@@ -1,48 +1,55 @@
1
1
  ---
2
- description: Large-scale UI/UX research using Gemini CLI with bead artifact storage
3
- argument-hint: "[bead-id] [research topic or path]"
2
+ description: Research UI/UX patterns across codebase or topic
3
+ argument-hint: "<topic-or-path> [bead-id]"
4
4
  agent: vision
5
+ model: proxypal/gemini-3-flash-preview
5
6
  ---
6
7
 
7
8
  # Research UI: $ARGUMENTS
8
9
 
9
- use_skill("gemini-large-context")
10
10
  use_skill("ui-ux-research")
11
11
 
12
- ## Parse Arguments
12
+ Research UI/UX patterns, implementations, or design topics.
13
13
 
14
- Extract bead ID (if provided) and research topic from `$ARGUMENTS`. If no bead ID provided, research findings will be saved to memory instead.
14
+ ## Instructions
15
15
 
16
- ## When to Use Gemini CLI
16
+ Parse research topic/path and optional bead ID from `$ARGUMENTS`.
17
17
 
18
- For a single component, use local tools—they're faster and sufficient. When researching patterns across multiple files or comparing implementations throughout a codebase, switch to Gemini CLI's non-interactive mode to scan entire directories at once. For analyzing images like mockups or screenshots, start Gemini in interactive mode and reference the image directly.
18
+ ## Research Approach
19
19
 
20
- ## How to Research
20
+ For **codebase paths**:
21
21
 
22
- Point Gemini at the relevant directories and ask about the topic. Include both component and style directories to get a complete picture. Ask specifically for current implementations, patterns being used, consistency assessment, and improvement opportunities.
22
+ - Scan component and style directories
23
+ - Identify current patterns and implementations
24
+ - Assess consistency across files
25
+ - Find improvement opportunities
23
26
 
24
- For image analysis, start interactive mode and reference the image file, then describe what aspects you want analyzed.
27
+ For **topics**:
25
28
 
26
- ## Save Findings
29
+ - Research best practices
30
+ - Find relevant examples
31
+ - Compare approaches
32
+ - Recommend implementation
27
33
 
28
- ### With Bead ID
34
+ ## Common Topics
29
35
 
30
- Save research findings to bead artifacts for traceability:
36
+ - Design system consistency
37
+ - Component inventory
38
+ - Typography usage
39
+ - Color token patterns
40
+ - Animation/motion usage
41
+ - Responsive patterns
42
+ - Accessibility compliance
31
43
 
32
- ```bash
33
- # Save to .beads/artifacts/<bead-id>/research-ui.md
34
- bd edit <bead-id> --note "UI research completed: <key findings summary>"
35
- ```
36
-
37
- ### Without Bead ID
38
-
39
- Save to memory for general reference:
40
- `.opencode/memory/research/YYYY-MM-DD-<topic>.md`
41
-
42
- ## Common Research Topics
44
+ ## Output
43
45
 
44
- Design system consistency, component inventory, accessibility audits, responsive patterns, animation usage, typography inventory, and color token usage are all good candidates for this kind of large-scale research.
46
+ Provide:
45
47
 
46
- ## Output
48
+ 1. Research summary
49
+ 2. Key findings
50
+ 3. Specific recommendations
51
+ 4. Code examples where helpful
52
+ 5. Next steps
47
53
 
48
- Provide a research summary with your findings, specific recommendations, code examples where they help clarify a point, and suggested next steps for implementation.
54
+ If bead ID provided, save findings to bead artifacts.
55
+ Otherwise, save to `.opencode/memory/design/research/`.
@@ -0,0 +1,39 @@
1
+ ---
2
+ description: Restore, enhance, or upscale images
3
+ argument-hint: "<image-path> [mode: enhance|upscale|restore|denoise]"
4
+ agent: vision
5
+ model: proxypal/gemini-3-pro-image-preview
6
+ ---
7
+
8
+ # Restore Image: $ARGUMENTS
9
+
10
+ Restore, enhance, or improve image quality.
11
+
12
+ ## Instructions
13
+
14
+ Parse from `$ARGUMENTS`:
15
+
16
+ - Image path
17
+ - Mode (default: enhance)
18
+
19
+ ## Modes
20
+
21
+ - **enhance**: Improve overall quality, colors, sharpness
22
+ - **upscale**: Increase resolution
23
+ - **restore**: Fix artifacts, compression, damage
24
+ - **denoise**: Remove noise while preserving detail
25
+
26
+ ## Process
27
+
28
+ 1. Analyze image quality issues
29
+ 2. Apply appropriate restoration
30
+ 3. Save to `.opencode/memory/design/restored/`
31
+
32
+ ## Output
33
+
34
+ Report:
35
+
36
+ - Issues detected
37
+ - Improvements applied
38
+ - Before/after comparison notes
39
+ - Output path
@@ -0,0 +1,127 @@
1
+ ---
2
+ description: Smart git-aware revert for a bead/feature
3
+ argument-hint: "<bead-id> [--phase=N] [--task=N] [--soft]"
4
+ agent: build
5
+ model: proxypal/gemini-3-flash-preview
6
+ ---
7
+
8
+ # Revert Feature: $ARGUMENTS
9
+
10
+ Intelligently revert changes for a bead with git awareness.
11
+
12
+ ## Instructions
13
+
14
+ Parse from `$ARGUMENTS`:
15
+
16
+ - Bead ID (required)
17
+ - `--phase=N`: Revert only specific phase
18
+ - `--task=N`: Revert only specific task
19
+ - `--soft`: Stage reverts without committing
20
+
21
+ ## Workflow
22
+
23
+ ### Step 1: Analyze Bead History
24
+
25
+ ```bash
26
+ bd show [bead-id] --history
27
+ ```
28
+
29
+ Identify:
30
+
31
+ - All commits associated with this bead
32
+ - Files changed per phase/task
33
+ - Current phase and task
34
+
35
+ ### Step 2: Determine Revert Scope
36
+
37
+ **Full revert (no flags):**
38
+
39
+ - All commits for this bead
40
+ - Reset bead status to initial
41
+
42
+ **Phase revert (--phase=N):**
43
+
44
+ - Only commits tagged with phase N
45
+ - Reset bead to previous phase
46
+
47
+ **Task revert (--task=N):**
48
+
49
+ - Only commits for specific task
50
+ - Keep bead in current phase
51
+
52
+ ### Step 3: Git Analysis
53
+
54
+ ```bash
55
+ # Find commits for this bead
56
+ git log --oneline --all --grep="[bead-id]"
57
+
58
+ # Show files that would be affected
59
+ git diff --stat [commit-range]
60
+ ```
61
+
62
+ Present:
63
+
64
+ - Commits to revert
65
+ - Files affected
66
+ - Potential conflicts
67
+
68
+ ### Step 4: Confirm and Execute
69
+
70
+ Ask for confirmation before reverting.
71
+
72
+ **Hard revert (default):**
73
+
74
+ ```bash
75
+ git revert --no-commit [commits...]
76
+ git commit -m "revert: [bead-id] [scope]"
77
+ ```
78
+
79
+ **Soft revert (--soft):**
80
+
81
+ ```bash
82
+ git revert --no-commit [commits...]
83
+ # Leave changes staged for review
84
+ ```
85
+
86
+ ### Step 5: Update Bead
87
+
88
+ ```bash
89
+ bd update [bead-id] --status reverted --note "Reverted [scope]"
90
+ ```
91
+
92
+ ## Safety Checks
93
+
94
+ Before reverting:
95
+
96
+ - [ ] Check for uncommitted changes
97
+ - [ ] Verify bead exists and has commits
98
+ - [ ] Check for dependent beads
99
+ - [ ] Identify potential merge conflicts
100
+
101
+ If conflicts detected:
102
+
103
+ 1. List conflicting files
104
+ 2. Offer to abort or continue with manual resolution
105
+ 3. Provide conflict resolution guidance
106
+
107
+ ## Output
108
+
109
+ Report:
110
+
111
+ - Commits reverted
112
+ - Files restored
113
+ - Bead status updated
114
+ - Next steps
115
+
116
+ ## Related Commands
117
+
118
+ ```bash
119
+ # View bead history
120
+ bd show [bead-id] --history
121
+
122
+ # Check current status
123
+ bd status
124
+
125
+ # Re-implement after revert
126
+ /implement [bead-id]
127
+ ```
@@ -0,0 +1,152 @@
1
+ ---
2
+ description: Initialize project context for AI-assisted development
3
+ argument-hint: "[--full] [--minimal]"
4
+ agent: planner
5
+ model: proxypal/gemini-3-flash-preview
6
+ ---
7
+
8
+ # Setup Project: $ARGUMENTS
9
+
10
+ Initialize project context files that AI agents and beads can reference.
11
+
12
+ ## Instructions
13
+
14
+ Parse options from `$ARGUMENTS`:
15
+
16
+ - `--full`: Create all context files with detailed prompts
17
+ - `--minimal`: Create only essential files (default)
18
+
19
+ ## Context Files to Create
20
+
21
+ ### Essential (always created)
22
+
23
+ **`.opencode/memory/project/product.md`**
24
+
25
+ ```markdown
26
+ # Product Context
27
+
28
+ ## Vision
29
+
30
+ [What is this product? What problem does it solve?]
31
+
32
+ ## Target Users
33
+
34
+ [Who uses this? What are their needs?]
35
+
36
+ ## Key Features
37
+
38
+ 1. [Feature 1]
39
+ 2. [Feature 2]
40
+
41
+ ## Success Metrics
42
+
43
+ - [How do we measure success?]
44
+ ```
45
+
46
+ **`.opencode/memory/project/tech-stack.md`**
47
+
48
+ ```markdown
49
+ # Tech Stack
50
+
51
+ ## Languages
52
+
53
+ - [Primary language and version]
54
+
55
+ ## Frameworks
56
+
57
+ - [Framework 1]: [Purpose]
58
+
59
+ ## Infrastructure
60
+
61
+ - [Hosting, CI/CD, etc.]
62
+
63
+ ## Key Dependencies
64
+
65
+ | Package | Version | Purpose |
66
+ | ------- | ------- | ------- |
67
+ | [name] | [ver] | [why] |
68
+
69
+ ## Development Setup
70
+
71
+ [How to get started locally]
72
+ ```
73
+
74
+ ### Full Setup (with --full)
75
+
76
+ **`.opencode/memory/project/workflow.md`**
77
+
78
+ ```markdown
79
+ # Development Workflow
80
+
81
+ ## Branch Strategy
82
+
83
+ - main: Production
84
+ - develop: Integration
85
+ - feature/\*: New features
86
+ - fix/\*: Bug fixes
87
+
88
+ ## Code Review
89
+
90
+ [Review requirements]
91
+
92
+ ## Testing Requirements
93
+
94
+ [What must be tested]
95
+
96
+ ## Deployment Process
97
+
98
+ [How code gets to production]
99
+ ```
100
+
101
+ **`.opencode/memory/project/conventions.md`**
102
+
103
+ ```markdown
104
+ # Coding Conventions
105
+
106
+ ## Naming
107
+
108
+ - Files: [convention]
109
+ - Components: [convention]
110
+ - Variables: [convention]
111
+
112
+ ## Structure
113
+
114
+ - [Directory structure rules]
115
+
116
+ ## Patterns
117
+
118
+ - [Design patterns used]
119
+
120
+ ## Anti-patterns
121
+
122
+ - [What to avoid]
123
+ ```
124
+
125
+ ## Process
126
+
127
+ 1. Check if context files already exist
128
+ 2. If exists, offer to update or skip
129
+ 3. Analyze codebase to pre-fill where possible:
130
+ - Detect tech stack from package.json, go.mod, etc.
131
+ - Identify patterns from existing code
132
+ - Extract project info from README
133
+ 4. Create files with intelligent defaults
134
+ 5. Report what was created
135
+
136
+ ## Integration with Beads
137
+
138
+ After setup, beads can reference:
139
+
140
+ ```bash
141
+ bd new feature "Add login" --context .opencode/memory/project/
142
+ ```
143
+
144
+ ## Output
145
+
146
+ Report:
147
+
148
+ - Files created/updated
149
+ - Detected tech stack
150
+ - Suggested next steps
151
+
152
+ Save to `.opencode/memory/project/`
@@ -1,52 +1,44 @@
1
1
  ---
2
- description: Review UI/UX design or mockup with optional bead tracking
3
- argument-hint: "[bead-id] [path to image or component]"
2
+ description: Review UI/UX design for quality and aesthetics
3
+ argument-hint: "<image-or-component-path> [bead-id]"
4
4
  agent: vision
5
+ model: proxypal/gemini-3-pro-preview
5
6
  ---
6
7
 
7
8
  # UI Review: $ARGUMENTS
8
9
 
9
- use_skill("ui-ux-research")
10
10
  use_skill("frontend-aesthetics")
11
+ use_skill("visual-analysis")
11
12
 
12
- ## Parse Arguments
13
+ Review UI/UX design for quality, aesthetics, and best practices.
13
14
 
14
- Extract bead ID (if provided) and path/component from `$ARGUMENTS`. If a bead ID is present, findings will be recorded to the bead.
15
+ ## Instructions
15
16
 
16
- ## How to Analyze
17
+ Parse image/component path and optional bead ID from `$ARGUMENTS`.
17
18
 
18
- First, determine what you're reviewing. If it's an image or screenshot, start Gemini in interactive mode and reference the image to analyze it. If it's component code, analyze it directly with local tools. For large codebases spanning many files, use Gemini's non-interactive mode to scan the entire directory.
19
+ ## What to Evaluate
19
20
 
20
- ## What to Look For
21
+ 1. **Typography** - Avoid generic fonts (Inter/Roboto without purpose)
22
+ 2. **Colors** - Check for overused AI patterns (purple gradients, flat white)
23
+ 3. **Layout** - Hierarchy, spacing, visual rhythm
24
+ 4. **Motion** - Micro-interactions, transitions
25
+ 5. **Atmosphere** - Texture, depth, personality
26
+ 6. **Accessibility** - Contrast, focus states, ARIA
21
27
 
22
- Check typography first—generic fonts like Inter or Roboto are signs of "AI slop" aesthetics. Look at the color palette for overused patterns like purple gradients or flat white backgrounds. Assess whether the UI has any motion or micro-interactions, and whether backgrounds feel atmospheric or just flat.
28
+ ## Anti-Patterns to Flag
23
29
 
24
- For accessibility, verify color contrast meets WCAG AA minimum, check for ARIA labels on interactive elements, ensure keyboard navigation works, and confirm focus indicators are visible.
30
+ - Cookie-cutter card layouts
31
+ - Excessive rounded corners
32
+ - Glassmorphism without purpose
33
+ - Generic stock illustration style
25
34
 
26
- ## Recommendations
27
-
28
- Provide specific, actionable improvements: suggest alternative fonts, propose color palette changes, identify opportunities for subtle animations, and recommend layout enhancements. Include code snippets when they would help clarify the suggestion.
29
-
30
- ## Record Findings
31
-
32
- ### With Bead ID
33
-
34
- Update the bead with review findings:
35
-
36
- ```bash
37
- bd edit <bead-id> --note "UI Review: <summary of issues found and recommendations>"
38
- ```
39
-
40
- If review reveals implementation tasks, create child beads:
41
-
42
- ```bash
43
- bd create --title "<specific UI fix>" --type task --parent <bead-id>
44
- ```
45
-
46
- ### Without Bead ID
35
+ ## Output
47
36
 
48
- Output findings directly to the user.
37
+ Provide:
49
38
 
50
- ## Output
39
+ 1. Summary of issues found
40
+ 2. Specific actionable recommendations
41
+ 3. Code snippets for improvements
42
+ 4. Before/after suggestions
51
43
 
52
- Summarize what issues you found, what specific changes you recommend, and show before/after comparisons for significant improvements.
44
+ If bead ID provided, record findings to the bead.
@@ -0,0 +1,28 @@
1
+ # Project Context Template
2
+
3
+ Use `/setup-project` command to initialize these files.
4
+
5
+ ## Files Created
6
+
7
+ | File | Purpose |
8
+ | ---------------- | ----------------------------------- |
9
+ | `product.md` | Product vision, users, features |
10
+ | `tech-stack.md` | Languages, frameworks, dependencies |
11
+ | `workflow.md` | Branch strategy, review, deployment |
12
+ | `conventions.md` | Coding standards, patterns |
13
+
14
+ ## Integration with Beads
15
+
16
+ Beads can reference project context:
17
+
18
+ ```bash
19
+ bd new feature "Add auth" --context .opencode/memory/project/
20
+ ```
21
+
22
+ ## Integration with Commands
23
+
24
+ Commands automatically check:
25
+
26
+ - `/implement` - Reads tech-stack for implementation guidance
27
+ - `/plan` - Reads product for feature alignment
28
+ - `/review-codebase` - Reads conventions for compliance