thanh-kit 2.5.0 → 2.5.2

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

@@ -1,6 +1,6 @@
 # Asset Generation Workflow
 
-Complete workflow for generating design-aligned visual assets using `ai-multimodal` skill.
+Complete workflow for generating design-aligned visual assets using `ck:ai-multimodal` skill.
 
 ## Generation Workflow
 
@@ -40,7 +40,7 @@ surfaces, geometric shapes, monumental scale, inspired by
 
 ### Step 3: Generate with Appropriate Model
 
-Use `ai-multimodal` skill's image generation capabilities:
+Use `ck:ai-multimodal` skill's image generation capabilities:
 
 ```bash
 # Standard quality (most cases)
@@ -81,7 +81,7 @@ python scripts/gemini_batch_process.py \
 
 ### Step 4: Evaluate Against Design Standards
 
-Use `ai-multimodal` to analyze the generated asset (see `visual-analysis.md` for complete workflow):
+Use `ck:ai-multimodal` to analyze the generated asset (see `visual-analysis.md` for complete workflow):
 
 ```bash
 python scripts/gemini_batch_process.py \
@@ -104,7 +104,7 @@ python scripts/gemini_batch_process.py \
 1. Identify specific issues (color, composition, mood, technical)
 2. Refine prompt with improvements
 3. Regenerate with adjusted parameters
-4. Consider using `media-processing` skill for post-generation adjustments
+4. Consider using `ck:media-processing` skill for post-generation adjustments
 
 **If meets standards**:
 1. Optimize for web (compress, format conversion)

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

@@ -53,7 +53,7 @@ python scripts/gemini_batch_process.py \
 
 ### Score 6-7/10: Minor Refinements Needed
 **Actions**:
-- Use `media-processing` skill for adjustments (brightness/contrast/saturation)
+- Use `ck:media-processing` skill for adjustments (brightness/contrast/saturation)
 - Consider selective regeneration of problem areas
 - May proceed with caution if time-constrained
 

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

@@ -0,0 +1,102 @@
+# 3D Design Workflow
+
+Create immersive interactive 3D designs with Three.js.
+
+## Prerequisites
+- Activate `ck:ui-ux-pro-max` skill first
+- Activate `ck:threejs` skill for 3D and WebGL expertise
+- Have `ck:ai-multimodal` skill ready for asset generation
+
+## Initial Research
+Run `ck:ui-ux-pro-max` searches:
+```bash
+python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<product-type>" --domain product
+python3 .claude/skills/ui-ux-pro-max/scripts/search.py "immersive 3d" --domain style
+python3 .claude/skills/ui-ux-pro-max/scripts/search.py "animation" --domain ux
+```
+
+## 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 `ck:ai-multimodal` skill for:
+- Textures and materials
+- Skyboxes and environment maps
+- Particle sprites
+- Video backgrounds
+
+Use `ck: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/skills/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 `ck:ui-ux-pro-max` skill first
+- Have `ck:ai-multimodal` skill ready
+
+## Workflow Steps
+
+### 1. Comprehensive Visual Analysis
+Use `ck:ai-multimodal` 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/skills/frontend-design/references/workflow-immersive.md

@@ -0,0 +1,87 @@
+# Immersive Design Workflow
+
+Create award-quality designs with storytelling, 3D experiences, and micro-interactions.
+
+## Prerequisites
+- Activate `ck:ui-ux-pro-max` skill first
+
+## Initial Research
+Run `ck:ui-ux-pro-max` searches:
+```bash
+python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<product-type>" --domain product
+python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<style-keywords>" --domain style
+python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<mood>" --domain typography
+python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<industry>" --domain color
+```
+
+## 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 `ck:ai-multimodal` 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/skills/frontend-design/references/workflow-quick.md

@@ -0,0 +1,57 @@
+# Quick Design Workflow
+
+Rapid design creation with minimal planning overhead.
+
+## Prerequisites
+- Activate `ck:ui-ux-pro-max` skill first
+
+## Initial Research
+Run `ck:ui-ux-pro-max` searches:
+```bash
+python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<product-type>" --domain product
+python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<style-keywords>" --domain style
+python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<mood>" --domain typography
+python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<industry>" --domain color
+```
+
+## 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 `ck:ai-multimodal` skill:
+- Generate required visuals
+- Verify quality quickly
+- Use `ck: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/skills/frontend-design/references/workflow-screenshot.md

@@ -0,0 +1,63 @@
+# Screenshot Replication Workflow
+
+Replicate a design exactly from a provided screenshot.
+
+## Prerequisites
+- Activate `ck:ui-ux-pro-max` skill first for design intelligence
+- Have `ck:ai-multimodal` skill ready for visual analysis
+
+## Workflow Steps
+
+### 1. Analyze Screenshot Details
+Use `ck:ai-multimodal` 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 `ck:ai-multimodal` skill:
+- Generate images, icons, backgrounds
+- Verify generated assets match design
+- Remove backgrounds if needed with `ck: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/skills/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 `ck:ui-ux-pro-max` skill first
+- Have `ck:ai-multimodal` skill ready for video analysis
+
+## Workflow Steps
+
+### 1. Analyze Video Details
+Use `ck:ai-multimodal` 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 `ck:ai-multimodal` skill:
+- Generate static assets
+- Create animated sprites if needed
+- Verify quality matches video
+- Use `ck: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

package/templates/skills/frontend-development/SKILL.md

@@ -1,6 +1,7 @@
 ---
-name: frontend-dev-guidelines
-description: Frontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code.
+name: ck:frontend-development
+description: Build React/TypeScript frontends with modern patterns. Use for components, Suspense, lazy loading, useSuspenseQuery, MUI v7 styling, TanStack Router, performance optimization.
+argument-hint: "[component or feature]"
 ---
 
 # Frontend Development Guidelines
@@ -396,4 +397,4 @@ For complete examples, see [resources/complete-examples.md](resources/complete-e
 
 ---
 
-**Skill Status**: Modular structure with progressive loading for optimal context management
+**Skill Status**: Modular structure with progressive loading for optimal context management

package/templates/skills/git/SKILL.md

@@ -0,0 +1,114 @@
+---
+name: ck:git
+description: "Git operations with conventional commits. Use for staging, committing, pushing, PRs, merges. Auto-splits commits by type/scope. Security scans for secrets."
+argument-hint: "cm|cp|pr|merge [args]"
+version: 1.0.0
+---
+
+# Git Operations
+
+## Default (No Arguments)
+
+If invoked without arguments, use `AskUserQuestion` to present available git operations:
+
+| Operation | Description |
+|-----------|-------------|
+| `cm` | Stage files & create commits |
+| `cp` | Stage files, create commits and push |
+| `pr` | Create Pull Request |
+| `merge` | Merge branches |
+
+Present as options via `AskUserQuestion` with header "Git Operation", question "What would you like to do?".
+
+Execute git workflows via `git-manager` subagent to isolate verbose output.
+Activate `ck: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 `.claude` 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