Initial commit

.claude/skills/add-animation/SKILL.md

@@ -0,0 +1,41 @@
+---
+name: add-animation
+description: Add animation to a component with proper setup and cleanup
+disable-model-invocation: true
+---
+
+# Add Animation
+
+Add animation to: $ARGUMENTS
+
+## Process
+
+1. **Choose animation library**
+   - GSAP: Complex timelines, ScrollTrigger, text splitting
+   - Framer Motion: Simple component animations, gestures, layout
+   - CSS: Basic transitions, hover states
+
+2. **For GSAP animations**
+   - Register plugins at file level
+   - Use `gsap.context()` for cleanup
+   - Return `() => ctx.revert()` from useEffect
+   - Use refs for target elements
+
+3. **For Framer Motion**
+   - Wrap conditionally rendered elements in `AnimatePresence`
+   - Add `key` prop for AnimatePresence children
+   - Use `initial`, `animate`, `exit` props
+
+4. **For scroll-triggered animations**
+   - Set appropriate `start` and `end` points
+   - Use `toggleActions` for replay behavior
+   - Consider mobile: disable or simplify
+
+5. **Performance considerations**
+   - Use transform properties (x, y, scale, rotation)
+   - Add `force3D: true` for GPU acceleration
+   - Check if animation should be disabled on mobile
+
+## Output
+
+Show the implemented animation code with proper cleanup.

.claude/skills/add-to-registry/SKILL.md

@@ -0,0 +1,47 @@
+---
+name: add-to-registry
+description: Add a component to the registry system for AI tooling
+disable-model-invocation: true
+---
+
+# Add to Registry
+
+Add component to registry: $ARGUMENTS
+
+## Process
+
+1. **Identify component props**
+   - Read the component's TypeScript interface
+   - Note required vs optional props
+   - Note default values
+
+2. **Update registry.json**
+   - Add full entry with constraints, propsSchema, usage example
+   - Include textRules for text props (min/max chars)
+   - Include do/dont guidelines
+
+3. **Create component config**
+   - Create `registry/components/[Name].json`
+   - Match structure of existing component configs
+
+4. **Create schema file**
+   - Create `registry/schemas/[Name].schema.json`
+   - Include name and propsSchema
+   - Use `?` suffix for optional props
+   - Include `(default: 'value')` for defaults
+
+5. **Update index.json**
+   - Add entry with category, intent, bestFor, avoidWhen
+   - Include requires array and import path
+
+6. **Update intents.json**
+   - Add component to relevant intent arrays
+
+7. **Verify consistency**
+   - Props in schema match component interface exactly
+   - Optional props marked with `?`
+   - Default values documented
+
+## Output
+
+Report all updated registry files and confirm props match component.

.claude/skills/code-review/SKILL.md

@@ -0,0 +1,61 @@
+---
+name: code-review
+description: Frontend code review checklist for React, TypeScript, and Tailwind
+---
+
+# Frontend Code Review
+
+Review recently changed files against this checklist.
+
+## Process
+
+1. **Identify Changed Files**
+   - Run `git diff --name-only` to find modified files
+   - Focus on `.tsx`, `.ts` files in `src/`
+
+2. **Review Each File**
+
+### TypeScript
+
+- [ ] No `any` types (use proper types or `unknown`)
+- [ ] Interfaces for component props
+- [ ] No unused imports or variables
+- [ ] Proper error handling (no silent catches)
+
+### React Patterns
+
+- [ ] `"use client"` only when needed (hooks, events, browser APIs)
+- [ ] No unnecessary `React.memo`
+- [ ] Stable callbacks with `useCallback` when passed as props
+- [ ] Cleanup in `useEffect` (event listeners, subscriptions, GSAP)
+- [ ] Keys on mapped elements (not index unless static list)
+
+### Component Structure
+
+- [ ] Logic extracted to hooks (if complex)
+- [ ] Props interface defined
+- [ ] Default export at bottom
+
+### Tailwind/Styling
+
+- [ ] Using `cls()` for conditional classes
+- [ ] Responsive classes (mobile-first)
+- [ ] No hardcoded colors (use CSS variables)
+- [ ] Proper z-index layering
+
+### Performance
+
+- [ ] Images use `next/image` with proper sizing
+- [ ] Heavy components use dynamic import if below fold
+- [ ] No unnecessary re-renders (check deps arrays)
+
+### Accessibility
+
+- [ ] Interactive elements are focusable
+- [ ] Images have alt text
+- [ ] Buttons have accessible names
+- [ ] `aria-hidden` on decorative elements
+
+3. **Report Findings**
+   - List issues grouped by severity: Critical, Warning, Suggestion
+   - Provide specific line numbers and fixes

.claude/skills/debug/SKILL.md

@@ -0,0 +1,47 @@
+---
+name: debug
+description: Systematic debugging workflow to find and fix issues
+disable-model-invocation: true
+---
+
+# Debug
+
+Debug issue: $ARGUMENTS
+
+## Process
+
+1. **Understand the problem**
+   - What is the expected behavior?
+   - What is the actual behavior?
+   - When did it start happening?
+   - Is it reproducible?
+
+2. **Gather information**
+   - Check browser console for errors
+   - Check terminal for server errors
+   - Look at network requests
+   - Check component props/state
+
+3. **Isolate the cause**
+   - Find the smallest reproduction
+   - Identify which component/function is involved
+   - Check recent changes to that area
+   - Add console.logs or debugger statements
+
+4. **Form hypothesis**
+   - Based on evidence, what could cause this?
+   - List possible causes in order of likelihood
+
+5. **Test and fix**
+   - Test most likely cause first
+   - Make minimal change to fix
+   - Verify fix doesn't break other things
+
+6. **Verify**
+   - Confirm original issue is resolved
+   - Test related functionality
+   - Remove debug statements
+
+## Output
+
+Report findings, root cause, and the fix applied.

.claude/skills/performance/SKILL.md

@@ -0,0 +1,57 @@
+---
+name: performance
+description: Performance optimization workflow for frontend applications
+disable-model-invocation: true
+---
+
+# Performance
+
+Optimize: $ARGUMENTS
+
+## Process
+
+1. **Identify the problem**
+   - What is slow? (initial load, interaction, render)
+   - Measure current performance
+   - Set a target improvement
+
+2. **Analyze causes**
+   - Large bundle size?
+   - Unnecessary re-renders?
+   - Expensive calculations?
+   - Network waterfalls?
+   - Layout thrashing?
+
+3. **React optimizations**
+   - Add `memo()` for expensive list items
+   - Use `useMemo` for costly computations
+   - Use `useCallback` for stable function refs
+   - Split components to isolate re-renders
+   - Lazy load with `dynamic()` or `React.lazy()`
+
+4. **Bundle optimizations**
+   - Code split large dependencies
+   - Dynamic imports for heavy features
+   - Tree shake unused code
+   - Analyze with bundle analyzer
+
+5. **Render optimizations**
+   - Virtualize long lists
+   - Debounce/throttle frequent updates
+   - Use CSS transforms over layout properties
+   - Avoid layout shifts
+
+6. **Network optimizations**
+   - Preload critical resources
+   - Cache API responses
+   - Optimize images (WebP, lazy load)
+   - Reduce request waterfalls
+
+7. **Verify improvement**
+   - Measure after changes
+   - Compare to baseline
+   - Test on slow devices/networks
+
+## Output
+
+Report optimizations applied and measured improvements.

.claude/skills/refactor/SKILL.md

@@ -0,0 +1,55 @@
+---
+name: refactor
+description: Systematic refactoring workflow for safe code improvements
+disable-model-invocation: true
+---
+
+# Refactor
+
+Refactor: $ARGUMENTS
+
+## Process
+
+1. **Understand current state**
+   - Read the code to refactor
+   - Identify what it does and why
+   - Note all usages/dependencies
+   - Check for existing tests
+
+2. **Define the goal**
+   - What problem are we solving?
+   - Readability? Performance? Maintainability?
+   - What should NOT change? (behavior, API, **UI**)
+
+3. **Plan changes**
+   - Break into small, safe steps
+   - Each step should leave code working
+   - Identify risk points
+
+4. **Execute incrementally**
+   - One change at a time
+   - Verify after each step
+   - Keep commits atomic
+
+5. **Common refactors**
+   - Extract function/component
+   - Rename for clarity
+   - Simplify conditionals
+   - Remove duplication
+   - Split large files
+   - Move code to better location
+
+6. **Verify**
+   - Run existing tests
+   - Test affected functionality
+   - Check for regressions
+   - Ensure behavior unchanged
+
+7. **UI Preservation (Critical)**
+   - Compare CSS classes line by line before consolidating
+   - Duplicate code may have subtle differences (sizes, colors)
+   - Never assume - verify before merging branches
+
+## Output
+
+Report changes made, files affected, and verification steps taken.

.claude/skills/scaffold-component/SKILL.md

@@ -0,0 +1,59 @@
+---
+name: scaffold-component
+description: Generate a new React component following project conventions
+disable-model-invocation: true
+---
+
+# Scaffold Component
+
+Generate a new component at the specified path with proper structure.
+
+## Usage
+
+`/scaffold-component ComponentName path/to/component`
+
+## Process
+
+1. **Parse Arguments**
+   - First argument: Component name (PascalCase)
+   - Second argument: Path relative to `src/components/`
+
+2. **Create Component File**
+
+   ```tsx
+   "use client";
+
+   import { cls } from "@/lib/utils";
+
+   interface $NAMEProps {
+     className?: string;
+   }
+
+   const $NAME = ({ className }: $NAMEProps) => {
+     return <div className={cls("", className)}>{/* TODO: Implement */}</div>;
+   };
+
+   export default $NAME;
+   ```
+
+3. **Determine if Hook is Needed**
+   - Ask user if component needs state/effects
+   - If yes, create hook file at `src/hooks/{domain}/use{Name}.ts`
+
+4. **Determine if Constants are Needed**
+   - Ask user if component has static text
+   - If yes, create constants file at `src/constants/{domain}/{name}.ts`
+
+## File Naming
+
+- Component: `ComponentName.tsx` (PascalCase)
+- Hook: `useComponentName.ts` (camelCase with use prefix)
+- Constants: `componentName.ts` (camelCase)
+
+## Output
+
+Report created files and remind user to:
+
+1. Add necessary imports
+2. Implement the component logic
+3. Add to parent component/page