cokit-cli 1.0.8 → 1.2.0

package/templates/repo/.github/skills/fix/references/workflow-deep.md

@@ -0,0 +1,91 @@
+# Deep Workflow
+
+Full pipeline with research, brainstorming, and planning for complex issues.
+
+## Steps
+
+### Step 1: Debug & Parallel Investigation
+Activate `debug` skill. Launch 2-3 `Explore` subagents in parallel:
+```
+Task("Explore", "Find error origin", "Trace error")
+Task("Explore", "Find affected components", "Map deps")
+Task("Explore", "Find similar patterns", "Find patterns")
+```
+See `references/parallel-exploration.md` for patterns.
+
+**Output:** `✓ Step 1: Root cause - [summary], system impact: [scope]`
+
+### Step 2: Research
+Use `researcher` subagent for external knowledge.
+
+- Search latest docs, best practices
+- Find similar issues/solutions
+- Gather security advisories if relevant
+
+**Output:** `✓ Step 2: Research complete - [key findings]`
+
+### Step 3: Brainstorm
+Activate `brainstorming` skill.
+
+- Evaluate multiple approaches
+- Consider trade-offs
+- Get user input on preferred direction
+
+**Output:** `✓ Step 3: Approach selected - [chosen approach]`
+
+### Step 4: Plan
+Use `planner` subagent to create implementation plan.
+
+- Break down into phases
+- Identify dependencies
+- Define success criteria
+
+**Output:** `✓ Step 4: Plan created - [N] phases`
+
+### Step 5: Implement
+Implement per plan. Use `context-engineering`, `sequential-thinking`, `problem-solving`.
+
+**Parallel Verification:** Launch `Bash` agents: typecheck + lint + build
+See `references/parallel-exploration.md`
+
+**Output:** `✓ Step 5: Implemented - [N] files, [M] phases, verified`
+
+### Step 6: Test
+Use `tester` subagent.
+
+- Comprehensive testing
+- Edge cases, security, performance
+- If fail → debug, fix, repeat
+
+**Output:** `✓ Step 6: Tests [X/X passed]`
+
+### Step 7: Review
+Use `code-reviewer` subagent.
+
+See `references/review-cycle.md` for mode-specific handling.
+
+**Output:** `✓ Step 7: Review [score]/10 - [status]`
+
+### Step 8: Finalize
+- Use `project-manager` subagent to update roadmap
+- Use `docs-manager` subagent for documentation
+- Use `git-manager` subagent for commit
+
+**Output:** `✓ Step 8: Complete - [actions taken]`
+
+## Skills/Subagents Activated
+
+| Step | Skills/Subagents |
+|------|------------------|
+| 1 | `debug`, parallel `Explore` subagents for investigation |
+| 2 | `researcher` |
+| 3 | `brainstorm` |
+| 4 | `planner` |
+| 5 | `problem-solving`, `sequential-thinking`, `context-engineering`, parallel `Bash` |
+| 6 | `tester` |
+| 7 | `code-reviewer` |
+| 8 | `project-manager`, `docs-manager`, `Bash` |
+
+**Rules:** Don't skip steps. Validate before proceeding. One phase at a time.
+**Frontend:** Use `agent-browser` or browser automation tools to verify.
+**Visual Assets:** Use ImageMagick/FFmpeg CLI for image/video processing.

package/templates/repo/.github/skills/fix/references/workflow-logs.md

@@ -0,0 +1,36 @@
+# Log Analysis Fix Workflow
+
+For fixing issues from application logs.
+
+## Prerequisites
+- Log file at `./logs.txt` or similar
+
+## Setup (if logs missing)
+
+Add permanent log piping to project config:
+- **Bash/Unix**: `command 2>&1 | tee logs.txt`
+- **PowerShell**: `command *>&1 | Tee-Object logs.txt`
+
+## Workflow
+
+1. **Read logs** with `Grep` (use `head_limit: 30` initially)
+   - Increase limit if insufficient context
+
+2. **Analyze** with `debugger` agent for root causes
+
+3. **Scout** codebase with `scout` agent for issue locations
+
+4. **Plan** fix with `planner` agent
+
+5. **Implement** the fix
+
+6. **Test** with `tester` agent
+
+7. **Review** with `code-reviewer` agent
+
+8. **Iterate** if issues remain, repeat from step 3
+
+## Tips
+- Focus on last N lines first (most recent errors)
+- Look for stack traces, error codes, timestamps
+- Check for patterns/repeated errors

package/templates/repo/.github/skills/fix/references/workflow-quick.md

@@ -0,0 +1,59 @@
+# Quick Workflow
+
+Fast debug-fix-review cycle for simple issues.
+
+## Steps
+
+### Step 1: Debug
+Activate `debug` skill. Find root cause quickly. Verify the root cause with multiple `Explore` subagents in parallel.
+- Read error message/logs
+- Locate affected file(s)
+- Identify exact fix needed
+
+**Output:** `✓ Step 1: Root cause - [brief description]`
+
+### Step 2: Fix & Verify
+Implement the fix directly.
+- Make minimal changes
+- Follow existing patterns
+
+**Parallel Verification:**
+Launch `Bash` agents in parallel:
+```
+Task("Bash", "Run typecheck", "Verify types")
+Task("Bash", "Run lint", "Verify lint")
+```
+
+See `references/parallel-exploration.md` for patterns.
+
+**Output:** `✓ Step 2: Fixed - [N] files, verified (types/lint passed)`
+
+### Step 3: Verify
+Use `code-reviewer` subagent for quick review.
+
+Prompt: "Quick review of fix for [issue]. Check: correctness, security, no regressions. Score X/10."
+
+**Review handling:** See `references/review-cycle.md`
+
+**Output:** `✓ Step 3: Review [score]/10 - [status]`
+
+### Step 4: Complete
+Report summary to user.
+
+**If autonomous mode:** Ask to commit via `git-manager` subagent if score >= 9.0
+**If HITL mode:** Ask user next action
+
+**Output:** `✓ Step 4: Complete - [action]`
+
+## Skills/Subagents Activated
+
+- `debug` - Always (Step 1)
+- Parallel `git-manager` - Verification (Step 2)
+- `code-reviewer` subagent - Always (Step 3)
+- `context-engineering` - If dealing with AI/LLM code
+
+## Notes
+
+- Skip if review fails → escalate to Standard workflow
+- Total steps: 4 (vs 5-6 in Standard/Deep)
+- No planning phase needed

package/templates/repo/.github/skills/fix/references/workflow-standard.md

@@ -0,0 +1,86 @@
+# Standard Workflow
+
+Full pipeline for moderate complexity issues.
+
+## Steps
+
+### Step 1: Debug & Investigate
+Activate `debug` skill. Use `debugger` subagent if needed.
+
+- Read error messages, logs, stack traces
+- Reproduce the issue
+- Trace backward to root cause
+- Identify all affected files
+
+**Output:** `✓ Step 1: Root cause - [summary], [N] files affected`
+
+### Step 2: Parallel Scout
+Launch multiple `Explore` subagents in parallel to scout and verify the root cause.
+
+**Pattern:** In SINGLE message, launch 2-3 Explore agents:
+```
+Task("Explore", "Find [area1] files related to issue", "Scout area1")
+Task("Explore", "Find [area2] patterns/usage", "Scout area2")
+Task("Explore", "Find [area3] tests/dependencies", "Scout area3")
+```
+
+- Only if unclear which files need changes
+- Find patterns, similar implementations, dependencies
+
+See `references/parallel-exploration.md` for patterns.
+
+**Output:** `✓ Step 2: Scouted [N] areas - Found [M] related files`
+
+### Step 3: Implement Fix
+Fix the issue following debugging findings.
+
+- Apply `problem-solving` skill if stuck
+- Use `sequential-thinking` for complex logic
+
+**After implementation - Parallel Verification:**
+Launch `Bash` agents in parallel to verify:
+```
+Task("Bash", "Run typecheck", "Verify types")
+Task("Bash", "Run lint", "Verify lint")
+Task("Bash", "Run build", "Verify build")
+```
+
+**Output:** `✓ Step 3: Implemented - [N] files, verified (types/lint/build passed)`
+
+### Step 4: Test
+Use `tester` subagent to run tests.
+
+- Write new tests if needed
+- Run existing test suite
+- If fail → use `debugger`, fix, repeat
+
+**Output:** `✓ Step 4: Tests [X/X passed]`
+
+### Step 5: Review
+Use `code-reviewer` subagent.
+
+See `references/review-cycle.md` for mode-specific handling.
+
+**Output:** `✓ Step 5: Review [score]/10 - [status]`
+
+### Step 6: Finalize
+- Report summary to user
+- Ask to commit via `git-manager` subagent
+- Update docs if needed via `docs-manager`
+
+**Output:** `✓ Step 6: Complete - [action]`
+
+## Skills/Subagents Activated
+
+| Step | Skills/Subagents |
+|------|------------------|
+| 1 | `debug`, `debugger` subagent |
+| 2 | Multiple `Explore` subagents in parallel (optional) |
+| 3 | `problem-solving`, `sequential-thinking`, parallel `Bash` for verification |
+| 4 | `tester` subagent |
+| 5 | `code-reviewer` subagent |
+| 6 | `git-manager`, `docs-manager` subagents |
+
+**Rules:** Don't skip steps. Validate before proceeding. One phase at a time.
+**Frontend:** Use `agent-browser` or browser automation tools to verify.
+**Visual Assets:** Use ImageMagick/FFmpeg CLI for image/video processing.

package/templates/repo/.github/skills/fix/references/workflow-test.md

@@ -0,0 +1,36 @@
+# Test Failure Fix Workflow
+
+For fixing failing tests and test suite issues.
+
+## Workflow
+
+1. **Compile first** with `tester` agent
+   - Fix all syntax errors before running tests
+
+2. **Run tests** and collect failures
+
+3. **Debug** with `debugger` agent for root causes
+
+4. **Plan** fix with `planner` agent
+
+5. **Implement** fixes step by step
+
+6. **Re-test** with `tester` agent
+
+7. **Review** with `code-reviewer` agent
+
+8. **Iterate** if tests still fail, repeat from step 2
+
+## Common Commands
+```bash
+npm test
+bun test
+pytest
+go test ./...
+```
+
+## Tips
+- Run single failing test first for faster iteration
+- Check test assertions vs actual behavior
+- Verify test fixtures/mocks are correct
+- Don't modify tests to pass unless test is wrong

package/templates/repo/.github/skills/fix/references/workflow-types.md

@@ -0,0 +1,33 @@
+# Type Error Fix Workflow
+
+Quick workflow for TypeScript/type errors.
+
+## Commands
+```bash
+bun run typecheck
+tsc --noEmit
+npx tsc --noEmit
+```
+
+## Rules
+- Fix ALL type errors, don't stop at first
+- **NEVER use `any` just to pass** - find proper types
+- Repeat until zero errors
+
+## Common Fixes
+- Missing type imports
+- Incorrect property access
+- Null/undefined handling
+- Generic type parameters
+- Union type narrowing
+
+## Workflow
+1. Run typecheck command
+2. Fix errors one by one
+3. Re-run typecheck
+4. Repeat until clean
+
+## Tips
+- Group related errors (same root cause)
+- Check `@types/*` packages for library types
+- Use `unknown` + type guards instead of `any`

package/templates/repo/.github/skills/fix/references/workflow-ui.md

@@ -0,0 +1,34 @@
+# UI Fix Workflow
+
+For fixing visual/UI issues. Requires design skills.
+
+## Required Skills (activate in order)
+1. `ui-styling` - Design patterns and components (ALWAYS FIRST)
+2. `frontend-design` - Implementation patterns
+
+## Pre-fix Research
+Use `docs-seeker` skill to research:
+- Design patterns for the product type
+- Accessibility best practices
+- Component styling guidelines
+
+## Workflow
+
+1. **Analyze** screenshots/videos visually
+
+2. **Implement** fix with `ui-ux-designer` agent
+
+3. **Verify** with screenshot comparison
+   - Capture parent container, not whole page
+   - Compare to design guidelines
+   - Iterate until correct
+
+4. **DevTools check** with `agent-browser` or browser automation tools
+
+5. **Test** compilation with `tester` agent
+
+6. **Document** updates to `./docs/design-guidelines.md` if needed
+
+## Tips
+- Read `./docs/design-guidelines.md` first
+- Use ImageMagick/FFmpeg CLI for image editing

package/templates/repo/.github/skills/frontend-design/SKILL.md

@@ -0,0 +1,75 @@
+---
+name: frontend-design
+description: Create polished frontend interfaces from designs/screenshots. Use for web components, replicating UI designs, quick prototypes, avoiding AI slop.
+license: Complete terms in LICENSE.txt
+---
+
+Create distinctive, production-grade frontend interfaces. Implement real working code with exceptional aesthetic attention.
+
+## Workflow Selection
+
+Choose workflow based on input type:
+
+| Input | Workflow | Reference |
+|-------|----------|-----------|
+| Screenshot | Replicate exactly | `./references/workflow-screenshot.md` |
+| Quick task | Rapid implementation | `./references/workflow-quick.md` |
+| Describe only | Document for devs | `./references/workflow-describe.md` |
+| From scratch | Design Thinking below | - |
+
+**All workflows**: Activate `ui-styling` skill FIRST for design patterns and component library.
+
+## Screenshot/Video Replication (Quick Reference)
+
+1. **Analyze** visually - extract colors, fonts, spacing, effects
+2. **Plan** with `ui-ux-designer` subagent - create phased implementation
+3. **Implement** - match source precisely
+4. **Verify** - compare to original
+5. **Document** - update `./docs/design-guidelines.md` if approved
+
+See specific workflow files for detailed steps.
+
+## Design Thinking (From Scratch)
+
+Before coding, 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**: Execute with precision. Bold maximalism and refined minimalism both work - intentionality is key.
+
+## Aesthetics Guidelines
+
+- **Typography**: Avoid Arial/Inter; use distinctive, characterful fonts. Pair display + body fonts.
+- **Color**: Commit to cohesive palette. CSS variables. Dominant colors with sharp accents.
+- **Motion**: CSS-first, anime.js for complex (`./references/animejs.md`). Orchestrated page loads > scattered micro-interactions.
+- **Spatial**: Unexpected layouts. Asymmetry. Overlap. Negative space OR controlled density.
+- **Backgrounds**: Atmosphere over solid colors. Gradients, noise, patterns, shadows, grain.
+- **Assets**: Process with ImageMagick, FFmpeg, RMBG CLI tools
+
+## Asset & Analysis References
+
+| Task | Reference |
+|------|-----------|
+| Generate assets | `./references/asset-generation.md` |
+| Analyze quality | `./references/visual-analysis-overview.md` |
+| Extract guidelines | `./references/design-extraction-overview.md` |
+| Optimization | `./references/technical-overview.md` |
+| Animations | `./references/animejs.md` |
+
+Quick start: `./references/asset-generation.md`
+
+## Anti-Patterns (AI Slop)
+
+NEVER use:
+- Overused fonts: Inter, Roboto, Arial, Space Grotesk
+- Cliched colors: purple gradients on white
+- Predictable layouts, cookie-cutter patterns
+
+DO:
+- Vary themes (light/dark), fonts, aesthetics per project
+- Match complexity to vision (maximalist = elaborate; minimalist = precise)
+- Make unexpected, context-specific choices
+
+Remember: Claude is capable of extraordinary creative work. Commit fully to distinctive visions.

package/templates/repo/.github/skills/frontend-design/references/asset-generation.md

@@ -0,0 +1,161 @@
+# Asset Processing Workflow
+
+Complete workflow for processing design assets using CLI tools (ImageMagick, FFmpeg, RMBG).
+
+## Processing Workflow
+
+### Step 1: Define Design Context
+
+Before processing, extract from the design brief:
+- **Aesthetic direction**: Minimalist? Maximalist? Brutalist? Organic?
+- **Color palette**: Primary colors, accent colors, mood
+- **Visual tone**: Professional? Playful? Luxury? Raw?
+- **Output requirements**: Formats, sizes, optimization targets
+
+### Step 2: Source Assets
+
+Get assets from:
+- Client-provided images/videos
+- Stock photo services (Unsplash, Pexels)
+- Design tools exports (Figma, Sketch)
+- Screenshots or captured frames
+
+### Step 3: Process Assets with CLI Tools
+
+Use these CLI tools:
+
+**Image Processing (ImageMagick)**:
+```bash
+# Resize for web
+convert input.png -resize 1920x1080 output.png
+
+# Convert format
+convert input.png output.webp
+
+# Apply color adjustments
+convert input.png -modulate 100,110,100 output.png
+
+# Add border/padding
+convert input.png -bordercolor white -border 20 output.png
+
+# Create thumbnail
+convert input.png -thumbnail 300x200 thumbnail.png
+```
+
+**Background Removal (RMBG CLI)**:
+```bash
+# Remove background from image
+rmbg input.png output.png
+
+# Batch process directory
+rmbg -i ./input/ -o ./output/
+```
+
+**Video Processing (FFmpeg)**:
+```bash
+# Extract frame from video
+ffmpeg -i video.mp4 -ss 00:00:05 -frames:v 1 frame.png
+
+# Create thumbnail grid
+ffmpeg -i video.mp4 -frames 1 -vf "select=not(mod(n\,100)),scale=200:120,tile=5x3" grid.png
+
+# Convert to web format
+ffmpeg -i input.mp4 -c:v libx264 -crf 23 output.mp4
+
+# Create animated GIF
+ffmpeg -i video.mp4 -vf "fps=10,scale=480:-1" output.gif
+```
+
+### Step 4: Optimize for Web
+
+**Image Optimization**:
+```bash
+# PNG optimization
+pngquant --quality=65-80 input.png -o output.png
+
+# JPEG optimization
+convert input.jpg -quality 85 output.jpg
+
+# WebP conversion (smaller file size)
+convert input.png -quality 80 output.webp
+```
+
+**Responsive Variants**:
+```bash
+# Create multiple sizes
+convert hero.png -resize 1920x output/hero-lg.png
+convert hero.png -resize 1280x output/hero-md.png
+convert hero.png -resize 768x output/hero-sm.png
+convert hero.png -resize 480x output/hero-xs.png
+```
+
+### Step 5: Verify Quality
+
+After processing, verify:
+- File sizes are optimized (target < 200KB for images)
+- Colors match design palette
+- Resolution appropriate for use case
+- No compression artifacts visible
+- Transparent backgrounds work correctly
+
+## Common Asset Tasks
+
+### Background Removal for Product Images
+```bash
+# Single image
+rmbg product.jpg product-nobg.png
+
+# Batch process
+for f in products/*.jpg; do rmbg "$f" "output/$(basename "$f" .jpg).png"; done
+```
+
+### Hero Image Optimization
+```bash
+# Full workflow
+convert original.png -resize 1920x1080^ -gravity center -extent 1920x1080 hero-lg.png
+convert hero-lg.png -quality 85 hero-lg.webp
+convert original.png -resize 768x -quality 85 hero-sm.webp
+```
+
+### Sprite Sheet Creation
+```bash
+# Combine multiple images into sprite
+convert icon-*.png +append sprite.png
+
+# With grid layout
+montage icon-*.png -tile 4x -geometry +0+0 sprite.png
+```
+
+### Video Thumbnail
+```bash
+# Extract best frame (usually around 25% in)
+ffmpeg -i video.mp4 -ss 00:00:03 -frames:v 1 thumbnail.jpg
+```
+
+## File Format Guidelines
+
+| Format | Use Case | Notes |
+|--------|----------|-------|
+| WebP | Web images (default) | Best compression, wide support |
+| PNG | Images with transparency | Use for icons, logos |
+| JPEG | Photos without transparency | Good for large images |
+| SVG | Icons, simple graphics | Scalable, smallest for simple shapes |
+| MP4 (H.264) | Web video | Universal support |
+| WebM | Modern browsers | Better compression than MP4 |
+| GIF | Simple animations | Limited colors, larger files |
+
+## Quality vs Size Targets
+
+| Asset Type | Target Size | Quality Setting |
+|------------|-------------|-----------------|
+| Hero image | < 200KB | 80-85% |
+| Thumbnails | < 50KB | 75-80% |
+| Icons | < 10KB | PNG or SVG |
+| Product images | < 150KB | 80-85% |
+| Background patterns | < 100KB | 70-80% |
+
+## Next Steps
+
+- **Verify visual quality**: Compare processed assets to originals
+- **Test across devices**: Ensure responsive variants work
+- **Document assets**: Keep track of source files and processing steps