@vodailoc/kilo-kit-mcp 1.1.0 → 1.2.0

package/skills/design/aesthetic/assets/design-story-template.md

@@ -1,135 +1,135 @@
-# Design Story: [Project Name]
-
-_Generated: [Date]_
-
-## Project Context
-
-### Purpose
-[What problem does this design solve?]
-
-### Target Audience
-[Who is this design for?]
-
-### Key Objectives
-1. [Objective 1]
-2. [Objective 2]
-3. [Objective 3]
-
-## Design Narrative
-
-### Core Message
-[What story does this design tell?]
-
-### Emotional Journey
-[What should users feel as they interact?]
-
-### Visual Metaphor
-[What metaphor or theme unifies the design?]
-
-## User Journey
-
-### Entry Point
-**First Impression**: [What users see first]
-**Goal**: [What should users understand immediately]
-**Design Choices**: [How design supports this]
-
-### Exploration Phase
-**User Actions**: [What users do next]
-**Design Response**: [How interface responds]
-**Micro-Interactions**: [Subtle feedback provided]
-
-### Engagement Phase
-**Key Interactions**: [Main user activities]
-**Visual Feedback**: [How design reinforces actions]
-**Storytelling Elements**: [Narrative reinforcement]
-
-### Peak Moment
-**Highlight**: [Most memorable interaction]
-**Implementation**: [How it's achieved technically]
-**Purpose**: [Why this moment matters]
-
-## Thematic Elements
-
-### Visual Theme
-[Description of consistent visual approach]
-
-### Narrative Devices
-- **Parallax**: [How depth is used]
-- **Transitions**: [How sections connect]
-- **Progressive Disclosure**: [How information unfolds]
-- **Motion**: [How animation tells the story]
-
-### Symbolism
-[Meaning behind design choices]
-
-## Design Decisions
-
-### Why This Style?
-[Rationale for design style choice]
-
-### Why These Colors?
-[Reasoning behind color palette]
-
-### Why This Layout?
-[Logic behind structure and flow]
-
-### Why These Interactions?
-[Purpose of micro-interactions chosen]
-
-## Technical Storytelling
-
-### Performance Story
-[How fast loading enhances narrative]
-
-### Responsive Story
-[How design adapts across devices]
-
-### Accessibility Story
-[How inclusive design supports everyone]
-
-## Evolution
-
-### Initial Concepts
-[Early ideas explored]
-
-### Key Iterations
-[Major changes and why]
-
-### Final Direction
-[Ultimate design rationale]
-
-## Inspiration
-
-### Design References
-- [Source 1]: [What inspired]
-- [Source 2]: [What inspired]
-- [Source 3]: [What inspired]
-
-### Cultural Context
-[Broader design trends considered]
-
-## Impact
-
-### Intended Effect
-[What users should take away]
-
-### Success Metrics
-[How to measure if story resonates]
-
-### Future Chapters
-[How design can evolve]
-
-## Reflections
-
-### What Worked
-[Successful narrative elements]
-
-### What We Learned
-[Insights gained from process]
-
-### What's Next
-[Future storytelling opportunities]
-
----
-
-**Remember**: Every design tells a story. Make it intentional, coherent, and meaningful.
+# Design Story: [Project Name]
+
+_Generated: [Date]_
+
+## Project Context
+
+### Purpose
+[What problem does this design solve?]
+
+### Target Audience
+[Who is this design for?]
+
+### Key Objectives
+1. [Objective 1]
+2. [Objective 2]
+3. [Objective 3]
+
+## Design Narrative
+
+### Core Message
+[What story does this design tell?]
+
+### Emotional Journey
+[What should users feel as they interact?]
+
+### Visual Metaphor
+[What metaphor or theme unifies the design?]
+
+## User Journey
+
+### Entry Point
+**First Impression**: [What users see first]
+**Goal**: [What should users understand immediately]
+**Design Choices**: [How design supports this]
+
+### Exploration Phase
+**User Actions**: [What users do next]
+**Design Response**: [How interface responds]
+**Micro-Interactions**: [Subtle feedback provided]
+
+### Engagement Phase
+**Key Interactions**: [Main user activities]
+**Visual Feedback**: [How design reinforces actions]
+**Storytelling Elements**: [Narrative reinforcement]
+
+### Peak Moment
+**Highlight**: [Most memorable interaction]
+**Implementation**: [How it's achieved technically]
+**Purpose**: [Why this moment matters]
+
+## Thematic Elements
+
+### Visual Theme
+[Description of consistent visual approach]
+
+### Narrative Devices
+- **Parallax**: [How depth is used]
+- **Transitions**: [How sections connect]
+- **Progressive Disclosure**: [How information unfolds]
+- **Motion**: [How animation tells the story]
+
+### Symbolism
+[Meaning behind design choices]
+
+## Design Decisions
+
+### Why This Style?
+[Rationale for design style choice]
+
+### Why These Colors?
+[Reasoning behind color palette]
+
+### Why This Layout?
+[Logic behind structure and flow]
+
+### Why These Interactions?
+[Purpose of micro-interactions chosen]
+
+## Technical Storytelling
+
+### Performance Story
+[How fast loading enhances narrative]
+
+### Responsive Story
+[How design adapts across devices]
+
+### Accessibility Story
+[How inclusive design supports everyone]
+
+## Evolution
+
+### Initial Concepts
+[Early ideas explored]
+
+### Key Iterations
+[Major changes and why]
+
+### Final Direction
+[Ultimate design rationale]
+
+## Inspiration
+
+### Design References
+- [Source 1]: [What inspired]
+- [Source 2]: [What inspired]
+- [Source 3]: [What inspired]
+
+### Cultural Context
+[Broader design trends considered]
+
+## Impact
+
+### Intended Effect
+[What users should take away]
+
+### Success Metrics
+[How to measure if story resonates]
+
+### Future Chapters
+[How design can evolve]
+
+## Reflections
+
+### What Worked
+[Successful narrative elements]
+
+### What We Learned
+[Insights gained from process]
+
+### What's Next
+[Future storytelling opportunities]
+
+---
+
+**Remember**: Every design tells a story. Make it intentional, coherent, and meaningful.

package/skills/design/aesthetic/references/design-principles.md

@@ -1,62 +1,62 @@
-# Design Principles: Beautiful & Right
-
-## BEAUTIFUL: Understanding Aesthetic Principles
-
-### Study Process
-Analyze high-quality designs on Dribbble, Mobbin, Behance. Ask AI to identify:
-- Design styles (Memphis, Flat Design, Glassmorphism, Neo-brutalism, Minimalism)
-- Layout structures & applications
-- Typography systems (font pairing, hierarchy, scaling)
-- Color systems (palettes, contrasts, psychology)
-
-### Visual Hierarchy
-Guide users through interfaces effectively:
-- **Size**: Larger elements draw attention first
-- **Contrast**: High contrast (text/background) boosts readability
-- **Typography**: Use weight, size, style for hierarchy
-- **Placement**: F-pattern (web), Z-pattern (landing pages)
-- **Spacing**: White space improves clarity, reduces cognitive load
-
-### Typography Best Practices
-- Stick to 2-3 typefaces max
-- Clear font hierarchy with proper spacing, sizes, alignment
-- Appropriate font sizes for readability across devices
-- Short, scannable paragraphs
-
-### Color Theory Applications
-- **Blue**: Trust, security, calmness
-- **Red**: Urgency, passion, excitement
-- **Warm colors**: Drive urgency
-- **Cool colors**: Create trust
-- Use color intentionally to direct attention & evoke emotion
-- Ensure WCAG AA contrast ratios (4.5:1 text, 3:1 large text)
-
-### White Space
-Not empty—essential for clarity. Proper spacing between sections, buttons, text improves readability & gives visual breathing room.
-
-## RIGHT: Ensuring Functionality
-
-### Design Systems Research
-Search "Figma Design System + [style]" to understand:
-- Component architecture (atomic design: atoms → molecules → organisms)
-- Layout principles (grid systems, responsive breakpoints)
-- UX patterns & interactions
-
-### Component Library Standards
-- Semantic HTML first (button > div with ARIA roles)
-- Built-in accessibility, focus handling, keyboard interaction
-- Each component tested for accessibility before adding
-- Documentation includes structure, focus order, keyboard expectations, screen reader announcements
-
-### Accessibility Requirements
-- WCAG 2.1 AA minimum (work toward 2.2)
-- Color contrast ratios meet/exceed minimums
-- Alt text for images
-- Color-blind-friendly palettes
-- Keyboard navigation support
-- Screen reader compatibility
-
-### Testing Protocol
-- Automated tools catch 30-50% of issues
-- Manual testing crucial for comprehensive coverage
-- Test with real users when possible
+# Design Principles: Beautiful & Right
+
+## BEAUTIFUL: Understanding Aesthetic Principles
+
+### Study Process
+Analyze high-quality designs on Dribbble, Mobbin, Behance. Ask AI to identify:
+- Design styles (Memphis, Flat Design, Glassmorphism, Neo-brutalism, Minimalism)
+- Layout structures & applications
+- Typography systems (font pairing, hierarchy, scaling)
+- Color systems (palettes, contrasts, psychology)
+
+### Visual Hierarchy
+Guide users through interfaces effectively:
+- **Size**: Larger elements draw attention first
+- **Contrast**: High contrast (text/background) boosts readability
+- **Typography**: Use weight, size, style for hierarchy
+- **Placement**: F-pattern (web), Z-pattern (landing pages)
+- **Spacing**: White space improves clarity, reduces cognitive load
+
+### Typography Best Practices
+- Stick to 2-3 typefaces max
+- Clear font hierarchy with proper spacing, sizes, alignment
+- Appropriate font sizes for readability across devices
+- Short, scannable paragraphs
+
+### Color Theory Applications
+- **Blue**: Trust, security, calmness
+- **Red**: Urgency, passion, excitement
+- **Warm colors**: Drive urgency
+- **Cool colors**: Create trust
+- Use color intentionally to direct attention & evoke emotion
+- Ensure WCAG AA contrast ratios (4.5:1 text, 3:1 large text)
+
+### White Space
+Not empty—essential for clarity. Proper spacing between sections, buttons, text improves readability & gives visual breathing room.
+
+## RIGHT: Ensuring Functionality
+
+### Design Systems Research
+Search "Figma Design System + [style]" to understand:
+- Component architecture (atomic design: atoms → molecules → organisms)
+- Layout principles (grid systems, responsive breakpoints)
+- UX patterns & interactions
+
+### Component Library Standards
+- Semantic HTML first (button > div with ARIA roles)
+- Built-in accessibility, focus handling, keyboard interaction
+- Each component tested for accessibility before adding
+- Documentation includes structure, focus order, keyboard expectations, screen reader announcements
+
+### Accessibility Requirements
+- WCAG 2.1 AA minimum (work toward 2.2)
+- Color contrast ratios meet/exceed minimums
+- Alt text for images
+- Color-blind-friendly palettes
+- Keyboard navigation support
+- Screen reader compatibility
+
+### Testing Protocol
+- Automated tools catch 30-50% of issues
+- Manual testing crucial for comprehensive coverage
+- Test with real users when possible

package/skills/design/aesthetic/references/design-resources.md

@@ -1,75 +1,75 @@
-# Design Resources & Tools
-
-## Inspiration Platforms
-
-### Design Galleries
-- **Dribbble**: High-quality UI/UX designs, trending styles
-- **Mobbin**: Mobile app design patterns, real-world examples
-- **Behance**: Creative portfolios, comprehensive projects
-- **Awwwards**: Award-winning web experiences
-- **21st.dev**: Component animations, micro-interactions
-- **CSS Design Awards**: Cutting-edge web designs
-
-### Design Systems
-Search pattern: "Figma Design System + [style name]"
-- Material Design (Google)
-- Human Interface Guidelines (Apple)
-- Carbon Design System (IBM)
-- Ant Design
-- Shadcn UI
-- Atlassian Design System
-
-## AI Tools for Design
-
-### Generation
-- **Gemini**: Image generation via ai-multimodal skill
-- **Claude**: Design variations, component code
-
-### Prompt Structure
-Include in prompts:
-- Task description
-- Preferred design style
-- Color palette
-- Typography preferences
-- Target audience/user story
-- Animation specifications
-
-## MCP Integrations
-
-### Available MCPs
-- **Chrome MCP**: Research designs, analyze trends from Dribbble/Mobbin
-- **Figma MCP**: Code based on community designs
-- **Freepik MCP**: Access stock imagery
-- **ChatGPT-Image MCP**: Image resources
-- **gallery-dl**: Download reference images via bash
-
-### Usage
-Connect MCPs for enhanced capabilities when researching, analyzing, or implementing designs.
-
-## Development Approach
-
-### Git Worktrees Strategy
-Maintain separate branches for different design style variations during development.
-Allows parallel exploration of Minimalist, Modern, Glassmorphism interpretations.
-
-### Parallel Agents
-Use multiple agents to generate design style variations simultaneously, compare approaches.
-
-## Documentation Standards
-
-### Required Files
-Create in `./docs/` directory:
-- **design-guideline.md**: Color patterns, typography, layout principles, component styling, design highlights
-- **design-story.md**: Narrative elements, thematic decisions, user journey considerations
-
-### Content
-Document:
-- Rationale for design decisions
-- Style guide (colors, fonts, spacing)
-- Component patterns & usage
-- Responsive breakpoints
-- Accessibility considerations
-- Brand alignment
-
-### Maintenance
-Update during development. Use development rules to remind Claude Code to follow guidelines consistently.
+# Design Resources & Tools
+
+## Inspiration Platforms
+
+### Design Galleries
+- **Dribbble**: High-quality UI/UX designs, trending styles
+- **Mobbin**: Mobile app design patterns, real-world examples
+- **Behance**: Creative portfolios, comprehensive projects
+- **Awwwards**: Award-winning web experiences
+- **21st.dev**: Component animations, micro-interactions
+- **CSS Design Awards**: Cutting-edge web designs
+
+### Design Systems
+Search pattern: "Figma Design System + [style name]"
+- Material Design (Google)
+- Human Interface Guidelines (Apple)
+- Carbon Design System (IBM)
+- Ant Design
+- Shadcn UI
+- Atlassian Design System
+
+## AI Tools for Design
+
+### Generation
+- **Gemini**: Image generation via ai-multimodal skill
+- **Claude**: Design variations, component code
+
+### Prompt Structure
+Include in prompts:
+- Task description
+- Preferred design style
+- Color palette
+- Typography preferences
+- Target audience/user story
+- Animation specifications
+
+## MCP Integrations
+
+### Available MCPs
+- **Chrome MCP**: Research designs, analyze trends from Dribbble/Mobbin
+- **Figma MCP**: Code based on community designs
+- **Freepik MCP**: Access stock imagery
+- **ChatGPT-Image MCP**: Image resources
+- **gallery-dl**: Download reference images via bash
+
+### Usage
+Connect MCPs for enhanced capabilities when researching, analyzing, or implementing designs.
+
+## Development Approach
+
+### Git Worktrees Strategy
+Maintain separate branches for different design style variations during development.
+Allows parallel exploration of Minimalist, Modern, Glassmorphism interpretations.
+
+### Parallel Agents
+Use multiple agents to generate design style variations simultaneously, compare approaches.
+
+## Documentation Standards
+
+### Required Files
+Create in `./docs/` directory:
+- **design-guideline.md**: Color patterns, typography, layout principles, component styling, design highlights
+- **design-story.md**: Narrative elements, thematic decisions, user journey considerations
+
+### Content
+Document:
+- Rationale for design decisions
+- Style guide (colors, fonts, spacing)
+- Component patterns & usage
+- Responsive breakpoints
+- Accessibility considerations
+- Brand alignment
+
+### Maintenance
+Update during development. Use development rules to remind Claude Code to follow guidelines consistently.

package/skills/design/aesthetic/references/micro-interactions.md

@@ -1,53 +1,53 @@
-# Micro-Interactions: Satisfying Experience
-
-## SATISFYING: Adding Micro-Interactions
-
-### Duration Guidelines
-- **General micro-interactions**: 150-300ms (avoid interrupting flow)
-- **Button presses**: Start within 16ms of click
-- **Standard animations**: 200-500ms
-- **UI motions**: 0.5-2s typically
-- **Rule**: A tenth of a second makes big difference; half second wrong feels jarring
-
-### Basic Effects
-- **Fade**: Smooth opacity transitions
-- **Slide**: Directional movement (left/right/up/down)
-- **Scale**: Size changes (grow/shrink)
-- **Rotate**: Angular transformations
-- Sequential timing with 0.1s delays between elements
-
-### Easing Curves
-Linear motion = robotic. Use easing for natural feel:
-
-**Ease-out** (starts fast, slows down):
-- Best for: Elements entering screen
-- Makes animation feel responsive
-- Allows eye time to focus as element settles
-- Most common for UI micro-interactions
-
-**Ease-in** (starts slow, speeds up):
-- Best for: Elements leaving screen
-- Natural exit motion
-
-**Spring/bounce**:
-- Playful, energetic feel
-- Use sparingly for emphasis
-
-**Cubic-bezier**:
-- Fine-tuned control over motion curves
-- Custom easing for specific needs
-
-### Motion Characteristics
-- Follow real-world physics (objects speed up when starting, slow down when stopping)
-- Subtle curves for micro-interactions
-- Bolder curves for attention-grabbing transitions
-- Always have purpose—guide users or give feedback
-
-### Performance
-- Aim for smooth 60fps
-- Prefer hardware-accelerated properties (transforms, opacity)
-- Avoid fancy effects causing frame drops or battery drain
-- Provide motion-reduced alternatives for accessibility
-
-### Resources
-Study 21st.dev for component animations & subtle effects worth emulating.
+# Micro-Interactions: Satisfying Experience
+
+## SATISFYING: Adding Micro-Interactions
+
+### Duration Guidelines
+- **General micro-interactions**: 150-300ms (avoid interrupting flow)
+- **Button presses**: Start within 16ms of click
+- **Standard animations**: 200-500ms
+- **UI motions**: 0.5-2s typically
+- **Rule**: A tenth of a second makes big difference; half second wrong feels jarring
+
+### Basic Effects
+- **Fade**: Smooth opacity transitions
+- **Slide**: Directional movement (left/right/up/down)
+- **Scale**: Size changes (grow/shrink)
+- **Rotate**: Angular transformations
+- Sequential timing with 0.1s delays between elements
+
+### Easing Curves
+Linear motion = robotic. Use easing for natural feel:
+
+**Ease-out** (starts fast, slows down):
+- Best for: Elements entering screen
+- Makes animation feel responsive
+- Allows eye time to focus as element settles
+- Most common for UI micro-interactions
+
+**Ease-in** (starts slow, speeds up):
+- Best for: Elements leaving screen
+- Natural exit motion
+
+**Spring/bounce**:
+- Playful, energetic feel
+- Use sparingly for emphasis
+
+**Cubic-bezier**:
+- Fine-tuned control over motion curves
+- Custom easing for specific needs
+
+### Motion Characteristics
+- Follow real-world physics (objects speed up when starting, slow down when stopping)
+- Subtle curves for micro-interactions
+- Bolder curves for attention-grabbing transitions
+- Always have purpose—guide users or give feedback
+
+### Performance
+- Aim for smooth 60fps
+- Prefer hardware-accelerated properties (transforms, opacity)
+- Avoid fancy effects causing frame drops or battery drain
+- Provide motion-reduced alternatives for accessibility
+
+### Resources
+Study 21st.dev for component animations & subtle effects worth emulating.