kiro-kit 0.1.0

package/dist/presets/frontend/skills/debugging/SKILL.md

@@ -0,0 +1,34 @@
+---
+name: debugging
+description: Systematic debugging framework for investigating root causes before applying fixes. Use when encountering bugs, test failures, or unexpected behavior.
+---
+
+# Debugging
+
+Activate this skill when encountering bugs, test failures, or unexpected behavior.
+
+## When to Use
+
+- Tests are failing unexpectedly
+- Runtime errors or crashes occur
+- Behavior does not match expectations
+- Performance degrades without obvious cause
+- Build or compilation errors appear
+
+## Process
+
+1. Reproduce the issue consistently
+2. Gather evidence (error messages, stack traces, logs)
+3. Form hypothesis about root cause
+4. Trace backward from the symptom to the source
+5. Validate hypothesis with targeted tests
+6. Apply minimal fix addressing root cause
+7. Verify fix resolves the issue without regressions
+
+## Rules
+
+- Never apply random fixes without understanding the cause
+- Measure and trace before changing code
+- If a fix attempt fails twice, step back and reconsider the hypothesis
+- Check recent changes (git log) as first investigation step
+- Isolate the problem to the smallest reproducible case

package/dist/presets/frontend/skills/docs-seeker/SKILL.md

@@ -0,0 +1,38 @@
+---
+name: docs-seeker
+description: Search and retrieve technical documentation for libraries, frameworks, and APIs. Use when you need current documentation for a specific package or technology.
+---
+
+# Docs Seeker
+
+Activate this skill when you need to find or reference documentation for libraries and frameworks.
+
+## When to Use
+
+- Looking up API documentation for a library
+- Finding usage examples for a package
+- Checking configuration options for a tool
+- Verifying function signatures and parameters
+- Finding migration guides between versions
+
+## Process
+
+1. Identify the library/framework and version
+2. Search official documentation sources
+3. Check for llms.txt or context7 sources
+4. Extract relevant API signatures and examples
+5. Summarize findings with links to sources
+
+## Sources Priority
+
+1. Official documentation site
+2. GitHub repository README and docs
+3. TypeScript type definitions
+4. Community examples and guides
+
+## Rules
+
+- Always note the version being referenced
+- Prefer TypeScript type definitions for API accuracy
+- Flag deprecated APIs or breaking changes
+- Include import statements in examples

package/dist/presets/frontend/skills/frontend-design/SKILL.md

@@ -0,0 +1,43 @@
+---
+name: frontend-design
+description: Create distinctive, production-grade frontend interfaces with high design quality. Use when building web components, pages, or applications that need polished visual design.
+---
+
+# Frontend Design
+
+Activate this skill when creating UI components, pages, or layouts that require high visual quality and design thinking.
+
+## When to Use
+
+- Building new pages or features that need visual design decisions
+- Creating component libraries or design systems
+- Implementing responsive layouts with mobile-first approach
+- Designing interactive elements with proper states and transitions
+- Reviewing existing UI for design improvements
+
+## Design Principles
+
+- Mobile-first responsive design (320px, 768px, 1024px, 1440px breakpoints)
+- Visual hierarchy through typography scale, spacing, and color
+- Consistent spacing using 4px/8px grid system
+- Purposeful use of whitespace for readability
+- Progressive disclosure of complex information
+- Accessible color contrast (WCAG 2.1 AA minimum)
+
+## Implementation Guidelines
+
+- Use semantic HTML elements for structure
+- Apply Tailwind CSS utility classes for styling
+- Implement proper focus states for keyboard navigation
+- Add hover/active states for interactive elements
+- Use CSS transitions for smooth state changes (150-300ms)
+- Respect prefers-reduced-motion for animations
+- Test across breakpoints before considering complete
+
+## Color Usage
+
+- Use design tokens from Tailwind config
+- Maintain consistent color semantics (primary, secondary, destructive)
+- Ensure 4.5:1 contrast ratio for normal text
+- Ensure 3:1 contrast ratio for large text and UI elements
+- Never use color as the sole indicator of state

package/dist/presets/frontend/skills/frontend-development/SKILL.md

@@ -0,0 +1,50 @@
+---
+name: frontend-development
+description: Build robust frontend systems with React, Next.js, and TypeScript. Use when implementing components, hooks, data fetching, state management, or optimizing frontend performance.
+---
+
+# Frontend Development
+
+Activate this skill when implementing React/Next.js features with TypeScript.
+
+## When to Use
+
+- Implementing React components (Server or Client)
+- Creating custom hooks for reusable logic
+- Setting up data fetching with TanStack Query or SWR
+- Managing application state (Zustand, Jotai, or React Context)
+- Optimizing rendering performance
+- Implementing form handling with React Hook Form + Zod
+
+## React Patterns
+
+- Prefer Server Components by default; use Client Components only when needed
+- Use composition over prop drilling
+- Implement error boundaries at route segments
+- Use Suspense for async data loading
+- Keep components focused (single responsibility)
+- Extract complex logic into custom hooks
+
+## TypeScript Standards
+
+- Strict mode enabled, no `any` types
+- Explicit prop interfaces for all components
+- Use generics for reusable utilities
+- Discriminated unions for complex state
+- Proper event handler typing (React.MouseEvent, etc.)
+
+## Data Fetching
+
+- Server Components: fetch directly with proper caching
+- Client Components: TanStack Query or SWR for cache management
+- Implement optimistic updates for mutations
+- Handle loading, error, and empty states explicitly
+- Use Suspense boundaries for streaming
+
+## Performance
+
+- Dynamic imports for route-level code splitting
+- React.memo only where measured benefit exists
+- useMemo/useCallback for expensive computations or stable references
+- Virtualize long lists (TanStack Virtual)
+- Optimize images with next/image

package/dist/presets/frontend/skills/mcp-builder/SKILL.md

@@ -0,0 +1,41 @@
+---
+name: mcp-builder
+description: Guide for creating MCP (Model Context Protocol) servers that enable LLMs to interact with external services. Use when building MCP server integrations.
+---
+
+# MCP Builder
+
+Activate this skill when building MCP servers to integrate external APIs or services.
+
+## When to Use
+
+- Creating a new MCP server for an API
+- Adding tools, prompts, or resources to an MCP server
+- Debugging MCP server connectivity
+- Designing tool schemas for LLM consumption
+
+## MCP Server Structure
+
+- Tools: functions the LLM can call
+- Resources: data the LLM can read
+- Prompts: pre-built prompt templates
+
+## Implementation (TypeScript)
+
+```typescript
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
+
+const server = new McpServer({ name: 'my-server', version: '1.0.0' });
+
+server.tool('tool-name', { param: z.string() }, async ({ param }) => {
+  return { content: [{ type: 'text', text: result }] };
+});
+```
+
+## Rules
+
+- Design tools with clear, specific names
+- Use Zod schemas for input validation
+- Handle errors gracefully with informative messages
+- Keep tool descriptions concise but complete
+- Test tools independently before integration

package/dist/presets/frontend/skills/mcp-management/SKILL.md

@@ -0,0 +1,40 @@
+---
+name: mcp-management
+description: Manage MCP servers -- discover, analyze, and execute tools from configured servers. Use when working with MCP integrations or discovering available capabilities.
+---
+
+# MCP Management
+
+Activate this skill when managing MCP server configurations or discovering capabilities.
+
+## When to Use
+
+- Discovering available MCP tools across servers
+- Configuring new MCP server connections
+- Troubleshooting MCP connectivity issues
+- Filtering tools for specific tasks
+- Managing multi-server environments
+
+## Configuration
+
+MCP servers are configured in `.kiro/settings/mcp.json`:
+
+```json
+{
+  "mcpServers": {
+    "server-name": {
+      "command": "npx",
+      "args": ["-y", "@package/mcp-server"],
+      "env": { "API_KEY": "${ENV_VAR}" }
+    }
+  }
+}
+```
+
+## Rules
+
+- Verify server availability before execution
+- Never expose credentials in tool output
+- Use environment variables for sensitive values
+- Test tool parameters against schema before calling
+- Handle timeouts and connection failures gracefully

package/dist/presets/frontend/skills/media-processing/SKILL.md

@@ -0,0 +1,41 @@
+---
+name: media-processing
+description: Process multimedia files with FFmpeg and ImageMagick for format conversion, optimization, and manipulation. Use when working with images, video, or audio assets.
+---
+
+# Media Processing
+
+Activate this skill when processing images, video, or audio files.
+
+## When to Use
+
+- Converting image formats (PNG to WebP, SVG to PNG)
+- Optimizing images for web (compression, resizing)
+- Processing video files (encoding, thumbnails)
+- Batch processing media assets
+- Creating responsive image sets
+
+## Image Optimization for Web
+
+```bash
+# Convert to WebP with quality
+magick input.png -quality 80 output.webp
+
+# Resize for responsive images
+magick input.png -resize 640x output-sm.webp
+magick input.png -resize 1280x output-md.webp
+magick input.png -resize 1920x output-lg.webp
+
+# Generate favicon set
+magick input.png -resize 16x16 favicon-16.png
+magick input.png -resize 32x32 favicon-32.png
+magick input.png -resize 180x180 apple-touch-icon.png
+```
+
+## Rules
+
+- Always optimize images for web delivery
+- Use WebP or AVIF for modern browsers
+- Provide fallback formats for older browsers
+- Maintain aspect ratios when resizing
+- Use appropriate quality settings (80% for photos, lossless for UI)

package/dist/presets/frontend/skills/planning/SKILL.md

@@ -0,0 +1,39 @@
+---
+name: planning
+description: Plan technical solutions that are scalable, secure, and maintainable. Use when you need to decompose features, evaluate approaches, or create implementation plans.
+---
+
+# Planning
+
+Activate this skill when planning features, evaluating approaches, or creating implementation strategies.
+
+## When to Use
+
+- Starting a new feature or project
+- Evaluating multiple technical approaches
+- Decomposing complex requirements into tasks
+- Assessing risks and dependencies
+- Creating time-boxed implementation plans
+
+## Process
+
+1. Define success criteria and constraints
+2. Research relevant patterns and prior art
+3. Decompose into phases (3-7 typical)
+4. Identify dependencies and critical path
+5. Assess risks and define mitigations
+6. Create actionable task list with time estimates
+7. Document unresolved questions
+
+## Output Format
+
+Plans go in `plans/YYYYMMDD-HHmm-plan-name/`:
+- `plan.md`: overview, phase list, status tracking
+- `phase-XX-name.md`: detailed phase specifications
+
+## Rules
+
+- Every task should be completable in 30 min to 2 hours
+- Plans must be actionable, not aspirational
+- Include rollback strategy for risky phases
+- Apply YAGNI: plan only what is needed now

package/dist/presets/frontend/skills/problem-solving/SKILL.md

@@ -0,0 +1,37 @@
+---
+name: problem-solving
+description: Apply systematic problem-solving techniques for complexity spirals, innovation blocks, and recurring patterns. Use when stuck or facing unfamiliar challenges.
+---
+
+# Problem Solving
+
+Activate this skill when stuck, facing complexity spirals, or encountering recurring issues.
+
+## When to Use
+
+- Complexity is spiraling out of control
+- Innovation is blocked by assumptions
+- Same problem keeps recurring
+- Scale or scope is uncertain
+- Multiple approaches have failed
+
+## Techniques
+
+### Simplification Cascade
+When complexity spirals: strip the problem to its simplest form, solve that, then add complexity back one layer at a time.
+
+### Inversion Exercise
+When constrained by assumptions: invert the problem. Instead of "how to make X faster," ask "what makes X slow?"
+
+### Meta-Pattern Recognition
+When patterns recur: look for the pattern behind the patterns. What structural issue causes this to keep happening?
+
+### Scale Game
+When scale is uncertain: solve for 1, then 10, then 1000. Where does the approach break?
+
+## Rules
+
+- Try the simplest approach first
+- If stuck after 2 attempts, change strategy entirely
+- Document what was tried and why it failed
+- Ask "what would make this trivial?" before adding complexity

package/dist/presets/frontend/skills/repomix/SKILL.md

@@ -0,0 +1,39 @@
+---
+name: repomix
+description: Package code repositories into single AI-friendly files for analysis. Use when you need to understand a codebase structure or prepare context for analysis.
+---
+
+# Repomix
+
+Activate this skill when packaging codebases for analysis or generating repository summaries.
+
+## When to Use
+
+- Analyzing unfamiliar codebase structure
+- Creating repository snapshots for context
+- Generating documentation from code
+- Preparing codebase for security audit
+- Understanding third-party library internals
+
+## Usage
+
+```bash
+# Pack current directory
+repomix
+
+# Pack with specific includes
+repomix --include "src/**/*.ts"
+
+# Pack remote repository
+repomix --remote https://github.com/user/repo
+
+# Output as markdown
+repomix --style markdown
+```
+
+## Rules
+
+- Use include/exclude patterns to focus on relevant code
+- Output goes to `repomix-output.xml` by default
+- Use for understanding, not for copying code
+- Respect license terms of analyzed repositories

package/dist/presets/frontend/skills/research/SKILL.md

@@ -0,0 +1,34 @@
+---
+name: research
+description: Research and analyze technical solutions, libraries, and best practices. Use when evaluating options, finding documentation, or investigating unfamiliar technologies.
+---
+
+# Research
+
+Activate this skill when researching technologies, evaluating libraries, or finding best practices.
+
+## When to Use
+
+- Evaluating competing libraries or frameworks
+- Finding official documentation for a technology
+- Investigating best practices for a pattern
+- Comparing approaches with trade-off analysis
+- Checking compatibility and version requirements
+
+## Process
+
+1. Define the research question clearly
+2. Search authoritative sources (official docs first)
+3. Cross-reference multiple sources for accuracy
+4. Evaluate applicability to the current project
+5. Summarize findings with confidence levels
+6. List unresolved questions
+
+## Rules
+
+- Prioritize official documentation over blog posts
+- Note version numbers and compatibility
+- Distinguish proven patterns from experimental ones
+- Flag security concerns in dependencies
+- Be honest about confidence levels
+- Do NOT implement -- only research and report

package/dist/presets/frontend/skills/sequential-thinking/SKILL.md

@@ -0,0 +1,33 @@
+---
+name: sequential-thinking
+description: Apply structured, reflective problem-solving for complex tasks requiring multi-step analysis and revision. Use for complex decomposition or when you need to think step by step.
+---
+
+# Sequential Thinking
+
+Activate this skill for complex problems requiring structured, step-by-step reasoning.
+
+## When to Use
+
+- Complex problem decomposition
+- Multi-step analysis requiring course correction
+- Problems with unclear scope or requirements
+- Hypothesis-driven investigation
+- Architecture decisions with many trade-offs
+
+## Process
+
+1. State the problem clearly in one sentence
+2. Identify what you know and what you need to find out
+3. Break into sequential steps, each building on the previous
+4. At each step, validate assumptions before proceeding
+5. If a step reveals new information, revise earlier conclusions
+6. Summarize findings and recommended action
+
+## Rules
+
+- Each step must be independently verifiable
+- Revise earlier steps when new evidence contradicts them
+- State confidence level at each step
+- Identify decision points and their trade-offs
+- Keep the chain of reasoning visible and traceable

package/dist/presets/frontend/skills/skill-creator/SKILL.md

@@ -0,0 +1,55 @@
+---
+name: skill-creator
+description: Guide for creating effective agent skills with proper structure, front-matter, and progressive disclosure. Use when creating or updating skills.
+---
+
+# Skill Creator
+
+Activate this skill when creating or updating agent skills.
+
+## When to Use
+
+- Creating a new skill from scratch
+- Updating an existing skill with new content
+- Optimizing a skill for token efficiency
+- Structuring skill references and scripts
+
+## Skill Structure
+
+```
+skills/[skill-name]/
+  SKILL.md              Main skill file (front-matter + instructions)
+  references/           Additional documentation files
+  scripts/              Executable scripts for the skill
+  assets/               Static assets (images, configs)
+```
+
+## SKILL.md Format
+
+```markdown
+---
+name: skill-name
+description: When to activate and what it provides.
+---
+
+# Skill Name
+
+Brief overview.
+
+## When to Use
+Activation scenarios.
+
+## Instructions
+Core knowledge and workflows.
+
+## References
+Pointers to reference files.
+```
+
+## Rules
+
+- Keep SKILL.md concise for token efficiency
+- Use progressive disclosure (overview in SKILL.md, details in references)
+- Front-matter must have `name` and `description`
+- Description should clearly state activation triggers
+- Include practical examples over abstract theory

package/dist/presets/frontend/skills/template-skill/SKILL.md

@@ -0,0 +1,20 @@
+---
+name: template-skill
+description: Replace with description of when this skill should activate and what it provides.
+---
+
+# Template Skill
+
+Replace this content with the skill instructions.
+
+## When to Use
+
+Describe the scenarios where this skill should be activated.
+
+## Instructions
+
+Provide the specialized knowledge, workflows, or tool usage patterns here.
+
+## References
+
+Additional documentation is available in the `references/` directory.

package/dist/presets/frontend/skills/threejs/SKILL.md

@@ -0,0 +1,65 @@
+---
+name: threejs
+description: Build 3D web experiences with Three.js including scenes, cameras, geometries, materials, lights, animations, and post-processing. Use when creating 3D visualizations or interactive graphics.
+---
+
+# Three.js
+
+Activate this skill when building 3D web experiences, visualizations, or interactive graphics.
+
+## When to Use
+
+- Creating 3D scenes and visualizations
+- Building interactive product configurators
+- Implementing animated backgrounds or hero sections
+- Working with WebGL shaders and materials
+- Loading and displaying 3D models (glTF, FBX)
+- Adding post-processing effects
+
+## Core Concepts
+
+- Scene: container for all 3D objects
+- Camera: PerspectiveCamera for most use cases
+- Renderer: WebGLRenderer with proper sizing and pixel ratio
+- Geometry: shape definition (BoxGeometry, SphereGeometry, custom)
+- Material: surface appearance (MeshStandardMaterial for PBR)
+- Light: illumination (AmbientLight + DirectionalLight minimum)
+
+## React Integration (React Three Fiber)
+
+```tsx
+import { Canvas } from '@react-three/fiber';
+import { OrbitControls, Environment } from '@react-three/drei';
+
+function Scene() {
+  return (
+    <Canvas camera={{ position: [0, 0, 5] }}>
+      <ambientLight intensity={0.5} />
+      <directionalLight position={[10, 10, 5]} />
+      <mesh>
+        <boxGeometry args={[1, 1, 1]} />
+        <meshStandardMaterial color="orange" />
+      </mesh>
+      <OrbitControls />
+      <Environment preset="studio" />
+    </Canvas>
+  );
+}
+```
+
+## Performance
+
+- Use instancing for repeated geometries
+- Implement LOD (Level of Detail) for complex scenes
+- Dispose geometries and materials when unmounting
+- Use compressed textures (KTX2, Basis)
+- Limit draw calls and polygon count
+- Use `useFrame` for animations (not setInterval)
+
+## Best Practices
+
+- Always dispose resources on cleanup
+- Use drei helpers for common patterns
+- Implement proper loading states for models
+- Handle WebGL context loss gracefully
+- Test on mobile devices for performance

package/dist/presets/frontend/skills/ui-styling/SKILL.md

@@ -0,0 +1,49 @@
+---
+name: ui-styling
+description: Create accessible user interfaces with shadcn/ui components, Tailwind CSS utility-first styling, and Radix UI primitives. Use when building or styling UI components.
+---
+
+# UI Styling
+
+Activate this skill when styling components or building UI with Tailwind CSS and shadcn/ui.
+
+## When to Use
+
+- Styling React components with Tailwind CSS
+- Using shadcn/ui component library
+- Implementing dark mode and theme switching
+- Creating responsive layouts
+- Building accessible form controls
+- Customizing design tokens and theme
+
+## Tailwind CSS Patterns
+
+- Use utility classes directly in JSX
+- Extract repeated patterns with `@apply` sparingly (prefer components)
+- Use `cn()` utility for conditional class merging (clsx + tailwind-merge)
+- Responsive: mobile-first with `sm:`, `md:`, `lg:`, `xl:` prefixes
+- Dark mode: use `dark:` variant with class strategy
+- Use CSS variables for dynamic theming
+
+## shadcn/ui Usage
+
+- Install components individually: `npx shadcn@latest add [component]`
+- Components are copied into your project (not a dependency)
+- Customize via `components/ui/` directory
+- Built on Radix UI primitives (accessible by default)
+- Style with Tailwind CSS and CSS variables
+
+## Accessibility
+
+- All interactive elements must be keyboard accessible
+- Use proper ARIA attributes from Radix primitives
+- Maintain focus management in dialogs and popovers
+- Color contrast meets WCAG 2.1 AA standards
+- Form inputs have associated labels and error messages
+
+## Theme Configuration
+
+- Define colors in `tailwind.config.ts` using CSS variables
+- Use semantic color names (primary, secondary, muted, destructive)
+- Support light and dark modes via CSS variables
+- Consistent spacing scale (4px base unit)