cokit-cli 1.0.9 → 1.2.0

package/skills/frontend-design/references/technical-overview.md

@@ -0,0 +1,90 @@
+# Technical Guide Overview
+
+Technical considerations and best practices for AI multimodal integration in frontend design.
+
+## Quick Reference
+
+### File Optimization
+```bash
+python scripts/media_optimizer.py \
+  --input docs/assets/hero-image.png \
+  --output docs/assets/hero-optimized.webp \
+  --quality 85
+```
+
+### Format Selection
+- **WebP**: Best for web, 25-35% smaller than PNG, wide browser support
+- **AVIF**: Cutting edge, 50% smaller than WebP, limited support
+- **PNG**: Lossless, large file size, use for transparency
+- **JPEG**: Lossy, smaller than PNG, photos without transparency
+
+### Responsive Variants
+```bash
+# Desktop hero (16:9)
+--aspect-ratio 16:9
+
+# Mobile hero (9:16 or 3:4)
+--aspect-ratio 9:16
+
+# Square cards (1:1)
+--aspect-ratio 1:1
+```
+
+## Detailed References
+
+- `technical-accessibility.md` - WCAG compliance, contrast checks, alt text
+- `technical-workflows.md` - Complete pipeline examples
+- `technical-best-practices.md` - Checklists, quality gates
+- `technical-optimization.md` - Cost strategies, model selection
+
+## Quick Commands
+
+```bash
+# Generate (standard quality)
+python scripts/gemini_batch_process.py --task generate \
+  --prompt "[design-driven prompt]" \
+  --output docs/assets/[name] \
+  --model imagen-4.0-generate-001 \
+  --aspect-ratio 16:9
+
+# Analyze
+python scripts/gemini_batch_process.py --files docs/assets/[image].png \
+  --task analyze \
+  --prompt "[evaluation criteria]" \
+  --output docs/assets/analysis.md \
+  --model gemini-2.5-flash
+
+# Optimize
+python scripts/media_optimizer.py \
+  --input docs/assets/[image].png \
+  --output docs/assets/[image].webp \
+  --quality 85
+
+# Extract colors
+python scripts/gemini_batch_process.py --files docs/assets/[image].png \
+  --task analyze \
+  --prompt "Extract 5-8 dominant colors with hex codes. Classify as primary/accent/neutral." \
+  --output docs/assets/color-palette.md \
+  --model gemini-2.5-flash
+```
+
+## Responsive Image Strategies
+
+**Art Direction (different crops)**:
+```html
+<picture>
+  <source media="(min-width: 768px)" srcset="hero-desktop.webp">
+  <source media="(max-width: 767px)" srcset="hero-mobile.webp">
+  <img src="hero-desktop.jpg" alt="Hero image">
+</picture>
+```
+
+**Resolution Switching (same crop, different sizes)**:
+```html
+<img
+  srcset="hero-400w.webp 400w, hero-800w.webp 800w, hero-1200w.webp 1200w"
+  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
+  src="hero-800w.jpg"
+  alt="Hero image"
+/>
+```

package/skills/frontend-design/references/technical-workflows.md

@@ -0,0 +1,150 @@
+# Complete Workflow Examples
+
+End-to-end pipeline examples for asset generation and analysis.
+
+## Example 1: Hero Section (Complete Pipeline)
+
+```bash
+# 1. Generate hero image with design context
+python scripts/gemini_batch_process.py \
+  --task generate \
+  --prompt "Minimalist desert landscape, warm beige sand dunes,
+  soft morning light, serene and spacious, muted earth tones
+  (tan, cream, soft ochre), clean composition for text overlay,
+  sophisticated travel aesthetic, 16:9 cinematic" \
+  --output docs/assets/hero-desert \
+  --model imagen-4.0-generate-001 \
+  --aspect-ratio 16:9
+
+# 2. Evaluate aesthetic quality
+python scripts/gemini_batch_process.py \
+  --files docs/assets/hero-desert.png \
+  --task analyze \
+  --prompt "Rate this image 1-10 for: visual appeal, color harmony,
+  suitability for overlaying white text, professional quality.
+  List any improvements needed." \
+  --output docs/assets/hero-evaluation.md \
+  --model gemini-2.5-flash
+
+# 3. If score ≥ 7/10, optimize for web
+python scripts/media_optimizer.py \
+  --input docs/assets/hero-desert.png \
+  --output docs/assets/hero-desktop.webp \
+  --quality 85
+
+# 4. Generate mobile variant (9:16)
+python scripts/gemini_batch_process.py \
+  --task generate \
+  --prompt "Minimalist desert landscape, warm beige sand dunes,
+  soft morning light, serene and spacious, muted earth tones
+  (tan, cream, soft ochre), clean composition for text overlay,
+  sophisticated travel aesthetic, 9:16 portrait" \
+  --output docs/assets/hero-mobile \
+  --model imagen-4.0-generate-001 \
+  --aspect-ratio 9:16
+
+# 5. Optimize mobile variant
+python scripts/media_optimizer.py \
+  --input docs/assets/hero-mobile.png \
+  --output docs/assets/hero-mobile.webp \
+  --quality 85
+```
+
+## Example 2: Extract, Generate, Analyze Loop
+
+```bash
+# 1. Extract design guidelines from inspiration
+python scripts/gemini_batch_process.py \
+  --files docs/inspiration/competitor-hero.png \
+  --task analyze \
+  --prompt "[use extraction prompt from extraction-prompts.md]" \
+  --output docs/design-guidelines/competitor-analysis.md \
+  --model gemini-2.5-flash
+
+# 2. Generate asset based on extracted guidelines
+# (Review competitor-analysis.md for color palette, aesthetic)
+python scripts/gemini_batch_process.py \
+  --task generate \
+  --prompt "[craft prompt using extracted aesthetic and colors]" \
+  --output docs/assets/our-hero \
+  --model imagen-4.0-generate-001 \
+  --aspect-ratio 16:9
+
+# 3. Analyze our generated asset
+python scripts/gemini_batch_process.py \
+  --files docs/assets/our-hero.png \
+  --task analyze \
+  --prompt "Compare to competitor design. Rate differentiation (1-10).
+  Are we too similar or successfully distinct?" \
+  --output docs/assets/differentiation-analysis.md \
+  --model gemini-2.5-flash
+
+# 4. Extract colors from our final asset for CSS
+python scripts/gemini_batch_process.py \
+  --files docs/assets/our-hero.png \
+  --task analyze \
+  --prompt "[use color extraction prompt from visual-analysis-overview.md]" \
+  --output docs/assets/color-palette.md \
+  --model gemini-2.5-flash
+```
+
+## Example 3: A/B Test Assets
+
+```bash
+# Generate 2 design directions
+python scripts/gemini_batch_process.py \
+  --task generate \
+  --prompt "Minimalist approach: [prompt]" \
+  --output docs/assets/variant-a \
+  --model imagen-4.0-fast-generate-001 \
+  --aspect-ratio 16:9
+
+python scripts/gemini_batch_process.py \
+  --task generate \
+  --prompt "Bold approach: [prompt]" \
+  --output docs/assets/variant-b \
+  --model imagen-4.0-fast-generate-001 \
+  --aspect-ratio 16:9
+
+# Compare variants
+python scripts/gemini_batch_process.py \
+  --files docs/assets/variant-a.png docs/assets/variant-b.png \
+  --task analyze \
+  --prompt "A/B comparison for [target audience]:
+  1. Attention capture
+  2. Brand alignment
+  3. Conversion potential
+  Recommend which to test." \
+  --output docs/assets/ab-comparison.md \
+  --model gemini-2.5-flash
+
+# Generate production version of winner
+python scripts/gemini_batch_process.py \
+  --task generate \
+  --prompt "[winning approach prompt]" \
+  --output docs/assets/final-hero \
+  --model imagen-4.0-generate-001 \
+  --aspect-ratio 16:9
+```
+
+## Batch Analysis for Rapid Iteration
+
+```bash
+# Generate 3 variations with fast model
+for i in {1..3}; do
+  python scripts/gemini_batch_process.py \
+    --task generate \
+    --prompt "[prompt with variation-$i twist]" \
+    --output docs/assets/var-$i \
+    --model imagen-4.0-fast-generate-001 \
+    --aspect-ratio 16:9
+done
+
+# Batch analyze all variations
+python scripts/gemini_batch_process.py \
+  --files docs/assets/var-*.png \
+  --task analyze \
+  --prompt "Rank these variations 1-3 with scores. Identify winner." \
+  --output docs/assets/batch-analysis.md \
+  --model gemini-2.5-flash
+```

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

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

@@ -0,0 +1,86 @@
+# 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` subagent:
+- 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

@@ -0,0 +1,54 @@
+# 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` subagent 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

@@ -0,0 +1,62 @@
+# 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` subagent:
+- 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

package/skills/git/SKILL.md

@@ -0,0 +1,100 @@
+---
+name: git
+description: Git operations with conventional commits. Use for staging, committing, pushing, PRs, merges. Auto-splits commits by type/scope. Security scans for secrets.
+version: 1.0.0
+---
+
+# Git Operations
+
+Execute git workflows via `git-manager` subagent to isolate verbose output.
+Activate `context-engineering` skill.
+
+**IMPORTANT:**
+- Sacrifice grammar for the sake of concision.
+- Ensure token efficiency while maintaining high quality.
+- Pass these rules to subagents.
+
+## Arguments
+- `cm`: Stage files & create commits
+- `cp`: Stage files, create commits and push
+- `pr`: Create Pull Request [to-branch] [from-branch]
+  - `to-branch`: Target branch (default: main)
+  - `from-branch`: Source branch (default: current branch)
+- `merge`: Merge [to-branch] [from-branch]
+  - `to-branch`: Target branch (default: main)
+  - `from-branch`: Source branch (default: current branch)
+
+## Quick Reference
+
+| Task | Reference |
+|------|-----------|
+| Commit | `references/workflow-commit.md` |
+| Push | `references/workflow-push.md` |
+| Pull Request | `references/workflow-pr.md` |
+| Merge | `references/workflow-merge.md` |
+| Standards | `references/commit-standards.md` |
+| Safety | `references/safety-protocols.md` |
+| Branches | `references/branch-management.md` |
+| GitHub CLI | `references/gh-cli-guide.md` |
+
+## Core Workflow
+
+### Step 1: Stage + Analyze
+```bash
+git add -A && git diff --cached --stat && git diff --cached --name-only
+```
+
+### Step 2: Security Check
+Scan for secrets before commit:
+```bash
+git diff --cached | grep -iE "(api[_-]?key|token|password|secret|credential)"
+```
+**If secrets found:** STOP, warn user, suggest `.gitignore`.
+
+### Step 3: Split Decision
+
+**NOTE:**
+- Search for related issues on GitHub and add to body.
+- Only use `feat`, `fix`, or `perf` prefixes for files in `.copilot` directory (do not use `docs`).
+
+**Split commits if:**
+- Different types mixed (feat + fix, code + docs)
+- Multiple scopes (auth + payments)
+- Config/deps + code mixed
+- FILES > 10 unrelated
+
+**Single commit if:**
+- Same type/scope, FILES ≤ 3, LINES ≤ 50
+
+### Step 4: Commit
+```bash
+git commit -m "type(scope): description"
+```
+
+## Output Format
+```
+✓ staged: N files (+X/-Y lines)
+✓ security: passed
+✓ commit: HASH type(scope): description
+✓ pushed: yes/no
+```
+
+## Error Handling
+
+| Error | Action |
+|-------|--------|
+| Secrets detected | Block commit, show files |
+| No changes | Exit cleanly |
+| Push rejected | Suggest `git pull --rebase` |
+| Merge conflicts | Suggest manual resolution |
+
+## References
+
+- `references/workflow-commit.md` - Commit workflow with split logic
+- `references/workflow-push.md` - Push workflow with error handling
+- `references/workflow-pr.md` - PR creation with remote diff analysis
+- `references/workflow-merge.md` - Branch merge workflow
+- `references/commit-standards.md` - Conventional commit format rules
+- `references/safety-protocols.md` - Secret detection, branch protection
+- `references/branch-management.md` - Naming, lifecycle, strategies
+- `references/gh-cli-guide.md` - GitHub CLI commands reference