@champpaba/claude-agent-kit 3.5.2 → 3.6.0

package/skills/page-planner/references/animation-patterns.md

@@ -0,0 +1,169 @@
+# Animation Patterns
+
+Animation blueprint guide based on data.yaml tokens.
+
+---
+
+## Core Principles
+
+**From data.yaml:**
+- Durations: 150ms (quick), 300ms (normal), 500ms (slow)
+- Easing: ease-in-out (default)
+- Properties: GPU-accelerated ONLY (transform, opacity)
+
+**Avoid:**
+- width, height (causes layout recalculation)
+- top, left, margin (use transform instead)
+- font-size (causes text reflow)
+
+---
+
+## Button Animations
+
+### Primary CTA
+
+**Hover:**
+- Properties: scale(1.05) + box-shadow
+- Duration: 150ms
+- Code: `transition-all duration-150 hover:scale-105 hover:shadow-lg`
+
+**Active:**
+- Properties: scale(0.95)
+- Duration: 100ms
+- Code: `active:scale-95`
+
+**Loading:**
+- Properties: opacity(70%) + spinner
+- Duration: 300ms
+- Code: `disabled:opacity-70`
+
+### Secondary Button
+
+**Hover:**
+- Properties: background-color shift
+- Duration: 150ms
+- Code: `transition-colors duration-150 hover:bg-secondary/80`
+
+---
+
+## Card Animations
+
+### Feature Card
+
+**Hover:**
+- Properties: box-shadow (sm → xl)
+- Duration: 300ms
+- Code: `transition-shadow duration-300 hover:shadow-xl`
+
+### Interactive Card
+
+**Hover:**
+- Properties: box-shadow + border glow
+- Duration: 300ms
+- Code: `transition-all duration-300 hover:shadow-xl hover:border-primary/50`
+
+**Active:**
+- Properties: scale(0.98)
+- Duration: 100ms
+- Code: `active:scale-98`
+
+---
+
+## Input Animations
+
+### Text Input
+
+**Focus:**
+- Properties: ring-2 + border-color
+- Duration: 200ms
+- Code: `transition-all duration-200 focus:ring-2 focus:ring-primary focus:border-primary`
+
+**Error:**
+- Properties: border-destructive
+- Duration: 300ms
+- Code: `border-destructive` (optionally + shake animation)
+
+---
+
+## Navigation Animations
+
+### Desktop Menu Hover
+
+- Properties: background-color
+- Duration: 150ms
+- Code: `transition-colors duration-150 hover:bg-accent`
+
+### Mobile Sidebar Slide
+
+- Properties: translateX(-100% → 0)
+- Duration: 300ms
+- Easing: cubic-bezier(0.4, 0, 0.2, 1)
+
+**Framer Motion:**
+```tsx
+<motion.div
+  initial={{ x: "-100%" }}
+  animate={{ x: 0 }}
+  exit={{ x: "-100%" }}
+  transition={{ duration: 0.3, ease: [0.4, 0, 0.2, 1] }}
+>
+```
+
+---
+
+## Icon Animations
+
+### Chevron Rotate
+
+- Properties: rotate(0° → 180°)
+- Duration: 200ms
+- Code: `transition-transform duration-200 [data-state=open]:rotate-180`
+
+### Loading Spinner
+
+- Properties: rotate(360°)
+- Duration: 1000ms
+- Easing: linear
+- Code: `animate-spin`
+
+---
+
+## Modal Animations
+
+### Background Overlay
+
+- Properties: opacity(0 → 100%)
+- Duration: 200ms
+- Code: `transition-opacity duration-200`
+
+### Dialog Content
+
+- Properties: opacity + scale(0.95 → 1)
+- Duration: 300ms
+- Easing: ease-in-out
+
+---
+
+## Performance Guidelines
+
+**GPU-accelerated (preferred):**
+- transform (translate, scale, rotate)
+- opacity
+- filter (blur, brightness)
+
+**Avoid for animations:**
+- width, height
+- top, left, margin
+- font-size
+
+---
+
+## Animation Checklist
+
+Before implementing:
+- [ ] All buttons use scale + shadow (150ms)
+- [ ] All cards use shadow elevation (300ms)
+- [ ] All inputs use ring (200ms)
+- [ ] All durations from data.yaml
+- [ ] All properties GPU-accelerated
+- [ ] Tested on mobile (not janky)

package/skills/page-planner/references/generation-steps.md

@@ -0,0 +1,166 @@
+# Generation Steps
+
+Complete step-by-step process for generating page plans.
+
+---
+
+## STEP 1: Detect Change Context
+
+1. Determine change ID:
+   - Check command argument for change ID
+   - If not provided, find most recently modified change in `openspec/changes/`
+
+2. If no change found:
+   ```
+   ❌ No active change found. Run after OpenSpec generates proposal.md
+   ```
+   → Stop
+
+3. Set output path: `openspec/changes/{changeId}/page-plan.md`
+
+---
+
+## STEP 2: Read Context Files
+
+### Required Files
+- `openspec/changes/{changeId}/proposal.md`
+- `openspec/changes/{changeId}/tasks.md`
+- `openspec/changes/{changeId}/.claude/phases.md`
+- `design-system/data.yaml`
+
+### User Files
+Extract files with `@` prefix from user message.
+
+### Load Process
+1. Read all context files
+2. Join with separator
+3. Store proposal, tasks, phases separately for analysis
+4. Extract design tokens from data.yaml:
+   - Primary color
+   - Spacing scale
+   - Component library
+   - Shadows
+
+---
+
+## STEP 3: Search Existing Components
+
+Search patterns for common components:
+- Navbar/Navigation: `**/{Navbar,Navigation}*.{tsx,jsx,vue}`
+- Footer: `**/{Footer}*.{tsx,jsx,vue}`
+- Sidebar/Drawer: `**/{Sidebar,Drawer}*.{tsx,jsx,vue}`
+- Header: `**/{Header}*.{tsx,jsx,vue}`
+
+For each found:
+- Extract component name
+- Store file path
+- Find exported functions
+
+---
+
+## STEP 4: Generate Plan Sections
+
+### 4.1: Component Plan
+
+**Reuse Components:**
+```markdown
+### 🔄 Reuse Components (Found in codebase)
+- **Navbar**
+  - Path: `/components/Navbar.tsx`
+  - Usage: `<Navbar />`
+```
+
+**New Shared Components:**
+```markdown
+### ✅ Create New Components
+#### Shared Components
+- **Footer**
+  - Purpose: Site-wide footer
+  - Store at: `/components/Footer.tsx`
+```
+
+**New Specific Components:**
+```markdown
+#### Page-Specific Components
+- **HeroSection**
+  - Purpose: Landing page hero
+  - Store at: `/app/landing/HeroSection.tsx`
+```
+
+### 4.2: Page Structure
+
+```tsx
+<Layout>
+  <Navbar />        {/* Reuse */}
+  <HeroSection />   {/* New specific */}
+  <FeatureGrid />   {/* New specific */}
+  <Footer />        {/* New shared */}
+</Layout>
+```
+
+### 4.3: Layout Wireframe
+
+Generate ASCII art for:
+- Desktop (>1024px)
+- Tablet (768-1023px)
+- Mobile (<768px)
+
+Include:
+- Container sizes
+- Grid columns
+- Spacing values
+
+### 4.4: Animation Blueprint
+
+From data.yaml, define:
+- Button animations (hover, active, loading)
+- Card animations (hover, active)
+- Input animations (focus, error)
+- Navigation animations
+- Modal animations
+
+### 4.5: UI States
+
+For each interactive component:
+- Empty state (message + CTA)
+- Loading state (skeleton/spinner)
+- Success state (confirmation)
+- Error state (message + retry)
+- Disabled state (explanation)
+
+### 4.6: Asset Checklist
+
+**Images:**
+- Filename, dimensions
+- WebP format
+- Responsive sizes
+- Loading strategy
+- Alt text
+
+**Icons:**
+- SVG format preferred
+- Optimization notes
+
+---
+
+## STEP 5: Write Output
+
+1. Write to `openspec/changes/{changeId}/page-plan.md`
+
+2. Report summary:
+   ```
+   ✅ Page plan generated!
+
+   📄 Output: openspec/changes/{changeId}/page-plan.md
+
+   📊 Summary:
+   - Found components: X (reuse)
+   - New shared: Y
+   - New specific: Z
+   - Assets needed: N
+   ```
+
+3. Next steps:
+   - Review page-plan.md
+   - Prepare assets
+   - Run /csetup

package/skills/page-planner/references/wireframe-patterns.md

@@ -0,0 +1,182 @@
+# Wireframe Patterns
+
+ASCII art templates for common page layouts.
+
+---
+
+## Landing Page
+
+### Desktop View (>1024px)
+```
+┌────────────────────────────────────────────────────┐
+│ [Logo]        [Nav Menu]           [CTA Button]   │  ← Navbar (h-16)
+├────────────────────────────────────────────────────┤
+│                                                    │
+│                  Hero Section                      │  ← Full viewport
+│              [Large Headline]                      │
+│            [Subheadline text]                      │
+│              [Primary CTA]                         │
+│                                                    │
+├────────────────────────────────────────────────────┤
+│  ┌──────────┐  ┌──────────┐  ┌──────────┐        │
+│  │  Card 1  │  │  Card 2  │  │  Card 3  │        │  ← Features
+│  │  [Icon]  │  │  [Icon]  │  │  [Icon]  │        │     (grid-cols-3)
+│  └──────────┘  └──────────┘  └──────────┘        │
+├────────────────────────────────────────────────────┤
+│ [Footer Links]              [Social Icons]        │  ← Footer
+└────────────────────────────────────────────────────┘
+```
+
+### Tablet View (768-1023px)
+```
+┌──────────────────────────────┐
+│ [Logo]   [Nav]      [☰]     │
+├──────────────────────────────┤
+│         Hero Section         │
+│       [Headline]             │
+│       [CTA]                  │
+├──────────────────────────────┤
+│  ┌──────────┐ ┌──────────┐  │
+│  │  Card 1  │ │  Card 2  │  │  ← grid-cols-2
+│  └──────────┘ └──────────┘  │
+│  ┌──────────┐               │
+│  │  Card 3  │               │
+│  └──────────┘               │
+├──────────────────────────────┤
+│ Footer (stacked)             │
+└──────────────────────────────┘
+```
+
+### Mobile View (<768px)
+```
+┌────────────────┐
+│ [Logo]    [☰] │
+├────────────────┤
+│   Hero         │
+│  [Headline]    │
+│  [CTA]         │
+├────────────────┤
+│ ┌────────────┐ │
+│ │   Card 1   │ │  ← grid-cols-1
+│ └────────────┘ │
+│ ┌────────────┐ │
+│ │   Card 2   │ │
+│ └────────────┘ │
+├────────────────┤
+│ Footer         │
+└────────────────┘
+```
+
+---
+
+## Dashboard
+
+### Desktop View
+```
+┌─────────────────────────────────────────────────────────────┐
+│ [Logo]  [Search]                    [Notifications] [User] │  ← Top bar
+├──────────┬──────────────────────────────────────────────────┤
+│          │                                                  │
+│  Sidebar │              Main Content Area                   │
+│          │  ┌────────────┬────────────┬────────────┐       │
+│  [Nav]   │  │  Stat 1    │  Stat 2    │  Stat 3    │       │  ← Stats
+│  [Nav]   │  └────────────┴────────────┴────────────┘       │
+│  [Nav]   │                                                  │
+│  [Nav]   │  ┌─────────────────────────────────────────┐    │
+│          │  │           Chart / Table                  │    │  ← Main
+│          │  │                                          │    │
+│          │  └─────────────────────────────────────────┘    │
+│          │                                                  │
+├──────────┴──────────────────────────────────────────────────┤
+│ Footer (optional)                                           │
+└─────────────────────────────────────────────────────────────┘
+```
+
+### Mobile View
+```
+┌────────────────┐
+│ [☰]  [Logo]   │
+├────────────────┤
+│  Stats (stack) │
+│  ┌──────────┐  │
+│  │ Stat 1   │  │
+│  └──────────┘  │
+│  ┌──────────┐  │
+│  │ Stat 2   │  │
+│  └──────────┘  │
+├────────────────┤
+│  Chart/Table   │
+│  (scrollable)  │
+├────────────────┤
+│ [Nav] [Nav]   │  ← Bottom nav
+└────────────────┘
+```
+
+---
+
+## Auth Page (Login/Signup)
+
+### Desktop View
+```
+┌─────────────────────────────────────────────────────────────┐
+│                                                             │
+│   ┌───────────────────────┬───────────────────────────┐   │
+│   │                       │                           │   │
+│   │     Illustration      │      Form Card            │   │
+│   │     or Branding       │  ┌───────────────────┐   │   │
+│   │                       │  │  [Logo]           │   │   │
+│   │                       │  │  [Title]          │   │   │
+│   │                       │  │  [Input: Email]   │   │   │
+│   │                       │  │  [Input: Password]│   │   │
+│   │                       │  │  [CTA Button]     │   │   │
+│   │                       │  │  [Link: Forgot]   │   │   │
+│   │                       │  └───────────────────┘   │   │
+│   │                       │                           │   │
+│   └───────────────────────┴───────────────────────────┘   │
+│                                                             │
+└─────────────────────────────────────────────────────────────┘
+```
+
+### Mobile View
+```
+┌────────────────┐
+│                │
+│    [Logo]      │
+│                │
+│  [Title]       │
+│                │
+│ ┌────────────┐ │
+│ │ Email      │ │
+│ └────────────┘ │
+│ ┌────────────┐ │
+│ │ Password   │ │
+│ └────────────┘ │
+│                │
+│ [Login Button] │
+│                │
+│ [Forgot link]  │
+│ [Signup link]  │
+│                │
+└────────────────┘
+```
+
+---
+
+## Spacing Reference
+
+| Element | Desktop | Tablet | Mobile |
+|---------|---------|--------|--------|
+| Section padding | py-24 | py-16 | py-12 |
+| Card gaps | gap-6 | gap-4 | gap-4 |
+| Container | max-w-7xl | max-w-3xl | px-4 |
+| Navbar height | h-16 | h-14 | h-14 |
+
+---
+
+## Grid Breakpoints
+
+| Breakpoint | Width | Grid |
+|------------|-------|------|
+| Desktop | >1024px | 3+ columns |
+| Tablet | 768-1023px | 2 columns |
+| Mobile | <768px | 1 column |

package/skills/page-planner/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>