opencode-starterkit 1.0.1

package/baseline/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/baseline/skill/frontend-design/references/animation/motion-core.md

@@ -0,0 +1,181 @@
+# Motion Core (motion/react)
+
+**Import**: `import { motion, AnimatePresence } from 'motion/react'`
+
+## Motion Principles
+
+- Animate for clarity, not decoration
+- Use motion to explain state change and hierarchy
+- Prefer subtle distance (`8-16px`) and opacity shifts
+- Use consistent timing/easing system across the app
+
+## Timing System
+
+| Use Case                      | Duration   |
+| ----------------------------- | ---------- |
+| Instant feedback (hover/tap)  | 100-150ms  |
+| State changes (menus/toggles) | 200-300ms  |
+| Layout transitions            | 300-500ms  |
+| Large entrances               | 500-800ms  |
+
+**Rule**: exit duration = ~75% of enter duration.
+
+## Easing System
+
+Use exponential easing by default:
+
+```tsx
+const EASING_ENTER = [0.16, 1, 0.3, 1];
+const EASING_EXIT = [0.4, 0, 1, 1];
+```
+
+Avoid bounce/elastic easings for product UI.
+
+## Performance Rules
+
+Animate only compositor-friendly properties:
+
+- `transform`
+- `opacity`
+
+Avoid animating:
+
+- `width`, `height`
+- `top`, `left`
+- `margin`, `padding`
+
+## Basic Pattern
+
+```tsx
+<motion.div
+  initial={{ opacity: 0, y: 12 }}
+  animate={{ opacity: 1, y: 0 }}
+  transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
+/>
+```
+
+## Variants Pattern (Recommended)
+
+```tsx
+const card = {
+  hidden: { opacity: 0, y: 12 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.3, ease: [0.16, 1, 0.3, 1] },
+  },
+};
+
+<motion.div variants={card} initial="hidden" animate="visible" />
+```
+
+Use variants for shared timing and maintainability.
+
+## Exit Animations (AnimatePresence)
+
+```tsx
+<AnimatePresence mode="wait">
+  {open && (
+    <motion.div
+      key="panel"
+      initial={{ opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: 4 }}
+      transition={{ duration: 0.22, ease: [0.4, 0, 1, 1] }}
+    />
+  )}
+</AnimatePresence>
+```
+
+Always provide stable `key` values for exiting elements.
+
+## Stagger Patterns
+
+```tsx
+const container = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.05,
+      delayChildren: 0.05,
+    },
+  },
+};
+
+const item = {
+  hidden: { opacity: 0, y: 8 },
+  visible: { opacity: 1, y: 0 },
+};
+```
+
+Cap total stagger windows to ~500ms.
+
+## Layout Animations
+
+```tsx
+<motion.div layout />
+```
+
+Use `layout` for reordering and size changes. Add spring only when needed:
+
+```tsx
+<motion.div layout transition={{ type: 'spring', stiffness: 320, damping: 28 }} />
+```
+
+## Gestures
+
+```tsx
+<motion.button
+  whileHover={{ scale: 1.02 }}
+  whileTap={{ scale: 0.98 }}
+  transition={{ duration: 0.12 }}
+/>
+```
+
+Keep gesture amplitudes subtle (`0.98-1.03`).
+
+## Height Expand/Collapse (No height animation)
+
+Use CSS grid technique:
+
+```css
+.accordion-content {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 280ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.accordion-content[data-open='true'] {
+  grid-template-rows: 1fr;
+}
+
+.accordion-inner {
+  overflow: hidden;
+}
+```
+
+## Reduced Motion (Mandatory)
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+```
+
+For motion/react, switch spatial movement to opacity-only when reduced motion is enabled.
+
+## Quick Checklist
+
+- [ ] Uses `motion/react` import
+- [ ] Timing follows 100/300/500ms system
+- [ ] Exponential easing, no bounce/elastic
+- [ ] Animates only `transform` and `opacity`
+- [ ] Uses `AnimatePresence` for exit states
+- [ ] Includes reduced motion support
+- [ ] Stagger windows stay under 500ms

package/baseline/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/baseline/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/baseline/skill/frontend-design/references/design/color-system.md

@@ -0,0 +1,111 @@
+# Color System — OKLCH Deep Guide
+
+## Why OKLCH Over HSL
+
+HSL is **not perceptually uniform** — `hsl(60, 100%, 50%)` (yellow) appears far brighter than `hsl(240, 100%, 50%)` (blue) at the same lightness. OKLCH fixes this: equal lightness steps _look_ equal.
+
+```css
+/* HSL: looks inconsistent */
+--blue: hsl(240, 70%, 50%);
+--green: hsl(120, 70%, 50%); /* Appears much brighter */
+
+/* OKLCH: looks consistent */
+--blue: oklch(0.55 0.22 264);
+--green: oklch(0.55 0.18 145); /* Same perceived brightness */
+```
+
+## Two-Layer Token Architecture
+
+**Layer 1 — Primitives** (raw values, never used directly in components):
+
+```css
+@theme {
+  --blue-100: oklch(0.95 0.03 264);
+  --blue-300: oklch(0.75 0.1 264);
+  --blue-500: oklch(0.55 0.22 264);
+  --blue-700: oklch(0.4 0.18 264);
+  --blue-900: oklch(0.25 0.12 264);
+}
+```
+
+**Layer 2 — Semantic** (what components reference; redefine for dark mode):
+
+```css
+@theme {
+  --color-primary: var(--blue-500);
+  --color-primary-hover: var(--blue-700);
+  --color-surface: var(--neutral-50);
+  --color-surface-elevated: var(--neutral-0);
+  --color-text: var(--neutral-900);
+  --color-text-muted: var(--neutral-600);
+  --color-border: var(--neutral-200);
+}
+
+/* Dark mode: redefine ONLY semantic layer */
+@media (prefers-color-scheme: dark) {
+  @theme {
+    --color-primary: var(--blue-300);
+    --color-primary-hover: var(--blue-100);
+    --color-surface: var(--neutral-900);
+    --color-surface-elevated: var(--neutral-800);
+    --color-text: var(--neutral-100);
+    --color-text-muted: var(--neutral-400);
+    --color-border: var(--neutral-700);
+  }
+}
+```
+
+## Tinted Neutrals
+
+Never use pure gray (`chroma: 0`). Add `chroma: 0.01` hinted toward brand hue — barely visible but creates subconscious cohesion:
+
+```css
+@theme {
+  /* Brand hue: 264 (blue) — neutrals subtly tinted */
+  --neutral-0: oklch(1 0.005 264);
+  --neutral-50: oklch(0.97 0.01 264);
+  --neutral-100: oklch(0.93 0.01 264);
+  --neutral-200: oklch(0.87 0.01 264);
+  --neutral-400: oklch(0.7 0.01 264);
+  --neutral-600: oklch(0.5 0.01 264);
+  --neutral-800: oklch(0.25 0.01 264);
+  --neutral-900: oklch(0.16 0.01 264);
+}
+```
+
+## Dark Mode Rules
+
+Dark mode is **not** inverted light mode:
+
+| Aspect  | Light Mode                   | Dark Mode                                            |
+| ------- | ---------------------------- | ---------------------------------------------------- |
+| Depth   | Shadows create elevation     | Lighter surfaces create elevation                    |
+| Base    | `oklch(0.97+ …)`             | `oklch(0.15-0.18 …)` — NOT pure black                |
+| Accents | Full saturation              | Desaturate 10-20% to reduce glare                    |
+| Text    | Dark on light, high contrast | Light on dark, slightly reduced contrast for comfort |
+| Borders | Darker than surface          | Lighter than surface                                 |
+
+```css
+/* Dark surface elevation via lightness, not shadows */
+--surface-0: oklch(0.15 0.01 264); /* Base */
+--surface-1: oklch(0.18 0.01 264); /* Cards */
+--surface-2: oklch(0.22 0.01 264); /* Modals */
+--surface-3: oklch(0.26 0.01 264); /* Tooltips */
+```
+
+## 60-30-10 Rule
+
+Applied to **visual weight**, not pixel count:
+
+- 60% dominant (background, surface colors)
+- 30% secondary (text, icons, subtle accents)
+- 10% accent (CTAs, highlights, active states)
+
+Accent works _because_ it's rare — overuse kills its power.
+
+## Common Mistakes
+
+- **Alpha as palette**: Heavy `rgba()` / transparency means incomplete palette — define explicit overlay colors per context
+- **Gray text on colored background**: Use a darker shade of the background color or apply the text color at reduced opacity
+- **Same accent everywhere**: If everything is "primary blue," nothing stands out
+- **Ignoring contrast in dark mode**: WCAG 4.5:1 for body text, 3:1 for large text and UI components