kiro-kit 0.1.0

package/dist/presets/frontend/hooks/scout-block.ps1

@@ -0,0 +1,26 @@
+# Security guard: blocks dangerous commands before execution.
+# Registered as PreToolUse hook.
+
+$Input = $args -join ' '
+
+$BlockedPatterns = @(
+    'rm\s+(-rf|-fr)\s+[\/~]'
+    'drop\s+(database|table|schema)'
+    'truncate\s+table'
+    'format\s+[a-z]:'
+    'mkfs\.'
+    'dd\s+if=.*of=\/dev'
+    'chmod\s+-R\s+777\s+\/'
+    'shutdown'
+    'reboot'
+    'init\s+0'
+)
+
+foreach ($pattern in $BlockedPatterns) {
+    if ($Input -match $pattern) {
+        Write-Error "[scout-block] Blocked dangerous command: $Input"
+        exit 2
+    }
+}
+
+exit 0

package/dist/presets/frontend/hooks/scout-block.sh

@@ -0,0 +1,31 @@
+#!/usr/bin/env bash
+# Security guard: blocks dangerous commands before execution.
+# Registered as PreToolUse hook.
+
+INPUT="$*"
+
+BLOCKED_PATTERNS=(
+  "rm -rf /"
+  "rm -fr /"
+  "rm -rf ~"
+  "rm -rf ."
+  "drop database"
+  "drop table"
+  "truncate table"
+  "mkfs."
+  "dd if="
+  "chmod -R 777 /"
+  "shutdown"
+  "reboot"
+  "init 0"
+  "format c:"
+)
+
+for pattern in "${BLOCKED_PATTERNS[@]}"; do
+  if echo "$INPUT" | grep -qi "$pattern"; then
+    echo "[scout-block] Blocked dangerous command: $INPUT" >&2
+    exit 2
+  fi
+done
+
+exit 0

package/dist/presets/frontend/hooks/telegram-notify.js

@@ -0,0 +1,30 @@
+#!/usr/bin/env node
+// Sends a notification to Telegram via bot API.
+// Requires TELEGRAM_BOT_TOKEN and TELEGRAM_CHAT_ID in environment.
+
+const https = require('https');
+
+const TOKEN = process.env.TELEGRAM_BOT_TOKEN || '';
+const CHAT_ID = process.env.TELEGRAM_CHAT_ID || '';
+const message = process.argv.slice(2).join(' ') || 'Agent task completed.';
+
+if (!TOKEN || !CHAT_ID) {
+  process.stderr.write('[telegram-notify] TELEGRAM_BOT_TOKEN or TELEGRAM_CHAT_ID not set. Skipping.\n');
+  process.exit(0);
+}
+
+const payload = JSON.stringify({ chat_id: CHAT_ID, text: message });
+const options = {
+  hostname: 'api.telegram.org',
+  path: `/bot${TOKEN}/sendMessage`,
+  method: 'POST',
+  headers: { 'Content-Type': 'application/json', 'Content-Length': Buffer.byteLength(payload) },
+};
+
+const req = https.request(options, (res) => {
+  process.exit(res.statusCode >= 200 && res.statusCode < 300 ? 0 : 1);
+});
+
+req.on('error', () => process.exit(1));
+req.write(payload);
+req.end();

package/dist/presets/frontend/hooks/telegram-notify.ps1

@@ -0,0 +1,22 @@
+# Sends a notification to Telegram via bot API.
+# Requires TELEGRAM_BOT_TOKEN and TELEGRAM_CHAT_ID in environment.
+
+$Message = if ($args.Count -gt 0) { $args -join ' ' } else { 'Agent task completed.' }
+
+$Token = $env:TELEGRAM_BOT_TOKEN
+$ChatId = $env:TELEGRAM_CHAT_ID
+
+if (-not $Token -or -not $ChatId) {
+    Write-Error "[telegram-notify] TELEGRAM_BOT_TOKEN or TELEGRAM_CHAT_ID not set. Skipping."
+    exit 0
+}
+
+$Body = @{ chat_id = $ChatId; text = $Message } | ConvertTo-Json
+$Uri = "https://api.telegram.org/bot$Token/sendMessage"
+
+try {
+    Invoke-RestMethod -Uri $Uri -Method Post -Body $Body -ContentType 'application/json'
+    exit 0
+} catch {
+    exit 1
+}

package/dist/presets/frontend/hooks/telegram-notify.sh

@@ -0,0 +1,16 @@
+#!/usr/bin/env bash
+# Sends a notification to Telegram via bot API.
+# Requires TELEGRAM_BOT_TOKEN and TELEGRAM_CHAT_ID in environment.
+
+MESSAGE="${*:-Agent task completed.}"
+
+if [ -z "$TELEGRAM_BOT_TOKEN" ] || [ -z "$TELEGRAM_CHAT_ID" ]; then
+  echo "[telegram-notify] TELEGRAM_BOT_TOKEN or TELEGRAM_CHAT_ID not set. Skipping." >&2
+  exit 0
+fi
+
+curl -s -o /dev/null -w "%{http_code}" \
+  -H "Content-Type: application/json" \
+  -d "{\"chat_id\": \"$TELEGRAM_CHAT_ID\", \"text\": \"$MESSAGE\"}" \
+  "https://api.telegram.org/bot${TELEGRAM_BOT_TOKEN}/sendMessage" \
+  | grep -q "^2" && exit 0 || exit 1

package/dist/presets/frontend/manifest.json

@@ -0,0 +1,151 @@
+{
+  "name": "frontend",
+  "version": "1.0.0",
+  "description": "Comprehensive kit for React/Next.js + TypeScript frontend development with 20 agents, 21 skills, and frontend-specific tooling",
+  "category": "frontend",
+  "files": [
+    { "source": "agents/accessibility-auditor.md", "target": ".kiro/agents/accessibility-auditor.md", "type": "agent" },
+    { "source": "agents/brainstormer.md", "target": ".kiro/agents/brainstormer.md", "type": "agent" },
+    { "source": "agents/code-reviewer.md", "target": ".kiro/agents/code-reviewer.md", "type": "agent" },
+    { "source": "agents/component-architect.md", "target": ".kiro/agents/component-architect.md", "type": "agent" },
+    { "source": "agents/copywriter.md", "target": ".kiro/agents/copywriter.md", "type": "agent" },
+    { "source": "agents/database-admin.md", "target": ".kiro/agents/database-admin.md", "type": "agent" },
+    { "source": "agents/debugger.md", "target": ".kiro/agents/debugger.md", "type": "agent" },
+    { "source": "agents/docs-manager.md", "target": ".kiro/agents/docs-manager.md", "type": "agent" },
+    { "source": "agents/frontend-developer.md", "target": ".kiro/agents/frontend-developer.md", "type": "agent" },
+    { "source": "agents/git-manager.md", "target": ".kiro/agents/git-manager.md", "type": "agent" },
+    { "source": "agents/journal-writer.md", "target": ".kiro/agents/journal-writer.md", "type": "agent" },
+    { "source": "agents/mcp-manager.md", "target": ".kiro/agents/mcp-manager.md", "type": "agent" },
+    { "source": "agents/performance-optimizer.md", "target": ".kiro/agents/performance-optimizer.md", "type": "agent" },
+    { "source": "agents/planner.md", "target": ".kiro/agents/planner.md", "type": "agent" },
+    { "source": "agents/project-manager.md", "target": ".kiro/agents/project-manager.md", "type": "agent" },
+    { "source": "agents/researcher.md", "target": ".kiro/agents/researcher.md", "type": "agent" },
+    { "source": "agents/scout-external.md", "target": ".kiro/agents/scout-external.md", "type": "agent" },
+    { "source": "agents/scout.md", "target": ".kiro/agents/scout.md", "type": "agent" },
+    { "source": "agents/tester.md", "target": ".kiro/agents/tester.md", "type": "agent" },
+    { "source": "agents/ui-ux-designer.md", "target": ".kiro/agents/ui-ux-designer.md", "type": "agent" },
+    { "source": "skills/aesthetic/SKILL.md", "target": ".kiro/skills/aesthetic/SKILL.md", "type": "skill" },
+    { "source": "skills/ai-multimodal/SKILL.md", "target": ".kiro/skills/ai-multimodal/SKILL.md", "type": "skill" },
+    { "source": "skills/chrome-devtools/SKILL.md", "target": ".kiro/skills/chrome-devtools/SKILL.md", "type": "skill" },
+    { "source": "skills/code-review/SKILL.md", "target": ".kiro/skills/code-review/SKILL.md", "type": "skill" },
+    { "source": "skills/debugging/SKILL.md", "target": ".kiro/skills/debugging/SKILL.md", "type": "skill" },
+    { "source": "skills/docs-seeker/SKILL.md", "target": ".kiro/skills/docs-seeker/SKILL.md", "type": "skill" },
+    { "source": "skills/frontend-design/SKILL.md", "target": ".kiro/skills/frontend-design/SKILL.md", "type": "skill" },
+    { "source": "skills/frontend-development/SKILL.md", "target": ".kiro/skills/frontend-development/SKILL.md", "type": "skill" },
+    { "source": "skills/mcp-builder/SKILL.md", "target": ".kiro/skills/mcp-builder/SKILL.md", "type": "skill" },
+    { "source": "skills/mcp-management/SKILL.md", "target": ".kiro/skills/mcp-management/SKILL.md", "type": "skill" },
+    { "source": "skills/media-processing/SKILL.md", "target": ".kiro/skills/media-processing/SKILL.md", "type": "skill" },
+    { "source": "skills/planning/SKILL.md", "target": ".kiro/skills/planning/SKILL.md", "type": "skill" },
+    { "source": "skills/problem-solving/SKILL.md", "target": ".kiro/skills/problem-solving/SKILL.md", "type": "skill" },
+    { "source": "skills/repomix/SKILL.md", "target": ".kiro/skills/repomix/SKILL.md", "type": "skill" },
+    { "source": "skills/research/SKILL.md", "target": ".kiro/skills/research/SKILL.md", "type": "skill" },
+    { "source": "skills/sequential-thinking/SKILL.md", "target": ".kiro/skills/sequential-thinking/SKILL.md", "type": "skill" },
+    { "source": "skills/skill-creator/SKILL.md", "target": ".kiro/skills/skill-creator/SKILL.md", "type": "skill" },
+    { "source": "skills/template-skill/SKILL.md", "target": ".kiro/skills/template-skill/SKILL.md", "type": "skill" },
+    { "source": "skills/threejs/SKILL.md", "target": ".kiro/skills/threejs/SKILL.md", "type": "skill" },
+    { "source": "skills/ui-styling/SKILL.md", "target": ".kiro/skills/ui-styling/SKILL.md", "type": "skill" },
+    { "source": "skills/web-frameworks/SKILL.md", "target": ".kiro/skills/web-frameworks/SKILL.md", "type": "skill" },
+    { "source": "skills/README.md", "target": ".kiro/skills/README.md", "type": "doc" },
+    { "source": "skills/INSTALLATION.md", "target": ".kiro/skills/INSTALLATION.md", "type": "doc" },
+    { "source": "skills/THIRD_PARTY_NOTICES.md", "target": ".kiro/skills/THIRD_PARTY_NOTICES.md", "type": "doc" },
+    { "source": "skills/agent_skills_spec.md", "target": ".kiro/skills/agent_skills_spec.md", "type": "doc" },
+    { "source": "skills/.env.example", "target": ".kiro/skills/.env.example", "type": "config" },
+    { "source": "commands/bootstrap.md", "target": ".kiro/commands/bootstrap.md", "type": "command" },
+    { "source": "commands/clean.md", "target": ".kiro/commands/clean.md", "type": "command" },
+    { "source": "commands/lint.md", "target": ".kiro/commands/lint.md", "type": "command" },
+    { "source": "commands/release.md", "target": ".kiro/commands/release.md", "type": "command" },
+    { "source": "commands/scout.md", "target": ".kiro/commands/scout.md", "type": "command" },
+    { "source": "commands/test.md", "target": ".kiro/commands/test.md", "type": "command" },
+    { "source": "commands/design/figma.md", "target": ".kiro/commands/design/figma.md", "type": "command" },
+    { "source": "commands/design/system.md", "target": ".kiro/commands/design/system.md", "type": "command" },
+    { "source": "commands/design/wireframe.md", "target": ".kiro/commands/design/wireframe.md", "type": "command" },
+    { "source": "commands/docs/architecture.md", "target": ".kiro/commands/docs/architecture.md", "type": "command" },
+    { "source": "commands/docs/summarize.md", "target": ".kiro/commands/docs/summarize.md", "type": "command" },
+    { "source": "commands/docs/update.md", "target": ".kiro/commands/docs/update.md", "type": "command" },
+    { "source": "commands/fix/build.md", "target": ".kiro/commands/fix/build.md", "type": "command" },
+    { "source": "commands/fix/lint.md", "target": ".kiro/commands/fix/lint.md", "type": "command" },
+    { "source": "commands/fix/tests.md", "target": ".kiro/commands/fix/tests.md", "type": "command" },
+    { "source": "commands/frontend/component.md", "target": ".kiro/commands/frontend/component.md", "type": "command" },
+    { "source": "commands/frontend/hook.md", "target": ".kiro/commands/frontend/hook.md", "type": "command" },
+    { "source": "commands/frontend/layout.md", "target": ".kiro/commands/frontend/layout.md", "type": "command" },
+    { "source": "commands/frontend/page.md", "target": ".kiro/commands/frontend/page.md", "type": "command" },
+    { "source": "commands/git/branch.md", "target": ".kiro/commands/git/branch.md", "type": "command" },
+    { "source": "commands/git/commit.md", "target": ".kiro/commands/git/commit.md", "type": "command" },
+    { "source": "commands/git/pr.md", "target": ".kiro/commands/git/pr.md", "type": "command" },
+    { "source": "commands/plan/feature.md", "target": ".kiro/commands/plan/feature.md", "type": "command" },
+    { "source": "commands/plan/refactor.md", "target": ".kiro/commands/plan/refactor.md", "type": "command" },
+    { "source": "commands/review/code.md", "target": ".kiro/commands/review/code.md", "type": "command" },
+    { "source": "commands/review/security.md", "target": ".kiro/commands/review/security.md", "type": "command" },
+    { "source": "commands/scout/ext.md", "target": ".kiro/commands/scout/ext.md", "type": "command" },
+    { "source": "commands/skill/add.md", "target": ".kiro/commands/skill/add.md", "type": "command" },
+    { "source": "commands/skill/create.md", "target": ".kiro/commands/skill/create.md", "type": "command" },
+    { "source": "commands/skill/optimize.md", "target": ".kiro/commands/skill/optimize.md", "type": "command" },
+    { "source": "hooks/scout-block.js", "target": ".kiro/hooks/scout-block.js", "type": "hook", "executable": true },
+    { "source": "hooks/scout-block.sh", "target": ".kiro/hooks/scout-block.sh", "type": "hook", "executable": true },
+    { "source": "hooks/scout-block.ps1", "target": ".kiro/hooks/scout-block.ps1", "type": "hook" },
+    { "source": "hooks/modularization-hook.js", "target": ".kiro/hooks/modularization-hook.js", "type": "hook", "executable": true },
+    { "source": "hooks/discord-notify.js", "target": ".kiro/hooks/discord-notify.js", "type": "hook", "executable": true },
+    { "source": "hooks/discord-notify.sh", "target": ".kiro/hooks/discord-notify.sh", "type": "hook", "executable": true },
+    { "source": "hooks/discord-notify.ps1", "target": ".kiro/hooks/discord-notify.ps1", "type": "hook" },
+    { "source": "hooks/telegram-notify.js", "target": ".kiro/hooks/telegram-notify.js", "type": "hook", "executable": true },
+    { "source": "hooks/telegram-notify.sh", "target": ".kiro/hooks/telegram-notify.sh", "type": "hook", "executable": true },
+    { "source": "hooks/telegram-notify.ps1", "target": ".kiro/hooks/telegram-notify.ps1", "type": "hook" },
+    { "source": "hooks/pre-commit-lint.js", "target": ".kiro/hooks/pre-commit-lint.js", "type": "hook", "executable": true },
+    { "source": "hooks/git-status-tracker.js", "target": ".kiro/hooks/git-status-tracker.js", "type": "hook", "executable": true },
+    { "source": "hooks/.env.example", "target": ".kiro/hooks/.env.example", "type": "config" },
+    { "source": "hooks/README.md", "target": ".kiro/hooks/README.md", "type": "doc" },
+    { "source": "workflows/primary-workflow.md", "target": ".kiro/workflows/primary-workflow.md", "type": "workflow" },
+    { "source": "workflows/development-rules.md", "target": ".kiro/workflows/development-rules.md", "type": "workflow" },
+    { "source": "workflows/orchestration-protocol.md", "target": ".kiro/workflows/orchestration-protocol.md", "type": "workflow" },
+    { "source": "workflows/documentation-management.md", "target": ".kiro/workflows/documentation-management.md", "type": "workflow" },
+    { "source": "steering/react-conventions.md", "target": ".kiro/steering/react-conventions.md", "type": "steering" },
+    { "source": "steering/nextjs-patterns.md", "target": ".kiro/steering/nextjs-patterns.md", "type": "steering" },
+    { "source": "settings.json", "target": ".kiro/settings/settings.json", "type": "config" },
+    { "source": "statusline.js", "target": ".kiro/statusline.js", "type": "config", "executable": true },
+    { "source": "statusline.sh", "target": ".kiro/statusline.sh", "type": "config", "executable": true },
+    { "source": "statusline.ps1", "target": ".kiro/statusline.ps1", "type": "config" },
+    { "source": ".mcp.json.example", "target": ".kiro/settings/mcp.json.example", "type": "config" },
+    { "source": ".env.example", "target": ".env.example", "type": "config" },
+    { "source": "specs/_templates/frontend/requirements.md", "target": ".kiro/specs/_templates/frontend/requirements.md", "type": "spec" },
+    { "source": "specs/_templates/frontend/design.md", "target": ".kiro/specs/_templates/frontend/design.md", "type": "spec" },
+    { "source": "specs/_templates/frontend/tasks.md", "target": ".kiro/specs/_templates/frontend/tasks.md", "type": "spec" },
+    { "source": "docs/code-standards.md", "target": "docs/code-standards.md", "type": "doc" },
+    { "source": "docs/system-architecture.md", "target": "docs/system-architecture.md", "type": "doc" },
+    { "source": "docs/project-roadmap.md", "target": "docs/project-roadmap.md", "type": "doc" }
+  ],
+  "mcpServers": {
+    "filesystem": {
+      "command": "npx",
+      "args": ["-y", "@modelcontextprotocol/server-filesystem"]
+    },
+    "git": {
+      "command": "npx",
+      "args": ["-y", "@modelcontextprotocol/server-git"]
+    },
+    "playwright": {
+      "command": "npx",
+      "args": ["-y", "@playwright/mcp-server"]
+    },
+    "fetch": {
+      "command": "npx",
+      "args": ["-y", "@modelcontextprotocol/server-fetch"]
+    },
+    "docs-seeker": {
+      "command": "npx",
+      "args": ["-y", "@mcp/docs-seeker"]
+    }
+  },
+  "hooks": {
+    "PreToolUse": ["scout-block"],
+    "PostToolUse": ["modularization-hook"],
+    "agentStop": ["discord-notify", "telegram-notify"]
+  },
+  "tags": ["react", "nextjs", "typescript", "tailwind", "frontend", "web", "ui"],
+  "minCounts": {
+    "agents": 12,
+    "skills": 20,
+    "commands": 25,
+    "hooks": 6,
+    "workflows": 4
+  }
+}

package/dist/presets/frontend/settings.json

@@ -0,0 +1,31 @@
+{
+  "statusLine": {
+    "type": "command",
+    "command": "node .kiro/statusline.js"
+  },
+  "hooks": {
+    "PreToolUse": [
+      {
+        "matcher": ".*",
+        "command": "node .kiro/hooks/scout-block.js"
+      }
+    ],
+    "PostToolUse": [
+      {
+        "matcher": ".*",
+        "command": "node .kiro/hooks/modularization-hook.js"
+      }
+    ],
+    "agentStop": [
+      {
+        "matcher": ".*",
+        "command": "node .kiro/hooks/discord-notify.js"
+      },
+      {
+        "matcher": ".*",
+        "command": "node .kiro/hooks/telegram-notify.js"
+      }
+    ]
+  },
+  "includeCoAuthoredBy": false
+}

package/dist/presets/frontend/skills/.env.example

@@ -0,0 +1,8 @@
+# Skills environment variables
+# Copy this file to .env and fill in your values.
+
+# Google Gemini API key (for ai-multimodal skill)
+# GEMINI_API_KEY=<your-gemini-api-key>
+
+# OpenAI API key (optional, for image generation)
+# OPENAI_API_KEY=<your-openai-api-key>

package/dist/presets/frontend/skills/INSTALLATION.md

@@ -0,0 +1,34 @@
+# Installing Skills
+
+## Adding a New Skill
+
+1. Create a directory under `.kiro/skills/` with the skill name (kebab-case)
+2. Create a `SKILL.md` file with YAML front-matter:
+
+```markdown
+---
+name: my-skill
+description: When to activate and what it provides.
+---
+
+# My Skill
+
+Instructions and knowledge here.
+```
+
+3. Optionally add subdirectories:
+   - `references/` - Additional documentation
+   - `scripts/` - Executable scripts
+   - `assets/` - Static files
+
+## Front-matter Requirements
+
+- `name` (required): kebab-case identifier
+- `description` (required): activation triggers and capabilities
+
+## Best Practices
+
+- Keep SKILL.md concise (under 200 lines)
+- Use progressive disclosure (details in references/)
+- Include practical examples over abstract theory
+- State clear activation triggers in description

package/dist/presets/frontend/skills/README.md

@@ -0,0 +1,32 @@
+# Skills
+
+This directory contains agent skills for the frontend preset. Each skill is a folder with a `SKILL.md` file containing front-matter and instructions.
+
+## Available Skills
+
+| Skill | Description |
+|-------|-------------|
+| frontend-design | Production-grade frontend interface design |
+| frontend-development | React/Next.js/TypeScript implementation |
+| ui-styling | Tailwind CSS and shadcn/ui styling |
+| web-frameworks | Next.js App Router and rendering strategies |
+| chrome-devtools | Browser automation and performance analysis |
+| threejs | 3D web experiences with Three.js |
+| aesthetic | Visual polish and micro-interactions |
+| debugging | Systematic debugging framework |
+| sequential-thinking | Structured multi-step reasoning |
+| problem-solving | Techniques for complexity and blocks |
+| planning | Technical solution planning |
+| research | Technology research and evaluation |
+| docs-seeker | Documentation search and retrieval |
+| repomix | Repository packaging for analysis |
+| ai-multimodal | Multimedia content processing |
+| media-processing | Image/video optimization |
+| code-review | Code review practices |
+| skill-creator | Creating new skills |
+| mcp-builder | Building MCP servers |
+| mcp-management | Managing MCP integrations |
+
+## Adding Skills
+
+See `INSTALLATION.md` for instructions on adding new skills.

package/dist/presets/frontend/skills/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,18 @@
+# Third Party Notices
+
+This file contains attribution notices for third-party content referenced by skills in this preset.
+
+## Frameworks and Libraries Referenced
+
+- React (MIT License) - Meta Platforms, Inc.
+- Next.js (MIT License) - Vercel, Inc.
+- Tailwind CSS (MIT License) - Tailwind Labs, Inc.
+- shadcn/ui (MIT License) - shadcn
+- Radix UI (MIT License) - WorkOS
+- Three.js (MIT License) - Three.js contributors
+- Vitest (MIT License) - Vitest contributors
+- Playwright (Apache 2.0) - Microsoft Corporation
+
+## Documentation Sources
+
+Skills reference official documentation from the above projects. All referenced content is used for educational and development assistance purposes.

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

@@ -0,0 +1,60 @@
+---
+name: aesthetic
+description: Create aesthetically beautiful interfaces following proven design principles. Use when building UI that needs visual polish, micro-interactions, or design system refinement.
+---
+
+# Aesthetic Design
+
+Activate this skill when interfaces need visual refinement, micro-interactions, or design system polish.
+
+## When to Use
+
+- Polishing UI components for production quality
+- Adding micro-interactions and transitions
+- Implementing visual hierarchy and rhythm
+- Creating cohesive color palettes and themes
+- Designing loading states and skeleton screens
+- Adding subtle animations that enhance UX
+
+## Design Principles
+
+- Visual Hierarchy: guide the eye with size, weight, color, and spacing
+- Rhythm and Repetition: consistent spacing creates visual harmony
+- Contrast: use contrast purposefully to draw attention
+- Whitespace: generous spacing improves readability and elegance
+- Typography: limit to 2 font families, use clear type scale
+- Color: use a constrained palette with intentional accent colors
+
+## Micro-interactions
+
+- Button press: subtle scale (0.98) with quick transition (100ms)
+- Hover states: color shift or elevation change (150ms ease)
+- Page transitions: fade or slide with shared layout animations
+- Loading: skeleton screens over spinners for perceived performance
+- Success/error: brief color flash or icon animation
+- Scroll: parallax or reveal animations (respect reduced-motion)
+
+## Implementation
+
+```css
+/* Smooth transitions */
+.interactive {
+  transition: transform 150ms ease, box-shadow 150ms ease;
+}
+.interactive:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+.interactive:active {
+  transform: scale(0.98);
+}
+```
+
+## Quality Checklist
+
+- Consistent spacing using design tokens
+- Smooth transitions on all state changes (no jarring jumps)
+- Proper loading states (skeleton, not spinner)
+- Accessible animations (prefers-reduced-motion respected)
+- Touch-friendly targets (44px minimum)
+- Visual feedback on every interaction

package/dist/presets/frontend/skills/agent_skills_spec.md

@@ -0,0 +1,37 @@
+# Agent Skills Specification
+
+## Overview
+
+Skills extend agent capabilities with specialized knowledge, workflows, and tool integrations. Each skill is self-contained in a directory with a `SKILL.md` entry point.
+
+## Structure
+
+```
+skills/
+  [skill-name]/
+    SKILL.md           Entry point (required)
+    references/        Additional docs (optional)
+    scripts/           Executable scripts (optional)
+    assets/            Static files (optional)
+```
+
+## SKILL.md Requirements
+
+- YAML front-matter with `name` and `description`
+- Body contains instructions, patterns, and examples
+- Should be under 200 lines for token efficiency
+- Use progressive disclosure for complex topics
+
+## Activation
+
+Skills are activated when:
+- User request matches the skill description keywords
+- Agent determines the skill is relevant to the task
+- User explicitly requests a skill by name
+
+## Quality Standards
+
+- Clear activation triggers in description
+- Practical examples over abstract theory
+- Token-efficient content structure
+- No external dependencies required for core functionality

package/dist/presets/frontend/skills/ai-multimodal/SKILL.md

@@ -0,0 +1,32 @@
+---
+name: ai-multimodal
+description: Process and generate multimedia content using AI APIs. Use when analyzing images, processing documents, or generating visual content.
+---
+
+# AI Multimodal
+
+Activate this skill when working with images, documents, or multimedia content.
+
+## When to Use
+
+- Analyzing screenshots or design mockups
+- Processing PDF documents for data extraction
+- Generating images from text descriptions
+- Comparing visual designs for differences
+- Extracting text from images (OCR)
+
+## Capabilities
+
+- Image analysis: captioning, object detection, visual Q&A
+- Document processing: PDF tables, forms, charts
+- Image generation: text-to-image, editing, composition
+- Video analysis: scene detection, temporal analysis
+- Audio processing: transcription, summarization
+
+## Rules
+
+- Always verify generated content for accuracy
+- Use appropriate model for the task complexity
+- Handle large files with proper chunking
+- Respect content licensing and attribution
+- Validate extracted data against source

package/dist/presets/frontend/skills/chrome-devtools/SKILL.md

@@ -0,0 +1,51 @@
+---
+name: chrome-devtools
+description: Browser automation, debugging, and performance analysis using Puppeteer or Playwright. Use for taking screenshots, analyzing performance, monitoring network, or automating browser interactions.
+---
+
+# Chrome DevTools
+
+Activate this skill when you need browser automation, screenshots, performance profiling, or network analysis.
+
+## When to Use
+
+- Taking screenshots of UI for review or comparison
+- Analyzing page performance (Lighthouse, Core Web Vitals)
+- Monitoring network requests and responses
+- Automating browser interactions for testing
+- Debugging rendering issues or layout problems
+- Capturing console errors and warnings
+
+## Puppeteer/Playwright Usage
+
+```javascript
+// Screenshot capture
+const browser = await puppeteer.launch();
+const page = await browser.newPage();
+await page.setViewport({ width: 1280, height: 720 });
+await page.goto('http://localhost:3000');
+await page.screenshot({ path: 'screenshot.png', fullPage: true });
+await browser.close();
+```
+
+## Performance Analysis
+
+- Run Lighthouse audits programmatically
+- Measure Core Web Vitals (LCP, INP, CLS)
+- Profile JavaScript execution time
+- Analyze network waterfall for bottlenecks
+- Check resource sizes and compression
+
+## Network Monitoring
+
+- Intercept and log API requests
+- Verify response payloads and status codes
+- Check for failed requests or slow responses
+- Monitor WebSocket connections
+
+## Debugging
+
+- Capture console.log, console.error output
+- Screenshot on test failure for debugging
+- Compare visual snapshots for regression detection
+- Inspect DOM structure and computed styles

package/dist/presets/frontend/skills/code-review/SKILL.md

@@ -0,0 +1,42 @@
+---
+name: code-review
+description: Systematic code review practices for receiving feedback, requesting reviews, and verification gates. Use when reviewing code or receiving review feedback.
+---
+
+# Code Review
+
+Activate this skill when performing or receiving code reviews.
+
+## When to Use
+
+- Receiving code review feedback
+- Completing tasks requiring review before proceeding
+- Before making completion claims on features
+- Reviewing pull requests for quality
+
+## Practices
+
+### Receiving Feedback
+- Apply technical rigor over performative agreement
+- If feedback is unclear, ask for clarification
+- If feedback is technically questionable, explain why respectfully
+- Never change code just to appease without understanding
+
+### Requesting Reviews
+- Provide context: what changed and why
+- Highlight areas of uncertainty
+- Note any trade-offs made
+- Include test results and verification evidence
+
+### Verification Gates
+- Never claim completion without evidence
+- Run tests and show passing output
+- Verify build succeeds
+- Check for regressions in related functionality
+
+## Rules
+
+- Review for correctness first, style second
+- Focus on logic errors, security issues, and performance
+- Acknowledge good patterns alongside issues
+- Be specific in feedback with code examples