cokit-cli 1.0.8 → 1.0.9

package/templates/repo/.github/skills/ck-frontend-design/references/technical-workflows.md

@@ -1,150 +0,0 @@
-# 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/templates/repo/.github/skills/ck-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 `media-processing` skill 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/templates/repo/.github/skills/ck-markdown-novel-viewer/SKILL.md

@@ -1,190 +0,0 @@
----
-name: 'ck-markdown-novel-viewer'
-description: 'Render markdown files with calm, book-like reading experience via background HTTP server. Features novel theme with serif fonts, directory browsing, plan navigation with phase status, keyboard shortcuts, light/dark mode. Use when previewing markdown files, browsing directories, or viewing implementation plans.'
----
-
-# markdown-novel-viewer
-
-Background HTTP server rendering markdown files with calm, book-like reading experience.
-
-## ⚠️ Installation Required
-
-**This skill requires npm dependencies.** Run one of the following:
-
-```bash
-# Option 1: Install via ClaudeKit CLI (recommended)
-ck init  # Runs install.sh which handles all skills
-
-# Option 2: Manual installation
-cd 
-npm install
-```
-
-**Dependencies:** `marked`, `highlight.js`, `gray-matter`
-
-Without installation, you'll get **Error 500: Error rendering markdown**.
-
-## Purpose
-
-Universal viewer - pass ANY path and view it:
-- **Markdown files** → novel-reader UI with serif fonts, warm theme
-- **Directories** → file listing browser with clickable links
-
-## Quick Start
-
-```bash
-# View a markdown file
-node  \
-  --file .s/my-plan.md \
-  --open
-
-# Browse a directory
-node  \
-  --dir .s \
-  --host 0.0.0.0 \
-  --open
-
-# Background mode
-node  \
-  --file ./README.md \
-  --background
-
-# Stop all running servers
-node  --stop
-```
-
-## Slash Command
-
-Use `/preview` for quick access:
-
-```bash
-/preview plans/my-plan.md    # View markdown file
-/preview plans/                   # Browse directory
-/preview --stop                   # Stop server
-```
-
-## Features
-
-### Novel Theme
-- Warm cream background (light mode)
-- Dark mode with warm gold accents
-- Libre Baskerville serif headings
-- Inter body text, JetBrains Mono code
-- Maximum 720px content width
-
-### Directory Browser
-- Clean file listing with emoji icons
-- Markdown files link to viewer
-- Folders link to sub-directories
-- Parent directory navigation (..)
-- Light/dark mode support
-
-### Plan Navigation
-- Auto-detects plan directory structure
-- Sidebar shows all phases with status indicators
-- Previous/Next navigation buttons
-- Keyboard shortcuts: Arrow Left/Right
-
-### Keyboard Shortcuts
-- `T` - Toggle theme
-- `S` - Toggle sidebar
-- `Left/Right` - Navigate phases
-- `Escape` - Close sidebar (mobile)
-
-## CLI Options
-
-| Option | Description | Default |
-|--------|-------------|---------|
-| `--file <path>` | Markdown file to view | - |
-| `--dir <path>` | Directory to browse | - |
-| `--port <number>` | Server port | 3456 |
-| `--host <addr>` | Host to bind (`0.0.0.0` for remote) | localhost |
-| `--open` | Auto-open browser | false |
-| `--background` | Run in background | false |
-| `--stop` | Stop all servers | - |
-
-## Architecture
-
-```
-scripts/
-├── server.cjs               # Main entry point
-└── lib/
-    ├── port-finder.cjs      # Dynamic port allocation
-    ├── process-mgr.cjs      # PID file management
-    ├── http-server.cjs      # Core HTTP routing (/view, /browse)
-    ├── markdown-renderer.cjs # MD→HTML conversion
-    └── plan-navigator.cjs   # Plan detection & nav
-
-assets/
-├── template.html            # Markdown viewer template
-├── novel-theme.css          # Combined light/dark theme
-├── reader.js                # Client-side interactivity
-├── directory-browser.css    # Directory browser styles
-```
-
-## HTTP Routes
-
-| Route | Description |
-|-------|-------------|
-| `/view?file=<path>` | Markdown file viewer |
-| `/browse?dir=<path>` | Directory browser |
-| `/assets/*` | Static assets |
-| `/file/*` | Local file serving (images) |
-
-## Dependencies
-
-- Node.js built-in: `http`, `fs`, `path`, `net`
-- npm: `marked`, `highlight.js`, `gray-matter` (installed via `npm install`)
-
-## Customization
-
-### Theme Colors (CSS Variables)
-
-Light mode variables in `assets/novel-theme.css`:
-```css
---bg-primary: #faf8f3;      /* Warm cream */
---accent: #8b4513;          /* Saddle brown */
-```
-
-Dark mode:
-```css
---bg-primary: #1a1a1a;      /* Near black */
---accent: #d4a574;          /* Warm gold */
-```
-
-### Content Width
-```css
---content-width: 720px;
-```
-
-## Remote Access
-
-To access from another device on your network:
-
-```bash
-# Start with 0.0.0.0 to bind to all interfaces
-node server.cjs --file ./README.md --host 0.0.0.0 --port 3456
-```
-
-When using `--host 0.0.0.0`, the server auto-detects your local network IP and includes it in the output:
-
-```json
-{
-  "success": true,
-  "url": "http://localhost:3456/view?file=...",
-  "networkUrl": "http://192.168.2.75:3456/view?file=...",
-  "port": 3456
-}
-```
-
-Use `networkUrl` to access from other devices on the same network.
-
-## Troubleshooting
-
-**Port in use**: Server auto-increments to next available port (3456-3500)
-
-**Images not loading**: Ensure image paths are relative to markdown file
-
-**Server won't stop**: Check `/tmp/md-novel-viewer-*.pid` for stale PID files
-
-**Remote access denied**: Use `--host 0.0.0.0` to bind to all interfaces

package/templates/repo/.github/skills/ck-markdown-novel-viewer/assets/directory-browser.css

@@ -1,215 +0,0 @@
-/**
- * Directory Browser Styles
- * Minimal, clean design matching novel-reader aesthetic
- */
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  font-family: 'Inter', system-ui, -apple-system, sans-serif;
-  background: #faf8f3;
-  color: #333;
-  line-height: 1.6;
-  min-height: 100vh;
-}
-
-.container {
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 2rem;
-}
-
-header {
-  margin-bottom: 2rem;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid #e0dcd4;
-}
-
-header h1 {
-  font-family: 'Libre Baskerville', Georgia, serif;
-  font-size: 1.75rem;
-  font-weight: 400;
-  color: #8b4513;
-  margin-bottom: 0.5rem;
-}
-
-header .path {
-  font-size: 0.875rem;
-  color: #666;
-  font-family: 'JetBrains Mono', monospace;
-  word-break: break-all;
-}
-
-.file-list {
-  list-style: none;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-}
-
-.dir-item {
-  border-bottom: 1px solid #f0ebe3;
-}
-
-.dir-item:last-child {
-  border-bottom: none;
-}
-
-.dir-item a {
-  display: flex;
-  align-items: center;
-  padding: 0.875rem 1rem;
-  text-decoration: none;
-  color: #333;
-  transition: background 0.15s ease;
-}
-
-.dir-item a:hover {
-  background: #faf8f3;
-}
-
-.dir-item .icon {
-  font-size: 1.25rem;
-  margin-right: 0.75rem;
-  flex-shrink: 0;
-}
-
-.dir-item .name {
-  font-size: 0.9375rem;
-  word-break: break-word;
-}
-
-/* Folder styles */
-.dir-item.folder .name {
-  font-weight: 500;
-}
-
-.dir-item.parent a {
-  color: #666;
-}
-
-.dir-item.parent a:hover {
-  color: #8b4513;
-}
-
-/* Markdown file styles */
-.dir-item.markdown .name {
-  color: #8b4513;
-}
-
-.dir-item.markdown a:hover {
-  background: #f5f0e8;
-}
-
-/* Empty state */
-.dir-item.empty {
-  padding: 2rem;
-  text-align: center;
-  color: #999;
-  font-style: italic;
-}
-
-footer {
-  margin-top: 2rem;
-  padding-top: 1rem;
-  border-top: 1px solid #e0dcd4;
-  text-align: center;
-}
-
-footer p {
-  font-size: 0.8125rem;
-  color: #999;
-}
-
-/* Dark mode */
-@media (prefers-color-scheme: dark) {
-  body {
-    background: #1a1a1a;
-    color: #e0e0e0;
-  }
-
-  header {
-    border-bottom-color: #333;
-  }
-
-  header h1 {
-    color: #d4a574;
-  }
-
-  header .path {
-    color: #888;
-  }
-
-  .file-list {
-    background: #252525;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-  }
-
-  .dir-item {
-    border-bottom-color: #333;
-  }
-
-  .dir-item a {
-    color: #e0e0e0;
-  }
-
-  .dir-item a:hover {
-    background: #2a2a2a;
-  }
-
-  .dir-item.parent a {
-    color: #888;
-  }
-
-  .dir-item.parent a:hover {
-    color: #d4a574;
-  }
-
-  .dir-item.markdown .name {
-    color: #d4a574;
-  }
-
-  .dir-item.markdown a:hover {
-    background: #2d2520;
-  }
-
-  .dir-item.empty {
-    color: #666;
-  }
-
-  footer {
-    border-top-color: #333;
-  }
-
-  footer p {
-    color: #666;
-  }
-}
-
-/* Responsive */
-@media (max-width: 600px) {
-  .container {
-    padding: 1rem;
-  }
-
-  header h1 {
-    font-size: 1.5rem;
-  }
-
-  .dir-item a {
-    padding: 0.75rem;
-  }
-
-  .dir-item .icon {
-    font-size: 1.125rem;
-  }
-
-  .dir-item .name {
-    font-size: 0.875rem;
-  }
-}