cokit-cli 1.3.0 → 1.4.0

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

@@ -1,72 +0,0 @@
-# UI Fix Workflow
-
-For fixing visual/UI issues. Requires design skills. Uses native Tasks for phase tracking.
-
-## Required Skills (activate in order)
-1. `ui-ux-pro-max` (if available) - Design database (ALWAYS FIRST)
-2. `ui-ux-pro-max` (if available) - Design principles
-3. `frontend-design` - Implementation patterns
-
-## Pre-fix Research
-```bash
-```
-
-## Task Setup (Before Starting)
-
-```
-T1 = TaskCreate(subject="Analyze visual issue",    activeForm="Analyzing visual issue")
-T2 = TaskCreate(subject="Implement UI fix",         activeForm="Implementing UI fix",       addBlockedBy=[T1])
-T3 = TaskCreate(subject="Verify visually",          activeForm="Verifying visually",         addBlockedBy=[T2])
-T4 = TaskCreate(subject="DevTools check",           activeForm="Checking with DevTools",     addBlockedBy=[T3])
-T5 = TaskCreate(subject="Test compilation",         activeForm="Testing compilation",        addBlockedBy=[T4])
-T6 = TaskCreate(subject="Update design docs",       activeForm="Updating design docs",       addBlockedBy=[T5])
-```
-
-## Workflow
-
-### Step 1: Analyze
-`TaskUpdate(T1, status="in_progress")`
-Analyze screenshots/videos with `ai-multimodal` (if available) skill.
-
-- Read `./docs/design-guidelines.md` first
-- Identify exact visual discrepancy
-
-`TaskUpdate(T1, status="completed")`
-
-### Step 2: Implement
-`TaskUpdate(T2, status="in_progress")`
-Use `ui-ux-designer` agent.
-
-`TaskUpdate(T2, status="completed")`
-
-### Step 3: Verify Visually
-`TaskUpdate(T3, status="in_progress")`
-Screenshot + `ai-multimodal` (if available) analysis.
-
-- Capture parent container, not whole page
-- Compare to design guidelines
-- If incorrect → keep T3 `in_progress`, loop back to Step 2
-
-`TaskUpdate(T3, status="completed")`
-
-### Step 4: DevTools Check
-`TaskUpdate(T4, status="in_progress")`
-Use `chrome-devtools` (if available) skill.
-
-`TaskUpdate(T4, status="completed")`
-
-### Step 5: Test
-`TaskUpdate(T5, status="in_progress")`
-Use `tester` agent for compilation check.
-
-`TaskUpdate(T5, status="completed")`
-
-### Step 6: Document
-`TaskUpdate(T6, status="in_progress")`
-Update `./docs/design-guidelines.md` if needed.
-
-`TaskUpdate(T6, status="completed")`
-
-## Tips
-- Use `ai-multimodal` (if available) for generating visual assets
-- Use `ImageMagick` for image editing

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

@@ -1,109 +0,0 @@
----
-name: frontend-design
-description: Create polished frontend interfaces from designs/screenshots/videos. Use for web components, 3D experiences, replicating UI designs, quick prototypes, immersive interfaces, 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` |
-| Video | Replicate with animations | `./references/workflow-video.md` |
-| Screenshot/Video (describe only) | Document for devs | `./references/workflow-describe.md` |
-| 3D/WebGL request | Three.js immersive | `./references/workflow-3d.md` |
-| Quick task | Rapid implementation | `./references/workflow-quick.md` |
-| Complex/award-quality | Full immersive | `./references/workflow-immersive.md` |
-| Existing project upgrade | Redesign Audit | `./references/redesign-audit-checklist.md` |
-| From scratch | Design Thinking below | - |
-
-**All workflows**: Activate `ui-ux-pro-max` skill (if available) FIRST for design intelligence.
-
-**Precedence:** When anti-slop rules (below) conflict with `ui-ux-pro-max` (if available) recommendations (e.g., Inter font, AI Purple palette, Lucide-only icons), substitute with alternatives from `./references/anti-slop-rules.md` unless the user explicitly requested the conflicting choice.
-
-## Screenshot/Video Replication (Quick Reference)
-
-1. **Analyze** with `ai-multimodal` (if available) skill - 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 Dials
-
-Three configurable parameters that drive design decisions. Set defaults at session start or let user override via chat:
-
-| Dial | Default | Range | Low (1-3) | High (8-10) |
-|------|---------|-------|-----------|-------------|
-| `DESIGN_VARIANCE` | 8 | 1-10 | Perfect symmetry, centered layouts, equal grids | Asymmetric, masonry, massive empty zones, fractional CSS Grid |
-| `MOTION_INTENSITY` | 6 | 1-10 | CSS hover/active states only | Framer Motion scroll reveals, spring physics, perpetual micro-animations |
-| `VISUAL_DENSITY` | 4 | 1-10 | Art gallery — huge whitespace, expensive/clean | Cockpit — tiny paddings, 1px dividers, monospace numbers everywhere |
-
-**Usage:** These values drive specific rules. At `DESIGN_VARIANCE > 4`, centered heroes are overused — force split-screen or left-aligned layouts. At `MOTION_INTENSITY > 5`, embed perpetual micro-animations. At `VISUAL_DENSITY > 7`, remove generic cards and use spacing/dividers.
-
-See `./references/bento-motion-engine.md` for dial-driven SaaS dashboard implementation.
-
-## 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**: Generate with `ai-multimodal` (if available), process with `media-processing`
-
-## 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` |
-| Magic UI (80+ components) | `./references/magicui-components.md` |
-| Anti-slop forbidden patterns | `./references/anti-slop-rules.md` |
-| Redesign audit checklist | `./references/redesign-audit-checklist.md` |
-| Premium design patterns | `./references/premium-design-patterns.md` |
-| Performance guardrails | `./references/performance-guardrails.md` |
-| Bento motion engine (SaaS) | `./references/bento-motion-engine.md` |
-
-Quick start: `./references/ai-multimodal-overview.md`
-
-## Anti-Patterns (AI Slop)
-
-Strongly prefer alternatives to these LLM defaults. Full rules: `./references/anti-slop-rules.md`
-
-**Typography** — Avoid Inter/Roboto/Arial. Prefer: `Geist`, `Outfit`, `Cabinet Grotesk`, `Satoshi`
-
-**Color** — Avoid AI purple/blue gradient aesthetic, pure `#000000`, oversaturated accents. Use neutral bases with a single considered accent.
-
-**Layout** — Avoid 3-column equal card feature rows, centered heroes at high variance, `h-screen`. Use asymmetric grids, split-screen, `min-h-[100dvh]`.
-
-**Content** — Avoid "John Doe", "Acme Corp", round numbers, AI copy clichés ("Elevate", "Seamless", "Unleash"). Use realistic names, organic data, plain specific language.
-
-**Effects** — Avoid neon/outer glows, custom cursors, gradient text on headers. Use tinted inner shadows, spring physics.
-
-**Components** — Avoid default unstyled shadcn, Lucide-only icons, generic card-border-shadow pattern at high density. Always customize, try Phosphor/Heroicons, use spacing over cards.
-
-**Quick check:** See the "AI Tells" checklist in `./references/anti-slop-rules.md` before delivering any design.
-
-**Performance:** Animation and blur rules in `./references/performance-guardrails.md`
-
-Remember: The AI is capable of extraordinary creative work. Commit fully to distinctive visions.

package/templates/repo/.github/skills/frontend-design/references/workflow-3d.md

@@ -1,98 +0,0 @@
-# 3D Design Workflow
-
-Create immersive interactive 3D designs with Three.js.
-
-## Prerequisites
-- Activate `ui-ux-pro-max` skill (if available) first
-- Activate `threejs` skill for 3D and WebGL expertise
-- Have `ai-multimodal` (if available) skill ready for asset generation
-
-## Initial Research
-```bash
-```
-
-## Workflow Steps
-
-### 1. Create Implementation Plan
-Use `ui-ux-designer` + `researcher` subagents:
-- Create plan directory (use `## Naming` pattern)
-- Write `plan.md` (<80 lines overview)
-- Add `phase-XX-name.md` files
-- Keep research reports under 150 lines
-
-### 2. Implement with Three.js
-Use `ui-ux-designer` subagent to build:
-- Three.js scene setup
-- Custom GLSL shaders
-- GPU particle systems
-- Cinematic camera controls
-- Post-processing effects
-- Interactive elements
-
-### 3. Generate 3D Assets
-Use `ai-multimodal` (if available) skill for:
-- Textures and materials
-- Skyboxes and environment maps
-- Particle sprites
-- Video backgrounds
-
-Use `media-processing` skill for:
-- Texture optimization for WebGL
-- Normal/height map generation
-- Sprite sheet creation
-- Background removal
-- Asset optimization
-
-### 4. Verify & Report
-- Test across devices
-- Optimize for 60fps
-- Report to user
-- Request approval
-
-### 5. Document
-Update `./docs/design-guidelines.md` with:
-- 3D design patterns
-- Shader libraries
-- Reusable components
-
-## Technical Requirements
-
-### Three.js Implementation
-- Proper scene optimization
-- Efficient draw calls
-- LOD (Level of Detail) where needed
-- Responsive canvas behavior
-- Memory management
-
-### Shader Development
-- Custom vertex shaders
-- Custom fragment shaders
-- Uniform management
-- Performance optimization
-
-### Particle Systems
-- GPU-accelerated rendering
-- Efficient buffer geometry
-- Point sprite optimization
-
-### Post-Processing
-- Render pipeline setup
-- Effect composition
-- Performance budgeting
-
-## Implementation Stack
-- Three.js - 3D rendering
-- GLSL - Custom shaders
-- HTML/CSS/JS - UI integration
-- WebGL - GPU graphics
-
-## Performance Targets
-- 60fps minimum
-- < 100ms initial load
-- Responsive to viewport
-- Mobile-friendly fallbacks
-
-## Related
-- `animejs.md` - UI animation patterns
-- `technical-optimization.md` - Performance tips
-- `asset-generation.md` - Asset creation

package/templates/repo/.github/skills/frontend-design/references/workflow-describe.md

@@ -1,87 +0,0 @@
-# Design Description Workflow
-
-Create detailed design documentation from screenshot/video for developer implementation.
-
-## Prerequisites
-- Activate `ui-ux-pro-max` skill (if available) first
-- Have `ai-multimodal` (if available) skill ready
-
-## Workflow Steps
-
-### 1. Comprehensive Visual Analysis
-Use `ai-multimodal` (if available) skill to 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/templates/repo/.github/skills/frontend-design/references/workflow-immersive.md

@@ -1,82 +0,0 @@
-# Immersive Design Workflow
-
-Create award-quality designs with storytelling, 3D experiences, and micro-interactions.
-
-## Prerequisites
-- Activate `ui-ux-pro-max` skill (if available) first
-
-## Initial Research
-```bash
-```
-
-## Workflow Steps
-
-### 1. Research Phase
-Use `researcher` subagent to investigate:
-- Design style and current trends
-- Font combinations and typography
-- Color theory for the context
-- Border and spacing patterns
-- Element positioning principles
-- Animation and interaction patterns
-
-### 2. Design Implementation
-Use `ui-ux-designer` subagent:
-- Build step by step from research
-- Create plan with `## Naming` pattern
-- Default to HTML/CSS/JS if unspecified
-
-### 3. Storytelling Elements
-Incorporate:
-- Narrative flow through scroll
-- Emotional pacing
-- Visual hierarchy for story beats
-- Progressive disclosure of content
-
-### 4. 3D Experiences
-If applicable, integrate:
-- Three.js scenes
-- Interactive 3D elements
-- Parallax depth effects
-- WebGL enhancements
-
-### 5. Micro-interactions
-Add polish:
-- Button feedback
-- Form interactions
-- Loading states
-- Hover effects
-- Scroll responses
-
-### 6. Asset Generation
-Use `ai-multimodal` (if available) skill:
-- Generate high-quality visuals
-- Create unique imagery
-- Verify asset quality
-- Remove backgrounds as needed
-
-### 7. Verify & Report
-- Review against inspiration
-- Report to user
-- Request approval
-- Update `./docs/design-guidelines.md`
-
-## Quality Standards
-Match award-winning sites:
-- Dribbble top shots
-- Behance featured
-- Awwwards winners
-- Mobbin patterns
-- TheFWA selections
-
-## Design Principles
-- **Bold aesthetic choices**: Commit fully to direction
-- **Attention to detail**: Every pixel matters
-- **Cohesive experience**: All elements work together
-- **Memorable moments**: Create surprise and delight
-- **Technical excellence**: Performance + polish
-
-## Related
-- `workflow-3d.md` - 3D implementation details
-- `animejs.md` - Animation patterns
-- `technical-best-practices.md` - Quality guidelines

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

@@ -1,52 +0,0 @@
-# Quick Design Workflow
-
-Rapid design creation with minimal planning overhead.
-
-## Prerequisites
-- Activate `ui-ux-pro-max` skill (if available) first
-
-## Initial Research
-```bash
-```
-
-## 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. Generate Assets
-Use `ai-multimodal` (if available) skill:
-- Generate required visuals
-- Verify quality quickly
-- Use `media-processing` for adjustments
-
-### 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-immersive.md` - For comprehensive designs
-- `technical-overview.md` - Quick reference

package/templates/repo/.github/skills/frontend-design/references/workflow-screenshot.md

@@ -1,63 +0,0 @@
-# Screenshot Replication Workflow
-
-Replicate a design exactly from a provided screenshot.
-
-## Prerequisites
-- Activate `ui-ux-pro-max` skill (if available) first for design intelligence
-- Have `ai-multimodal` (if available) skill ready for visual analysis
-
-## Workflow Steps
-
-### 1. Analyze Screenshot Details
-Use `ai-multimodal` (if available) skill to extract:
-- 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. Generate Assets
-Use `ai-multimodal` (if available) skill:
-- Generate images, icons, backgrounds
-- Verify generated assets match design
-- Remove backgrounds if needed with `media-processing`
-
-### 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/templates/repo/.github/skills/frontend-design/references/workflow-video.md

@@ -1,74 +0,0 @@
-# Video Replication Workflow
-
-Replicate a design including animations/interactions from a provided video.
-
-## Prerequisites
-- Activate `ui-ux-pro-max` skill (if available) first
-- Have `ai-multimodal` (if available) skill ready for video analysis
-
-## Workflow Steps
-
-### 1. Analyze Video Details
-Use `ai-multimodal` (if available) skill to describe:
-- Every visible element and its properties
-- All interactions and user flows
-- Animation timing, easing, duration
-- Transitions between states/pages
-- Color palette with hex codes
-- Typography (predict Google Fonts)
-- Borders, spacing, sizing
-- Textures, materials, lighting
-- Shadows, reflections, blur, glow
-- Background effects
-
-**Font Prediction**: Avoid defaulting to Inter/Poppins.
-
-### 2. Create Implementation Plan
-Use `ui-ux-designer` subagent:
-- Create plan directory (use `## Naming` pattern)
-- Write `plan.md` (<80 lines overview)
-- Add `phase-XX-name.md` files with full sections
-- Keep research reports under 150 lines
-
-### 3. Implement
-- Follow plan step by step
-- Default to HTML/CSS/JS if unspecified
-- Prioritize animation accuracy
-
-### 4. Animation Implementation
-Focus on:
-- Timing functions matching video
-- State transitions
-- Micro-interactions
-- Scroll-triggered effects
-- Hover/focus states
-- Loading animations
-
-Use `animejs.md` reference for animation patterns.
-
-### 5. Generate Assets
-Use `ai-multimodal` (if available) skill:
-- Generate static assets
-- Create animated sprites if needed
-- Verify quality matches video
-- Use `media-processing` for processing
-
-### 6. Verify & Report
-- Compare implementation to video
-- Test all interactions
-- Report summary to user
-- Request approval
-
-### 7. Document
-If approved, update `./docs/design-guidelines.md`
-
-## Quality Standards
-- Frame-accurate animation timing
-- Smooth 60fps performance
-- Responsive behavior preserved
-- All interactions functional
-
-## Related
-- `animejs.md` - Animation library reference
-- `design-extraction-overview.md` - Guidelines extraction
-- `technical-optimization.md` - Performance tips