cokit-cli 1.3.0 → 1.4.0

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

@@ -0,0 +1,87 @@
+# 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 `ck-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/ck-frontend-design/references/workflow-immersive.md

@@ -0,0 +1,82 @@
+# 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 `ck-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 `ck-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/ck-frontend-design/references/workflow-quick.md

@@ -0,0 +1,52 @@
+# 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 `ck-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/ck-frontend-design/references/workflow-screenshot.md

@@ -0,0 +1,63 @@
+# 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 `ck-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/ck-frontend-design/references/workflow-video.md

@@ -0,0 +1,74 @@
+# 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 `ck-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