@@ -2,17 +2,18 @@
 import Breadcrumbs from "./Breadcrumbs.astro"
 import InstallGuide from "./InstallGuide.astro"
 import PluginHub from "./PluginHub.astro"
-import Icon, { type IconName } from "./Icon.astro"
+import PluginPage from "./PluginPage.astro"
+import Icon from "./Icon.astro"
 import SkillDownload from "./SkillDownload.astro"
 import Layout from "../layouts/Layout.astro"
 import {
-  codingTools,
   configurationDocuments,
   pluginByName,
   plugins,
   repositoryUrl,
   site,
   skills,
+  skillsByPlugin,
   sourceDocuments,
   type ContentPage,
 } from "../lib/content"
@@ -24,7 +25,7 @@ interface Props {
 const { page } = Astro.props
 const canonical = `${site.url}/${page.path}/`
 const homeCrumb = { label: "Home", href: "/" }
-const skillGroups = Object.entries(Object.groupBy(skills, (skill) => skill.plugin)).sort(([a], [b]) => a.localeCompare(b))
+const skillGroups = Object.entries(skillsByPlugin).sort(([a], [b]) => a.localeCompare(b))
 const settingsCards = [
   {
     title: "Configure Claude Code",
@@ -222,23 +223,18 @@ const structuredData = { "@context": "https://schema.org", "@graph": graph }
 const providerFiles = page.kind === "provider"
   ? configurationDocuments.filter((file) => file.provider === page.provider)
   : []
-const pluginSkills = plugin ? skills.filter((item) => item.plugin === plugin.name) : []
-const codingToolIcons = new Map(codingTools.map(({ id, icon }) => [id, icon]))
-const installDemoCommands = plugin?.installCommands.map((item) => ({
-  ...item,
-  icon: codingToolIcons.get(item.id) as IconName,
-})) || []
-const initialInstallDemo = installDemoCommands[0]
 ---
 
 <Layout locale="en" variant="settings" {title} {description} {canonical} alternates={{ en: canonical }} {structuredData}>
   <article class="content-page" data-content-type={page.kind === "installGuide" ? "How-to" : page.kind.includes("Hub") ? "Landing" : "Reference"}>
     <Breadcrumbs items={breadcrumbs} />
-    <header class="content-hero">
-      <h1>{title}</h1>
-      <p>{intro}</p>
-      {page.kind === "skillHub" && <a class="button primary" href="/guides/install-agent-skills/">Read the install guide <Icon name="arrow" size={18} /></a>}
-    </header>
+    {plugin ? <PluginPage {plugin} /> : (
+      <header class="content-hero">
+        <h1>{title}</h1>
+        <p>{intro}</p>
+        {page.kind === "skillHub" && <a class="button primary" href="/guides/install-agent-skills/">Read the install guide <Icon name="arrow" size={18} /></a>}
+      </header>
+    )}
 
     {page.kind === "pluginHub" && <PluginHub />}
 
@@ -301,94 +297,6 @@ const initialInstallDemo = installDemoCommands[0]
       </div>
     )}
 
-    {plugin && (
-      <div class="content-sections">
-        <section class="content-section install-terminal-section" data-install-terminal>
-          <h2>Install the plugin in your coding agent</h2>
-          <p><a class="inline-link" href="/guides/install-agent-skills/#claude-code">Add the marketplace once</a>, then run the command for your tool.</p>
-          <div class="install-tool-tabs" role="tablist" aria-label="Choose a coding agent">
-            {installDemoCommands.map(({ tool, command, icon, output }, index) => (
-              <button
-                id={`install-tab-${plugin.name}-${index}`}
-                class:list={["install-tool-tab", { "is-active": index === 0 }]}
-                type="button"
-                role="tab"
-                aria-controls={`install-terminal-${plugin.name}`}
-                aria-selected={index === 0 ? "true" : "false"}
-                tabindex={index === 0 ? 0 : -1}
-                data-install-tab
-                data-command={command}
-                data-output-primary={output[0]}
-                data-output-secondary={output[1]}
-              >
-                <Icon name={icon} size={22} />
-                <span>{tool}</span>
-              </button>
-            ))}
-          </div>
-          <div
-            id={`install-terminal-${plugin.name}`}
-            class="install-terminal"
-            role="tabpanel"
-            aria-labelledby={`install-tab-${plugin.name}-0`}
-            data-install-panel
-          >
-            <div class="install-terminal-bar">
-              <span class="terminal-lights" aria-hidden="true"><i></i><i></i><i></i></span>
-              <span class="install-terminal-title">Terminal · <strong data-install-title>{initialInstallDemo.tool}</strong></span>
-              <button class="terminal-copy" type="button" data-copy={initialInstallDemo.command} aria-label={`Copy ${initialInstallDemo.tool} install command`}>
-                <Icon name="copy" size={18} />
-                <span data-install-copy-label>Copy command</span>
-              </button>
-            </div>
-            <div class="install-terminal-body">
-              <div class="install-command-line">
-                <span class="install-prompt" aria-hidden="true">$</span>
-                <code data-install-command>{initialInstallDemo.command}</code>
-                <span class="typing-cursor" aria-hidden="true"></span>
-              </div>
-              <div class="install-output" aria-hidden="true">
-                <p data-install-output-primary>{initialInstallDemo.output[0]}</p>
-                <p class="install-success" data-install-output-secondary>{initialInstallDemo.output[1]}</p>
-              </div>
-              <span class="sr-only" aria-live="polite" data-install-announcement></span>
-            </div>
-            <div class="install-terminal-progress">
-              <span class="install-progress-track" aria-hidden="true"><i data-install-progress></i></span>
-              <span data-install-count>1 of {installDemoCommands.length}</span>
-              <button type="button" data-install-toggle aria-label="Pause installation demo" title="Pause installation demo">
-                <span class="pause-glyph"><Icon name="pause" size={16} /></span>
-                <span class="play-glyph"><Icon name="play" size={16} /></span>
-              </button>
-            </div>
-          </div>
-        </section>
-        <section class="content-section">
-          <h2>See what the plugin includes</h2>
-          <p>These components come from the current plugin directory, not a hand-written feature list.</p>
-          <dl class="component-list">
-            <div><dt>Supported tools</dt><dd>{plugin.tools.join(", ")}</dd></div>
-            <div><dt>Skills</dt><dd>{plugin.components?.skills.join(", ") || "None"}</dd></div>
-            <div><dt>Agents</dt><dd>{plugin.components?.agents.join(", ") || "None"}</dd></div>
-            <div><dt>Commands</dt><dd>{plugin.components?.commands.join(", ") || "None"}</dd></div>
-            <div><dt>Hooks</dt><dd>{plugin.components?.hooks ? "Included" : "None"}</dd></div>
-          </dl>
-        </section>
-        {pluginSkills.length > 0 && (
-          <section class="content-section">
-            <h2>Download this plugin’s skills</h2>
-            <p>Each release ZIP works in ChatGPT and Claude.ai. Review the source before uploading it.</p>
-            <div class="skill-stack">{pluginSkills.map((item) => <SkillDownload skill={item} heading="h3" />)}</div>
-          </section>
-        )}
-        <section class="content-section source-facts">
-          <h2>Verify the source</h2>
-          <p>Version {plugin.version}. License: {plugin.license || "See source"}.</p>
-          <a class="text-link" href={plugin.href}>Open the plugin files on GitHub <Icon name="arrow" size={17} /></a>
-        </section>
-      </div>
-    )}
-
     {skill && (
       <div class="content-sections">
         <section class="content-section"><SkillDownload {skill} /></section>
@@ -419,117 +327,3 @@ const initialInstallDemo = installDemoCommands[0]
     {page.kind === "installGuide" && <InstallGuide />}
   </article>
 </Layout>
-
-<script>
-  document.querySelectorAll<HTMLElement>("[data-install-terminal]").forEach((demo) => {
-    const tabs = [...demo.querySelectorAll<HTMLButtonElement>("[data-install-tab]")]
-    const panel = demo.querySelector<HTMLElement>("[data-install-panel]")!
-    const title = demo.querySelector<HTMLElement>("[data-install-title]")!
-    const command = demo.querySelector<HTMLElement>("[data-install-command]")!
-    const primaryOutput = demo.querySelector<HTMLElement>("[data-install-output-primary]")!
-    const secondaryOutput = demo.querySelector<HTMLElement>("[data-install-output-secondary]")!
-    const announcement = demo.querySelector<HTMLElement>("[data-install-announcement]")!
-    const progress = demo.querySelector<HTMLElement>("[data-install-progress]")!
-    const count = demo.querySelector<HTMLElement>("[data-install-count]")!
-    const copyButton = demo.querySelector<HTMLButtonElement>("[data-copy]")!
-    const toggle = demo.querySelector<HTMLButtonElement>("[data-install-toggle]")!
-    const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)")
-    let current = 0
-    let paused = false
-    let visible = false
-    const timers = new Set<number>()
-
-    const clearTimers = () => {
-      timers.forEach(window.clearTimeout)
-      timers.clear()
-    }
-    const later = (callback: () => void, delay: number) => {
-      const timer = window.setTimeout(() => {
-        timers.delete(timer)
-        callback()
-      }, delay)
-      timers.add(timer)
-    }
-    const showComplete = (tab: HTMLButtonElement) => {
-      demo.dataset.phase = "complete"
-      announcement.textContent = tab.dataset.outputSecondary || "Installation complete"
-    }
-    const activate = (index: number) => {
-      clearTimers()
-      current = (index + tabs.length) % tabs.length
-      const tab = tabs[current]
-      const fullCommand = tab.dataset.command || ""
-      tabs.forEach((item, tabIndex) => {
-        const active = tabIndex === current
-        item.classList.toggle("is-active", active)
-        item.setAttribute("aria-selected", String(active))
-        item.tabIndex = active ? 0 : -1
-      })
-      panel.setAttribute("aria-labelledby", tab.id)
-      title.textContent = tab.textContent?.trim() || "Terminal"
-      copyButton.dataset.copy = fullCommand
-      copyButton.setAttribute("aria-label", `Copy ${title.textContent} install command`)
-      copyButton.classList.remove("is-copied")
-      count.textContent = `${current + 1} of ${tabs.length}`
-      progress.classList.remove("is-counting")
-      demo.dataset.phase = "typing"
-      announcement.textContent = ""
-      command.textContent = fullCommand
-      primaryOutput.textContent = tab.dataset.outputPrimary || ""
-      secondaryOutput.textContent = tab.dataset.outputSecondary || ""
-
-      if (reducedMotion.matches || paused) {
-        showComplete(tab)
-        return
-      }
-
-      command.textContent = ""
-      let character = 0
-      const typeNext = () => {
-        command.textContent = fullCommand.slice(0, ++character)
-        if (character < fullCommand.length) later(typeNext, 24)
-        else later(() => {
-          demo.dataset.phase = "output"
-          later(() => {
-            demo.dataset.phase = "complete"
-            announcement.textContent = tab.dataset.outputSecondary || "Installation complete"
-            progress.classList.add("is-counting")
-            if (tabs.length > 1) later(() => activate(current + 1), 2600)
-          }, 620)
-        }, 320)
-      }
-      later(typeNext, 260)
-    }
-    const resume = () => {
-      clearTimers()
-      if (visible && !document.hidden && !paused) activate(current)
-    }
-
-    tabs.forEach((tab, index) => {
-      tab.addEventListener("click", () => activate(index))
-      tab.addEventListener("keydown", (event) => {
-        if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return
-        event.preventDefault()
-        const next = index + (event.key === "ArrowRight" ? 1 : -1)
-        tabs[(next + tabs.length) % tabs.length].focus()
-        activate(next)
-      })
-    })
-    toggle.addEventListener("click", () => {
-      paused = !paused
-      demo.toggleAttribute("data-paused", paused)
-      toggle.setAttribute("aria-label", `${paused ? "Play" : "Pause"} installation demo`)
-      toggle.title = `${paused ? "Play" : "Pause"} installation demo`
-      if (paused) {
-        clearTimers()
-        showComplete(tabs[current])
-      } else activate(current)
-    })
-    new IntersectionObserver(([entry]) => {
-      visible = entry.isIntersecting
-      resume()
-    }).observe(demo)
-    document.addEventListener("visibilitychange", resume)
-    reducedMotion.addEventListener("change", resume)
-  })
-</script>
@@ -0,0 +1,19 @@
+---
+import ToolIcons from "./ToolIcons.astro"
+import type { plugins } from "../lib/content"
+
+interface Props {
+  plugin: (typeof plugins)[number]
+}
+
+const { plugin } = Astro.props
+---
+
+<a class="plugin-card" href={`/plugins/${plugin.name}/`}>
+  <strong style={`view-transition-name: plugin-name-${plugin.name}`}>{plugin.name}</strong>
+  <span class="plugin-card-description">{plugin.description}</span>
+  <span class="plugin-card-meta">
+    <ToolIcons {plugin} />
+    <span>{plugin.summary}</span>
+  </span>
+</a>
@@ -1,18 +1,11 @@
 ---
 import Icon from "./Icon.astro"
-import { codingTools, plugins } from "../lib/content"
+import PluginCard from "./PluginCard.astro"
+import { plugins } from "../lib/content"
 
 const pluginCategories = Object.entries(Object.groupBy(plugins, (plugin) => plugin.category || "other")).sort(([a], [b]) =>
   a.localeCompare(b),
 )
-const plural = (count: number, word: string) => `${count} ${word}${count === 1 ? "" : "s"}`
-const componentSummary = (item: (typeof plugins)[number]) =>
-  [
-    item.components?.skills.length && plural(item.components.skills.length, "skill"),
-    item.components?.agents.length && plural(item.components.agents.length, "agent"),
-    item.components?.commands.length && plural(item.components.commands.length, "command"),
-    item.components?.hooks && "hooks",
-  ].filter(Boolean).join(", ")
 ---
 
 <div class="hub" data-plugin-hub>
@@ -29,28 +22,14 @@ const componentSummary = (item: (typeof plugins)[number]) =>
       ))}
     </div>
   </div>
-  <ul class="hub-grid" role="list">
+  <ul class="plugin-grid" role="list">
     {plugins.map((item) => (
       <li
         style={`view-transition-name: plugin-${item.name}`}
         data-category={item.category || "other"}
         data-search={item.search}
       >
-        <a href={`/plugins/${item.name}/`}>
-          <strong>{item.name}</strong>
-          <span class="hub-description">{item.description}</span>
-          <span class="hub-meta">
-            <span class="hub-tools">
-              {codingTools.map((tool) => (
-                <span class:list={{ "is-off": !item[`${tool.id}Command`] }} title={`${tool.label}${item[`${tool.id}Command`] ? "" : " not supported"}`}>
-                  <Icon name={tool.icon} size={15} />
-                </span>
-              ))}
-              <span class="sr-only">Works with {item.tools.join(", ")}</span>
-            </span>
-            <span>{componentSummary(item)}</span>
-          </span>
-        </a>
+        <PluginCard plugin={item} />
       </li>
     ))}
   </ul>