@xonovex/skills 0.1.0

package/skills/react-guidelines/reference/migration-deprecations.md

@@ -0,0 +1,109 @@
+# deprecations: React 19 Removed & Deprecated APIs
+
+**Guideline:** Migrate away from removed APIs; avoid deprecated patterns that will be removed in future versions.
+
+**Rationale:** React 19 removes long-deprecated APIs. Upgrade to React 18.3 first to see deprecation warnings, then migrate.
+
+| Removed | Migration |
+|---------|-----------|
+| `ReactDOM.render()` | `createRoot().render()` |
+| `ReactDOM.hydrate()` | `hydrateRoot()` |
+| `unmountComponentAtNode()` | `root.unmount()` |
+| `ReactDOM.findDOMNode()` | Use refs |
+| `propTypes` | TypeScript |
+| `defaultProps` (functions) | ES6 default parameters |
+| String refs | Callback refs or `useRef` |
+| Legacy Context | `createContext` |
+| `react-dom/test-utils` | `act` from `'react'` |
+
+| Deprecated | Migration |
+|------------|-----------|
+| `forwardRef` | `ref` as prop |
+| `Context.Provider` | `<Context value={}>` |
+
+**Example:**
+
+```tsx
+// Removed: ReactDOM.render
+import { render } from 'react-dom'; // ❌ Removed
+render(<App />, document.getElementById('root'));
+
+// Migration: createRoot
+import { createRoot } from 'react-dom/client';
+const root = createRoot(document.getElementById('root')!);
+root.render(<App />);
+
+// Removed: string refs
+class Bad extends Component {
+  componentDidMount() { this.refs.input.focus(); }
+  render() { return <input ref="input" />; } // ❌ Removed
+}
+
+// Migration: useRef
+function Good() {
+  const inputRef = useRef<HTMLInputElement>(null);
+  useEffect(() => { inputRef.current?.focus(); }, []);
+  return <input ref={inputRef} />;
+}
+
+// Removed: propTypes
+Button.propTypes = { label: PropTypes.string }; // ❌ Ignored
+
+// Migration: TypeScript
+function Button({ label }: { label: string }) {
+  return <button>{label}</button>;
+}
+
+// Removed: defaultProps (function components)
+function Button({ size }) { return <button className={size}>Click</button>; }
+Button.defaultProps = { size: 'medium' }; // ❌ Removed
+
+// Migration: ES6 defaults
+function Button({ size = 'medium' }: { size?: string }) {
+  return <button className={size}>Click</button>;
+}
+
+// Deprecated: forwardRef
+const Input = forwardRef((props, ref) => <input ref={ref} {...props} />);
+
+// Migration: ref as prop
+function Input({ ref, ...props }: { ref?: Ref<HTMLInputElement> }) {
+  return <input ref={ref} {...props} />;
+}
+
+// Deprecated: Context.Provider
+<ThemeContext.Provider value="dark">{children}</ThemeContext.Provider>
+
+// Migration: Context directly
+<ThemeContext value="dark">{children}</ThemeContext>
+
+// Removed: react-dom/test-utils
+import { act } from 'react-dom/test-utils'; // ❌ Removed
+
+// Migration: import from react
+import { act } from 'react';
+```
+
+**Migration codemods:**
+
+```bash
+# Run all React 19 codemods
+npx codemod@latest react/19/migration-recipe
+
+# Individual codemods
+npx codemod@latest react/19/replace-reactdom-render
+npx codemod@latest react/19/replace-string-ref
+npx codemod@latest react/19/replace-forward-ref
+npx codemod@latest react/19/replace-act-import
+```
+
+**Techniques:**
+- Removed APIs: ReactDOM.render, ReactDOM.hydrate, findDOMNode, string refs, propTypes
+- createRoot: Use for client-side rendering instead of deprecated ReactDOM.render
+- useRef/Callback refs: Replace string refs like ref="fieldName"
+- TypeScript: Replace propTypes validation with type-safe function parameters
+- defaultProps: Use ES6 default parameters instead of .defaultProps
+- forwardRef: Migrate to ref as prop for better type safety
+- Context: Use Context directly instead of Context.Provider wrapper
+- Act import: Import from 'react' not 'react-dom/test-utils'
+- Codemods: Run react/19/migration-recipe to automate common migrations

package/skills/react-guidelines/reference/migration-paradigm-shifts.md

@@ -0,0 +1,33 @@
+# migration-paradigm-shifts: React 19 Mental Model Changes
+
+**Guideline:** Think server-first, compiler-optimized, declarative; React 19 shifts from client-side to Server Components and from manual to automatic optimization.
+
+**Rationale:** Server Components eliminate useEffect data fetching; Compiler removes manual memoization burden; Form Actions replace useState form fields.
+
+**Example:**
+```tsx
+// OLD: Client fetch + loading state
+function ProductPage({ productId }) {
+  const [product, setProduct] = useState(null);
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    fetch(`/api/products/${productId}`).then(data => { setProduct(data); setLoading(false); });
+  }, [productId]);
+  if (loading) return <Skeleton />;
+  return <ProductDetails product={product} />;
+}
+
+// NEW: Server Component - direct DB access
+async function ProductPage({ productId }) {
+  const product = await db.products.find(productId);
+  return <ProductDetails product={product} />;
+}
+```
+
+**Techniques:**
+- Server-first: Async Server Components (SC) by default, 'use client' for islands only
+- Data fetching: SC replaces useEffect; no loading state needed (Suspense handles it)
+- Form handling: useActionState replaces useState; FormData replaces controlled inputs
+- Memoization: React Compiler handles it; write clean code, compiler optimizes
+- Loading UX: Suspense boundaries for progressive disclosure instead of all-or-nothing
+- Paradigm shift: Trust the framework; write simple code, compiler/SC handle complexity

package/skills/react-guidelines/reference/migration-typescript.md

@@ -0,0 +1,95 @@
+# typescript-changes: React 19 TypeScript Changes
+
+**Guideline:** Update TypeScript types for React 19's breaking changes to refs, JSX namespace, and removed types.
+
+**Rationale:** React 19 changes ref semantics, removes deprecated types, and scopes JSX namespace. Run codemods to automate most migrations.
+
+**Example:**
+
+```tsx
+// Ref callbacks must not return values (except cleanup)
+<div ref={current => (instance = current)} /> // ❌ Error - implicit return
+<div ref={current => { instance = current; }} /> // ✅ Block body
+
+// Cleanup functions ARE allowed
+<div ref={current => {
+  // setup
+  return () => { /* cleanup */ };
+}} />
+
+// useRef requires argument
+const ref = useRef<HTMLDivElement>(); // ❌ Error
+const ref = useRef<HTMLDivElement>(null); // ✅ Required
+
+// ReactElement props are now unknown
+type Props = ReactElement['props']; // unknown (was any)
+type Props = ReactElement<{ id: string }>['props']; // { id: string }
+
+// Global JSX namespace removed - import explicitly
+declare global { namespace JSX { ... } } // ❌ Removed
+
+declare module 'react' { // ✅ Module scoped
+  namespace JSX {
+    interface IntrinsicElements {
+      'my-element': { myProp: string };
+    }
+  }
+}
+
+// Import JSX type explicitly
+import type { JSX } from 'react';
+const element: JSX.Element = <div />;
+
+// Removed types - use alternatives
+import { ReactChild, VFC } from 'react'; // ❌ Removed
+
+// Alternatives
+type Child = ReactElement | number | string; // was ReactChild
+type Component = FC<Props>; // was VFC, SFC
+
+// Typing ref as prop
+interface InputProps {
+  placeholder?: string;
+  ref?: React.Ref<HTMLInputElement>;
+}
+
+function Input({ placeholder, ref }: InputProps) {
+  return <input placeholder={placeholder} ref={ref} />;
+}
+
+// Typing useActionState
+interface FormState { error: string | null; success: boolean }
+
+const [state, formAction, isPending] = useActionState<FormState, FormData>(
+  async (prevState, formData) => {
+    return { error: null, success: true };
+  },
+  { error: null, success: false }
+);
+
+// Typing useOptimistic
+const [optimistic, addOptimistic] = useOptimistic<Message[], Omit<Message, 'pending'>>(
+  messages,
+  (state, newMessage) => [...state, { ...newMessage, pending: true }]
+);
+```
+
+**Migration codemods:**
+
+```bash
+# Run all TypeScript codemods
+npx types-react-codemod@latest preset-19 ./src
+
+# Individual codemods
+npx types-react-codemod@latest no-implicit-ref-callback-return ./src
+npx types-react-codemod@latest refobject-defaults ./src
+npx types-react-codemod@latest scoped-jsx ./src
+```
+
+**Techniques:**
+- Update `@types/react` and `@types/react-dom` to ^19.0.0
+- Run `npx types-react-codemod@latest preset-19 ./src`
+- Fix ref callback implicit returns: `=> (x = y)` → `=> { x = y; }`
+- Add arguments to `useRef()` calls
+- Replace removed types (`ReactChild`, `VFC`)
+- Import `JSX` type from `'react'` if used

package/skills/react-guidelines/reference/new-hooks.md

@@ -0,0 +1,94 @@
+# new-hooks: React 19 Hooks
+
+**Guideline:** Use React 19's new hooks for forms, optimistic updates, and promise/context reading.
+
+**Rationale:** These hooks replace manual state management patterns, reducing boilerplate and providing built-in pending states, error handling, and progressive enhancement.
+
+**Example:**
+
+```tsx
+import { useActionState, useOptimistic, use, Suspense } from 'react';
+import { useFormStatus } from 'react-dom';
+
+// useActionState - form state with async actions
+function ContactForm() {
+  const [state, formAction, isPending] = useActionState(
+    async (prevState, formData) => {
+      const result = await submitForm({
+        email: formData.get('email'),
+        message: formData.get('message'),
+      });
+      if (result.error) return { error: result.error };
+      return { success: true };
+    },
+    null
+  );
+
+  return (
+    <form action={formAction}>
+      <input name="email" type="email" disabled={isPending} />
+      <textarea name="message" disabled={isPending} />
+      <SubmitButton />
+      {state?.error && <p className="error">{state.error}</p>}
+    </form>
+  );
+}
+
+// useFormStatus - reads parent form state (must be inside form)
+function SubmitButton() {
+  const { pending } = useFormStatus();
+  return (
+    <button type="submit" disabled={pending}>
+      {pending ? 'Sending...' : 'Send'}
+    </button>
+  );
+}
+
+// useOptimistic - instant feedback, reverts on error
+function LikeButton({ postId, likes }: { postId: string; likes: number }) {
+  const [optimisticLikes, addOptimistic] = useOptimistic(
+    likes,
+    (current, delta: number) => current + delta
+  );
+
+  async function handleLike() {
+    addOptimistic(1);
+    await likePost(postId); // reverts if throws
+  }
+
+  return (
+    <form action={handleLike}>
+      <button type="submit">{optimisticLikes} likes</button>
+    </form>
+  );
+}
+
+// use() - read promises (suspends until resolved)
+function Comments({ commentsPromise }: { commentsPromise: Promise<Comment[]> }) {
+  const comments = use(commentsPromise);
+  return comments.map(c => <p key={c.id}>{c.text}</p>);
+}
+
+// use() - conditional context (not possible with useContext)
+function ThemedContent({ showTheme }: { showTheme: boolean }) {
+  if (!showTheme) return <div>Plain</div>;
+  const theme = use(ThemeContext); // can be called conditionally!
+  return <div className={theme}>Themed</div>;
+}
+
+// Parent creates promise, child reads it
+function Page({ postId }: { postId: string }) {
+  const commentsPromise = fetchComments(postId);
+  return (
+    <Suspense fallback={<Skeleton />}>
+      <Comments commentsPromise={commentsPromise} />
+    </Suspense>
+  );
+}
+```
+
+**Techniques:**
+- Use `useActionState` for form state with async actions (replaces manual loading/error state)
+- Use `useOptimistic` for instant UI feedback that reverts on error
+- Use `use()` to read promises (suspends) or context (can be conditional)
+- Use `useFormStatus` inside forms to read parent form's pending state

package/skills/react-guidelines/reference/performance-optimization.md

@@ -0,0 +1,41 @@
+# performance-optimization: Performance Optimization Techniques
+
+**Guideline:** Use memo() for expensive components; lazy-load routes with React.lazy + Suspense; prefer SSR/SSG; let Compiler handle calculations.
+
+**Rationale:** memo() prevents unnecessary re-renders; code splitting reduces initial bundle; SSR improves FCP; React 19 Compiler removes manual memoization burden.
+
+**Example:**
+```tsx
+// Memoize expensive component
+const ExpensiveList = memo(function({ items, onItemClick }) {
+  return (
+    <ul>
+      {items.map(item => (
+        <li key={item.id} onClick={() => onItemClick(item.id)}>
+          {item.name}
+        </li>
+      ))}
+    </ul>
+  );
+});
+
+// Lazy load routes
+const Dashboard = lazy(() => import("./pages/Dashboard"));
+function App() {
+  return (
+    <Suspense fallback={<LoadingSpinner />}>
+      <Routes>
+        <Route path="/dashboard" element={<Dashboard />} />
+      </Routes>
+    </Suspense>
+  );
+}
+```
+
+**Techniques:**
+- memo(): Wrap expensive components to skip re-render if props unchanged
+- lazy() + Suspense: Code splitting; reduces initial bundle by ~50-70%
+- useCallback: Stabilize callbacks passed to memoized children (pair with memo)
+- useMemo: Only for effect dependencies or expensive one-time calculations
+- React Compiler: In React 19, removes need for manual memoization (vite/next.js config)
+- SSR/SSG: Server Components and static generation for better FCP and SEO

package/skills/react-guidelines/reference/react-compiler.md

@@ -0,0 +1,34 @@
+# react-compiler: React Compiler & Automatic Memoization
+
+**Guideline:** Write clean code without manual memoization; let Compiler handle it automatically; use useMemo/useCallback only for effect dependencies.
+
+**Rationale:** Compiler analyzes data flow and applies memoization where beneficial; manual optimization adds overhead and is often incorrect.
+
+**Example:**
+```tsx
+// Compiler handles this automatically
+function ProductList({ items, onSelect }) {
+  const sorted = items.filter(x => x.active).sort(byName);
+  return sorted.map(item => (
+    <li key={item.id} onClick={() => onSelect(item.id)}>{item.name}</li>
+  ));
+}
+
+// Manual useMemo only for stable effect dependency
+function SearchResults({ query }) {
+  const searchParams = useMemo(
+    () => ({ query, timestamp: Date.now() }),
+    [query]
+  );
+  useEffect(() => { fetchResults(searchParams); }, [searchParams]);
+  return <Results />;
+}
+```
+
+**Techniques:**
+- Compiler enabled: Vite react({ babel: { plugins: ['babel-plugin-react-compiler'] } }) or Next.js experimental.reactCompiler
+- Rules of React: Pure functions, immutable state, unconditional hooks (compiler enforces)
+- Manual memoization: Only for stable effect dependencies; let Compiler handle render optimizations
+- Opt-in ('use memo'): Incremental adoption; compile specific components
+- Opt-out ('use no memo'): Skip compilation for legacy/problematic code
+- Keep it simple: Write readable code; Compiler finds and optimizes bottlenecks

package/skills/react-guidelines/reference/server-components.md

@@ -0,0 +1,99 @@
+# server-components: React Server Components & Actions
+
+**Guideline:** Use Server Components by default for data fetching and static UI; add `'use client'` only for interactivity.
+
+**Rationale:** Server Components send zero JS to the client, access databases/APIs directly, and eliminate loading state boilerplate. Client boundaries should be minimal.
+
+**Example:**
+
+```tsx
+// Server Component (default) - no directive needed
+async function ProductPage({ params }: { params: { id: string } }) {
+  const product = await db.products.find(params.id);
+  const reviews = await db.reviews.findMany({ productId: params.id });
+
+  return (
+    <main>
+      <h1>{product.name}</h1>
+      <p>{product.description}</p>
+      <AddToCartButton productId={product.id} /> {/* Client island */}
+      <ReviewList reviews={reviews} />
+    </main>
+  );
+}
+
+// Client Component - needs directive for interactivity
+'use client';
+
+function AddToCartButton({ productId }: { productId: string }) {
+  const [isPending, startTransition] = useTransition();
+
+  return (
+    <button
+      onClick={() => startTransition(() => addToCart(productId))}
+      disabled={isPending}
+    >
+      {isPending ? 'Adding...' : 'Add to Cart'}
+    </button>
+  );
+}
+
+// Server Action - separate file recommended
+// actions.ts
+'use server';
+
+export async function createPost(prevState: any, formData: FormData) {
+  const title = formData.get('title') as string;
+  if (!title) return { error: 'Title required' };
+
+  await db.posts.create({ title });
+  revalidatePath('/posts');
+  return { success: true };
+}
+
+export async function deletePost(id: string) {
+  await db.posts.delete(id);
+  revalidatePath('/posts');
+}
+
+// Using Server Actions in Client Component
+'use client';
+
+import { createPost } from './actions';
+import { useActionState } from 'react';
+
+function NewPostForm() {
+  const [state, formAction, isPending] = useActionState(createPost, null);
+
+  return (
+    <form action={formAction}>
+      <input name="title" disabled={isPending} />
+      <button disabled={isPending}>Create</button>
+      {state?.error && <span>{state.error}</span>}
+    </form>
+  );
+}
+
+// Inline Server Action in Server Component
+async function QuickForm() {
+  async function handleSubmit(formData: FormData) {
+    'use server';
+    await db.items.create({ name: formData.get('name') });
+    revalidatePath('/items');
+  }
+
+  return (
+    <form action={handleSubmit}>
+      <input name="name" />
+      <button>Add</button>
+    </form>
+  );
+}
+```
+
+**Techniques:**
+- No directive = Server Component (default); can be `async`, access db/fs directly
+- Add `'use client'` only for useState, useEffect, onClick, browser APIs
+- Use `'use server'` for Server Actions (mutations callable from client)
+- Keep client boundaries small - wrap only interactive parts
+- Pass Server Components as children to Client Components when needed

package/skills/react-guidelines/reference/state-management.md

@@ -0,0 +1,72 @@
+# state-management: State Management Best Practices
+
+**Guideline:** Use local state with `useState`, lift state only when multiple components need it, and derive computed values.
+
+**Rationale:** Local state keeps components independent and easier to reason about. Lifting state only when necessary prevents prop drilling and over-sharing. Derived state eliminates synchronization bugs.
+
+**Example:**
+
+```tsx
+// ✅ Local state
+function Counter() {
+  const [count, setCount] = useState(0);
+  return <button onClick={() => setCount(count + 1)}>{count}</button>;
+}
+
+// ✅ Lifted state (when siblings need to share)
+function Parent() {
+  const [count, setCount] = useState(0);
+  return (
+    <>
+      <Counter count={count} onIncrement={() => setCount(count + 1)} />
+      <Display count={count} />
+    </>
+  );
+}
+
+// ✅ useReducer for complex state
+type State = {count: number; step: number};
+type Action =
+  | {type: "increment"}
+  | {type: "decrement"}
+  | {type: "setStep"; step: number};
+
+function reducer(state: State, action: Action): State {
+  switch (action.type) {
+    case "increment":
+      return {...state, count: state.count + state.step};
+    case "decrement":
+      return {...state, count: state.count - state.step};
+    case "setStep":
+      return {...state, step: action.step};
+    default:
+      return state;
+  }
+}
+
+function ComplexCounter() {
+  const [state, dispatch] = useReducer(reducer, {count: 0, step: 1});
+
+  return (
+    <div>
+      <p>Count: {state.count}</p>
+      <button onClick={() => dispatch({type: "increment"})}>+</button>
+      <button onClick={() => dispatch({type: "decrement"})}>-</button>
+      <input
+        type="number"
+        value={state.step}
+        onChange={(e) =>
+          dispatch({type: "setStep", step: Number(e.target.value)})
+        }
+      />
+    </div>
+  );
+}
+```
+
+**Techniques:**
+- Start with local `useState` in the component that owns the data
+- If multiple sibling components need the state, lift to their parent
+- For complex state logic, use `useReducer` instead of multiple `useState`
+- Use `useMemo` to derive values from existing state
+- Consider Context API for deeply nested prop passing

package/skills/react-guidelines/reference/suspense-streaming.md

@@ -0,0 +1,36 @@
+# suspense-streaming: Suspense, Streaming & Error Handling
+
+**Guideline:** Use granular Suspense boundaries for independent progressive loading; nest for hierarchical control; combine with Error Boundaries.
+
+**Rationale:** Suspense enables streaming—content loads incrementally, not all-or-nothing; React 19 pre-warms siblings for faster perceived performance.
+
+**Example:**
+```tsx
+function Dashboard() {
+  return (
+    <div>
+      <Suspense fallback={<StatsSkeleton />}>
+        <StatsSection /> {/* Shows at 150ms */}
+      </Suspense>
+      <Suspense fallback={<UserSkeleton />}>
+        <UserSection /> {/* Shows at 200ms independently */}
+      </Suspense>
+    </div>
+  );
+}
+
+// Error + Suspense: graceful failure
+<ErrorBoundary fallback={<ErrorMessage />}>
+  <Suspense fallback={<Loading />}>
+    <DataDisplay />
+  </Suspense>
+</ErrorBoundary>
+```
+
+**Techniques:**
+- Independent boundaries: Each Suspense boundary loads and shows independently (faster perceived time)
+- Nested boundaries: Hierarchy for critical→secondary→tertiary with fallbacks at each level
+- Error Boundaries: Catch component errors; pair with Suspense for complete error handling
+- Root-level errors: React 19 onUncaughtError and onCaughtError callbacks
+- Skeleton sizing: Match dimensions to prevent layout shift (CLS optimization)
+- Pre-warming: React 19 fetches siblings during suspension for faster transitions

package/skills/remotion-guidelines/SKILL.md

@@ -0,0 +1,67 @@
+---
+name: remotion-guidelines
+description: >-
+  Trigger on Remotion video projects, `remotion.config.ts`, video composition files. Use when creating programmatic videos with React. Apply for animations, sequencing, media handling, transitions, captions. Keywords: Remotion, video, React, animation, composition, useCurrentFrame, interpolate, spring, Sequence.
+---
+
+# Remotion Coding Guidelines
+
+## Requirements
+
+- Remotion ≥ 4, React ≥ 18, TypeScript.
+
+## Essentials
+
+- **Frame-driven animations** - Use `useCurrentFrame()` for all motion; CSS transitions and Tailwind `animate-*` classes are forbidden, see [reference/animations.md](reference/animations.md)
+- **Timing** - Write in seconds, multiply by `fps` from `useVideoConfig()`; use `interpolate()` or `spring()`, see [reference/timing.md](reference/timing.md)
+- **Sequencing** - Use `<Sequence>` with `from`/`durationInFrames`; always add `premountFor` to preload, see [reference/sequencing.md](reference/sequencing.md)
+- **Assets** - Use `staticFile()` for public assets; use `<Img>`, `<Video>`, `<Audio>` components, see [reference/assets.md](reference/assets.md)
+- **Compositions** - Define in `Root.tsx` with `type` (not interface) for props; use `calculateMetadata()` for dynamic values, see [reference/compositions.md](reference/compositions.md)
+- **Transitions** - Use `<TransitionSeries>` for scene changes; duration overlaps reduce total length, see [reference/transitions.md](reference/transitions.md)
+- **Text** - Load fonts via `@remotion/google-fonts`; measure with `@remotion/layout-utils`, see [reference/text.md](reference/text.md)
+
+## Example
+
+```tsx
+import {AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig} from "remotion";
+
+export function FadeIn() {
+  const frame = useCurrentFrame();
+  const {fps} = useVideoConfig();
+
+  const opacity = interpolate(frame, [0, 0.5 * fps], [0, 1], {
+    extrapolateRight: "clamp",
+  });
+
+  const scale = spring({
+    frame,
+    fps,
+    config: {damping: 200},
+  });
+
+  return (
+    <AbsoluteFill style={{opacity, transform: `scale(${scale})`}}>
+      <h1>Hello Remotion</h1>
+    </AbsoluteFill>
+  );
+}
+```
+
+## Progressive Disclosure
+
+- Read [reference/animations.md](reference/animations.md) - When creating motion with interpolate, spring, or easing
+- Read [reference/timing.md](reference/timing.md) - When converting seconds to frames or working with durations
+- Read [reference/sequencing.md](reference/sequencing.md) - When orchestrating multiple elements or scenes
+- Read [reference/assets.md](reference/assets.md) - When loading images, videos, audio, or fonts
+- Read [reference/compositions.md](reference/compositions.md) - When defining video structure or dynamic metadata
+- Read [reference/transitions.md](reference/transitions.md) - When adding scene transitions like fade, slide, wipe
+- Read [reference/text.md](reference/text.md) - When animating text, measuring dimensions, or loading fonts
+- Read [reference/media.md](reference/media.md) - When trimming, adjusting volume, or manipulating audio/video
+- Read [reference/captions.md](reference/captions.md) - When adding subtitles or TikTok-style captions
+- Read [reference/three-d.md](reference/three-d.md) - When integrating Three.js 3D content
+- Read [reference/charts.md](reference/charts.md) - When building animated data visualizations
+- Read [reference/gifs.md](reference/gifs.md) - When displaying GIFs, APNG, WebP, or AVIF animations
+- Read [reference/lottie.md](reference/lottie.md) - When embedding Lottie animations
+- Read [reference/maps.md](reference/maps.md) - When creating map animations with Mapbox
+- Read [reference/mediabunny.md](reference/mediabunny.md) - When getting video duration, dimensions, or extracting frames
+- Read [reference/dom-measurement.md](reference/dom-measurement.md) - When measuring DOM elements with getBoundingClientRect