opencodekit 0.15.1 → 0.15.2

package/dist/template/.opencode/skill/frontend-design/references/animation/motion-advanced.md

@@ -0,0 +1,224 @@
+# Motion Advanced
+
+Scroll, orchestration, TypeScript, performance.
+
+## Scroll Animations
+
+```tsx
+import { motion, useScroll, useTransform } from 'motion/react';
+
+// Scroll progress
+const { scrollYProgress } = useScroll();
+const opacity = useTransform(scrollYProgress, [0, 1], [1, 0]);
+
+<motion.div style={{ opacity }} />
+
+// Element in view
+<motion.div
+  initial={{ opacity: 0 }}
+  whileInView={{ opacity: 1 }}
+  viewport={{ once: true, margin: '-100px' }}
+/>
+```
+
+## Scroll-linked Animations
+
+```tsx
+const { scrollYProgress } = useScroll({
+  target: ref,
+  offset: ['start end', 'end start']
+});
+
+const y = useTransform(scrollYProgress, [0, 1], [100, -100]);
+const scale = useTransform(scrollYProgress, [0, 0.5, 1], [0.8, 1, 0.8]);
+```
+
+## AnimatePresence Modes
+
+```tsx
+// Wait for exit before enter
+<AnimatePresence mode="wait">
+  <motion.div key={currentPage} />
+</AnimatePresence>
+
+// Popover layout (no exit/enter overlap)
+<AnimatePresence mode="popLayout">
+  {items.map(item => <motion.div key={item.id} layout />)}
+</AnimatePresence>
+
+// Sync (default) - exit and enter simultaneously
+<AnimatePresence mode="sync" />
+```
+
+## Orchestration
+
+```tsx
+const container = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      delayChildren: 0.3,
+      staggerChildren: 0.1,
+      staggerDirection: -1,  // reverse
+      when: 'beforeChildren'  // or 'afterChildren'
+    }
+  }
+};
+```
+
+## TypeScript
+
+```tsx
+import type { Variants, Transition, MotionProps } from 'motion/react';
+
+const variants: Variants = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1 }
+};
+
+const transition: Transition = {
+  type: 'spring',
+  stiffness: 300
+};
+
+interface Props extends MotionProps {
+  isOpen: boolean;
+}
+```
+
+## useMotionValueEvent
+
+```tsx
+import { useMotionValue, useMotionValueEvent } from 'motion/react';
+
+const x = useMotionValue(0);
+
+useMotionValueEvent(x, 'change', (latest) => {
+  console.log('x changed to', latest);
+});
+```
+
+## useInView
+
+```tsx
+import { useInView } from 'motion/react';
+
+const ref = useRef(null);
+const isInView = useInView(ref, { once: true });
+
+<div ref={ref}>
+  {isInView && <motion.div animate={{ opacity: 1 }} />}
+</div>
+```
+
+## Reorder (Drag to Reorder)
+
+```tsx
+import { Reorder } from 'motion/react';
+
+const [items, setItems] = useState([1, 2, 3]);
+
+<Reorder.Group values={items} onReorder={setItems}>
+  {items.map(item => (
+    <Reorder.Item key={item} value={item}>
+      {item}
+    </Reorder.Item>
+  ))}
+</Reorder.Group>
+```
+
+## Performance
+
+### Use transform properties
+```tsx
+// Good - GPU accelerated
+animate={{ x: 100, scale: 1.1, rotate: 45, opacity: 0.5 }}
+
+// Avoid - triggers layout
+animate={{ width: 200, left: 100, marginTop: 20 }}
+```
+
+### Reduce motion
+```tsx
+import { useReducedMotion } from 'motion/react';
+
+const prefersReduced = useReducedMotion();
+
+<motion.div
+  animate={prefersReduced ? {} : { scale: 1.1 }}
+/>
+```
+
+### Layout animation performance
+```tsx
+// Add layoutId for better performance on shared layouts
+<motion.div layoutId="card" />
+
+// Use layoutRoot to isolate layout calculations
+<motion.div layoutRoot />
+```
+
+## Common Patterns
+
+### Fade in on scroll
+```tsx
+<motion.div
+  initial={{ opacity: 0, y: 50 }}
+  whileInView={{ opacity: 1, y: 0 }}
+  viewport={{ once: true }}
+  transition={{ duration: 0.6 }}
+/>
+```
+
+### Page transitions
+```tsx
+<AnimatePresence mode="wait">
+  <motion.main
+    key={pathname}
+    initial={{ opacity: 0, x: 20 }}
+    animate={{ opacity: 1, x: 0 }}
+    exit={{ opacity: 0, x: -20 }}
+  >
+    {children}
+  </motion.main>
+</AnimatePresence>
+```
+
+### Expandable card
+```tsx
+<motion.div layout onClick={() => setExpanded(!expanded)}>
+  <motion.h2 layout="position">Title</motion.h2>
+  <AnimatePresence>
+    {expanded && (
+      <motion.p
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+      >
+        Content
+      </motion.p>
+    )}
+  </AnimatePresence>
+</motion.div>
+```
+
+## When to Use anime.js Instead
+
+anime.js v4 still appropriate for:
+- Complex SVG morphing (`svg.morphTo`)
+- SVG line drawing (`svg.createDrawable`)
+- Timeline-heavy sequences in vanilla JS
+- Non-React projects
+
+```javascript
+// anime.js for SVG morphing
+import { animate, svg } from 'animejs';
+animate('#path1', { d: svg.morphTo('#path2'), duration: 1 });
+```
+
+## Installation
+
+```bash
+npm install motion
+```

package/dist/template/.opencode/skill/frontend-design/references/animation/motion-core.md

@@ -0,0 +1,171 @@
+# Motion Core (formerly Framer Motion)
+
+**Import**: `import { motion, AnimatePresence } from 'motion/react'`
+
+## Basic Animation
+
+```tsx
+// Simple animate on mount
+<motion.div
+  initial={{ opacity: 0, y: 20 }}
+  animate={{ opacity: 1, y: 0 }}
+  transition={{ duration: 0.6 }}
+/>
+
+// Shorthand (no transition object)
+<motion.div animate={{ scale: 1.1 }} />
+```
+
+## Variants (Recommended Pattern)
+
+```tsx
+const variants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: { opacity: 1, y: 0 }
+};
+
+<motion.div
+  variants={variants}
+  initial="hidden"
+  animate="visible"
+/>
+```
+
+## Gestures
+
+```tsx
+<motion.button
+  whileHover={{ scale: 1.05 }}
+  whileTap={{ scale: 0.95 }}
+  whileFocus={{ outline: '2px solid blue' }}
+/>
+
+// Drag
+<motion.div
+  drag
+  dragConstraints={{ left: 0, right: 300 }}
+  dragElastic={0.2}
+/>
+```
+
+## Layout Animations
+
+```tsx
+// Automatic layout animation
+<motion.div layout />
+
+// Shared layout
+<motion.div layoutId="shared-element" />
+
+// Layout with spring
+<motion.div layout transition={{ type: 'spring', stiffness: 300 }} />
+```
+
+## Exit Animations (AnimatePresence)
+
+```tsx
+import { AnimatePresence } from 'motion/react';
+
+<AnimatePresence>
+  {isVisible && (
+    <motion.div
+      key="modal"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+    />
+  )}
+</AnimatePresence>
+```
+
+## Stagger Children
+
+```tsx
+const container = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: { staggerChildren: 0.1 }
+  }
+};
+
+const item = {
+  hidden: { opacity: 0, y: 20 },
+  visible: { opacity: 1, y: 0 }
+};
+
+<motion.ul variants={container} initial="hidden" animate="visible">
+  {items.map(i => <motion.li key={i} variants={item} />)}
+</motion.ul>
+```
+
+## Transition Types
+
+```tsx
+// Spring (default for physical properties)
+transition={{ type: 'spring', stiffness: 300, damping: 20 }}
+
+// Tween
+transition={{ type: 'tween', duration: 0.5, ease: 'easeInOut' }}
+
+// Inertia (for drag)
+transition={{ type: 'inertia', velocity: 50 }}
+```
+
+## Common Easing
+
+```tsx
+ease: 'linear'
+ease: 'easeIn' | 'easeOut' | 'easeInOut'
+ease: 'circIn' | 'circOut' | 'circInOut'
+ease: 'backIn' | 'backOut' | 'backInOut'
+ease: [0.4, 0, 0.2, 1]  // cubic-bezier
+```
+
+## useAnimate Hook
+
+```tsx
+import { useAnimate } from 'motion/react';
+
+function Component() {
+  const [scope, animate] = useAnimate();
+  
+  const handleClick = async () => {
+    await animate(scope.current, { x: 100 });
+    await animate(scope.current, { scale: 1.2 });
+  };
+  
+  return <div ref={scope} onClick={handleClick} />;
+}
+```
+
+## Motion Values
+
+```tsx
+import { useMotionValue, useTransform } from 'motion/react';
+
+const x = useMotionValue(0);
+const opacity = useTransform(x, [0, 100], [1, 0]);
+
+<motion.div style={{ x, opacity }} drag="x" />
+```
+
+## Integration with Tailwind
+
+```tsx
+// Motion handles animation, Tailwind handles styling
+<motion.div
+  className="bg-blue-500 rounded-lg p-4"
+  whileHover={{ scale: 1.05 }}
+  transition={{ type: 'spring' }}
+/>
+```
+
+## Validation Checklist
+
+- [ ] Import from `motion/react` (not `framer-motion`)
+- [ ] Use variants for complex animations
+- [ ] Wrap conditional renders with `AnimatePresence`
+- [ ] Add `key` prop to animated elements in `AnimatePresence`
+- [ ] Use `layout` for automatic layout animations
+- [ ] Prefer `whileHover`/`whileTap` over CSS `:hover`

package/dist/template/.opencode/skill/frontend-design/references/canvas/execution.md

@@ -0,0 +1,90 @@
+# Canvas Design Execution
+
+Implementation, multi-page systems, quality standards.
+
+## Subtle Reference Integration
+
+Embed conceptual DNA without announcing:
+- Niche reference woven invisibly
+- Those who know feel it intuitively
+- Others experience masterful composition
+- Sophisticated, never literal
+
+## Multi-Page Systems
+
+### Approach
+- First page as single page in coffee table book
+- Distinctly different but cohesive
+- Pages tell story tastefully
+
+### Consistency
+- Shared color palette
+- Consistent typography
+- Related composition
+- Philosophical thread
+
+### Variation
+- Unique twist per page
+- Different focal points
+- Varied arrangements
+- Progressive narrative
+
+## Execution Checklist
+
+Before finalizing:
+- [ ] Philosophy guides every decision
+- [ ] 90% visual, 10% text max
+- [ ] Text minimal and integrated
+- [ ] Nothing overlaps or falls off page
+- [ ] Margins pristine
+- [ ] Composition cohesive
+- [ ] Meticulously crafted appearance
+- [ ] Master-level execution
+- [ ] Could be displayed in museum
+
+## Quality Standards
+
+### Avoid
+- Cartoony aesthetics
+- Amateur execution
+- Text-heavy composition
+- Random placement
+- Overlapping elements
+- Inconsistent spacing
+- Generic AI generation
+
+### Achieve
+- Museum quality
+- Magazine worthy
+- Art object status
+- Top-of-field craftsmanship
+- Philosophical coherence
+- Visual sophistication
+- Systematic precision
+
+## Refinement Process
+
+### Initial Pass
+Create based on philosophy and principles.
+
+### Second Pass (Critical)
+- Don't add more graphics
+- Refine what exists
+- Make extremely crisp
+- Respect minimalism
+- Increase cohesion
+- Polish rather than expand
+
+### Final
+Pristine masterpiece, ready for museum display.
+
+## Use Cases
+
+- Brand identity systems
+- Poster designs
+- Visual manifestos
+- Design system docs
+- Art pieces
+- Editorial design
+- Exhibition materials
+- Coffee table books

package/dist/template/.opencode/skill/frontend-design/references/canvas/philosophy.md

@@ -0,0 +1,94 @@
+# Canvas Design Philosophy
+
+Visual design philosophy for sophisticated compositions.
+
+## Two-Phase Approach
+
+### Phase 1: Philosophy Creation
+Create aesthetic movement through form, space, color, composition. Not layouts - pure visual philosophy.
+
+Structure (4-6 paragraphs):
+- Space and form principles
+- Color and material approach
+- Scale and rhythm guidance
+- Composition and balance
+- Visual hierarchy system
+
+### Phase 2: Visual Expression
+Express through canvas:
+- 90% visual design
+- 10% essential text
+- Museum-quality execution
+- Systematic patterns
+
+## Core Principles
+
+### 1. Visual Communication First
+Information lives in design, not paragraphs:
+- Color zones and fields
+- Geometric precision
+- Spatial relationships
+- Visual weight and tension
+
+### 2. Minimal Text
+Text as rare, powerful gesture:
+- Never paragraphs
+- Only essential words
+- Integrated into architecture
+- Typography as visual element
+
+### 3. Expert Craftsmanship
+Work must appear:
+- Meticulously crafted
+- Product of countless hours
+- Master-level execution
+- Museum-worthy quality
+
+### 4. Systematic Patterns
+Scientific visual language:
+- Repeating patterns = rhythm
+- Perfect geometric shapes
+- Dense accumulation builds meaning
+- Patient repetition rewards viewing
+
+## Design Movements
+
+### Concrete Poetry
+Monumental form, bold geometry. Massive color blocks. Sculptural typography. Text as rare, powerful gesture.
+
+### Chromatic Language
+Color as information. Geometric precision. Color zones create meaning. Words only anchor what color shows.
+
+### Analog Meditation
+Quiet contemplation through texture. Paper grain, ink bleeds. Vast negative space. Images breathe across pages.
+
+### Organic Systems
+Natural clustering, modular growth. Rounded forms, organic arrangements. Information through diagrams.
+
+### Geometric Silence
+Pure order and restraint. Grid precision. Dramatic negative space. Swiss formalism meets Brutalist honesty.
+
+## Implementation
+
+### Color
+```css
+@theme {
+  --color-primary: oklch(0.55 0.22 264);
+  --color-accent: oklch(0.75 0.18 45);
+}
+```
+
+Limited (2-5), cohesive, purposeful relationships.
+
+### Typography
+- Light weights (200-300)
+- Clean sans-serifs
+- Geometric precision
+- Small for labels, large for rare impact
+
+### Composition
+- Repeating patterns establish rhythm
+- Perfect geometric shapes
+- Nothing falls off page
+- Nothing overlaps unintentionally
+- Proper margins non-negotiable

package/dist/template/.opencode/skill/frontend-design/references/shadcn/accessibility.md

@@ -0,0 +1,132 @@
+# shadcn/ui Accessibility
+
+ARIA patterns, keyboard navigation, screen reader support via Radix UI.
+
+## Radix Foundation
+
+Built-in: keyboard navigation, screen reader announcements, focus management, ARIA automatic.
+
+## Keyboard Navigation
+
+### Focus Management
+```tsx
+<Button className="focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
+
+<!-- Skip link -->
+<a href="#main" className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2">
+  Skip to content
+</a>
+```
+
+### Dialog
+Focus trapped automatically. Esc closes, Tab cycles.
+
+### Dropdown/Menu
+- Space/Enter: Open
+- Arrow Up/Down: Navigate
+- Esc: Close
+- Tab: Close and move focus
+
+## Screen Reader
+
+### ARIA Labels
+```tsx
+<Button aria-label="Close dialog"><X /></Button>
+<Input aria-label="Email address" type="email" />
+
+<Button aria-describedby="delete-desc">Delete</Button>
+<p id="delete-desc" className="sr-only">Permanently deletes account</p>
+```
+
+### Screen Reader Only
+```tsx
+<Button>
+  <Trash className="h-4 w-4" />
+  <span className="sr-only">Delete item</span>
+</Button>
+```
+
+### Live Regions
+```tsx
+<div aria-live="polite">{message}</div>
+<div aria-live="assertive">{error}</div>
+```
+
+## Forms
+
+### Labels
+```tsx
+<Label htmlFor="email">Email</Label>
+<Input id="email" type="email" />
+```
+
+### Validation
+```tsx
+<Input aria-invalid={!!error} aria-describedby={error ? "email-error" : undefined} />
+<FormMessage id="email-error" />
+```
+
+### Required Fields
+```tsx
+<Label htmlFor="name">
+  Name <span className="text-destructive">*</span>
+  <span className="sr-only">(required)</span>
+</Label>
+```
+
+### Fieldset
+```tsx
+<fieldset>
+  <legend className="text-lg font-semibold mb-4">Contact Info</legend>
+  <FormField name="email" />
+</fieldset>
+```
+
+## Color Contrast
+
+WCAG AA: 4.5:1 normal text, 3:1 large text.
+
+```tsx
+// Good
+<p className="text-foreground">Primary</p>
+<p className="text-muted-foreground">Secondary</p>
+
+// Avoid
+<p className="text-gray-400">Hard to read</p>
+```
+
+## Focus Indicators
+
+Always visible:
+```tsx
+<Button className="focus-visible:ring-2 focus-visible:ring-ring">
+
+// Never: focus:outline-none without replacement
+// Use focus-visible instead
+```
+
+## Motion Preferences
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
+}
+```
+
+```tsx
+<div className="transition-all motion-reduce:transition-none">
+```
+
+## Checklist
+
+- [ ] All interactive elements keyboard accessible
+- [ ] Focus indicators visible
+- [ ] Screen reader announces correctly
+- [ ] Form errors announced
+- [ ] Color contrast WCAG AA
+- [ ] Semantic HTML
+- [ ] ARIA labels for icon buttons
+- [ ] Modal focus trap works
+- [ ] Respects reduced motion
+- [ ] Works at 200% zoom
+- [ ] Skip links provided