# Video Component Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Create a reusable `<Video>` MDX component with sensible defaults and an optional caption.

**Architecture:** A single React component in `components/video.tsx` registered in the MDXRemote `components` prop in `app/posts/[slug]/page.tsx`. No per-post imports needed.

**Tech Stack:** Next.js 15, React 19, Tailwind v4, next-mdx-remote

---

### Task 1: Create Video component

**Files:**
- Create: `components/video.tsx`

- [ ] **Step 1: Create the component**

```tsx
interface VideoProps {
  src: string;
  caption?: string;
}

export default function Video({ src, caption }: VideoProps) {
  return (
    <figure className="my-4">
      <div className="rounded-lg border border-white/30 bg-white/10 backdrop-blur-sm overflow-hidden shadow-md">
        <video
          src={src}
          width="100%"
          controls
          loop
          muted
          playsInline
        />
      </div>
      {caption && (
        <figcaption className="mt-2 text-center text-sm text-gray-500 italic">
          {caption}
        </figcaption>
      )}
    </figure>
  );
}
```

- [ ] **Step 2: Commit**

```bash
git add components/video.tsx
git commit -m "feat: add Video component"
```

---

### Task 2: Register Video in MDXRemote

**Files:**
- Modify: `app/posts/[slug]/page.tsx`

- [ ] **Step 1: Add import at top of file**

After the existing imports, add:
```tsx
import Video from "@/components/video";
```

- [ ] **Step 2: Add components prop to MDXRemote**

Find the `<MDXRemote ... />` call (around line 64) and add a `components` prop:

```tsx
<MDXRemote
  source={postData.content}
  components={{ Video }}
  options={{
    mdxOptions: {
      remarkPlugins: [remarkGfm],
      rehypePlugins: [
        rehypeSlug,
        [
          rehypePrettyCode,
          {
            theme: "github-dark-dimmed",
            keepBackground: false,
          },
        ],
      ],
    },
  }}
/>
```

- [ ] **Step 3: Verify dev server compiles without errors**

```bash
bun dev
```

Expected: server starts, no TypeScript errors.

- [ ] **Step 4: Commit**

```bash
git add app/posts/[slug]/page.tsx
git commit -m "feat: register Video component in MDXRemote"
```

---

### Task 3: Use component in a post

**Files:**
- Modify: `posts/my-2024-and-2025-roadmap.mdx`

- [ ] **Step 1: Replace raw video tag with component**

Find (around line 54):
```html
<video width="100%" height="auto" controls loop muted playsInline>
  <source src="/posts/rts.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>
```

Replace with:
```mdx
<Video src="/posts/rts.mp4" caption="My failed RTS engine attempt" />
```

- [ ] **Step 2: Verify in browser**

Open the post in the dev server and confirm the video renders with styling and caption.

- [ ] **Step 3: Commit**

```bash
git add posts/my-2024-and-2025-roadmap.mdx
git commit -m "chore: use Video component in roadmap post"
```