blog/docs/superpowers/plans/2026-03-31-video-component.md

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

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

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:

import Video from "@/components/video";

• Step 2: Add components prop to MDXRemote

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

<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

bun dev

Expected: server starts, no TypeScript errors.

• Step 4: Commit

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):

<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:

<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

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