@champpaba/claude-agent-kit 3.5.0 → 3.6.0

package/skills/design-extract/references/output-format.md

@@ -0,0 +1,250 @@
+# Output Format: data.yaml
+
+Complete schema for the extracted design data file.
+
+---
+
+## File Location
+
+```
+design-system/extracted/{site-name}/data.yaml
+```
+
+---
+
+## Complete Schema
+
+```yaml
+# Design Extraction: {siteName}
+# Extracted: {ISO timestamp}
+# URL: {url}
+
+meta:
+  site_name: "airbnb"
+  url: "https://airbnb.com"
+  extracted_at: "2026-02-03T15:30:00Z"
+  extractor_version: "2.1.0"
+  coverage:
+    total_sections: 17
+    detected_sections: 15
+    percentage: 88
+
+psychology:
+  style_classification: "Modern SaaS"
+
+  emotions_evoked:
+    - emotion: "Trust"
+      reason: "Clean typography and ample whitespace"
+    - emotion: "Excitement"
+      reason: "Vibrant accent colors on CTAs"
+
+  target_audience:
+    primary:
+      description: "Young professionals"
+      age_range: "25-40"
+      tech_savvy: "high"
+    secondary:
+      description: "Families"
+      age_range: "30-50"
+
+  visual_principles:
+    - name: "Hierarchy"
+      description: "Clear visual hierarchy through size and weight"
+    - name: "Whitespace"
+      description: "Generous padding creates breathing room"
+
+  why_it_works:
+    - "Large hero images create emotional connection"
+    - "Simple navigation reduces cognitive load"
+
+  design_philosophy:
+    core_belief: "Design should feel human and approachable"
+    key_principles:
+      - "Simplicity over complexity"
+      - "Content-first approach"
+
+sections:
+  overview:
+    detected: true
+    style: "Modern SaaS"
+    tech_stack: "Framework-agnostic"
+
+  color_palette:
+    detected: true
+    primary:
+      - hex: "#FF5A5F"
+        rgb: "rgb(255, 90, 95)"
+        usage: "brand-primary"
+        count: 23
+      - hex: "#00A699"
+        rgb: "rgb(0, 166, 153)"
+        usage: "brand-secondary"
+        count: 12
+    text_colors:
+      - hex: "#484848"
+        usage: "body-text"
+        count: 156
+      - hex: "#767676"
+        usage: "muted-text"
+        count: 89
+    border_colors:
+      - hex: "#EBEBEB"
+        usage: "divider"
+        count: 45
+
+  typography:
+    detected: true
+    fonts:
+      - "Circular"
+      - "Cereal"
+      - "-apple-system"
+    weights: ["400", "500", "600", "700", "800"]
+    sizes: ["12px", "14px", "16px", "18px", "22px", "26px", "32px"]
+    h1:
+      - text: "Find places to stay"
+        fontSize: "32px"
+        fontWeight: "800"
+        fontFamily: "Circular, sans-serif"
+    h2:
+      - fontSize: "22px"
+        fontWeight: "600"
+    body:
+      - fontSize: "16px"
+        fontWeight: "400"
+        lineHeight: "1.5"
+
+  spacing_system:
+    detected: true
+    grid_base: 8
+    common_values: [8, 16, 24, 32, 48, 64]
+    paddings: ["8px", "16px", "24px", "32px", "48px"]
+    margins: ["8px", "16px", "24px", "32px"]
+    gaps: ["8px", "16px", "24px"]
+
+  component_styles:
+    detected: true
+    buttons:
+      - id: "button-0"
+        text: "Search"
+        backgroundColor: "rgb(255, 90, 95)"
+        color: "rgb(255, 255, 255)"
+        padding: "14px 24px"
+        borderRadius: "8px"
+        fontSize: "16px"
+        fontWeight: "600"
+        transition: "all 0.2s ease"
+        hover_animation: "Background darkens + Shadow appears"
+    cards:
+      - id: "card-0"
+        backgroundColor: "rgb(255, 255, 255)"
+        padding: "16px"
+        borderRadius: "12px"
+        boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)"
+        transition: "all 0.3s ease"
+        hover_animation: "Shadow increases + Slight lift"
+    inputs:
+      - id: "input-0"
+        type: "text"
+        height: "48px"
+        padding: "0 16px"
+        borderRadius: "8px"
+        border: "1px solid #EBEBEB"
+        fontSize: "16px"
+        transition: "border-color 0.2s ease"
+        focus_animation: "Border color changes to primary"
+
+  shadows_elevation:
+    detected: true
+    values:
+      - "0 1px 2px rgba(0, 0, 0, 0.08)"
+      - "0 2px 8px rgba(0, 0, 0, 0.1)"
+      - "0 4px 16px rgba(0, 0, 0, 0.12)"
+      - "0 8px 28px rgba(0, 0, 0, 0.15)"
+
+  animations_transitions:
+    detected: true
+    keyframes:
+      - name: "fadeIn"
+        css: "@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }"
+    transitions:
+      - duration: "0.2s"
+        timing: "ease"
+        property: "all"
+      - duration: "0.3s"
+        timing: "ease-out"
+        property: "transform"
+
+  border_radius:
+    detected: true
+    values: ["4px", "8px", "12px", "16px", "24px", "50%"]
+
+  border_styles:
+    detected: true
+    widths: ["1px", "2px"]
+    colors: ["#EBEBEB", "#DDDDDD"]
+
+  layout_patterns:
+    detected: true
+    container_width: "1280px"
+    grid_columns: 12
+    breakpoints:
+      - name: "mobile"
+        max_width: "744px"
+      - name: "tablet"
+        max_width: "1128px"
+      - name: "desktop"
+        min_width: "1128px"
+
+# Detailed animation states
+animations:
+  button-0:
+    type: "button"
+    description: "Background darkens + Shadow appears"
+    transition: "all 0.2s ease"
+    states:
+      default:
+        background: "rgb(255, 90, 95)"
+        boxShadow: "none"
+        transform: "none"
+      hover:
+        background: "rgb(230, 80, 85)"
+        boxShadow: "0 2px 8px rgba(255, 90, 95, 0.3)"
+        transform: "none"
+  card-0:
+    type: "card"
+    description: "Shadow increases + Slight lift"
+    transition: "all 0.3s ease"
+    states:
+      default:
+        boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)"
+        transform: "translateY(0)"
+      hover:
+        boxShadow: "0 4px 16px rgba(0, 0, 0, 0.15)"
+        transform: "translateY(-2px)"
+```
+
+---
+
+## 17 Standard Sections
+
+| # | Section | Description |
+|---|---------|-------------|
+| 1 | overview | Style classification, tech stack |
+| 2 | color_palette | Primary, text, border colors |
+| 3 | typography | Fonts, weights, sizes |
+| 4 | spacing_system | Grid base, common values |
+| 5 | component_styles | Buttons, cards, inputs |
+| 6 | shadows_elevation | Box shadow values |
+| 7 | animations_transitions | Keyframes, transitions |
+| 8 | border_radius | Radius values |
+| 9 | border_styles | Widths, colors |
+| 10 | layout_patterns | Container, grid, breakpoints |
+| 11 | icons_imagery | Icon style (if detected) |
+| 12 | navigation_patterns | Nav structure (if detected) |
+| 13 | form_patterns | Form layouts (if detected) |
+| 14 | feedback_states | Error, success states |
+| 15 | loading_states | Spinners, skeletons |
+| 16 | motion_design | Complex animations |
+| 17 | accessibility | Focus states, contrast |
+
+Coverage percentage = detected / 17 * 100

package/skills/design-extract/references/style-detection.md

@@ -0,0 +1,137 @@
+# Style Detection
+
+Guide for classifying design styles during extraction.
+
+---
+
+## Common Design Styles
+
+### Neo-Brutalism
+
+**Characteristics:**
+- Bold, chunky borders (2-4px)
+- High contrast colors
+- Offset shadows (no blur)
+- Raw, intentionally "unpolished" look
+- Thick black outlines
+
+**Example sites:** Gumroad, Figma marketing pages
+
+### Minimalist
+
+**Characteristics:**
+- Maximum whitespace
+- Limited color palette (2-3 colors)
+- Thin or no borders
+- Subtle shadows or none
+- Typography-focused
+
+**Example sites:** Apple, Notion
+
+### Glassmorphism
+
+**Characteristics:**
+- Frosted glass effect (backdrop-filter: blur)
+- Semi-transparent backgrounds
+- Subtle borders (1px white/light)
+- Layered depth
+- Gradient backgrounds
+
+**Example sites:** macOS Big Sur UI, many fintech apps
+
+### Modern SaaS
+
+**Characteristics:**
+- Clean, professional aesthetic
+- Subtle gradients
+- Soft shadows
+- Rounded corners (8-16px)
+- Clear visual hierarchy
+
+**Example sites:** Linear, Stripe, Vercel
+
+### Corporate/Enterprise
+
+**Characteristics:**
+- Conservative color choices
+- Traditional typography
+- Structured grid layouts
+- Formal tone
+- Accessibility-focused
+
+**Example sites:** IBM, Microsoft, Salesforce
+
+### Playful/Creative
+
+**Characteristics:**
+- Bright, saturated colors
+- Illustrated elements
+- Curved shapes
+- Animation-heavy
+- Informal typography
+
+**Example sites:** Slack, Mailchimp, Dropbox
+
+### Dark Mode Native
+
+**Characteristics:**
+- Dark backgrounds (#0a0a0a to #1a1a1a)
+- High contrast text
+- Glowing accents
+- Subtle borders for separation
+- Reduced eye strain focus
+
+**Example sites:** Discord, GitHub (dark), VS Code
+
+---
+
+## Detection Criteria
+
+### Border Analysis
+
+| Pattern | Style Indicator |
+|---------|-----------------|
+| 2-4px solid black borders | Neo-Brutalism |
+| 1px subtle borders | Minimalist/Modern SaaS |
+| 1px white/translucent borders | Glassmorphism |
+| No borders | Minimalist |
+
+### Shadow Analysis
+
+| Pattern | Style Indicator |
+|---------|-----------------|
+| Offset shadows (4px 4px, no blur) | Neo-Brutalism |
+| Soft blur shadows (0 4px 16px) | Modern SaaS |
+| No shadows | Minimalist |
+| Inner glow effects | Glassmorphism |
+
+### Color Analysis
+
+| Pattern | Style Indicator |
+|---------|-----------------|
+| High contrast, saturated | Neo-Brutalism / Playful |
+| Muted, desaturated | Minimalist / Corporate |
+| Gradients with transparency | Glassmorphism |
+| Dark backgrounds | Dark Mode Native |
+
+### Typography Analysis
+
+| Pattern | Style Indicator |
+|---------|-----------------|
+| Extra bold weights (800-900) | Neo-Brutalism |
+| Variable weights, modern sans | Modern SaaS |
+| Serif fonts | Corporate / Editorial |
+| Rounded, friendly fonts | Playful |
+
+---
+
+## Psychology Mapping
+
+| Style | Primary Emotions | Best For |
+|-------|------------------|----------|
+| Neo-Brutalism | Bold, Rebellious, Confident | Creative tools, indie brands |
+| Minimalist | Calm, Focused, Premium | Luxury, productivity |
+| Glassmorphism | Modern, Futuristic, Sleek | Tech products, dashboards |
+| Modern SaaS | Professional, Trustworthy | B2B, enterprise |
+| Playful | Fun, Approachable, Friendly | Consumer apps, social |
+| Dark Mode | Sophisticated, Technical | Developer tools, gaming |

package/skills/design-extract/templates/CLAUDE.md

@@ -0,0 +1,11 @@
+<claude-mem-context>
+# Recent Activity
+
+<!-- This section is auto-generated by claude-mem. Edit content outside the tags. -->
+
+### Feb 3, 2026
+
+| ID | Time | T | Title | Read |
+|----|------|---|-------|------|
+| #252 | 11:38 PM | 🔵 | Git status reveals extensive refactoring with skills migration and core context reorganization | ~682 |
+</claude-mem-context>

package/skills/design-extract/templates/data.yaml.template

@@ -0,0 +1,95 @@
+# Design Extraction: {siteName}
+# Extracted: {timestamp}
+# URL: {url}
+
+meta:
+  site_name: "{siteName}"
+  url: "{url}"
+  extracted_at: "{timestamp}"
+  extractor_version: "2.1.0"
+  coverage:
+    total_sections: 17
+    detected_sections: {detectedCount}
+    percentage: {coveragePercent}
+
+psychology:
+  style_classification: "{styleClassification}"
+
+  emotions_evoked:
+    - emotion: "{emotion1}"
+      reason: "{reason1}"
+
+  target_audience:
+    primary:
+      description: "{audienceDescription}"
+      age_range: "{ageRange}"
+      tech_savvy: "{techSavvy}"
+
+  visual_principles:
+    - name: "{principle1}"
+      description: "{principleDesc1}"
+
+  why_it_works:
+    - "{whyItWorks1}"
+
+  design_philosophy:
+    core_belief: "{coreBelief}"
+    key_principles:
+      - "{keyPrinciple1}"
+
+sections:
+  overview:
+    detected: true
+    style: "{styleClassification}"
+
+  color_palette:
+    detected: {hasColors}
+    primary:
+      # Extracted background colors
+    text_colors:
+      # Extracted text colors
+    border_colors:
+      # Extracted border colors
+
+  typography:
+    detected: {hasTypography}
+    fonts: []
+    weights: []
+    sizes: []
+
+  spacing_system:
+    detected: {hasSpacing}
+    grid_base: {gridBase}
+    common_values: []
+
+  component_styles:
+    detected: {hasComponents}
+    buttons: []
+    cards: []
+    inputs: []
+
+  shadows_elevation:
+    detected: {hasShadows}
+    values: []
+
+  animations_transitions:
+    detected: {hasAnimations}
+    keyframes: []
+    transitions: []
+
+  border_radius:
+    detected: {hasBorderRadius}
+    values: []
+
+  border_styles:
+    detected: {hasBorders}
+    widths: []
+
+  layout_patterns:
+    detected: {hasLayout}
+    container_width: "1280px"
+    grid_columns: 12
+
+# Detailed animation states
+animations:
+  # Component animation states go here

package/skills/design-setup/CLAUDE.md

@@ -0,0 +1,11 @@
+<claude-mem-context>
+# Recent Activity
+
+<!-- This section is auto-generated by claude-mem. Edit content outside the tags. -->
+
+### Feb 3, 2026
+
+| ID | Time | T | Title | Read |
+|----|------|---|-------|------|
+| #252 | 11:38 PM | 🔵 | Git status reveals extensive refactoring with skills migration and core context reorganization | ~682 |
+</claude-mem-context>

package/skills/design-setup/SKILL.md

@@ -0,0 +1,104 @@
+# Design Setup Skill
+
+Interactive design system setup with theme selection and AI recommendations.
+
+## Triggers
+
+- "/designsetup [@context-files...]"
+- "setup design system"
+- "create design system from extracted sites"
+- "สร้าง design system"
+
+## Prerequisites
+
+Must have extracted at least 1 site first:
+```bash
+/extract https://airbnb.com
+```
+
+## Quick Usage
+
+```bash
+# With context files
+/designsetup @prd.md @project.md
+
+# Without context (interactive mode)
+/designsetup
+```
+
+## Output Files
+
+| File | Purpose | Audience |
+|------|---------|----------|
+| `design-system/data.yaml` | Design tokens (~300 lines) | Agents |
+| `design-system/README.md` | Human-readable guide (~100 lines) | Humans |
+| `design-system/patterns/*.md` | Code patterns | Agents |
+
+## 3-Round Interactive Process
+
+```
+Round 1: Style Selection
+├── Present extracted styles with Match Scores
+├── User selects (or "Mix/Custom" for adjustments)
+└── AI calculates fit based on brand personality
+
+Round 2: Animation Selection
+├── Show all available animations from references
+├── User multi-selects desired patterns
+└── Include scroll animations, hover effects
+
+Round 3: Theme & Decorative Direction
+├── AI recommends 3-4 themes based on project
+├── Each theme has USE and AVOID elements
+└── User selects or creates custom theme
+
+Confirmation → Generate Files
+```
+
+## What Gets Generated
+
+### data.yaml (For Agents)
+- Style classification + feel
+- Colors (primary, secondary, semantic)
+- Typography (fonts, weights, sizes)
+- Spacing (grid base, scale)
+- Animations (durations, easing, patterns)
+- Theme direction (use/avoid elements)
+- Psychology (emotions, target audience)
+
+### README.md (For Humans)
+- Overview and characteristics
+- Color palette guide
+- Typography guide
+- Spacing system
+- Theme direction
+- Critical rules
+
+### patterns/*.md (For Agents)
+- `buttons.md` - Button variants and sizes
+- `cards.md` - Card variants
+- `forms.md` - Form elements
+- `scroll-animations.md` - Scroll patterns
+- `decorations.md` - Decorative elements
+
+## Detailed Documentation
+
+| Reference | Use When |
+|-----------|----------|
+| [references/interactive-workflow.md](references/interactive-workflow.md) | Understanding the 3-round loop |
+| [references/generation-steps.md](references/generation-steps.md) | File generation process |
+| [references/data-yaml-schema.md](references/data-yaml-schema.md) | data.yaml structure |
+| [references/error-handling.md](references/error-handling.md) | Handling failures |
+
+## Next Steps After Setup
+
+```bash
+# Plan pages (reads data.yaml)
+/pageplan @prd.md
+
+# Setup development workflow
+/csetup {change-id}
+
+# Start development (agents read data.yaml)
+/cdev {change-id}
+```

package/skills/design-setup/references/CLAUDE.md

@@ -0,0 +1,11 @@
+<claude-mem-context>
+# Recent Activity
+
+<!-- This section is auto-generated by claude-mem. Edit content outside the tags. -->
+
+### Feb 3, 2026
+
+| ID | Time | T | Title | Read |
+|----|------|---|-------|------|
+| #252 | 11:38 PM | 🔵 | Git status reveals extensive refactoring with skills migration and core context reorganization | ~682 |
+</claude-mem-context>