kiro-kit 0.1.3 → 0.2.1

package/dist/presets/frontend/metadata.json

@@ -0,0 +1,15 @@
+{
+  "version": "1.0.1",
+  "name": "claudekit-engineer",
+  "description": "A comprehensive boilerplate template for building professional software projects with CLI Coding Agents (Kiro and Open Code).",
+  "buildDate": "2025-11-26T07:40:39.469Z",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/truongtv22/claudekit-engineer.git"
+  },
+  "download": {
+    "lastDownloadedAt": null,
+    "downloadedBy": null,
+    "installCount": 0
+  }
+}

package/dist/presets/frontend/skills/aesthetic/assets/design-guideline-template.md

@@ -0,0 +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]

package/dist/presets/frontend/skills/aesthetic/assets/design-story-template.md

@@ -0,0 +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.

package/dist/presets/frontend/skills/aesthetic/references/design-principles.md

@@ -0,0 +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

package/dist/presets/frontend/skills/aesthetic/references/design-resources.md

@@ -0,0 +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 Kiro to follow guidelines consistently.

package/dist/presets/frontend/skills/aesthetic/references/micro-interactions.md

@@ -0,0 +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.

package/dist/presets/frontend/skills/aesthetic/references/storytelling-design.md

@@ -0,0 +1,50 @@
+# Storytelling Design: Peak Experience
+
+## PEAK: Storytelling Through Design
+
+### Narrative Elements
+Elevate designs by incorporating story-driven interactions:
+- **Parallax effects**: Different scroll speeds create depth
+- **Particle systems**: Dynamic, living background elements
+- **Thematic consistency**: Every element reinforces the narrative
+- **Progressive disclosure**: Reveal information as user explores
+
+### Key Principle
+"Too much of anything isn't good"—use restraint. Peak moments should be intentional, not overwhelming.
+
+### Implementation Approaches
+
+**Scroll-Based Storytelling**:
+- Reveal content in meaningful sequences
+- Use scroll position to trigger animations
+- Create depth with parallax layers
+- Build anticipation through pacing
+
+**Interactive Elements**:
+- Hover states that reveal additional context
+- Click interactions that unfold stories
+- Drag interactions that manipulate narrative elements
+- Gesture-based reveals on mobile
+
+**Visual Narrative**:
+- Hero sections that set tone
+- Consistent visual metaphors throughout
+- Imagery that supports the message
+- Typography that reinforces brand personality
+
+### Technical Considerations
+- Ensure storytelling enhances, not hinders, usability
+- Maintain performance (60fps) during narrative elements
+- Provide accessibility alternatives
+- Test across devices & screen sizes
+- Graceful degradation for older browsers
+
+### Inspiration Sources
+Study award-winning sites like:
+- Awwwards.com winners
+- CSS Design Awards
+- FWA (Favourite Website Awards)
+- Brand campaign sites
+
+### Balance
+Strong storytelling + solid functionality = peak experience. Neither should sacrifice the other.

package/dist/presets/frontend/skills/ai-multimodal/.env.example

@@ -0,0 +1,97 @@
+# Google Gemini API Configuration
+
+# ============================================================================
+# OPTION 1: Google AI Studio (Default - Recommended for most users)
+# ============================================================================
+# Get your API key: https://aistudio.google.com/apikey
+GEMINI_API_KEY=your_api_key_here
+
+# ============================================================================
+# OPTION 2: Vertex AI (Google Cloud Platform)
+# ============================================================================
+# Uncomment these lines to use Vertex AI instead of Google AI Studio
+# GEMINI_USE_VERTEX=true
+# VERTEX_PROJECT_ID=your-gcp-project-id
+# VERTEX_LOCATION=us-central1
+
+# ============================================================================
+# Model Selection (Optional)
+# ============================================================================
+# Override default model for specific tasks
+# Default: gemini-2.5-flash for most tasks
+# GEMINI_MODEL=gemini-2.5-flash
+# GEMINI_IMAGE_GEN_MODEL=gemini-2.5-flash-image
+
+# ============================================================================
+# Rate Limiting Configuration (Optional)
+# ============================================================================
+# Requests per minute limit (adjust based on your tier)
+# GEMINI_RPM_LIMIT=15
+
+# Tokens per minute limit
+# GEMINI_TPM_LIMIT=4000000
+
+# Requests per day limit
+# GEMINI_RPD_LIMIT=1500
+
+# ============================================================================
+# Processing Options (Optional)
+# ============================================================================
+# Video resolution mode: default or low-res
+# low-res uses ~100 tokens/second vs ~300 for default
+# GEMINI_VIDEO_RESOLUTION=default
+
+# Audio quality: default (16 Kbps mono, auto-downsampled)
+# GEMINI_AUDIO_QUALITY=default
+
+# PDF processing mode: inline (<20MB) or file-api (>20MB, automatic)
+# GEMINI_PDF_MODE=auto
+
+# ============================================================================
+# Retry Configuration (Optional)
+# ============================================================================
+# Maximum retry attempts for failed requests
+# GEMINI_MAX_RETRIES=3
+
+# Initial retry delay in seconds (uses exponential backoff)
+# GEMINI_RETRY_DELAY=1
+
+# ============================================================================
+# Output Configuration (Optional)
+# ============================================================================
+# Default output directory for generated images
+# OUTPUT_DIR=./output
+
+# Image output format (png or jpeg)
+# IMAGE_FORMAT=png
+
+# Image quality for JPEG (1-100)
+# IMAGE_QUALITY=95
+
+# ============================================================================
+# Context Caching (Optional)
+# ============================================================================
+# Enable context caching for repeated queries on same file
+# GEMINI_ENABLE_CACHING=true
+
+# Cache TTL in seconds (default: 1800 = 30 minutes)
+# GEMINI_CACHE_TTL=1800
+
+# ============================================================================
+# Logging (Optional)
+# ============================================================================
+# Log level: DEBUG, INFO, WARNING, ERROR, CRITICAL
+# LOG_LEVEL=INFO
+
+# Log file path
+# LOG_FILE=./logs/gemini.log
+
+# ============================================================================
+# Notes
+# ============================================================================
+# 1. Never commit API keys to version control
+# 2. Add .env to .gitignore
+# 3. API keys can be restricted in Google Cloud Console
+# 4. Monitor usage at: https://aistudio.google.com/apikey
+# 5. Free tier limits: 15 RPM, 1M-4M TPM, 1,500 RPD
+# 6. Vertex AI requires GCP authentication via gcloud CLI