@vodailoc/kilo-kit-mcp 1.1.0 → 1.2.0

package/skills/design/aesthetic/SKILL.md

@@ -1,121 +1,121 @@
----
-name: aesthetic
-description: Create aesthetically beautiful interfaces following proven design principles. Use when building UI/UX, analyzing designs from inspiration sites, generating design images with ai-multimodal, implementing visual hierarchy and color theory, adding micro-interactions, or creating design documentation. Includes workflows for capturing and analyzing inspiration screenshots with chrome-devtools and ai-multimodal, iterative design image generation until aesthetic standards are met, and comprehensive design system guidance covering BEAUTIFUL (aesthetic principles), RIGHT (functionality/accessibility), SATISFYING (micro-interactions), and PEAK (storytelling) stages. Integrates with chrome-devtools, ai-multimodal, media-processing, ui-styling, and web-frameworks skills.
----
-
-# Aesthetic
-
-Create aesthetically beautiful interfaces by following proven design principles and systematic workflows.
-
-## When to Use This Skill
-
-Use when:
-- Building or designing user interfaces
-- Analyzing designs from inspiration websites (Dribbble, Mobbin, Behance)
-- Generating design images and evaluating aesthetic quality
-- Implementing visual hierarchy, typography, color theory
-- Adding micro-interactions and animations
-- Creating design documentation and style guides
-- Need guidance on accessibility and design systems
-
-## Core Framework: Four-Stage Approach
-
-### 1. BEAUTIFUL: Understanding Aesthetics
-Study existing designs, identify patterns, extract principles. AI lacks aesthetic sense—standards must come from analyzing high-quality examples and aligning with market tastes.
-
-**Reference**: [`references/design-principles.md`](references/design-principles.md) - Visual hierarchy, typography, color theory, white space principles.
-
-### 2. RIGHT: Ensuring Functionality
-Beautiful designs lacking usability are worthless. Study design systems, component architecture, accessibility requirements.
-
-**Reference**: [`references/design-principles.md`](references/design-principles.md) - Design systems, component libraries, WCAG accessibility standards.
-
-### 3. SATISFYING: Micro-Interactions
-Incorporate subtle animations with appropriate timing (150-300ms), easing curves (ease-out for entry, ease-in for exit), sequential delays.
-
-**Reference**: [`references/micro-interactions.md`](references/micro-interactions.md) - Duration guidelines, easing curves, performance optimization.
-
-### 4. PEAK: Storytelling Through Design
-Elevate with narrative elements—parallax effects, particle systems, thematic consistency. Use restraint: "too much of anything isn't good."
-
-**Reference**: [`references/storytelling-design.md`](references/storytelling-design.md) - Narrative elements, scroll-based storytelling, interactive techniques.
-
-## Workflows
-
-### Workflow 1: Capture & Analyze Inspiration
-
-**Purpose**: Extract design guidelines from inspiration websites.
-
-**Steps**:
-1. Browse inspiration sites (Dribbble, Mobbin, Behance, Awwwards)
-2. Use **chrome-devtools** skill to capture full-screen screenshots (not full page)
-3. Use **ai-multimodal** skill to analyze screenshots and extract:
-   - Design style (Minimalism, Glassmorphism, Neo-brutalism, etc.)
-   - Layout structure & grid systems
-   - Typography system & hierarchy
-     **IMPORTANT:** Try to predict the font name (Google Fonts) and font size in the given screenshot, don't just use Inter or Poppins.
-   - Color palette with hex codes
-   - Visual hierarchy techniques
-   - Component patterns & styling
-   - Micro-interactions
-   - Accessibility considerations
-   - Overall aesthetic quality rating (1-10)
-4. Document findings in project design guidelines using templates
-
-### Workflow 2: Generate & Iterate Design Images
-
-**Purpose**: Create aesthetically pleasing design images through iteration.
-
-**Steps**:
-1. Define design prompt with: style, colors, typography, audience, animation specs
-2. Use **ai-multimodal** skill to generate design images with Gemini API
-3. Use **ai-multimodal** skill to analyze output images and evaluate aesthetic quality
-4. If score < 7/10 or fails professional standards:
-   - Identify specific weaknesses (color, typography, layout, spacing, hierarchy)
-   - Refine prompt with improvements
-   - Regenerate with **ai-multimodal** or use **media-processing** skill to modify outputs (resize, crop, filters, composition)
-5. Repeat until aesthetic standards met (score ≥ 7/10)
-6. Document final design decisions using templates
-
-## Design Documentation
-
-### Create Design Guidelines
-Use [`assets/design-guideline-template.md`](assets/design-guideline-template.md) to document:
-- Color patterns & psychology
-- Typography system & hierarchy
-- Layout principles & spacing
-- Component styling standards
-- Accessibility considerations
-- Design highlights & rationale
-
-Save in project `./docs/design-guideline.md`.
-
-### Create Design Story
-Use [`assets/design-story-template.md`](assets/design-story-template.md) to document:
-- Narrative elements & themes
-- Emotional journey
-- User journey & peak moments
-- Design decision rationale
-
-Save in project `./docs/design-story.md`.
-
-## Resources & Integration
-
-### Related Skills
-- **ai-multimodal**: Analyze documents, screenshots & videos, generate design images, edit generated images, evaluate aesthetic quality using Gemini API
-- **chrome-devtools**: Capture full-screen screenshots from inspiration websites, navigate between pages, interact with elements, read console logs & network requests
-- **media-processing**: Refine generated images (FFmpeg for video, ImageMagick for images)
-- **ui-styling**: Implement designs with shadcn/ui components + Tailwind CSS utility-first styling
-- **web-frameworks**: Build with Next.js (App Router, Server Components, SSR/SSG)
-
-### Reference Documentation
-**References**: [`references/design-resources.md`](references/design-resources.md) - Inspiration platforms, design systems, AI tools, MCP integrations, development strategies.
-
-## Key Principles
-
-1. Aesthetic standards come from humans, not AI—study quality examples
-2. Iterate based on analysis—never settle for first output
-3. Balance beauty with functionality and accessibility
-4. Document decisions for consistency across development
-5. Use progressive disclosure in design—reveal complexity gradually
-6. Always evaluate aesthetic quality objectively (score ≥ 7/10)
+---
+name: aesthetic
+description: Create aesthetically beautiful interfaces following proven design principles. Use when building UI/UX, analyzing designs from inspiration sites, generating design images with ai-multimodal, implementing visual hierarchy and color theory, adding micro-interactions, or creating design documentation. Includes workflows for capturing and analyzing inspiration screenshots with chrome-devtools and ai-multimodal, iterative design image generation until aesthetic standards are met, and comprehensive design system guidance covering BEAUTIFUL (aesthetic principles), RIGHT (functionality/accessibility), SATISFYING (micro-interactions), and PEAK (storytelling) stages. Integrates with chrome-devtools, ai-multimodal, media-processing, ui-styling, and web-frameworks skills.
+---
+
+# Aesthetic
+
+Create aesthetically beautiful interfaces by following proven design principles and systematic workflows.
+
+## When to Use This Skill
+
+Use when:
+- Building or designing user interfaces
+- Analyzing designs from inspiration websites (Dribbble, Mobbin, Behance)
+- Generating design images and evaluating aesthetic quality
+- Implementing visual hierarchy, typography, color theory
+- Adding micro-interactions and animations
+- Creating design documentation and style guides
+- Need guidance on accessibility and design systems
+
+## Core Framework: Four-Stage Approach
+
+### 1. BEAUTIFUL: Understanding Aesthetics
+Study existing designs, identify patterns, extract principles. AI lacks aesthetic sense—standards must come from analyzing high-quality examples and aligning with market tastes.
+
+**Reference**: [`references/design-principles.md`](references/design-principles.md) - Visual hierarchy, typography, color theory, white space principles.
+
+### 2. RIGHT: Ensuring Functionality
+Beautiful designs lacking usability are worthless. Study design systems, component architecture, accessibility requirements.
+
+**Reference**: [`references/design-principles.md`](references/design-principles.md) - Design systems, component libraries, WCAG accessibility standards.
+
+### 3. SATISFYING: Micro-Interactions
+Incorporate subtle animations with appropriate timing (150-300ms), easing curves (ease-out for entry, ease-in for exit), sequential delays.
+
+**Reference**: [`references/micro-interactions.md`](references/micro-interactions.md) - Duration guidelines, easing curves, performance optimization.
+
+### 4. PEAK: Storytelling Through Design
+Elevate with narrative elements—parallax effects, particle systems, thematic consistency. Use restraint: "too much of anything isn't good."
+
+**Reference**: [`references/storytelling-design.md`](references/storytelling-design.md) - Narrative elements, scroll-based storytelling, interactive techniques.
+
+## Workflows
+
+### Workflow 1: Capture & Analyze Inspiration
+
+**Purpose**: Extract design guidelines from inspiration websites.
+
+**Steps**:
+1. Browse inspiration sites (Dribbble, Mobbin, Behance, Awwwards)
+2. Use **chrome-devtools** skill to capture full-screen screenshots (not full page)
+3. Use **ai-multimodal** skill to analyze screenshots and extract:
+   - Design style (Minimalism, Glassmorphism, Neo-brutalism, etc.)
+   - Layout structure & grid systems
+   - Typography system & hierarchy
+     **IMPORTANT:** Try to predict the font name (Google Fonts) and font size in the given screenshot, don't just use Inter or Poppins.
+   - Color palette with hex codes
+   - Visual hierarchy techniques
+   - Component patterns & styling
+   - Micro-interactions
+   - Accessibility considerations
+   - Overall aesthetic quality rating (1-10)
+4. Document findings in project design guidelines using templates
+
+### Workflow 2: Generate & Iterate Design Images
+
+**Purpose**: Create aesthetically pleasing design images through iteration.
+
+**Steps**:
+1. Define design prompt with: style, colors, typography, audience, animation specs
+2. Use **ai-multimodal** skill to generate design images with Gemini API
+3. Use **ai-multimodal** skill to analyze output images and evaluate aesthetic quality
+4. If score < 7/10 or fails professional standards:
+   - Identify specific weaknesses (color, typography, layout, spacing, hierarchy)
+   - Refine prompt with improvements
+   - Regenerate with **ai-multimodal** or use **media-processing** skill to modify outputs (resize, crop, filters, composition)
+5. Repeat until aesthetic standards met (score ≥ 7/10)
+6. Document final design decisions using templates
+
+## Design Documentation
+
+### Create Design Guidelines
+Use [`assets/design-guideline-template.md`](assets/design-guideline-template.md) to document:
+- Color patterns & psychology
+- Typography system & hierarchy
+- Layout principles & spacing
+- Component styling standards
+- Accessibility considerations
+- Design highlights & rationale
+
+Save in project `./docs/design-guideline.md`.
+
+### Create Design Story
+Use [`assets/design-story-template.md`](assets/design-story-template.md) to document:
+- Narrative elements & themes
+- Emotional journey
+- User journey & peak moments
+- Design decision rationale
+
+Save in project `./docs/design-story.md`.
+
+## Resources & Integration
+
+### Related Skills
+- **ai-multimodal**: Analyze documents, screenshots & videos, generate design images, edit generated images, evaluate aesthetic quality using Gemini API
+- **chrome-devtools**: Capture full-screen screenshots from inspiration websites, navigate between pages, interact with elements, read console logs & network requests
+- **media-processing**: Refine generated images (FFmpeg for video, ImageMagick for images)
+- **ui-styling**: Implement designs with shadcn/ui components + Tailwind CSS utility-first styling
+- **web-frameworks**: Build with Next.js (App Router, Server Components, SSR/SSG)
+
+### Reference Documentation
+**References**: [`references/design-resources.md`](references/design-resources.md) - Inspiration platforms, design systems, AI tools, MCP integrations, development strategies.
+
+## Key Principles
+
+1. Aesthetic standards come from humans, not AI—study quality examples
+2. Iterate based on analysis—never settle for first output
+3. Balance beauty with functionality and accessibility
+4. Document decisions for consistency across development
+5. Use progressive disclosure in design—reveal complexity gradually
+6. Always evaluate aesthetic quality objectively (score ≥ 7/10)

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

@@ -1,163 +1,163 @@
-# Design Guidelines: [Project Name]
-
-_Generated: [Date]_
-
-## Design Style
-
-[Specify: Minimalism, Glassmorphism, Neo-brutalism, Modern, Memphis, Flat Design, etc.]
-
-## Color Palette
-
-### Primary Colors
-- **Primary**: `#000000` - [Description/Usage]
-- **Secondary**: `#000000` - [Description/Usage]
-
-### Accent Colors
-- **Accent**: `#000000` - [Description/Usage]
-- **Success**: `#000000` - [Description/Usage]
-- **Warning**: `#000000` - [Description/Usage]
-- **Error**: `#000000` - [Description/Usage]
-
-### Neutral Colors
-- **Background**: `#000000` - [Description/Usage]
-- **Surface**: `#000000` - [Description/Usage]
-- **Border**: `#000000` - [Description/Usage]
-
-### Color Psychology
-[Explain mood and emotions evoked by color choices]
-
-## Typography System
-
-### Font Families
-- **Primary Font**: [Font Name] - Body text, paragraphs
-- **Secondary Font**: [Font Name] - Headings, emphasis
-- **Monospace Font**: [Font Name] - Code, technical content
-
-### Font Hierarchy
-- **H1**: [Size]px / [Weight] / [Line Height] - [Usage]
-- **H2**: [Size]px / [Weight] / [Line Height] - [Usage]
-- **H3**: [Size]px / [Weight] / [Line Height] - [Usage]
-- **Body**: [Size]px / [Weight] / [Line Height] - [Usage]
-- **Small**: [Size]px / [Weight] / [Line Height] - [Usage]
-
-### Typography Guidelines
-- Line length: [Character count] characters max
-- Paragraph spacing: [Value]
-- Letter spacing: [Value]
-
-## Layout Principles
-
-### Grid System
-- Columns: [Number]
-- Gutter: [Size]px
-- Margin: [Size]px
-- Max width: [Size]px
-
-### Spacing Scale
-- xs: [Size]px
-- sm: [Size]px
-- md: [Size]px
-- lg: [Size]px
-- xl: [Size]px
-- 2xl: [Size]px
-
-### Responsive Breakpoints
-- Mobile: [Width]px
-- Tablet: [Width]px
-- Desktop: [Width]px
-- Wide: [Width]px
-
-## Component Styling
-
-### Buttons
-- **Primary**: [Description of style]
-- **Secondary**: [Description of style]
-- **Ghost**: [Description of style]
-- **Sizes**: [List sizes]
-- **States**: Default, Hover, Active, Disabled
-
-### Cards
-- Border radius: [Value]
-- Shadow: [Value]
-- Padding: [Value]
-- Background: [Color]
-
-### Forms
-- Input height: [Value]
-- Border radius: [Value]
-- Focus state: [Description]
-- Error state: [Description]
-
-### Navigation
-- [Description of nav patterns]
-
-## Visual Hierarchy
-
-### Emphasis Techniques
-- [List how to draw attention: size, color, placement, etc.]
-
-### Content Flow
-- [Describe reading patterns: F-pattern, Z-pattern, etc.]
-
-## Micro-Interactions
-
-### Animation Timing
-- Fast: 150ms - [Usage]
-- Normal: 250ms - [Usage]
-- Slow: 350ms - [Usage]
-
-### Easing Curves
-- Ease-out: [Usage]
-- Ease-in: [Usage]
-- Spring: [Usage]
-
-### Interactive States
-- Hover: [Description]
-- Active: [Description]
-- Focus: [Description]
-- Loading: [Description]
-
-## Accessibility
-
-### Contrast Ratios
-- Text: [Ratio] (WCAG AA: 4.5:1 minimum)
-- Large text: [Ratio] (WCAG AA: 3:1 minimum)
-- UI elements: [Ratio]
-
-### Focus Indicators
-- [Description of focus styles]
-
-### Touch Targets
-- Minimum size: 44x44px
-
-## Design Highlights
-
-### What Works Well
-- [List successful design decisions]
-
-### Unique Elements
-- [List distinctive design features]
-
-### Brand Alignment
-- [Explain how design supports brand identity]
-
-## Implementation Notes
-
-### Technologies
-- [List frameworks, libraries, tools used]
-
-### Performance Considerations
-- [List optimization strategies]
-
-### Browser Support
-- [List supported browsers/versions]
-
-## Resources
-
-### Design Files
-- Figma: [Link]
-- Assets: [Link]
-
-### Related Documentation
-- [Link to design-story.md]
-- [Link to component library]
+# Design Guidelines: [Project Name]
+
+_Generated: [Date]_
+
+## Design Style
+
+[Specify: Minimalism, Glassmorphism, Neo-brutalism, Modern, Memphis, Flat Design, etc.]
+
+## Color Palette
+
+### Primary Colors
+- **Primary**: `#000000` - [Description/Usage]
+- **Secondary**: `#000000` - [Description/Usage]
+
+### Accent Colors
+- **Accent**: `#000000` - [Description/Usage]
+- **Success**: `#000000` - [Description/Usage]
+- **Warning**: `#000000` - [Description/Usage]
+- **Error**: `#000000` - [Description/Usage]
+
+### Neutral Colors
+- **Background**: `#000000` - [Description/Usage]
+- **Surface**: `#000000` - [Description/Usage]
+- **Border**: `#000000` - [Description/Usage]
+
+### Color Psychology
+[Explain mood and emotions evoked by color choices]
+
+## Typography System
+
+### Font Families
+- **Primary Font**: [Font Name] - Body text, paragraphs
+- **Secondary Font**: [Font Name] - Headings, emphasis
+- **Monospace Font**: [Font Name] - Code, technical content
+
+### Font Hierarchy
+- **H1**: [Size]px / [Weight] / [Line Height] - [Usage]
+- **H2**: [Size]px / [Weight] / [Line Height] - [Usage]
+- **H3**: [Size]px / [Weight] / [Line Height] - [Usage]
+- **Body**: [Size]px / [Weight] / [Line Height] - [Usage]
+- **Small**: [Size]px / [Weight] / [Line Height] - [Usage]
+
+### Typography Guidelines
+- Line length: [Character count] characters max
+- Paragraph spacing: [Value]
+- Letter spacing: [Value]
+
+## Layout Principles
+
+### Grid System
+- Columns: [Number]
+- Gutter: [Size]px
+- Margin: [Size]px
+- Max width: [Size]px
+
+### Spacing Scale
+- xs: [Size]px
+- sm: [Size]px
+- md: [Size]px
+- lg: [Size]px
+- xl: [Size]px
+- 2xl: [Size]px
+
+### Responsive Breakpoints
+- Mobile: [Width]px
+- Tablet: [Width]px
+- Desktop: [Width]px
+- Wide: [Width]px
+
+## Component Styling
+
+### Buttons
+- **Primary**: [Description of style]
+- **Secondary**: [Description of style]
+- **Ghost**: [Description of style]
+- **Sizes**: [List sizes]
+- **States**: Default, Hover, Active, Disabled
+
+### Cards
+- Border radius: [Value]
+- Shadow: [Value]
+- Padding: [Value]
+- Background: [Color]
+
+### Forms
+- Input height: [Value]
+- Border radius: [Value]
+- Focus state: [Description]
+- Error state: [Description]
+
+### Navigation
+- [Description of nav patterns]
+
+## Visual Hierarchy
+
+### Emphasis Techniques
+- [List how to draw attention: size, color, placement, etc.]
+
+### Content Flow
+- [Describe reading patterns: F-pattern, Z-pattern, etc.]
+
+## Micro-Interactions
+
+### Animation Timing
+- Fast: 150ms - [Usage]
+- Normal: 250ms - [Usage]
+- Slow: 350ms - [Usage]
+
+### Easing Curves
+- Ease-out: [Usage]
+- Ease-in: [Usage]
+- Spring: [Usage]
+
+### Interactive States
+- Hover: [Description]
+- Active: [Description]
+- Focus: [Description]
+- Loading: [Description]
+
+## Accessibility
+
+### Contrast Ratios
+- Text: [Ratio] (WCAG AA: 4.5:1 minimum)
+- Large text: [Ratio] (WCAG AA: 3:1 minimum)
+- UI elements: [Ratio]
+
+### Focus Indicators
+- [Description of focus styles]
+
+### Touch Targets
+- Minimum size: 44x44px
+
+## Design Highlights
+
+### What Works Well
+- [List successful design decisions]
+
+### Unique Elements
+- [List distinctive design features]
+
+### Brand Alignment
+- [Explain how design supports brand identity]
+
+## Implementation Notes
+
+### Technologies
+- [List frameworks, libraries, tools used]
+
+### Performance Considerations
+- [List optimization strategies]
+
+### Browser Support
+- [List supported browsers/versions]
+
+## Resources
+
+### Design Files
+- Figma: [Link]
+- Assets: [Link]
+
+### Related Documentation
+- [Link to design-story.md]
+- [Link to component library]