ai-qakit 1.0.0

package/templates/.claude/setup/setup.ps1

@@ -0,0 +1,240 @@
+# setup.ps1 - Complete setup for Claude Code plugins and MCP servers (Windows)
+#
+# This script installs all recommended Claude Code enhancements:
+#   - claude-mem: Persistent memory compression system
+#   - MCP Servers: context7 (docs) + sequential-thinking
+#
+# Usage:
+#   .\setup.ps1              # Install everything
+#   .\setup.ps1 -All         # Same as above
+#   .\setup.ps1 -Plugins     # Install plugins only (claude-mem)
+#   .\setup.ps1 -Mcp         # Install MCP servers only
+#   .\setup.ps1 -Status      # Check status of all components
+#   .\setup.ps1 -Diagnose    # Run diagnostics on all components
+#   .\setup.ps1 -Fix         # Auto-fix issues in all components
+#
+# Exit Codes:
+#   0 - Success
+#   1 - Error during installation
+
+param(
+    [switch]$All,
+    [switch]$Plugins,
+    [switch]$Mcp,
+    [switch]$Status,
+    [switch]$Diagnose,
+    [switch]$Fix,
+    [switch]$Help
+)
+
+# Get script directory
+$SCRIPT_DIR = Split-Path -Parent $MyInvocation.MyCommand.Path
+$DEPS_DIR = Join-Path $SCRIPT_DIR "dependencies"
+
+# ═══════════════════════════════════════════════════════════════════════════
+# HELPER FUNCTIONS
+# ═══════════════════════════════════════════════════════════════════════════
+
+function Write-ColorOutput {
+    param(
+        [string]$Message,
+        [string]$Color = "White"
+    )
+    Write-Host $Message -ForegroundColor $Color
+}
+
+function Write-Header {
+    param([string]$Title)
+    Write-Host ""
+    Write-ColorOutput "================================================================" -Color Magenta
+    Write-ColorOutput "  $Title" -Color Magenta
+    Write-ColorOutput "================================================================" -Color Magenta
+    Write-Host ""
+}
+
+function Write-Section {
+    param([string]$Title)
+    Write-Host ""
+    Write-ColorOutput "> $Title" -Color Blue
+    Write-ColorOutput "-----------------------------------------" -Color Blue
+}
+
+# ═══════════════════════════════════════════════════════════════════════════
+# INSTALLATION FUNCTIONS
+# ═══════════════════════════════════════════════════════════════════════════
+
+function Install-ClaudeMem {
+    Write-Section "Installing claude-mem (persistent memory)"
+    $script = Join-Path $DEPS_DIR "setup-claude-mem.ps1"
+    if (Test-Path $script) {
+        & $script
+    } else {
+        Write-ColorOutput "Error: setup-claude-mem.ps1 not found" -Color Red
+        return $false
+    }
+    return $true
+}
+
+function Install-McpServers {
+    Write-Section "Installing MCP servers (context7, sequential-thinking)"
+    $script = Join-Path $DEPS_DIR "setup-mcp-servers.ps1"
+    if (Test-Path $script) {
+        & $script
+    } else {
+        Write-ColorOutput "Error: setup-mcp-servers.ps1 not found" -Color Red
+        return $false
+    }
+    return $true
+}
+
+function Install-Plugins {
+    Install-ClaudeMem
+}
+
+function Install-All {
+    Write-Header "Claude Code Complete Setup"
+
+    Write-ColorOutput "This will install:" -Color Cyan
+    Write-Host "  * " -NoNewline
+    Write-ColorOutput "claude-mem" -Color Green
+    Write-Host " - Persistent memory across sessions"
+    Write-Host "  * " -NoNewline
+    Write-ColorOutput "context7" -Color Green
+    Write-Host " - Up-to-date library documentation"
+    Write-Host "  * " -NoNewline
+    Write-ColorOutput "sequential-thinking" -Color Green
+    Write-Host " - Structured problem-solving"
+    Write-Host ""
+
+    Install-ClaudeMem
+    Install-McpServers
+
+    Write-Header "Setup Complete!"
+
+    Write-ColorOutput "All components have been installed successfully." -Color Green
+    Write-Host ""
+    Write-ColorOutput "What's next:" -Color Cyan
+    Write-Host "  1. Start a new Claude Code session to activate the plugins"
+    Write-Host "  2. Use " -NoNewline
+    Write-ColorOutput "mem-search" -Color Yellow
+    Write-Host " skill to search past sessions"
+    Write-Host "  3. context7 and sequential-thinking are available as MCP tools"
+    Write-Host ""
+    Write-ColorOutput "Troubleshooting:" -Color Cyan
+    Write-ColorOutput "  .\setup.ps1 -Status" -Color Yellow
+    Write-Host "    Check status of all components"
+    Write-ColorOutput "  .\setup.ps1 -Diagnose" -Color Yellow
+    Write-Host "  Run diagnostics"
+    Write-ColorOutput "  .\setup.ps1 -Fix" -Color Yellow
+    Write-Host "       Auto-fix issues"
+    Write-Host ""
+}
+
+# ═══════════════════════════════════════════════════════════════════════════
+# DIAGNOSTIC FUNCTIONS
+# ═══════════════════════════════════════════════════════════════════════════
+
+function Show-AllStatus {
+    Write-Header "Claude Code Components Status"
+
+    Write-Section "claude-mem"
+    $script = Join-Path $DEPS_DIR "setup-claude-mem.ps1"
+    if (Test-Path $script) {
+        & $script -Status
+    }
+
+    Write-Section "MCP Servers"
+    $script = Join-Path $DEPS_DIR "setup-mcp-servers.ps1"
+    if (Test-Path $script) {
+        & $script -Status
+    }
+}
+
+function Invoke-AllDiagnose {
+    Write-Header "Claude Code Components Diagnostics"
+
+    Write-Section "claude-mem"
+    $script = Join-Path $DEPS_DIR "setup-claude-mem.ps1"
+    if (Test-Path $script) {
+        try { & $script -Diagnose } catch {}
+    }
+
+    Write-Section "MCP Servers"
+    $script = Join-Path $DEPS_DIR "setup-mcp-servers.ps1"
+    if (Test-Path $script) {
+        try { & $script -Diagnose } catch {}
+    }
+}
+
+function Invoke-AllFix {
+    Write-Header "Auto-Fix All Components"
+
+    Write-Section "Fixing claude-mem"
+    $script = Join-Path $DEPS_DIR "setup-claude-mem.ps1"
+    if (Test-Path $script) {
+        try { & $script -Fix } catch {}
+    }
+
+    Write-Section "Fixing MCP Servers"
+    $script = Join-Path $DEPS_DIR "setup-mcp-servers.ps1"
+    if (Test-Path $script) {
+        try { & $script -Fix } catch {}
+    }
+
+    Write-Host ""
+    Write-ColorOutput "Auto-fix complete!" -Color Green
+    Write-Host "Run " -NoNewline
+    Write-ColorOutput ".\setup.ps1 -Diagnose" -Color Cyan
+    Write-Host " to verify fixes."
+    Write-Host ""
+}
+
+function Show-Help {
+    Write-Host "Usage: .\setup.ps1 [OPTION]"
+    Write-Host ""
+    Write-Host "Complete setup for Claude Code plugins and MCP servers."
+    Write-Host ""
+    Write-Host "Options:"
+    Write-Host "  (none), -All     Install all components"
+    Write-Host "  -Plugins         Install plugins only (claude-mem)"
+    Write-Host "  -Mcp             Install MCP servers only (context7, sequential-thinking)"
+    Write-Host "  -Status          Check status of all components"
+    Write-Host "  -Diagnose        Run diagnostics on all components"
+    Write-Host "  -Fix             Auto-fix issues in all components"
+    Write-Host "  -Help            Show this help message"
+    Write-Host ""
+    Write-Host "Components:"
+    Write-Host "  claude-mem           Persistent memory compression system"
+    Write-Host "  context7             Up-to-date library documentation (MCP)"
+    Write-Host "  sequential-thinking  Structured problem-solving (MCP)"
+    Write-Host ""
+    Write-Host "Examples:"
+    Write-Host "  .\setup.ps1                   Install everything"
+    Write-Host "  .\setup.ps1 -Plugins          Install plugins only"
+    Write-Host "  .\setup.ps1 -Status           Check what's installed"
+}
+
+# ═══════════════════════════════════════════════════════════════════════════
+# MAIN
+# ═══════════════════════════════════════════════════════════════════════════
+
+if ($Help) {
+    Show-Help
+} elseif ($Status) {
+    Show-AllStatus
+} elseif ($Diagnose) {
+    Invoke-AllDiagnose
+} elseif ($Fix) {
+    Invoke-AllFix
+} elseif ($Plugins) {
+    Write-Header "Installing Plugins Only"
+    Install-Plugins
+} elseif ($Mcp) {
+    Write-Header "Installing MCP Servers Only"
+    Install-McpServers
+} elseif ($All) {
+    Install-All
+} else {
+    # Default: install all
+    Install-All
+}

package/templates/.claude/setup/setup.sh

@@ -0,0 +1,222 @@
+#!/bin/bash
+# setup.sh - Complete setup for Claude Code plugins and MCP servers
+#
+# This script installs all recommended Claude Code enhancements:
+#   - claude-mem: Persistent memory compression system
+#   - MCP Servers: context7 (docs) + sequential-thinking
+#
+# Usage:
+#   ./setup.sh              # Install everything
+#   ./setup.sh --all        # Same as above
+#   ./setup.sh --plugins    # Install plugins only (claude-mem)
+#   ./setup.sh --mcp        # Install MCP servers only
+#   ./setup.sh --status     # Check status of all components
+#   ./setup.sh --diagnose   # Run diagnostics on all components
+#   ./setup.sh --fix        # Auto-fix issues in all components
+#
+# Exit Codes:
+#   0 - Success
+#   1 - Error during installation
+
+set -e
+
+# Get script directory
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+DEPS_DIR="$SCRIPT_DIR/dependencies"
+
+# Colors for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+CYAN='\033[0;36m'
+MAGENTA='\033[0;35m'
+NC='\033[0m' # No Color
+
+# ═══════════════════════════════════════════════════════════════════════════
+# HELPER FUNCTIONS
+# ═══════════════════════════════════════════════════════════════════════════
+
+print_header() {
+  echo
+  echo -e "${MAGENTA}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+  echo -e "${MAGENTA}  $1${NC}"
+  echo -e "${MAGENTA}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+  echo
+}
+
+print_section() {
+  echo
+  echo -e "${BLUE}▸ $1${NC}"
+  echo -e "${BLUE}─────────────────────────────────────────${NC}"
+}
+
+# ═══════════════════════════════════════════════════════════════════════════
+# INSTALLATION FUNCTIONS
+# ═══════════════════════════════════════════════════════════════════════════
+
+install_claude_mem() {
+  print_section "Installing claude-mem (persistent memory)"
+  if [ -f "$DEPS_DIR/setup-claude-mem.sh" ]; then
+    bash "$DEPS_DIR/setup-claude-mem.sh"
+  else
+    echo -e "${RED}Error: setup-claude-mem.sh not found${NC}"
+    return 1
+  fi
+}
+
+install_mcp_servers() {
+  print_section "Installing MCP servers (context7, sequential-thinking)"
+  if [ -f "$DEPS_DIR/setup-mcp-servers.sh" ]; then
+    bash "$DEPS_DIR/setup-mcp-servers.sh"
+  else
+    echo -e "${RED}Error: setup-mcp-servers.sh not found${NC}"
+    return 1
+  fi
+}
+
+install_plugins() {
+  install_claude_mem
+}
+
+install_all() {
+  print_header "Claude Code Complete Setup"
+
+  echo -e "${CYAN}This will install:${NC}"
+  echo -e "  • ${GREEN}claude-mem${NC} - Persistent memory across sessions"
+  echo -e "  • ${GREEN}context7${NC} - Up-to-date library documentation"
+  echo -e "  • ${GREEN}sequential-thinking${NC} - Structured problem-solving"
+  echo
+
+  install_claude_mem
+  install_mcp_servers
+
+  print_header "Setup Complete!"
+
+  echo -e "${GREEN}All components have been installed successfully.${NC}"
+  echo
+  echo -e "${CYAN}What's next:${NC}"
+  echo -e "  1. Start a new Claude Code session to activate the plugins"
+  echo -e "  2. Use ${YELLOW}mem-search${NC} skill to search past sessions"
+  echo -e "  3. context7 and sequential-thinking are available as MCP tools"
+  echo
+  echo -e "${CYAN}Troubleshooting:${NC}"
+  echo -e "  ${YELLOW}$0 --status${NC}    Check status of all components"
+  echo -e "  ${YELLOW}$0 --diagnose${NC}  Run diagnostics"
+  echo -e "  ${YELLOW}$0 --fix${NC}       Auto-fix issues"
+  echo
+}
+
+# ═══════════════════════════════════════════════════════════════════════════
+# DIAGNOSTIC FUNCTIONS
+# ═══════════════════════════════════════════════════════════════════════════
+
+run_status() {
+  print_header "Claude Code Components Status"
+
+  print_section "claude-mem"
+  if [ -f "$DEPS_DIR/setup-claude-mem.sh" ]; then
+    bash "$DEPS_DIR/setup-claude-mem.sh" --status
+  fi
+
+  print_section "MCP Servers"
+  if [ -f "$DEPS_DIR/setup-mcp-servers.sh" ]; then
+    bash "$DEPS_DIR/setup-mcp-servers.sh" --status
+  fi
+}
+
+run_diagnose() {
+  print_header "Claude Code Components Diagnostics"
+
+  print_section "claude-mem"
+  if [ -f "$DEPS_DIR/setup-claude-mem.sh" ]; then
+    bash "$DEPS_DIR/setup-claude-mem.sh" --diagnose || true
+  fi
+
+  print_section "MCP Servers"
+  if [ -f "$DEPS_DIR/setup-mcp-servers.sh" ]; then
+    bash "$DEPS_DIR/setup-mcp-servers.sh" --diagnose || true
+  fi
+}
+
+run_fix() {
+  print_header "Auto-Fix All Components"
+
+  print_section "Fixing claude-mem"
+  if [ -f "$DEPS_DIR/setup-claude-mem.sh" ]; then
+    bash "$DEPS_DIR/setup-claude-mem.sh" --fix || true
+  fi
+
+  print_section "Fixing MCP Servers"
+  if [ -f "$DEPS_DIR/setup-mcp-servers.sh" ]; then
+    bash "$DEPS_DIR/setup-mcp-servers.sh" --fix || true
+  fi
+
+  echo
+  echo -e "${GREEN}Auto-fix complete!${NC}"
+  echo -e "Run ${CYAN}$0 --diagnose${NC} to verify fixes."
+  echo
+}
+
+show_help() {
+  echo "Usage: $0 [OPTION]"
+  echo
+  echo "Complete setup for Claude Code plugins and MCP servers."
+  echo
+  echo "Options:"
+  echo "  (none), --all    Install all components"
+  echo "  --plugins        Install plugins only (claude-mem)"
+  echo "  --mcp            Install MCP servers only (context7, sequential-thinking)"
+  echo "  --status         Check status of all components"
+  echo "  --diagnose       Run diagnostics on all components"
+  echo "  --fix            Auto-fix issues in all components"
+  echo "  --help           Show this help message"
+  echo
+  echo "Components:"
+  echo "  claude-mem           Persistent memory compression system"
+  echo "  context7             Up-to-date library documentation (MCP)"
+  echo "  sequential-thinking  Structured problem-solving (MCP)"
+  echo
+  echo "Examples:"
+  echo "  $0                   Install everything"
+  echo "  $0 --plugins         Install plugins only"
+  echo "  $0 --status          Check what's installed"
+}
+
+# ═══════════════════════════════════════════════════════════════════════════
+# MAIN
+# ═══════════════════════════════════════════════════════════════════════════
+
+case "${1:-}" in
+  --all|-a)
+    install_all
+    ;;
+  --plugins|-p)
+    print_header "Installing Plugins Only"
+    install_plugins
+    ;;
+  --mcp|-m)
+    print_header "Installing MCP Servers Only"
+    install_mcp_servers
+    ;;
+  --status|-s)
+    run_status
+    ;;
+  --diagnose|-d)
+    run_diagnose
+    ;;
+  --fix|-f)
+    run_fix
+    ;;
+  --help|-h)
+    show_help
+    ;;
+  "")
+    install_all
+    ;;
+  *)
+    echo -e "${RED}Unknown option: $1${NC}"
+    echo "Run '$0 --help' for usage information."
+    exit 1
+    ;;
+esac

package/templates/.claude/skills/accessibility-testing/SKILL.md

@@ -0,0 +1,34 @@
+# Accessibility Testing Skill
+
+## Overview
+Expert knowledge in accessibility testing and WCAG compliance.
+
+## Triggers
+- Accessibility audits
+- WCAG compliance checking
+- Screen reader testing
+- Keyboard navigation testing
+
+## Standards
+- WCAG 2.1 (A, AA, AAA)
+- Section 508
+- ADA compliance
+
+## Tools
+- axe-core
+- Lighthouse
+- WAVE
+- Screen readers (NVDA, VoiceOver)
+
+## Key Areas
+- Perceivable (alt text, contrast, captions)
+- Operable (keyboard, timing, navigation)
+- Understandable (readable, predictable)
+- Robust (compatible with assistive tech)
+
+## Best Practices
+- Automate what you can
+- Manual testing with screen readers
+- Test keyboard-only navigation
+- Verify color contrast
+- Check focus management

package/templates/.claude/skills/aesthetic/SKILL.md

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