claude-code-superkit 0.0.0-stage → 1.5.3

package/packages/frontend-3d/skills/output-enforcement/SKILL.md

@@ -0,0 +1,79 @@
+---
+name: output-enforcement
+description: Anti-laziness enforcement — bans placeholder patterns (// ..., // TODO, // rest of code), enforces complete code generation, handles token-limit splits cleanly. Activate for every code generation task.
+tokens: 595
+---
+
+# Full Output Enforcement
+
+## Purpose
+
+Every response contains complete, runnable code — no placeholders, no elided sections.
+
+**Use when:** any code-generation task (new files, edits, refactors).
+**Do not use:** prose-only responses with no code output.
+
+## Hard Rules
+
+1. NEVER emit a banned pattern (list below) in generated code.
+2. Write every file complete, from first line to last.
+3. If output must split, break ONLY at a complete function/class boundary and add a `[PAUSED …]` marker.
+4. If a banned pattern appears in your draft, rewrite that section in full before responding — never send the draft as-is.
+5. Every `import` must resolve, every type must be defined, every called function must exist.
+
+## Banned Patterns
+
+These MUST NEVER appear in generated code:
+
+```
+// ...
+// rest of code
+// rest of the implementation
+// implement here
+// TODO: implement
+// TODO
+// existing code...
+// previous code remains
+// ... (other methods)
+// similar to above
+/* ... */
+# ... rest
+# TODO
+```
+
+`/* ... */` is banned when it stands in for omitted code; a block comment with real content is fine.
+
+## Workflow
+
+1. **Scope** — count the files and functions to generate.
+2. **Build** — write every file completely, no shortcuts.
+3. **Cross-check** — every import resolves, every type exists, every function call targets a defined function.
+4. **Self-check before sending** — search your draft for banned patterns:
+   - Pattern found → rewrite that section completely, then repeat this step.
+   - No pattern found → send.
+
+## Token Limit Handling
+
+If approaching the token limit mid-file:
+
+1. Finish the current function/class completely.
+2. Add a pause marker with progress tracking.
+3. In the next response, continue from the marker — do not repeat completed code.
+
+**Marker formats:**
+
+```
+[PAUSED — 3 of 7 files complete. Continuing with AuthService.ts]
+```
+
+```
+[PAUSED — AuthController.ts: 4 of 6 methods complete]
+[Completed: login, logout, refresh, validate]
+[Remaining: resetPassword, changeEmail]
+```
+
+## Recap — non-negotiables
+
+- Zero banned patterns in output; found in draft → rewrite the section in full before sending.
+- Split only at a complete function/class boundary, always with a PAUSED marker.
+- **Incomplete code is worse than no code.** A placeholder `// TODO` becomes invisible tech debt; a complete implementation can be reviewed, tested, and shipped.

package/packages/frontend-3d/skills/product-3d-lighting/SKILL.md

@@ -0,0 +1,166 @@
+---
+name: product-3d-lighting
+description: Studio lighting setups for 3D product showcases — HDRI, directional/spot/point lights, Environment from drei, shadow config, dark background optimization. Use when setting up lighting for product 3D scenes.
+tokens: 1279
+---
+
+# Product 3D Lighting
+
+## Purpose
+
+Studio lighting recipes for product showcases in React Three Fiber: three copy-paste scenes plus numeric ranges that keep results dramatic instead of washed out.
+
+## Use when / Do not use
+
+- USE when lighting a single-subject product scene in R3F (hero section, product page, showcase).
+- Do NOT use for full environments (landscapes, interiors, game levels) — these recipes assume one centered subject.
+
+## Hard Rules
+
+- Ambient intensity 0.2–0.3 on dark themes — higher washes out the drama.
+- `environmentIntensity` 0.1–0.2 for dark themes, 0.3–0.5 for light themes.
+- Every key light gets a softer fill from the opposite side — a single light means harsh shadows.
+- `ContactShadows` opacity 0.3–0.5, never 1.0.
+- Colored accent lights stay at intensity 0.3–0.5 — subtle beats obvious.
+- Wrap the product in `<Float>` — static products read as screenshots.
+
+## Workflow
+
+1. Pick a recipe: dark/black background hero → Recipe 1 · white/light page, even light → Recipe 2 · cinematic reflections on a glossy product → Recipe 3 · unsure → Recipe 1 (most common product pattern).
+2. Paste the recipe, replace `<ProductModel />` with your model, adjust positions/intensities only within the Hard Rules ranges.
+3. Check the result against the Common Mistakes table before shipping.
+
+## Recipe 1 — Dark Background (Product Hero)
+
+The most common product showcase pattern — dark/black background with dramatic lighting.
+
+```tsx
+import { Environment, ContactShadows, Float } from '@react-three/drei';
+
+function ProductScene() {
+  return (
+    <Canvas camera={{ position: [0, 0, 5], fov: 45 }}>
+      {/* Base: low ambient so dark areas stay dark */}
+      <ambientLight intensity={0.25} />
+
+      {/* Key light: main illumination from upper-right */}
+      <directionalLight
+        position={[5, 5, 5]}
+        intensity={0.6}
+        castShadow
+      />
+
+      {/* Fill light: softer, from opposite side */}
+      <directionalLight
+        position={[-3, 3, -3]}
+        intensity={0.25}
+      />
+
+      {/* Accent: colored point light for brand feel */}
+      <pointLight
+        position={[0, -2, 3]}
+        color="#6366f1"
+        intensity={0.5}
+      />
+
+      {/* Environment: very low intensity for subtle reflections (drei v9.88+) */}
+      <Environment preset="city" environmentIntensity={0.15} />
+
+      {/* Grounding shadow */}
+      <ContactShadows
+        position={[0, -1.5, 0]}
+        opacity={0.4}
+        blur={2.5}
+        far={4}
+      />
+
+      {/* Subtle idle animation */}
+      <Float speed={1.5} rotationIntensity={0.2} floatIntensity={0.3}>
+        <ProductModel />
+      </Float>
+    </Canvas>
+  );
+}
+```
+
+## Recipe 2 — Light Background (Clean Product)
+
+For white/light product pages — even lighting, minimal shadows.
+
+```tsx
+<Canvas>
+  <ambientLight intensity={0.8} />
+  <directionalLight position={[5, 5, 5]} intensity={0.5} />
+  <directionalLight position={[-5, 3, -5]} intensity={0.3} />
+
+  <Environment preset="apartment" environmentIntensity={0.4} />
+  <ContactShadows opacity={0.2} blur={3} />
+</Canvas>
+```
+
+## Recipe 3 — Lightformer Studio (Advanced)
+
+Using drei Lightformer for cinematic studio lighting:
+
+```tsx
+import { Lightformer, Environment } from '@react-three/drei';
+
+<Environment resolution={256}>
+  {/* Key light — large softbox */}
+  <Lightformer
+    form="rect"
+    intensity={2}
+    position={[5, 5, -5]}
+    rotation={[0, Math.PI / 2, 0]}
+    scale={[5, 3, 1]}
+    color="white"
+  />
+
+  {/* Fill — subtle warm */}
+  <Lightformer
+    form="ring"
+    intensity={0.5}
+    position={[-5, 3, 5]}
+    color="#fef3c7"
+    scale={3}
+  />
+
+  {/* Rim light — defines edge */}
+  <Lightformer
+    form="rect"
+    intensity={1.5}
+    position={[0, 5, -8]}
+    scale={[10, 1, 1]}
+    color="#e0e7ff"
+  />
+</Environment>
+```
+
+## Common Mistakes
+
+| Mistake | Fix | Why |
+|---------|-----|-----|
+| Ambient above 0.3 on dark theme | Set ambient intensity 0.2–0.3 | High ambient washes out the drama |
+| `environmentIntensity` too high | 0.1–0.2 dark themes, 0.3–0.5 light | Strong reflections flatten the shading |
+| Single light, no fill | Add a softer light from the opposite side | One light source means harsh shadows |
+| `ContactShadows` opacity 1.0 | Use opacity 0.3–0.5 | Full-black shadow looks pasted on |
+| Static product, no idle motion | Wrap the model in `<Float>` | Static products look like screenshots |
+| Colored accent too strong | Keep accent intensity 0.3–0.5 | Subtle brand tint beats an obvious color cast |
+
+## Environment Presets
+
+| Preset | Look | Best for |
+|--------|------|----------|
+| `city` | Urban, neutral | General product |
+| `studio` | Clean, white | Minimal product |
+| `apartment` | Warm, natural | Lifestyle product |
+| `sunset` | Golden, warm | Premium/luxury |
+| `dawn` | Cool, blue | Tech/modern |
+| `night` | Dark, moody | Gaming/dark UI |
+
+## Recap — non-negotiables
+
+- Dark theme: ambient 0.2–0.3, `environmentIntensity` 0.1–0.2.
+- Always pair the key light with a softer fill from the opposite side.
+- `ContactShadows` opacity 0.3–0.5; colored accents 0.3–0.5.
+- Give the product `<Float>` idle motion.

package/packages/frontend-3d/skills/r3f-scroll-driven-3d/SKILL.md

@@ -0,0 +1,209 @@
+---
+name: r3f-scroll-driven-3d
+description: Connect GSAP ScrollTrigger to React Three Fiber — Zustand bridge, useFrame animation, scroll progress to 3D transforms. The pattern for scroll-driven 3D product showcases.
+tokens: 1677
+---
+
+# Scroll-Driven 3D with GSAP + R3F
+
+## Purpose
+
+GSAP ScrollTrigger runs in the DOM; R3F runs in WebGL — they cannot talk directly. Bridge them with a Zustand store: GSAP writes scroll progress, R3F reads it in `useFrame`.
+
+```
+[GSAP ScrollTrigger] → writes → [Zustand Store] → reads → [R3F useFrame]
+       (DOM)                      (shared state)              (WebGL)
+```
+
+## Use when / Do not use
+
+- **Use when:** scroll position drives a 3D scene — product showcases, scrollytelling, camera/model/material state tied to scroll progress.
+- **Do not use:** DOM-only scroll animation (plain ScrollTrigger, no store needed) or one-shot 3D intros with no scroll link (animate directly in `useFrame`).
+
+## Hard Rules
+
+1. `scrub` MUST be a number (e.g. `scrub: 1`), never `true` — the number adds catch-up smoothing; `true` locks 1:1 to the wheel and looks janky in 3D.
+2. Every ScrollTrigger in this pattern MUST set `invalidateOnRefresh: true` — start/end values recalculate on resize/refresh so the pinned section stays aligned.
+3. When normalizing timeline progress to 0–1, MUST extend the timeline with `tl.set({}, {}, 1)` — without it the timeline ends at the last tween and `tl.call()` positions after that point never fire.
+4. Inside `useFrame` (or any per-frame callback), read the store with `useScrollStore.getState()` — never the hook subscription, which re-renders React on every scroll tick.
+
+## Why Zustand (Not React State/Context)?
+
+- React state/context triggers re-renders on every scroll tick (60fps = 60 re-renders/sec)
+- Zustand `getState()` reads directly without subscribing — zero re-renders
+- `useFrame` already runs at 60fps — just read the latest value
+
+## Workflow
+
+### Step 1: Create the store
+
+```tsx
+// stores/useScrollStore.ts
+import { create } from 'zustand';
+
+interface ScrollStore {
+  progress: number;          // 0-1 scroll progress
+  currentTexture: string;    // active screen texture path
+  setProgress: (p: number) => void;
+  setTexture: (t: string) => void;
+}
+
+export const useScrollStore = create<ScrollStore>((set) => ({
+  progress: 0,
+  currentTexture: '/textures/screen-1.png',
+  setProgress: (p) => set({ progress: p }),
+  setTexture: (t) => set({ currentTexture: t }),
+}));
+```
+
+### Step 2: GSAP writes to store
+
+```tsx
+// components/ScrollSection.tsx
+import { useRef, useEffect } from 'react';
+import gsap from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+import { useScrollStore } from '@/stores/useScrollStore';
+
+gsap.registerPlugin(ScrollTrigger);
+
+export function ScrollSection() {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    // getState(), not the hook — stable setters, no 60fps re-renders of this component
+    const { setProgress, setTexture } = useScrollStore.getState();
+
+    const ctx = gsap.context(() => {
+      const tl = gsap.timeline({
+        scrollTrigger: {
+          trigger: ref.current,
+          start: 'top top',
+          end: 'bottom bottom',
+          scrub: 1,                    // Hard Rule 1: number, NOT true
+          invalidateOnRefresh: true,   // Hard Rule 2: MUST have
+          pin: true,
+        },
+      });
+
+      // Animate progress 0 → 1
+      tl.to({}, {
+        duration: 1,
+        onUpdate: function() {
+          setProgress(this.progress());
+        },
+      });
+
+      // Swap texture at 50% scroll
+      tl.call(() => setTexture('/textures/screen-2.png'), [], 0.5);
+
+      // Hard Rule 3: extend timeline to full duration — otherwise it ends at
+      // the last tween and tl.call() positions after that never fire
+      tl.set({}, {}, 1.0);
+
+    }, ref);
+
+    return () => ctx.revert();
+  }, []);
+
+  return <div ref={ref} style={{ height: '300vh' }} />;
+}
+```
+
+### Step 3: R3F reads in useFrame
+
+```tsx
+// components/3d/PhoneModel.tsx
+import { useFrame } from '@react-three/fiber';
+import { useScrollStore } from '@/stores/useScrollStore';
+import { useRef } from 'react';
+import * as THREE from 'three';
+
+export function PhoneModel() {
+  const groupRef = useRef<THREE.Group>(null);
+
+  useFrame(() => {
+    if (!groupRef.current) return;
+
+    // Hard Rule 4: getState() not hook — no re-renders
+    const { progress } = useScrollStore.getState();
+
+    // Rotate based on scroll
+    groupRef.current.rotation.y = progress * Math.PI * 2;
+
+    // Phase-based animation
+    if (progress < 0.3) {
+      // Entry: scale up
+      const t = progress / 0.3;
+      groupRef.current.scale.setScalar(0.5 + t * 0.5);
+    } else if (progress < 0.7) {
+      // Showcase: full size, rotate
+      groupRef.current.scale.setScalar(1);
+    } else {
+      // Exit: scale down
+      const t = (progress - 0.7) / 0.3;
+      groupRef.current.scale.setScalar(1 - t * 0.3);
+    }
+  });
+
+  return (
+    <group ref={groupRef}>
+      {/* Your 3D model here */}
+    </group>
+  );
+}
+```
+
+## Performance Tips
+
+- **Pre-allocate:** No `new THREE.Vector3()` inside useFrame — use refs
+- **getState():** Always in useFrame, never hook subscription
+- **DPR:** `dpr={[1, 2]}` — higher wastes mobile GPU
+- **Dispose:** `dispose={null}` on reusable groups
+
+## Dynamic Texture Swapping
+
+Preload every texture up front (never load inside `useFrame`), then swap `material.map` when the store value changes. Step 2's `tl.call(...)` is what drives `currentTexture`.
+
+```tsx
+// components/3d/ScreenMaterial.tsx
+import { useTexture } from '@react-three/drei';
+import { useFrame } from '@react-three/fiber';
+import { useRef } from 'react';
+import * as THREE from 'three';
+import { useScrollStore } from '@/stores/useScrollStore';
+
+export function ScreenMaterial() {
+  const matRef = useRef<THREE.MeshBasicMaterial>(null);
+  const [screen1, screen2] = useTexture([
+    '/textures/screen-1.png',
+    '/textures/screen-2.png',
+  ]);
+  const byPath: Record<string, THREE.Texture> = {
+    '/textures/screen-1.png': screen1,
+    '/textures/screen-2.png': screen2,
+  };
+
+  useFrame(() => {
+    // Hard Rule 4: getState() not hook
+    const { currentTexture } = useScrollStore.getState();
+    const next = byPath[currentTexture];
+    if (matRef.current && next && matRef.current.map !== next) {
+      matRef.current.map = next;
+      matRef.current.needsUpdate = true;
+    }
+  });
+
+  // toneMapped=false: screen UI textures should not be tone-mapped
+  return <meshBasicMaterial ref={matRef} map={screen1} toneMapped={false} />;
+}
+```
+
+For correct color space on screen textures, see the `threejs-color-management` skill.
+
+## Recap — non-negotiables
+
+- `scrub: <number>`, never `scrub: true`.
+- `invalidateOnRefresh: true` on every ScrollTrigger.
+- `tl.set({}, {}, 1)` to extend the timeline to full duration when normalizing 0–1.
+- `useScrollStore.getState()` inside `useFrame` and callbacks — never the hook subscription.

package/packages/frontend-3d/skills/threejs-color-management/SKILL.md

@@ -0,0 +1,111 @@
+---
+name: threejs-color-management
+description: Three.js color pipeline — sRGB vs Linear, toneMapping (None/ACES/Reinhard), texture colorSpace, when to use NoToneMapping for UI textures. Activate when color issues arise with 3D textures or rendered colors look wrong.
+tokens: 1098
+---
+
+# Three.js Color Management
+
+## Purpose
+Fix wrong-looking colors in Three.js/R3F scenes — too bright, too dark, washed out, or distorted — by setting each stage of the color pipeline correctly.
+
+## Use when / Do not use
+- **Use when:** rendered colors do not match the source asset; a UI screenshot looks wrong on a 3D screen; textures look oversaturated, washed out, or too dark.
+- **Do not use for:** brightness problems caused by light intensity/setup, or CSS/DOM color issues outside the Canvas.
+
+## Hard Rules
+- Visual textures (photos, UI screenshots) MUST set `texture.colorSpace = THREE.SRGBColorSpace`; data textures (normal, roughness) stay `THREE.LinearSRGBColorSpace`.
+- Materials showing UI/screen content MUST set `toneMapped={false}`.
+- Always write the named constant `THREE.NoToneMapping` — never the bare number `0`.
+- NEVER use deprecated `sRGBEncoding` / `texture.encoding` — replaced by `colorSpace` since r152.
+- Keep `renderer.outputColorSpace = THREE.SRGBColorSpace` (the default) unless there is a documented reason to change it.
+
+## Debug Workflow
+Diagnose in pipeline order:
+1. Check `texture.colorSpace` — matches content type (Stage 1 table)?
+2. Check material `toneMapped` — `false` for UI textures (Stage 2 table)?
+3. Check Canvas `toneMapping` — `THREE.NoToneMapping` if the scene is UI-heavy (Stage 3 table)?
+4. Check material type — `meshBasicMaterial` for screens (no lighting effects)?
+5. Grep for deprecated `sRGBEncoding` — replace with `colorSpace` (since r152).
+
+## The Color Pipeline
+
+```
+Texture → Material → Renderer (toneMapping) → Output (outputColorSpace)
+```
+
+Every texture goes through all four stages.
+
+### Stage 1: Texture colorSpace
+Set on load. Tells Three.js how to interpret the texture data.
+
+| Type | colorSpace | When |
+|------|-----------|------|
+| Photos, UI screenshots | `THREE.SRGBColorSpace` | Colors created for human eyes |
+| Normal maps, roughness | `THREE.LinearSRGBColorSpace` | Data textures (not visual) |
+| HDR environment | `THREE.LinearSRGBColorSpace` | Already in linear space |
+
+```tsx
+const texture = useTexture('/screen.png');
+texture.colorSpace = THREE.SRGBColorSpace; // UI screenshot
+```
+
+### Stage 2: Material toneMapped
+Controls whether the material goes through the renderer's tone mapping.
+
+| Scenario | toneMapped | Why |
+|----------|-----------|-----|
+| UI on 3D screen | `false` | Preserve exact pixel colors |
+| Realistic objects | `true` (default) | HDR → SDR compression needed |
+| Emissive displays | `false` | Screens emit, don't reflect |
+
+```tsx
+<meshBasicMaterial map={texture} toneMapped={false} />
+```
+
+### Stage 3: Renderer toneMapping
+Global setting. Compresses HDR values into displayable range.
+
+| Value | Effect | Use when |
+|-------|--------|----------|
+| `THREE.ACESFilmicToneMapping` | Cinematic, saturated | Realistic 3D scenes (R3F Canvas default) |
+| `THREE.NoToneMapping` (=0) | No compression | UI textures are primary visual |
+| `THREE.ReinhardToneMapping` | Gentle compression | Bright scenes, less contrast |
+
+```tsx
+<Canvas gl={{ toneMapping: THREE.NoToneMapping }}>
+```
+
+### Stage 4: Output colorSpace
+`renderer.outputColorSpace = THREE.SRGBColorSpace` (default). Rarely change this.
+
+## Common Issues & Fixes
+
+### Colors too bright / oversaturated
+**Cause:** Tone mapping amplifying already-sRGB colors.
+**Fix:** `toneMapped={false}` on the material, or `gl={{ toneMapping: THREE.NoToneMapping }}` on Canvas.
+
+### Colors washed out / desaturated
+**Cause:** Texture loaded as LinearSRGB but contains sRGB data.
+**Fix:** `texture.colorSpace = THREE.SRGBColorSpace`
+
+### Colors too dark
+**Cause:** sRGB texture treated as linear (double conversion).
+**Fix:** Check `texture.colorSpace` — if it's a photo/UI, must be `THREE.SRGBColorSpace`.
+
+### UI screenshot looks wrong on a 3D model
+**UI-screenshot-on-3D-screen pattern** — apply all three settings together:
+```tsx
+<meshBasicMaterial
+  map={screenTexture}
+  toneMapped={false}
+/>
+// + screenTexture.colorSpace = THREE.SRGBColorSpace
+// + Canvas gl={{ toneMapping: THREE.NoToneMapping }} if UI is the primary visual
+```
+
+## Recap — non-negotiables
+- Photos/UI screenshots → `THREE.SRGBColorSpace`; data textures → `THREE.LinearSRGBColorSpace`.
+- UI/screen materials → `toneMapped={false}` (use `meshBasicMaterial` for screens).
+- Named constant `THREE.NoToneMapping`, never bare `0`.
+- No `sRGBEncoding` — use `colorSpace` (r152+).

package/packages/frontend-ui/NOTICE.md

@@ -0,0 +1,99 @@
+# Attribution and Third-Party Notices
+
+This package incorporates material from the following sources.
+
+---
+
+## 1. Impeccable (Apache License 2.0)
+
+**Source:** https://github.com/pbakaus/impeccable
+**Author:** Paul Bakaus and contributors
+**License:** Apache License, Version 2.0
+
+**Copyright notice:**
+```
+Copyright 2025 Paul Bakaus
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use the files derived from this source except in compliance with
+the License. You may obtain a copy of the License at:
+
+    http://www.apache.org/licenses/LICENSE-2.0
+```
+
+The Impeccable project itself builds upon Anthropic's
+[`frontend-design`](https://github.com/anthropics/skills/tree/main/skills/frontend-design)
+skill, which is released under the same Apache-2.0 license.
+
+### Material incorporated
+
+The following rule files in `packages/frontend-ui/rules/` contain material
+adapted, summarised, or directly ported from Impeccable's reference
+documentation:
+
+| File | Adapted from |
+|------|--------------|
+| `frontend-design-aesthetics.md` | Impeccable `source/skills/impeccable/SKILL.md` (principles sections) |
+| `typography-guidelines.md` | Impeccable `source/skills/impeccable/reference/typography.md` |
+| `color-and-contrast.md` | Impeccable `source/skills/impeccable/reference/color-and-contrast.md` |
+| `spatial-and-layout.md` | Impeccable `source/skills/impeccable/reference/spatial-design.md` + `responsive-design.md` |
+| `motion-and-animation.md` | Impeccable `source/skills/impeccable/reference/motion-design.md` (partial) |
+| `interaction-polish.md` | Impeccable `source/skills/impeccable/reference/interaction-design.md` + `ux-writing.md` |
+| `ui-anti-patterns.md` | Impeccable's `reflex_fonts_to_reject` list and scattered "DO NOT" blocks |
+
+Adaptations include: rephrasing for internal consistency with superkit
+conventions, merging with material from other sources, adding
+`applyWhenPaths` frontmatter for auto-loading, and removing the
+skill-specific `teach` / `craft` flow scaffolding.
+
+### Full Apache-2.0 license text
+
+See https://www.apache.org/licenses/LICENSE-2.0 for the full, canonical
+license text. The short notice required by the license is reproduced above;
+the full text is not duplicated here to keep this notice concise but applies
+in its entirety to all material listed in the "Material incorporated" table.
+
+---
+
+## 2. Emil Kowalski's Design Engineering philosophy (ideas only)
+
+**Source:** https://github.com/emilkowalski/skill and https://emilkowal.ski/skill
+**Author:** Emil Kowalski
+**License:** No LICENSE file present in the source repository at the time of review
+
+Because the source repository did not include a license at the time this
+package was authored, the **prose** from Emil's skill file has NOT been
+copied. Only the following categories of material have been incorporated,
+and all of it has been re-expressed in our own wording:
+
+1. **Factual content:** easing curve `cubic-bezier` constants; animation
+   duration tables (buttons 100-160ms, tooltips 125-200ms, dropdowns
+   150-250ms, modals 200-500ms). Technical facts are not copyrightable.
+2. **Methodology patterns:** the structure of the "Animation Decision
+   Framework" (four sequential questions: should this animate? what is the
+   purpose? what easing? how fast?). The structure is a pattern; our
+   implementation uses our own explanations and examples.
+3. **Output-format convention:** the use of a `| Before | After | Why |`
+   markdown table for UI review output. Applied as a formatting pattern in
+   our agents, not as copied prose.
+
+Specifically **not** incorporated: Emil's philosophical framing sections
+("Taste is trained, not innate", "Unseen details compound", "Beauty is
+leverage"), his author's-voice examples, and any quoted passages from other
+authors (including the Paul Graham quotation).
+
+If Emil's repository later adds an LICENSE permitting redistribution, this
+notice should be updated to reflect that and additional material may be
+incorporated directly.
+
+---
+
+## How to update this notice
+
+When adding material from a new source:
+1. Add a new numbered section here with source, author, license.
+2. If the new source is under a license requiring a NOTICE entry (Apache-2.0
+   and similar), reproduce the required notice here.
+3. List which files in this package incorporate material from the new
+   source.
+4. Commit the NOTICE update in the same commit as the first file that
+   incorporates the material.