@champpaba/claude-agent-kit 3.5.2 → 3.6.1

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,12 @@
+<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 |
+|----|------|---|-------|------|
+| #278 | 11:52 PM | 🔵 | design-setup skill provides interactive 3-round design system generation from extracted sites | ~840 |
+| #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,110 @@
+---
+name: design-setup
+description: Interactive design system setup with theme selection and AI recommendations
+allowed-tools: Read, Write, Glob, AskUserQuestion
+---
+
+# 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>

package/skills/design-setup/references/data-yaml-schema.md

@@ -0,0 +1,205 @@
+# data.yaml Schema
+
+Complete schema for the generated design system file.
+
+---
+
+## File Location
+
+```
+design-system/data.yaml
+```
+
+---
+
+## Complete Schema
+
+```yaml
+# Design System
+# Generated by: /designsetup
+# Source: {site}
+# Style: {style}
+
+meta:
+  generated_at: "2026-02-03T15:30:00Z"
+  source_site: "airbnb"
+  style: "Modern SaaS"
+  theme: "Travel & Adventure"
+
+psychology:
+  style_classification: "Modern SaaS"
+
+  emotions_evoked:
+    - emotion: "Trust"
+      reason: "Clean typography and ample whitespace"
+    - emotion: "Excitement"
+      reason: "Vibrant accent colors"
+
+  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"
+    - name: "Whitespace"
+      description: "Generous padding"
+
+  why_it_works:
+    - "Large hero images create emotional connection"
+    - "Simple navigation reduces cognitive load"
+
+  design_philosophy:
+    core_belief: "Design should feel human"
+    key_principles:
+      - "Simplicity over complexity"
+      - "Content-first approach"
+
+style:
+  detected: "Modern SaaS"
+  characteristics:
+    - "Clean lines"
+    - "Soft shadows"
+    - "Rounded corners"
+  feel: "Professional yet approachable"
+
+colors:
+  primary:
+    DEFAULT: "#FF5A5F"
+    foreground: "#ffffff"
+    hover: "#E04E52"
+  secondary:
+    DEFAULT: "#00A699"
+    foreground: "#ffffff"
+    hover: "#008F84"
+  background:
+    DEFAULT: "#ffffff"
+    muted: "#f1f5f9"
+    subtle: "#f8fafc"
+  foreground:
+    DEFAULT: "#0a0a0a"
+    muted: "#64748b"
+    subtle: "#94a3b8"
+  accent:
+    DEFAULT: "#f97316"
+    foreground: "#ffffff"
+  semantic:
+    success: "#10b981"
+    warning: "#f59e0b"
+    error: "#ef4444"
+    info: "#3b82f6"
+
+typography:
+  font_family:
+    sans: "'Inter', sans-serif"
+    heading: "'Inter', sans-serif"
+    mono: "'Fira Code', monospace"
+  weights:
+    - "400"
+    - "500"
+    - "600"
+    - "700"
+  sizes:
+    xs: "12px"
+    sm: "14px"
+    base: "16px"
+    lg: "18px"
+    xl: "20px"
+    2xl: "24px"
+    3xl: "30px"
+    4xl: "36px"
+    5xl: "48px"
+
+spacing:
+  base: "8px"
+  scale:
+    - 4
+    - 8
+    - 12
+    - 16
+    - 24
+    - 32
+    - 48
+    - 64
+    - 96
+
+border_radius:
+  sm: "4px"
+  md: "8px"
+  lg: "12px"
+  full: "9999px"
+
+shadows:
+  sm: "0 1px 2px rgba(0, 0, 0, 0.05)"
+  md: "0 4px 6px rgba(0, 0, 0, 0.1)"
+  lg: "0 10px 15px rgba(0, 0, 0, 0.1)"
+
+animations:
+  durations:
+    fast: "150ms"
+    normal: "200ms"
+    slow: "300ms"
+  easing:
+    default: "ease-in-out"
+    bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)"
+  component_animations:
+    button_hover: "scale + shadow"
+    card_hover: "translateY + shadow"
+  scroll_animations:
+    enabled: true
+    patterns:
+      - "fade-in"
+      - "parallax"
+      - "stacking-cards"
+
+theme:
+  name: "Travel & Adventure"
+  decorative_elements:
+    - "world maps"
+    - "compass icons"
+    - "destination pins"
+  avoid_elements:
+    - "corporate icons"
+    - "generic stock photos"
+```
+
+---
+
+## Section Descriptions
+
+| Section | Purpose |
+|---------|---------|
+| `meta` | File metadata (generated date, source) |
+| `psychology` | UX/UI psychology analysis from extraction |
+| `style` | Design style classification |
+| `colors` | Color tokens with variants |
+| `typography` | Font families, weights, sizes |
+| `spacing` | Grid system and scale |
+| `border_radius` | Radius values |
+| `shadows` | Shadow levels |
+| `animations` | Animation settings |
+| `theme` | Decorative direction |
+
+---
+
+## Usage by Agents
+
+```markdown
+# In agent workflow
+
+## STEP 0.5: Load Design System
+
+Read: design-system/data.yaml
+
+Extract:
+- colors.primary.DEFAULT → For buttons, links
+- typography.font_family.sans → For all text
+- spacing.scale → For padding/margin values
+- animations.durations → For transitions
+- theme.decorative_elements → For landing pages
+```