opencodekit 0.18.9 → 0.18.10

package/dist/index.js

@@ -18,7 +18,7 @@ var __require = /* @__PURE__ */ createRequire(import.meta.url);
 
 //#endregion
 //#region package.json
-var version = "0.18.9";
+var version = "0.18.10";
 
 //#endregion
 //#region src/utils/errors.ts

package/dist/template/.opencode/command/ui-slop-check.md

@@ -0,0 +1,146 @@
+---
+description: Audit changed UI files for AI slop patterns and design-system violations
+argument-hint: "[path|auto] [--staged] [--since=<ref>] [--full-report]"
+agent: vision
+model: proxypal/gemini-3-pro-preview
+---
+
+# UI Slop Check: $ARGUMENTS
+
+Run a focused anti-slop audit against changed UI files using the frontend-design taxonomy.
+
+## Load Skills
+
+```typescript
+skill({ name: "frontend-design" }); // Anti-pattern taxonomy + design references
+skill({ name: "visual-analysis" }); // Structured visual/code analysis workflow
+skill({ name: "accessibility-audit" }); // Keyboard/focus/contrast checks
+```
+
+## Parse Arguments
+
+| Argument        | Default | Description                                        |
+| --------------- | ------- | -------------------------------------------------- | ----------------------------------------------------------- |
+| `[path          | auto]`  | `auto`                                             | Specific file/dir to audit, or auto-detect changed UI files |
+| `--staged`      | false   | Audit staged changes only (`git diff --cached`)    |
+| `--since=<ref>` | `HEAD`  | Compare against ref (`main`, `HEAD~1`, commit SHA) |
+| `--full-report` | false   | Include all categories even when no issues found   |
+
+## Phase 1: Resolve Target Files
+
+If `[path]` is provided:
+
+- Audit that path directly
+
+If `auto`:
+
+```bash
+# unstaged + staged by default
+git diff --name-only $SINCE_REF -- \
+  '*.tsx' '*.jsx' '*.css' '*.scss' '*.sass' '*.less' '*.html' '*.mdx'
+```
+
+If `--staged`:
+
+```bash
+git diff --cached --name-only -- \
+  '*.tsx' '*.jsx' '*.css' '*.scss' '*.sass' '*.less' '*.html' '*.mdx'
+```
+
+Prioritize files under:
+
+- `src/components/**`
+- `src/app/**`
+- `src/pages/**`
+- `app/**`
+- `components/**`
+
+If no UI files changed, return: **PASS (no changed UI files)**.
+
+## Phase 2: Run AI Slop Checklist
+
+Evaluate each target file (or rendered screenshot if provided) against these checks.
+
+### A) Typography
+
+- Banned default aesthetics (Inter/Roboto/Arial/Open Sans as dominant display voice)
+- Body text uses `rem/em`, not fixed `px`
+- Clear hierarchy (size/weight/spacing), not color-only hierarchy
+- Body line length near readable measure (around 65ch when applicable)
+
+### B) Color and Theming
+
+- No AI default palette tropes (purple-blue gradient defaults, neon-on-dark clichés)
+- No pure `#000` / `#fff` as dominant surfaces
+- Gray text is not placed on saturated backgrounds
+- Semantic tokens are used (not random per-component hardcoded colors)
+- Dark mode is adapted, not simple inversion
+
+### C) Layout and Spatial Rhythm
+
+- No cards-inside-cards without strong information architecture reason
+- No repetitive cookie-cutter card blocks with identical structure
+- Spacing rhythm is consistent (4pt-style cadence), not arbitrary jumps
+- Uses `gap`/layout primitives cleanly; avoids margin hacks when possible
+
+### D) Motion and Interaction
+
+- No bounce/elastic gimmick motion for product UI
+- Animations use transform/opacity (avoid layout-thrashing properties)
+- Reduced motion support exists for meaningful motion
+- States exist: hover, focus-visible, active, disabled, loading/error where relevant
+
+### E) UX Writing
+
+- Buttons are verb + object (e.g. "Save changes")
+- Error copy includes what happened + why + how to fix
+- Empty states include guidance + next action
+- Terminology is consistent (avoid mixed synonyms for same action)
+
+### F) Accessibility Safety Nets
+
+- Keyboard-visible focus treatment (`:focus-visible`)
+- Contrast baseline expectations (WCAG AA)
+- Touch targets reasonable (44x44 context where applicable)
+
+## Phase 3: Severity and Scoring
+
+Group findings by severity:
+
+- **Critical**: accessibility failures, broken interaction states, unreadable contrast
+- **Warning**: strong AI fingerprint/slop patterns, inconsistent design system usage
+- **Info**: polish/consistency opportunities
+
+Score each category 1-10 and include evidence (`file:line` for code audits).
+
+## Phase 4: Output
+
+Return:
+
+1. **Result**: PASS / NEEDS WORK
+2. **Audited files** (list)
+3. **Category scores**
+4. **Findings by severity** with actionable fixes
+5. **Fast remediation plan** (top 3 fixes first)
+
+If `--full-report` is false, omit empty categories.
+
+## Record Findings
+
+```typescript
+observation({
+  type: "warning",
+  title: "UI Slop Check: [scope]",
+  narrative: "Detected [count] critical, [count] warning slop issues in changed UI files.",
+  concepts: "ui, design, anti-patterns, frontend",
+  confidence: "high",
+});
+```
+
+## Related Commands
+
+| Need                                     | Command      |
+| ---------------------------------------- | ------------ |
+| Design from scratch                      | `/design`    |
+| Full UI review (single screen/component) | `/ui-review` |
+| Implementation work                      | `/start`     |

package/dist/template/.opencode/package.json

@@ -11,7 +11,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@opencode-ai/plugin": "1.2.24"
+    "@opencode-ai/plugin": "1.2.27"
   },
   "devDependencies": {
     "@types/node": "^25.3.0",

package/dist/template/.opencode/plugin/lib/context.ts

@@ -110,10 +110,14 @@ function compressMessage(msg: TransformMessage): TransformMessage {
  * Keeps first and last sentence, truncates middle.
  */
 function createSummary(text: string, role: string): string {
-	const maxChars = 200;
+	const maxChars = 500;
 
 	if (text.length <= maxChars) return text;
 
+	// For very large messages (>5000 chars), be more aggressive
+	const isLarge = text.length > 5000;
+	const effectiveMax = isLarge ? 300 : maxChars;
+
 	// Split into sentences
 	const sentences = text
 		.split(/(?<=[.!?])\s+|\n+/)
@@ -121,16 +125,16 @@ function createSummary(text: string, role: string): string {
 		.filter((s) => s.length > 0);
 
 	if (sentences.length <= 2) {
-		return `${text.slice(0, maxChars)}...`;
+		return `${text.slice(0, effectiveMax)}...`;
 	}
 
 	const first = sentences[0];
 	const last = sentences[sentences.length - 1];
 
-	const summary = `[compressed ${role} message] ${first} [...${sentences.length - 2} more sentences...] ${last}`;
+	const summary = `[compressed ${role}] ${first} [...${sentences.length - 2} sentences...] ${last}`;
 
-	return summary.length > maxChars * 2
-		? `${summary.slice(0, maxChars * 2)}...`
+	return summary.length > effectiveMax
+		? `${summary.slice(0, effectiveMax)}...`
 		: summary;
 }
 

package/dist/template/.opencode/plugin/lib/db/types.ts

@@ -38,7 +38,7 @@ export const MEMORY_CONFIG = {
 	},
 	context: {
 		enabled: true,
-		maxContextTokens: 100_000,
+		maxContextTokens: 80_000,
 		protectedMessages: 5,
 	},
 	fts: {

package/dist/template/.opencode/plugin/lib/memory-hooks.ts

@@ -90,13 +90,24 @@ export function createHooks(deps: HookDeps) {
 				}
 			}
 
-			// --- Session error: warn user ---
+			// --- Session error: show actual error details ---
 			if (event.type === "session.error") {
-				await showToast(
-					"Session Error",
-					"Save important learnings with observation tool",
-					"warning",
-				);
+				const props = event.properties as Record<string, unknown> | undefined;
+				const errorMsg = props?.error
+					? String(props.error).slice(0, 120)
+					: props?.message
+						? String(props.message).slice(0, 120)
+						: "Unknown error";
+
+				// Classify: match the specific AI SDK error pattern
+				const isTokenOverflow =
+					/token.{0,20}(exceed|limit)/i.test(errorMsg) ||
+					errorMsg.includes("context_length_exceeded");
+				const guidance = isTokenOverflow
+					? "Context too large — use /compact or start a new session"
+					: "Save important learnings with observation tool";
+
+				await showToast("Session Error", `${guidance} (${errorMsg})`, "warning");
 			}
 		},
 

package/dist/template/.opencode/skill/frontend-design/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: frontend-design
 description: Create distinctive, production-grade frontend interfaces. Use when building web components, pages, or applications with React-based frameworks. Includes Tailwind CSS v4, shadcn/ui components, Motion animations, and visual design philosophy for avoiding generic AI aesthetics.
-version: 1.0.0
+version: 1.1.0
 tags: [ui, design]
 dependencies: []
 ---
@@ -21,7 +21,6 @@ dependencies: []
 
 - Backend-only tasks or minimal UI with no visual design requirements.
 
-
 ## Reference Documentation
 
 ### Tailwind CSS v4.1
@@ -46,7 +45,7 @@ Search: `Field`, `InputGroup`, `Spinner`, `ButtonGroup`, `next-themes`
 
 ### Animation (Motion + Tailwind)
 
-- `./references/animation/motion-core.md` - Core API, variants, gestures, layout animations
+- `./references/animation/motion-core.md` - Timing system, easing constants, performance rules, reduced motion, core patterns
 - `./references/animation/motion-advanced.md` - AnimatePresence, scroll, orchestration, TypeScript
 
 **Stack**:
@@ -64,6 +63,15 @@ Search: `Field`, `InputGroup`, `Spinner`, `ButtonGroup`, `next-themes`
 
 For sophisticated compositions: posters, brand materials, design systems.
 
+### Design Systems (Deep Guides)
+
+- `./references/design/color-system.md` - OKLCH, semantic tokens, dark mode architecture
+- `./references/design/typography-rules.md` - Fluid type, modular scale, OpenType features
+- `./references/design/interaction.md` - State models, focus, dialogs/popovers, loading patterns
+- `./references/design/ux-writing.md` - Button copy, error structure, empty states, i18n
+
+Search: `AI Slop Test`, `tinted neutrals`, `focus-visible`, `verb + object`, `65ch`
+
 ## Design Thinking
 
 Before coding, commit to BOLD aesthetic direction:
@@ -74,23 +82,60 @@ Before coding, commit to BOLD aesthetic direction:
 
 Bold maximalism and refined minimalism both work. Key is intentionality.
 
-## Anti-Patterns (NEVER)
+## Anti-Patterns (AI Fingerprints — NEVER)
+
+These patterns immediately signal "AI made this." Avoid them all.
+
+### Typography
+
+- **Banned fonts**: Inter, Roboto, Arial, Open Sans, Lato, Montserrat, Space Grotesk, system-ui as display font
+- Monospace used as "developer aesthetic" shorthand
+- Big icons centered above every heading
+- Using `px` for body text (use `rem`/`em` to respect user settings)
+
+### Color
 
-- Overused fonts: Inter, Roboto, Arial, system fonts, Space Grotesk
-- Cliched colors: purple gradients on white
-- Predictable layouts and component patterns
-- Cookie-cutter design lacking character
-- Generic AI-generated aesthetics
+- **AI palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds
+- Gray text on colored backgrounds (use darker shade of background color instead)
+- Pure `#000` or `#fff` (always tint — pure black/white don't exist in nature)
+- Gradient text on headings or metrics
+- `rgba()` / heavy alpha transparency as primary palette (design smell — define explicit colors)
+
+### Layout
+
+- Cards nested inside cards (use typography, spacing, dividers for hierarchy within a card)
+- Identical card grids (icon + heading + text repeated 3-6 times)
+- Hero metric template (big number + small label + gradient accent)
+- Center-aligning everything
+- Same spacing everywhere (no visual rhythm)
+
+### Visual
+
+- Glassmorphism used decoratively (blur cards, glow borders)
+- Thick colored border on one side of rounded rectangles
+- Sparklines as decoration (not connected to real data)
+- Generic drop shadows on everything
+- Rounded rectangles as the only shape language
+
+### Motion
+
+- Bounce or elastic easing (real objects decelerate smoothly)
+- Animating `height`, `width`, `padding`, `margin` (causes layout recalculation)
+- Default `ease` (compromise that's rarely optimal — use exponential easing)
+- Missing `prefers-reduced-motion` handling
+
+> **The AI Slop Test**: If you showed this interface to someone and said "AI made this," would they believe you immediately? If yes, that's the problem.
 
 ## Best Practices
 
-1. **Accessibility First**: Radix primitives, focus states, semantic HTML
-2. **Mobile-First**: Start mobile, layer responsive variants
-3. **Design Tokens**: Use `@theme` for spacing, colors, typography
-4. **Dark Mode**: Apply dark variants to all themed elements
-5. **Performance**: Automatic CSS purging, avoid dynamic class names
-6. **TypeScript**: Full type safety
-7. **Expert Craftsmanship**: Every detail matters
+1. **Accessibility First**: Radix primitives, `:focus-visible` (not `:focus`), semantic HTML, 44px touch targets
+2. **Mobile-First**: Start mobile, layer responsive variants with `min-width` queries
+3. **Design Tokens**: Two-layer system — primitives (`--blue-500`) + semantic (`--color-primary: var(--blue-500)`); dark mode redefines semantic layer only
+4. **Dark Mode**: Not inverted light mode — lighter surfaces create depth (no shadows); desaturate accents; base at `oklch(15-18% …)`
+5. **Container Queries**: Use `@container` for component layout, viewport queries for page layout
+6. **Performance**: `transform` + `opacity` only for animations; CSS purging; avoid dynamic class names
+7. **TypeScript**: Full type safety
+8. **Expert Craftsmanship**: Every detail matters — squint test for hierarchy validation
 
 ## Core Stack Summary
 
@@ -102,63 +147,88 @@ Bold maximalism and refined minimalism both work. Key is intentionality.
 
 ## Typography
 
-Choose beautiful, unique fonts. Pair distinctive display with refined body:
+→ Consult `./references/design/typography-rules.md` for full fluid type system
+
+Choose distinctive fonts. Pair display with body:
+
+- **Preferred**: Instrument Sans, Plus Jakarta Sans, Outfit, Onest, Figtree, Urbanist (sans); Fraunces, Newsreader (editorial)
+- **Fluid sizing**: `clamp(1rem, 0.5rem + 2vw, 1.5rem)` — never fixed `px` for body
+- **Modular scale**: Pick one ratio (1.25 major third, 1.333 perfect fourth) — 5 sizes max
+- **Measure**: `max-width: 65ch` for body text
+- **OpenType**: `tabular-nums` for data, `diagonal-fractions` for recipes, `all-small-caps` for abbreviations
 
 ```css
 @theme {
-  --font-display: "Playfair Display", serif;
-  --font-body: "Source Sans 3", sans-serif;
+  --font-display: "Fraunces", serif;
+  --font-body: "Instrument Sans", sans-serif;
 }
 ```
 
 ## Color
 
-Use OKLCH for vivid colors. Dominant colors with sharp accents:
+→ Consult `./references/design/color-system.md` for OKLCH deep guide
+
+Use OKLCH for perceptually uniform colors. Two-layer token system:
 
 ```css
 @theme {
-  --color-primary-500: oklch(0.55 0.22 264);
-  --color-accent: oklch(0.75 0.18 45);
+  /* Primitives */
+  --blue-500: oklch(0.55 0.22 264);
+  --amber-400: oklch(0.75 0.18 80);
+  /* Semantic (redefine these for dark mode) */
+  --color-primary: var(--blue-500);
+  --color-accent: var(--amber-400);
+  /* Tinted neutrals — chroma 0.01 for subconscious brand cohesion */
+  --color-surface: oklch(0.97 0.01 264);
+  --color-surface-dark: oklch(0.16 0.01 264);
 }
 ```
 
 ## Motion
 
-**Primary**: Motion for React animations. **Fallback**: CSS `@starting-style` for simple enter/exit.
+→ Consult `./references/animation/motion-core.md` for Motion API
+
+**Timing**: 100-150ms instant feedback | 200-300ms state changes | 300-500ms layout | exit = 75% of enter
+
+**Easing**: Exponential only — `cubic-bezier(0.16, 1, 0.3, 1)` for entrances. Never `ease`, never bounce/elastic.
+
+**Performance**: Only animate `transform` and `opacity`. Height expand → `grid-template-rows: 0fr → 1fr`.
+
+**Accessibility**: `prefers-reduced-motion` is mandatory (affects ~35% of adults over 40). Swap spatial animations for crossfades.
 
 ```tsx
 import { motion, AnimatePresence } from 'motion/react';
 
-// Basic animation
-<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} />
+<motion.div initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }}
+  transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }} />
 
-// Exit animations
 <AnimatePresence>
-  {show && <motion.div exit={{ opacity: 0 }} />}
+  {show && <motion.div exit={{ opacity: 0 }} transition={{ duration: 0.2 }} />}
 </AnimatePresence>
+```
 
-// Layout animations
-<motion.div layout />
+CSS stagger: `animation-delay: calc(var(--i, 0) * 50ms)` — cap total at 500ms.
 
-// Gestures
-<motion.button whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} />
-```
+## Spatial Composition
 
-CSS fallback (no JS):
+- **4pt spacing system**: 4, 8, 12, 16, 24, 32, 48, 64, 96px — not 8pt (too coarse at small gaps)
+- **`gap` over margins** for sibling spacing (eliminates margin collapse)
+- **Self-adjusting grids**: `repeat(auto-fit, minmax(280px, 1fr))` — responsive without breakpoints
+- **Container queries** for components: `container-type: inline-size` on wrapper, `@container` on children
+- **Optical text alignment**: `margin-left: -0.05em` for text that appears indented due to letterform whitespace
+- Asymmetry, overlap, diagonal flow, grid-breaking elements. Generous negative space OR controlled density.
 
-```css
-dialog[open] {
-  opacity: 1;
-  @starting-style {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-}
-```
+## Interaction
 
-## Spatial Composition
+→ Consult `./references/design/interaction.md`
+
+Design all 8 states: Default, Hover, Focus, Active, Disabled, Loading, Error, Success. Use `:focus-visible` not `:focus`. Native `<dialog>` + `inert` for modals. Popover API for tooltips/dropdowns. Skeleton screens over spinners. Undo over confirmation dialogs.
+
+## UX Writing
+
+→ Consult `./references/design/ux-writing.md`
 
-Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
+Button labels: specific verb + object ("Save changes" not "OK"). Error formula: What happened + Why + How to fix. Empty states are onboarding opportunities. Plan for 30% text expansion (i18n).
 
 ## Backgrounds
 

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

@@ -1,171 +1,181 @@
-# Motion Core (formerly Framer Motion)
+# Motion Core (motion/react)
 
 **Import**: `import { motion, AnimatePresence } from 'motion/react'`
 
-## Basic Animation
+## Motion Principles
 
-```tsx
-// Simple animate on mount
-<motion.div
-  initial={{ opacity: 0, y: 20 }}
-  animate={{ opacity: 1, y: 0 }}
-  transition={{ duration: 0.6 }}
-/>
+- 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
 
-// Shorthand (no transition object)
-<motion.div animate={{ scale: 1.1 }} />
-```
+## Timing System
 
-## Variants (Recommended Pattern)
+| Use Case                      | Duration   |
+| ----------------------------- | ---------- |
+| Instant feedback (hover/tap)  | 100-150ms  |
+| State changes (menus/toggles) | 200-300ms  |
+| Layout transitions            | 300-500ms  |
+| Large entrances               | 500-800ms  |
 
-```tsx
-const variants = {
-  hidden: { opacity: 0, y: 20 },
-  visible: { opacity: 1, y: 0 }
-};
+**Rule**: exit duration = ~75% of enter duration.
 
-<motion.div
-  variants={variants}
-  initial="hidden"
-  animate="visible"
-/>
-```
+## Easing System
 
-## Gestures
+Use exponential easing by default:
 
 ```tsx
-<motion.button
-  whileHover={{ scale: 1.05 }}
-  whileTap={{ scale: 0.95 }}
-  whileFocus={{ outline: '2px solid blue' }}
-/>
+const EASING_ENTER = [0.16, 1, 0.3, 1];
+const EASING_EXIT = [0.4, 0, 1, 1];
+```
 
-// Drag
+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
-  drag
-  dragConstraints={{ left: 0, right: 300 }}
-  dragElastic={0.2}
+  initial={{ opacity: 0, y: 12 }}
+  animate={{ opacity: 1, y: 0 }}
+  transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
 />
 ```
 
-## Layout Animations
+## Variants Pattern (Recommended)
 
 ```tsx
-// Automatic layout animation
-<motion.div layout />
-
-// Shared layout
-<motion.div layoutId="shared-element" />
+const card = {
+  hidden: { opacity: 0, y: 12 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.3, ease: [0.16, 1, 0.3, 1] },
+  },
+};
 
-// Layout with spring
-<motion.div layout transition={{ type: 'spring', stiffness: 300 }} />
+<motion.div variants={card} initial="hidden" animate="visible" />
 ```
 
+Use variants for shared timing and maintainability.
+
 ## Exit Animations (AnimatePresence)
 
 ```tsx
-import { AnimatePresence } from 'motion/react';
-
-<AnimatePresence>
-  {isVisible && (
+<AnimatePresence mode="wait">
+  {open && (
     <motion.div
-      key="modal"
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      exit={{ opacity: 0 }}
+      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>
 ```
 
-## Stagger Children
+Always provide stable `key` values for exiting elements.
+
+## Stagger Patterns
 
 ```tsx
 const container = {
   hidden: { opacity: 0 },
   visible: {
     opacity: 1,
-    transition: { staggerChildren: 0.1 }
-  }
+    transition: {
+      staggerChildren: 0.05,
+      delayChildren: 0.05,
+    },
+  },
 };
 
 const item = {
-  hidden: { opacity: 0, y: 20 },
-  visible: { opacity: 1, y: 0 }
+  hidden: { opacity: 0, y: 8 },
+  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 }}
+Cap total stagger windows to ~500ms.
 
-// Tween
-transition={{ type: 'tween', duration: 0.5, ease: 'easeInOut' }}
+## Layout Animations
 
-// Inertia (for drag)
-transition={{ type: 'inertia', velocity: 50 }}
+```tsx
+<motion.div layout />
 ```
 
-## Common Easing
+Use `layout` for reordering and size changes. Add spring only when needed:
 
 ```tsx
-ease: 'linear'
-ease: 'easeIn' | 'easeOut' | 'easeInOut'
-ease: 'circIn' | 'circOut' | 'circInOut'
-ease: 'backIn' | 'backOut' | 'backInOut'
-ease: [0.4, 0, 0.2, 1]  // cubic-bezier
+<motion.div layout transition={{ type: 'spring', stiffness: 320, damping: 28 }} />
 ```
 
-## useAnimate Hook
+## Gestures
 
 ```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.button
+  whileHover={{ scale: 1.02 }}
+  whileTap={{ scale: 0.98 }}
+  transition={{ duration: 0.12 }}
+/>
 ```
 
-## Motion Values
+Keep gesture amplitudes subtle (`0.98-1.03`).
 
-```tsx
-import { useMotionValue, useTransform } from 'motion/react';
+## Height Expand/Collapse (No height animation)
 
-const x = useMotionValue(0);
-const opacity = useTransform(x, [0, 100], [1, 0]);
+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);
+}
 
-<motion.div style={{ x, opacity }} drag="x" />
+.accordion-content[data-open='true'] {
+  grid-template-rows: 1fr;
+}
+
+.accordion-inner {
+  overflow: hidden;
+}
 ```
 
-## Integration with Tailwind
+## Reduced Motion (Mandatory)
 
-```tsx
-// Motion handles animation, Tailwind handles styling
-<motion.div
-  className="bg-blue-500 rounded-lg p-4"
-  whileHover={{ scale: 1.05 }}
-  transition={{ type: 'spring' }}
-/>
+```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;
+  }
+}
 ```
 
-## Validation Checklist
+For motion/react, switch spatial movement to opacity-only when reduced motion is enabled.
+
+## Quick 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`
+- [ ] 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/dist/template/.opencode/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

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

@@ -0,0 +1,149 @@
+# Interaction Design
+
+## The 8 Interactive States
+
+Every interactive element must design for ALL of these:
+
+| State    | When                  | Visual Treatment                              |
+| -------- | --------------------- | --------------------------------------------- |
+| Default  | Resting               | Base appearance                               |
+| Hover    | Cursor over (desktop) | Subtle shift — color, shadow, or translate    |
+| Focus    | Keyboard navigation   | `:focus-visible` ring (NOT `:focus`)          |
+| Active   | Being pressed/clicked | Compressed/depressed feedback                 |
+| Disabled | Not available         | Reduced opacity (0.5) + `cursor: not-allowed` |
+| Loading  | Processing            | Spinner or skeleton, disable interaction      |
+| Error    | Validation failed     | Red border + error message below              |
+| Success  | Action completed      | Green confirmation, brief                     |
+
+## Focus Management
+
+```css
+/* Remove default focus for mouse, show for keyboard */
+:focus:not(:focus-visible) {
+  outline: none;
+}
+:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+```
+
+**Focus ring rules:**
+
+- 2-3px thick
+- Offset from element edge
+- 3:1 minimum contrast against adjacent colors
+- Consistent style across ALL interactive elements
+
+## Native Dialog + Inert
+
+Use `<dialog>` with the `inert` attribute — eliminates complex focus-trapping JS:
+
+```html
+<dialog id="modal">
+  <form method="dialog">
+    <h2>Confirm action</h2>
+    <button value="cancel">Cancel</button>
+    <button value="confirm">Confirm</button>
+  </form>
+</dialog>
+
+<main id="content">…</main>
+
+<script>
+  const modal = document.getElementById("modal");
+  modal.showModal();
+  document.getElementById("content").inert = true;
+</script>
+```
+
+## Popover API
+
+For tooltips, dropdowns, and popovers — light-dismiss, proper stacking, accessible by default:
+
+```html
+<button popovertarget="menu">Options</button>
+<div id="menu" popover>
+  <button>Edit</button>
+  <button>Delete</button>
+</div>
+```
+
+No z-index wars. No portal wrappers. Built-in light dismiss.
+
+## Form Validation Timing
+
+- **Validate on blur**, not on keystroke (exception: password strength meters)
+- Show errors below the field, not in toast/alert
+- Inline validation: red border + message appears when field loses focus and is invalid
+- Clear error when user starts correcting
+
+## Loading Patterns
+
+| Pattern          | Use When                          | Why                                    |
+| ---------------- | --------------------------------- | -------------------------------------- |
+| Skeleton screens | Page/component loading            | Previews content shape, feels faster   |
+| Inline spinner   | Button action processing          | Keeps context, shows progress          |
+| Progress bar     | Known duration (upload, download) | Sets expectations                      |
+| Optimistic UI    | Low-stakes actions (like, toggle) | Update immediately, sync in background |
+
+**Avoid**: Full-page spinners, blocking modals for non-destructive actions.
+
+## Undo Over Confirmation
+
+Users click through confirmation dialogs mindlessly. Prefer undo:
+
+```
+❌ "Are you sure you want to delete?" → [Cancel] [Delete]
+✅ Item deleted. [Undo] (5 second window)
+```
+
+Exception: irreversible actions with severe consequences (account deletion, payment).
+
+## Touch Target Expansion
+
+Visual size can be small; tap target must be 44x44px minimum:
+
+```css
+.icon-button {
+  width: 24px;
+  height: 24px;
+  position: relative;
+}
+
+.icon-button::before {
+  content: "";
+  position: absolute;
+  inset: -10px; /* Expands tap area to 44x44 */
+}
+```
+
+## Scroll Behavior
+
+```css
+html {
+  scroll-behavior: smooth;
+  scroll-padding-top: 80px; /* Account for sticky header */
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+}
+```
+
+## Z-Index Scale
+
+Named semantic layers prevent z-index wars:
+
+```css
+@theme {
+  --z-dropdown: 10;
+  --z-sticky: 20;
+  --z-modal-backdrop: 30;
+  --z-modal: 40;
+  --z-toast: 50;
+  --z-tooltip: 60;
+}
+```

package/dist/template/.opencode/skill/frontend-design/references/design/typography-rules.md

@@ -0,0 +1,106 @@
+# Typography Rules
+
+## Core Principles
+
+Typography carries hierarchy before color or decoration. Prioritize readability, rhythm, and intent.
+
+- Use a single type scale ratio across the interface
+- Keep body text highly readable before styling display text
+- Limit font families: one display + one body (optional mono for code/data)
+- Use weight and size for hierarchy before using color
+
+## Fluid Type with clamp()
+
+Use fluid sizing for responsive typography without breakpoint jumps:
+
+```css
+@theme {
+  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
+  --text-sm: clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);
+  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
+  --text-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
+  --text-xl: clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
+}
+```
+
+Never use fixed `px` for body text.
+
+## Modular Scale
+
+Pick one ratio and stick to it:
+
+- **1.25** (major third) for practical UI
+- **1.333** (perfect fourth) for editorial styles
+
+Limit to 5-7 text sizes. Too many sizes destroys rhythm.
+
+## Line Length and Rhythm
+
+- Body measure: `max-width: 65ch`
+- Comfortable line height: `1.45-1.7` for body text
+- Tight headings: `1.05-1.25`
+- Keep spacing tied to text rhythm (4pt system)
+
+```css
+.article {
+  font-size: var(--text-base);
+  line-height: 1.6;
+  max-width: 65ch;
+}
+```
+
+## Font Selection
+
+Avoid default AI fingerprints:
+
+- Banned as primary display fonts: Inter, Roboto, Arial, Open Sans, Lato, Montserrat, Space Grotesk, system-ui
+
+Preferred directions:
+
+- Sans: Instrument Sans, Plus Jakarta Sans, Outfit, Onest, Figtree, Urbanist
+- Editorial serif: Fraunces, Newsreader
+
+## OpenType Features
+
+Use OpenType intentionally:
+
+```css
+.data-table {
+  font-variant-numeric: tabular-nums;
+}
+
+.recipe {
+  font-variant-numeric: diagonal-fractions;
+}
+
+.abbrev {
+  font-variant-caps: all-small-caps;
+  letter-spacing: 0.04em;
+}
+```
+
+## Dark Mode Typography
+
+Light-on-dark text appears heavier. Adjust:
+
+- Increase line height by `+0.05` to `+0.1`
+- Reduce font weight if text feels too dense
+- Avoid pure white text; use slightly tinted near-white
+
+```css
+@media (prefers-color-scheme: dark) {
+  body {
+    line-height: 1.65;
+    color: oklch(0.93 0.01 264);
+  }
+}
+```
+
+## Quick Audit Checklist
+
+- [ ] Body text uses `rem` or `em`, not `px`
+- [ ] Type scale uses one ratio (1.25 or 1.333)
+- [ ] Body lines capped around 65ch
+- [ ] Headings and body have distinct line-height behavior
+- [ ] OpenType features used for data/fractions/abbreviations where relevant
+- [ ] Dark mode typography adjusted (not just color-inverted)

package/dist/template/.opencode/skill/frontend-design/references/design/ux-writing.md

@@ -0,0 +1,99 @@
+# UX Writing
+
+## Button Labels
+
+Specific verb + object. Never generic:
+
+| Bad        | Good            | Why                            |
+| ---------- | --------------- | ------------------------------ |
+| OK         | Save changes    | Says what happens              |
+| Submit     | Create account  | Describes the outcome          |
+| Yes        | Delete message  | Confirms what gets deleted     |
+| Cancel     | Keep editing    | Tells user what "cancel" means |
+| Click here | Download report | Verb + object, no "click"      |
+
+## Error Messages
+
+Three-part formula — every time:
+
+1. **What happened** (not "Error occurred")
+2. **Why** (if known)
+3. **How to fix**
+
+```
+
+Bad: "Error: Invalid input"
+Bad: "Something went wrong"
+Bad: "Oops! That didn't work"
+
+Good: "Email address is invalid. Check for typos or use a different address."
+Good: "Payment declined — your card issuer rejected the charge. Try a different card or contact your bank."
+Good: "File too large (52 MB). Maximum size is 25 MB. Compress the file or split it into parts."
+```
+
+**Never use humor for errors.** Users are frustrated — be helpful, not cute.
+
+## Empty States
+
+Empty states are **onboarding opportunities**, not blank screens:
+
+1. **Acknowledge**: "No messages yet"
+2. **Explain value**: "Messages from your team will appear here"
+3. **Clear action**: [Start a conversation]
+
+```
+
+Bad: (blank white space)
+Bad: "No data"
+Bad: "Nothing to show"
+
+Good: "No projects yet — Create your first project to get started" [Create project]
+```
+
+## Confirmation vs Information
+
+| Type        | Pattern                                   | Example                                |
+| ----------- | ----------------------------------------- | -------------------------------------- |
+| Success     | Brief toast (auto-dismiss 3-5s)           | "Changes saved"                        |
+| Warning     | Inline banner (persistent, dismissible)   | "Your trial ends in 3 days"            |
+| Error       | Inline at source (persistent until fixed) | "Password must be 8+ characters"       |
+| Destructive | Confirmation dialog (requires action)     | "Delete account? This can't be undone" |
+
+## Consistent Terminology
+
+Pick ONE term and use it everywhere:
+
+| Pick one         | Not these                           |
+| ---------------- | ----------------------------------- |
+| Delete           | Remove, Trash, Erase, Destroy       |
+| Settings         | Preferences, Options, Configuration |
+| Log in / Log out | Sign in / Sign out (pick a pair)    |
+| Save             | Submit, Apply, Update, Confirm      |
+
+## Voice vs Tone
+
+- **Voice** = consistent brand personality (always the same)
+- **Tone** = adapts to moment:
+  - Success → celebratory, brief
+  - Error → empathetic, helpful
+  - Onboarding → encouraging, clear
+  - Warning → direct, specific
+
+## Internationalization
+
+- **Plan for 30% text expansion** — German, French, Finnish expand significantly
+- Design layouts with flexible text containers
+- Never truncate translated text without tooltip/expansion
+- Use ICU message format for plurals: `{count, plural, one {# item} other {# items}}`
+- Right-to-left (RTL) support: use logical properties (`margin-inline-start` not `margin-left`)
+
+## Microcopy Checklist
+
+- [ ] All buttons use verb + object
+- [ ] All errors follow 3-part formula
+- [ ] All empty states have acknowledgment + value + action
+- [ ] Terminology is consistent across all screens
+- [ ] No humor in error states
+- [ ] No "click here" or "click below"
+- [ ] No ALL CAPS for body text (small-caps for abbreviations only)
+- [ ] Loading states have context ("Loading messages..." not "Loading...")

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "opencodekit",
-	"version": "0.18.9",
+	"version": "0.18.10",
 	"description": "CLI tool for bootstrapping and managing OpenCodeKit projects",
 	"keywords": [
 		"agents",