cokit-cli 1.2.7 → 1.4.0

package/skills/fix/references/workflow-standard.md

@@ -1,86 +0,0 @@
-# Standard Workflow
-
-Full pipeline for moderate complexity issues.
-
-## Steps
-
-### Step 1: Debug & Investigate
-Activate `debug` skill. Use `debugger` agent 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` agents 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` agent 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` agent.
-
-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` agent
-- Update docs if needed via `docs-manager`
-
-**Output:** `✓ Step 6: Complete - [action]`
-
-## Skills/Agents Activated
-
-| Step | Skills/Agents |
-|------|------------------|
-| 1 | `debug`, `debugger` agent |
-| 2 | Multiple `Explore` agents in parallel (optional) |
-| 3 | `problem-solving`, `sequential-thinking`, parallel `Bash` for verification |
-| 4 | `tester` agent |
-| 5 | `code-reviewer` agent |
-| 6 | `git-manager`, `docs-manager` agents |
-
-**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/skills/fix/references/workflow-test.md

@@ -1,36 +0,0 @@
-# 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/skills/fix/references/workflow-ui.md

@@ -1,34 +0,0 @@
-# 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/skills/frontend-design/SKILL.md

@@ -1,77 +0,0 @@
----
-name: frontend-design
-description: Create polished frontend interfaces from designs/screenshots/videos. Use for web components, replicating UI designs, quick prototypes, 3D experiences, immersive interfaces, avoiding AI slop.
----
-
-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` |
-| Video | Replicate with animations | `./references/workflow-video.md` |
-| Quick task | Rapid implementation | `./references/workflow-quick.md` |
-| Describe only | Document for devs | `./references/workflow-describe.md` |
-| 3D/WebGL request | Three.js immersive | `./references/workflow-3d.md` |
-| Complex/award-quality | Full immersive | `./references/workflow-immersive.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 (use `ai-multimodal` skill if available) - extract colors, fonts, spacing, effects
-2. **Plan** with `ui-ux-designer` agent - 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 (or `ai-multimodal`/`media-processing` skills if available)
-
-## 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: The AI agent is capable of extraordinary creative work. Commit fully to distinctive visions.

package/skills/frontend-design/references/asset-generation.md

@@ -1,161 +0,0 @@
-# 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

package/skills/frontend-design/references/visual-analysis-overview.md

@@ -1,95 +0,0 @@
-# Visual Analysis Overview
-
-Use AI multimodal vision to analyze generated assets and verify design standards.
-
-## Purpose
-
-- Verify generated assets align with aesthetic direction
-- Ensure professional quality before integration
-- Identify specific improvements needed for iteration
-- Make objective design decisions based on analysis
-- Extract actionable data (hex codes, composition insights)
-
-## Quick Start
-
-### Comprehensive Analysis
-```bash
-python scripts/gemini_batch_process.py \
-  --files docs/assets/generated-hero.png \
-  --task analyze \
-  --prompt "[see analysis-prompts.md for detailed prompt]" \
-  --output docs/assets/analysis-report.md \
-  --model gemini-2.5-flash
-```
-
-### Compare Multiple Variations
-```bash
-python scripts/gemini_batch_process.py \
-  --files docs/assets/option-1.png docs/assets/option-2.png docs/assets/option-3.png \
-  --task analyze \
-  --prompt "[see analysis-prompts.md for comparison prompt]" \
-  --output docs/assets/comparison-analysis.md \
-  --model gemini-2.5-flash
-```
-
-### Extract Color Palette
-```bash
-python scripts/gemini_batch_process.py \
-  --files docs/assets/final-asset.png \
-  --task analyze \
-  --prompt "Extract 5-8 dominant colors with hex codes. Classify as primary/accent/neutral. Suggest CSS variable names." \
-  --output docs/assets/color-palette.md \
-  --model gemini-2.5-flash
-```
-
-## Decision Framework
-
-### Score ≥ 8/10: Proceed to Integration
-**Actions**:
-- Optimize for web delivery
-- Create responsive variants
-- Document implementation guidelines
-- Extract color palette for CSS variables
-
-### Score 6-7/10: Minor Refinements Needed
-**Actions**:
-- Use ImageMagick for adjustments (brightness/contrast/saturation)
-- Consider selective regeneration of problem areas
-- May proceed with caution if time-constrained
-
-### Score < 6/10: Major Iteration Required
-**Actions**:
-- Analyze specific failure points from report
-- Refine generation prompt substantially
-- Regenerate with corrected parameters
-- Consider alternative aesthetic approach
-
-## Detailed References
-
-- `analysis-prompts.md` - All analysis prompt templates
-- `analysis-techniques.md` - Advanced analysis strategies
-- `analysis-best-practices.md` - Quality guidelines and pitfalls
-
-## Example Color Extraction Output
-
-```css
-/* Extracted Color Palette */
-:root {
-  /* Primary Colors */
-  --color-primary-600: #2C5F7D;  /* Dark teal - headers, CTAs */
-  --color-primary-400: #4A90B8;  /* Medium teal - links, accents */
-
-  /* Accent Colors */
-  --color-accent-500: #E8B44F;   /* Warm gold - highlights */
-
-  /* Neutral Colors */
-  --color-neutral-900: #1A1A1A;  /* Near black - body text */
-  --color-neutral-100: #F5F5F5;  /* Light gray - backgrounds */
-
-  /* Semantic Usage */
-  --color-text-primary: var(--color-neutral-900);
-  --color-text-on-primary: #FFFFFF;
-  --color-background: var(--color-neutral-100);
-  --color-cta: var(--color-primary-600);
-}
-```

package/skills/frontend-design/references/workflow-describe.md

@@ -1,86 +0,0 @@
-# Design Description Workflow
-
-Create detailed design documentation from screenshot/video for developer implementation.
-
-## Prerequisites
-- Activate `ui-styling` skill first for design patterns
-
-## Workflow Steps
-
-### 1. Comprehensive Visual Analysis
-Analyze and describe exhaustively:
-
-**Layout & Structure**
-- Element positions (absolute coords or relative)
-- Container hierarchy
-- Grid/flexbox patterns
-- Responsive breakpoints visible
-
-**Visual Properties**
-- Design style and aesthetic trend
-- Every color with hex codes
-- Every border (width, style, radius)
-- Every icon (describe or identify)
-- Font names (predict Google Fonts), sizes, weights
-- Line heights, letter spacing
-
-**Spacing System**
-- Padding values
-- Margin values
-- Gap between elements
-- Section spacing
-
-**Visual Effects**
-- Shapes and geometry
-- Textures and materials
-- Lighting direction
-- Shadows (offset, blur, spread, color)
-- Reflections and refractions
-- Blur effects (backdrop, gaussian)
-- Glow effects
-- Background transparency
-- Image treatments
-
-**Interactions (if video)**
-- Animation sequences
-- Transition types and timing
-- Hover/focus states
-- Scroll behaviors
-
-**Font Prediction**: Match actual fonts, avoid Inter/Poppins defaults.
-
-### 2. Create Implementation Plan
-Use `ui-ux-designer` agent:
-- Create plan directory (use `## Naming` pattern)
-- Write `plan.md` overview (<80 lines)
-- Add detailed `phase-XX-name.md` files
-
-### 3. Report to User
-Provide implementation-ready documentation:
-- Summary of design system
-- Component breakdown
-- Technical specifications
-- Suggested implementation approach
-
-## Output Format
-
-```markdown
-# Design Analysis: [Name]
-
-## Design System
-- **Style**: [aesthetic direction]
-- **Colors**: [palette with hex]
-- **Typography**: [fonts, sizes, weights]
-- **Spacing Scale**: [values]
-
-## Component Breakdown
-1. [Component] - [specs]
-2. [Component] - [specs]
-
-## Implementation Notes
-- [Technical considerations]
-```
-
-## Related
-- `extraction-prompts.md` - Detailed prompts
-- `extraction-output-templates.md` - Output formats

package/skills/frontend-design/references/workflow-quick.md

@@ -1,54 +0,0 @@
-# Quick Design Workflow
-
-Rapid design creation with minimal planning overhead.
-
-## Prerequisites
-- Activate `ui-styling` skill first for design patterns
-
-## Initial Research
-Quick reference from `ui-styling` skill:
-- shadcn/ui components for rapid development
-- Tailwind CSS utility classes
-- Color and typography defaults
-
-## Workflow Steps
-
-### 1. Start Design Process
-Use `ui-ux-designer` agent directly:
-- Skip extensive planning
-- Move to implementation quickly
-- Make design decisions on-the-fly
-
-### 2. Implement
-- Default to HTML/CSS/JS if unspecified
-- Focus on core functionality
-- Maintain quality despite speed
-
-### 3. Process Assets
-Use CLI tools:
-- Process images with ImageMagick
-- Optimize assets for web
-- Quick adjustments as needed
-
-### 4. Report & Approve
-- Summarize changes briefly
-- Request user approval
-- Update `./docs/design-guidelines.md` if approved
-
-## When to Use
-- Simple components
-- Prototypes and MVPs
-- Time-constrained projects
-- Iterative exploration
-- Single-page designs
-
-## Quality Shortcuts
-While moving fast, maintain:
-- Semantic HTML
-- CSS variables for consistency
-- Basic accessibility
-- Clean code structure
-
-## Related
-- `workflow-screenshot.md` - For exact replication
-- `technical-overview.md` - Quick reference

package/skills/frontend-design/references/workflow-screenshot.md

@@ -1,62 +0,0 @@
-# Screenshot Replication Workflow
-
-Replicate a design exactly from a provided screenshot.
-
-## Prerequisites
-- Activate `ui-styling` skill first for design patterns
-
-## Workflow Steps
-
-### 1. Analyze Screenshot Details
-Extract from screenshot:
-- Design style and visual trends
-- Font names (predict Google Fonts), sizes, weights
-- Color palette with exact hex codes
-- Border radius, spacing patterns
-- Element positions, sizes, shapes
-- Textures, materials, lighting
-- Shadows, reflections, blur, glow effects
-- Background transparency, transitions
-- Image treatments and effects
-
-**Font Prediction**: Avoid defaulting to Inter/Poppins. Match actual fonts visible.
-
-### 2. Create Implementation Plan
-Use `ui-ux-designer` agent:
-- Create plan directory (use `## Naming` pattern from hooks)
-- Write `plan.md` (<80 lines, generic overview)
-- Add `phase-XX-name.md` files with:
-  - Context links, Overview, Key Insights
-  - Requirements, Architecture, Related files
-  - Implementation Steps, Todo list
-  - Success Criteria, Risk Assessment
-
-### 3. Implement
-- Follow plan step by step
-- Default to HTML/CSS/JS if no framework specified
-- Match screenshot precisely
-
-### 4. Process Assets
-Use CLI tools:
-- Process images with ImageMagick
-- Remove backgrounds with RMBG CLI
-- Optimize assets for web
-
-### 5. Verify & Report
-- Compare implementation to screenshot
-- Report changes summary to user
-- Request approval
-
-### 6. Document
-If approved, update `./docs/design-guidelines.md`
-
-## Quality Standards
-- Match screenshot at pixel level where possible
-- Preserve all visual hierarchy
-- Maintain exact spacing and proportions
-- Replicate animations if visible in source
-
-## Related
-- `design-extraction-overview.md` - Extract design guidelines
-- `extraction-prompts.md` - Detailed analysis prompts
-- `visual-analysis-overview.md` - Verify quality