diff --git a/COPY.md b/COPY.md
index 672cbd1b..9f4f6c00 100644
--- a/COPY.md
+++ b/COPY.md
@@ -39,8 +39,12 @@ These exact strings. Do not paraphrase them per page.
 | Agents way: terminal | From a terminal · Teaches your agent to search and run Skills in every project. | guidance only: the second way, over `npx skilld install skilld --global` |
 | Agents way: MCP | In ChatGPT, Claude, and other MCP apps · Add the server once. Then ask the chat to find a Skill. | guidance only: the third way, over the MCP server URL. Its link, "Setup steps for each app", opens `/developers?setup=mcp` |
 | Home section: demos | See what skills make. · Each demo is one recorded run: the prompt, and what the Agent built with the Skill. | guidance only: the homepage demo section heading and line. The section hides below three demos |
+| Nav: demos | Skill Demos | guidance only: the header link after Trending Skills, and the same item in the mobile menu. Links `/skills/demos` |
+| Demos link | All {n} demos | guidance only: under the homepage demo section. Links `/skills/demos` |
+| Demos page | See what skills make · Each demo is one recorded run: the prompt, and what the Agent built with the Skill. Pick a prompt to see the output, or open it live. | guidance only: the `/skills/demos` H1 and line. The meta title is "Claude skill examples: see what each one makes" for the admitted query |
+| Demo groups | Films and launch videos · Landing pages · UI components · Diagrams and explainers | guidance only: `DEMO_GROUPS` in `shared/demo-groups.ts`: the `/skills/demos` group headings and their lines |
 | Demo stage | Open the demo | guidance only: the homepage demo stage link to the Skill page Demo panel |
-| Demo panel | Demo · You say · Open live demo · Open in a new tab · Run it yourself | guidance only: the Skill page Demo panel. "Show screenshots" replaces "Open live demo" while the live output shows |
+| Demo panel | Demo · Prompt · Open live demo · Open in a new tab · Run it yourself | guidance only: the Skill page Demo panel. "Show screenshots" replaces "Open live demo" while the live output shows |
 | Demo provenance | {Agent logo} {model}, such as Opus 5.5 | guidance only: the recording line on the Skill page panel and the homepage stage. Screen readers and the title get "Recorded with {agent}, {model}". No date and no GitHub link: the Skill page is where visitors inspect a Skill |
 | Demo outdated | Recorded on an older version of this Skill. | guidance only: under the Demo panel when the Skill moved past the recorded commit |
 | Home section: changes | Keep up with skill changes. | guidance only: the homepage section heading for watching and the digest |
diff --git a/GLOSSARY.md b/GLOSSARY.md
index 3a991e98..f2f78383 100644
--- a/GLOSSARY.md
+++ b/GLOSSARY.md
@@ -94,6 +94,8 @@ Collisions
 
 **Rule:** a demo shows the Agent's output, never the Skill author's work. It always names how it was recorded.
 
+**Groups:** demos group by what the Skill makes, on `/skills/demos`: films and launch videos, landing pages, UI components, and diagrams and explainers. A group is not a track: tracks sort Skills by kind of work.
+
 ### install
 
 **Is:** `skilld install`. Skill files land in the project and the lockfile records them. The opt-in second step.
diff --git a/app/app.vue b/app/app.vue
index 64b9c320..cbcd246b 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -177,6 +177,14 @@ watch(() => route.fullPath, () => {
               <TrendingMark :accent="false" />
               <span>Trending Skills</span>
             </UButton>
+            <UButton
+              to="/skills/demos"
+              label="Skill Demos"
+              color="neutral"
+              variant="ghost"
+              block
+              class="min-h-11 justify-start"
+            />
             <UButton
               to="/skills"
               label="Find Skills"
diff --git a/app/components/DemoIndex.vue b/app/components/DemoIndex.vue
new file mode 100644
index 00000000..644898e8
--- /dev/null
+++ b/app/components/DemoIndex.vue
@@ -0,0 +1,263 @@
+<script setup lang="ts">
+import type { HomeDemoItem } from '~/utils/home-demos'
+import { githubAvatarProxyUrl } from '#shared/image-proxy'
+import { demoKey } from '~/utils/home-demos'
+import { resolveAuthorName } from '~/utils/skill-byline'
+import DemoStage from './DemoStage.vue'
+
+/**
+ * Demos as a prompt index. The prompts are the menu: pick one and the stage
+ * shows what the Agent made from it, scrollable to the end of the page, or its
+ * film playing. Each prompt carries a stone dot, and the picked one turns rose.
+ * On a phone the stage opens under the picked prompt.
+ */
+const { demos, initialKey, surface = 'demos' } = defineProps<{
+  demos: HomeDemoItem[]
+  /** `owner/repo/name` of the demo to show first, such as one from a shared link. */
+  initialKey?: string
+  /** The analytics surface for the run chip, such as `home-demos`. */
+  surface?: string
+}>()
+
+const emit = defineEmits<{ pick: [demo: HomeDemoItem] }>()
+
+const stageId = useId()
+
+const picked = ref(Math.max(0, demos.findIndex(demo => demoKey(demo) === initialKey)))
+const current = computed(() => demos[Math.min(picked.value, demos.length - 1)])
+
+function pick(index: number): void {
+  picked.value = index
+  const demo = demos[index]
+  if (demo)
+    emit('pick', demo)
+}
+
+function author(demo: HomeDemoItem): string {
+  return resolveAuthorName(demo.owner, demo.authorName) ?? demo.owner
+}
+</script>
+
+<template>
+  <!-- One root, so a parent's class lands on it. -->
+  <div class="demo-index">
+    <div v-if="current" class="demo-index__grid">
+      <!-- Wide screens: the list scrolls inside the stage's height. -->
+      <div class="demo-index__rail">
+        <ol class="demo-index__list list-none p-0" aria-label="Prompts">
+          <li v-for="(demo, index) in demos" :key="demoKey(demo)" class="demo-index__entry">
+            <button
+              type="button"
+              class="demo-index__pick"
+              :aria-pressed="index === picked"
+              :aria-controls="stageId"
+              @click="() => pick(index)"
+            >
+              <span class="demo-index__pick-head">
+                <span class="demo-index__dot" aria-hidden="true" />
+                <img
+                  :src="githubAvatarProxyUrl(demo.owner, 40)"
+                  alt=""
+                  width="20"
+                  height="20"
+                  loading="lazy"
+                  decoding="async"
+                  class="demo-index__avatar"
+                >
+                <span class="demo-index__name">/{{ demo.name }}</span>
+                <span class="demo-index__by">{{ author(demo) }}</span>
+              </span>
+              <span class="demo-index__say line-clamp-2">
+                <span class="sr-only">Prompt: </span>{{ demo.prompt }}
+              </span>
+            </button>
+            <!-- Phones: the stage opens under the picked prompt. -->
+            <div v-if="index === picked" class="demo-index__inline">
+              <DemoStage :demo :surface />
+            </div>
+          </li>
+        </ol>
+      </div>
+
+      <div :id="stageId" class="demo-index__stage">
+        <Transition name="demo-index-swap" mode="out-in">
+          <div :key="demoKey(current)">
+            <DemoStage :demo="current" :surface />
+          </div>
+        </Transition>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.demo-index__grid {
+  display: grid;
+  gap: 1.5rem;
+}
+
+@media (min-width: 64rem) {
+  .demo-index__grid {
+    grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
+    gap: 2.5rem;
+    align-items: start;
+  }
+}
+
+.demo-index__list {
+  display: grid;
+  align-content: start;
+  gap: 0.5rem;
+}
+
+@media (min-width: 64rem) {
+  .demo-index__grid {
+    align-items: stretch;
+  }
+
+  .demo-index__rail {
+    position: relative;
+  }
+
+  /* Out of flow, so the stage alone sets the row height and the list scrolls in it. */
+  .demo-index__list {
+    position: absolute;
+    inset: 0;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-width: thin;
+    /* Room for the focus ring, which the scroll box would clip. */
+    padding: 3px 0.5rem 3px 3px;
+  }
+}
+
+.demo-index__pick {
+  display: grid;
+  inline-size: 100%;
+  gap: 0.375rem;
+  min-block-size: 2.75rem;
+  padding: 0.75rem 0.875rem;
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius);
+  background: var(--ui-bg);
+  text-align: start;
+  cursor: pointer;
+  transition: border-color 200ms ease-out, background-color 200ms ease-out;
+}
+
+@media (hover: hover) {
+  .demo-index__pick:hover {
+    border-color: var(--ui-border-accented);
+  }
+}
+
+.demo-index__pick:focus-visible {
+  outline: 2px solid var(--ui-border-accented);
+  outline-offset: 2px;
+}
+
+.demo-index__pick[aria-pressed='true'] {
+  border-color: var(--ui-border-accented);
+  background: var(--ui-bg-muted);
+}
+
+.demo-index__pick-head {
+  display: flex;
+  min-inline-size: 0;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* Stone for every prompt, rose for the one picked: the band's one rose dot. */
+.demo-index__dot {
+  flex: none;
+  inline-size: 0.5rem;
+  block-size: 0.5rem;
+  border: 1.5px solid var(--ui-text-dimmed);
+  border-radius: 9999px;
+}
+
+.demo-index__pick[aria-pressed='true'] .demo-index__dot {
+  border-color: var(--ui-primary);
+  background: var(--ui-primary);
+}
+
+.demo-index__avatar {
+  flex: none;
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
+  border: 1px solid var(--ui-border);
+  border-radius: 9999px;
+  background: var(--ui-bg-muted);
+}
+
+.demo-index__name {
+  min-inline-size: 0;
+  overflow: hidden;
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+  color: var(--ui-text-highlighted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.demo-index__by {
+  flex: none;
+  margin-inline-start: auto;
+  font-size: 0.75rem;
+  color: var(--ui-text-muted);
+}
+
+.demo-index__say {
+  padding-inline-start: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.55;
+  color: var(--ui-text-muted);
+}
+
+.demo-index__pick[aria-pressed='true'] .demo-index__say {
+  color: var(--ui-text);
+}
+
+/* One stage per width: under the prompt on phones, beside the list from 1024px. */
+.demo-index__inline {
+  margin-block-start: 0.75rem;
+}
+
+.demo-index__stage {
+  display: none;
+}
+
+@media (min-width: 64rem) {
+  .demo-index__inline {
+    display: none;
+  }
+
+  .demo-index__stage {
+    display: block;
+    position: sticky;
+    inset-block-start: 6rem;
+  }
+}
+
+.demo-index-swap-enter-active,
+.demo-index-swap-leave-active {
+  transition: opacity 150ms ease-out;
+}
+
+.demo-index-swap-enter-from,
+.demo-index-swap-leave-to {
+  opacity: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .demo-index__pick {
+    transition: none;
+  }
+
+  .demo-index-swap-enter-active,
+  .demo-index-swap-leave-active {
+    transition: none;
+  }
+}
+</style>
diff --git a/app/components/DemoStage.vue b/app/components/DemoStage.vue
new file mode 100644
index 00000000..e0acb53c
--- /dev/null
+++ b/app/components/DemoStage.vue
@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import type { HomeDemoItem } from '~/utils/home-demos'
+import { demoCardSkill, demoHasPhoneFrame, demoHref, demoPhoneRatio } from '~/utils/home-demos'
+import DemoMedia from './home-demos/_DemoMedia.vue'
+import DemoRecording from './home-demos/_DemoRecording.vue'
+import SkillCard from './SkillCard.vue'
+
+/**
+ * One demo on show: how it was recorded, the output in a window one screen
+ * tall (a page that scrolls inside it, or a film that plays while on screen),
+ * and the Skill's row with its run command. `showPrompt` adds the prompt in
+ * full, for a list that names the demos without their prompts. `live` puts a
+ * page demo's real output in the window, in a frame with no same-origin
+ * access; the route serves it under a CSP sandbox too.
+ */
+const { demo, surface = 'demos', eager = false, showPrompt = false, live = false } = defineProps<{
+  demo: HomeDemoItem
+  /** The analytics surface for the run chip, such as `home-demos`. */
+  surface?: string
+  eager?: boolean
+  showPrompt?: boolean
+  live?: boolean
+}>()
+
+/** The output page itself, when this stage shows it live. A film always plays as video. */
+const liveUrl = computed(() => live && !demo.video ? demo.liveUrl : null)
+</script>
+
+<template>
+  <div class="demo-stage">
+    <div class="demo-stage__head">
+      <DemoRecording :demo />
+      <NuxtLink :to="demoHref(demo)" class="demo-stage__open">
+        Open the demo<span class="sr-only"> of /{{ demo.name }}</span>
+        <UIcon name="i-lucide-arrow-right" class="size-3.5 shrink-0" aria-hidden="true" />
+      </NuxtLink>
+    </div>
+    <p v-if="showPrompt" class="demo-stage__prompt">
+      <span class="data-label mr-2">Prompt</span>{{ demo.prompt }}
+    </p>
+    <!-- The whole page, in a window one screen tall. A film fills the window and plays on view. -->
+    <div
+      class="demo-stage__window"
+      :data-phone="demoHasPhoneFrame(demo) ? '' : undefined"
+      :style="demo.video
+        ? { '--video-w': demo.video.width, '--video-h': demo.video.height }
+        : { '--phone-ratio': demoPhoneRatio(demo) }"
+      :data-film="demo.video ? '' : undefined"
+      :data-live="liveUrl ? '' : undefined"
+      :tabindex="liveUrl ? undefined : 0"
+      role="group"
+      :aria-label="demo.video ? `The film the Agent made with /${demo.name}.` : `What the Agent made with /${demo.name}. Scroll to see the whole page.`"
+    >
+      <iframe
+        v-if="liveUrl"
+        :src="liveUrl"
+        sandbox="allow-scripts"
+        :title="`Live output of /${demo.name}`"
+        class="demo-stage__frame"
+      />
+      <DemoMedia v-else :demo :eager play="visible" />
+    </div>
+    <div class="demo-stage__id">
+      <SkillCard
+        :skill="demoCardSkill(demo)"
+        layout="row"
+        metric="none"
+        :description="false"
+        :actions="['run']"
+        :surface
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* The window sizes against the stage's own width, so a wide column never makes it taller than the screen. */
+.demo-stage {
+  container-type: inline-size;
+}
+
+.demo-stage__head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem 0.75rem;
+  margin-block-end: 0.5rem;
+}
+
+.demo-stage__open {
+  display: inline-flex;
+  min-block-size: 2.75rem;
+  align-items: center;
+  gap: 0.25rem;
+  margin-inline-start: auto;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--ui-text);
+  text-decoration: underline;
+  text-underline-offset: 4px;
+}
+
+.demo-stage__open:hover {
+  color: var(--ui-text-highlighted);
+}
+
+.demo-stage__prompt {
+  margin-block-end: 0.75rem;
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius);
+  background: var(--ui-bg-muted);
+  font-size: 0.875rem;
+  line-height: 1.6;
+  color: var(--ui-text);
+}
+
+/* 16:10 of the stage width, capped at most of the screen; the page scrolls inside it. */
+.demo-stage__window {
+  block-size: min(62.5cqi, 72svh);
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius);
+  background: var(--ui-bg-muted);
+  scrollbar-width: thin;
+  --demo-height: auto;
+}
+
+/*
+ * A film keeps its own frame: its aspect ratio, never wider than it was
+ * rendered, and short enough to fit the screen. Centred when it is narrower
+ * than the stage.
+ */
+.demo-stage__window[data-film] {
+  block-size: auto;
+  aspect-ratio: var(--video-w) / var(--video-h);
+  inline-size: min(100%, calc(var(--video-w) * 1px), calc(72svh * var(--video-w) / var(--video-h)));
+  margin-inline: auto;
+  overflow: hidden;
+  --demo-height: 100%;
+}
+
+@media (max-width: 39.99rem) {
+  .demo-stage__window[data-phone] {
+    block-size: auto;
+    aspect-ratio: var(--phone-ratio, 4 / 5);
+  }
+}
+
+/* The live page scrolls inside its own frame. */
+.demo-stage__window[data-live] {
+  overflow: hidden;
+  background: #fff;
+}
+
+.demo-stage__frame {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  border: 0;
+}
+
+.demo-stage__window:focus-visible {
+  outline: 2px solid var(--ui-border-accented);
+  outline-offset: 2px;
+}
+
+/* The Skill row's hover fill follows the rounded corners of everything around it. */
+.demo-stage__id {
+  margin-block-start: 0.25rem;
+  overflow: hidden;
+  border-radius: var(--ui-radius);
+}
+</style>
diff --git a/app/components/HomeDemos.vue b/app/components/HomeDemos.vue
index 83ac10cb..6d2a60d9 100644
--- a/app/components/HomeDemos.vue
+++ b/app/components/HomeDemos.vue
@@ -1,71 +1,23 @@
 <script setup lang="ts">
 import type { HomeDemoItem } from '~/utils/home-demos'
-import { createReusableTemplate } from '@vueuse/core'
-import { githubAvatarProxyUrl } from '#shared/image-proxy'
-import { demoCardSkill, demoHasPhoneFrame, demoHref, demoKey, demoPhoneRatio, HOME_DEMOS_MAX, HOME_DEMOS_MIN } from '~/utils/home-demos'
-import { resolveAuthorName } from '~/utils/skill-byline'
-import DemoMedia from './home-demos/_DemoMedia.vue'
-import DemoRecording from './home-demos/_DemoRecording.vue'
-import SkillCard from './SkillCard.vue'
+import { HOME_DEMOS_MAX, HOME_DEMOS_MIN } from '~/utils/home-demos'
+import DemoIndex from './DemoIndex.vue'
 
 /**
- * Skills with a demo, as a prompt index. The prompts are the menu: pick one and
- * the stage shows what the Agent made from it, scrollable to the end of the
- * page, or its film playing. Each prompt carries a stone dot, and the picked
- * one turns rose. On a phone the stage opens under the picked prompt.
- * The page fetches `/api/skill-demos` and passes the items.
+ * The homepage teaser for demos: the first few, pinned films first, and a
+ * link to every demo on `/skills/demos`. The page fetches
+ * `/api/skill-demos` and passes the items.
  */
 const { demos: items } = defineProps<{ demos: HomeDemoItem[] }>()
 
 const headingId = useId()
-const stageId = useId()
 const demos = computed(() => items.slice(0, HOME_DEMOS_MAX))
 const show = computed(() => demos.value.length >= HOME_DEMOS_MIN)
-
-const picked = ref(0)
-const current = computed(() => demos.value[Math.min(picked.value, demos.value.length - 1)])
-
-function author(demo: HomeDemoItem): string {
-  return resolveAuthorName(demo.owner, demo.authorName) ?? demo.owner
-}
-
-const [DefineStage, ReuseStage] = createReusableTemplate<{ demo: HomeDemoItem, eager?: boolean }>()
+const more = computed(() => items.length)
 </script>
 
 <template>
-  <DefineStage v-slot="{ demo, eager }">
-    <div class="home-demos__stage-head">
-      <DemoRecording :demo />
-      <NuxtLink :to="demoHref(demo)" class="home-demos__open">
-        Open the demo<span class="sr-only"> of /{{ demo.name }}</span>
-        <UIcon name="i-lucide-arrow-right" class="size-3.5 shrink-0" aria-hidden="true" />
-      </NuxtLink>
-    </div>
-    <!-- The whole page, in a window one screen tall. A film fills the window and plays on focus. -->
-    <div
-      class="home-demos__window"
-      :data-phone="demoHasPhoneFrame(demo) ? '' : undefined"
-      :style="{ '--phone-ratio': demoPhoneRatio(demo) }"
-      :data-film="demo.video ? '' : undefined"
-      tabindex="0"
-      role="group"
-      :aria-label="demo.video ? `The film the Agent made with /${demo.name}.` : `What the Agent made with /${demo.name}. Scroll to see the whole page.`"
-    >
-      <DemoMedia :demo :eager play="visible" />
-    </div>
-    <div class="home-demos__id">
-      <SkillCard
-        :skill="demoCardSkill(demo)"
-        layout="row"
-        metric="none"
-        :description="false"
-        :actions="['run']"
-        surface="home-demos"
-      />
-    </div>
-  </DefineStage>
-
-  <section v-if="show && current" id="demos" class="home-wm" :aria-labelledby="headingId">
+  <section v-if="show" id="demos" class="home-wm" :aria-labelledby="headingId">
     <span class="home-watermark" aria-hidden="true">Made</span>
     <div class="mx-auto max-w-6xl px-4 py-12 sm:px-6 md:py-16">
       <h2 :id="headingId" class="home-h2 text-balance">
@@ -75,285 +27,17 @@ const [DefineStage, ReuseStage] = createReusableTemplate<{ demo: HomeDemoItem, e
         Each demo is one recorded run: the prompt, and what the Agent built with the Skill.
       </p>
 
-      <div class="home-demos__grid mt-8">
-        <!-- Wide screens: the list scrolls inside the stage's height. -->
-        <div class="home-demos__rail">
-          <ol class="home-demos__list list-none p-0" aria-label="Prompts">
-            <li v-for="(demo, index) in demos" :key="demoKey(demo)" class="home-demos__entry">
-              <button
-                type="button"
-                class="home-demos__pick"
-                :aria-pressed="index === picked"
-                :aria-controls="stageId"
-                @click="() => { picked = index }"
-              >
-                <span class="home-demos__pick-head">
-                  <span class="home-demos__dot" aria-hidden="true" />
-                  <img
-                    :src="githubAvatarProxyUrl(demo.owner, 40)"
-                    alt=""
-                    width="20"
-                    height="20"
-                    loading="lazy"
-                    decoding="async"
-                    class="home-demos__avatar"
-                  >
-                  <span class="home-demos__name">/{{ demo.name }}</span>
-                  <span class="home-demos__by">{{ author(demo) }}</span>
-                </span>
-                <span class="home-demos__say line-clamp-2">
-                  <span class="sr-only">You say: </span>{{ demo.prompt }}
-                </span>
-              </button>
-              <!-- Phones: the stage opens under the picked prompt. -->
-              <div v-if="index === picked" class="home-demos__inline">
-                <ReuseStage :demo />
-              </div>
-            </li>
-          </ol>
-        </div>
+      <DemoIndex :demos class="mt-8" surface="home-demos" />
 
-        <div :id="stageId" class="home-demos__stage">
-          <Transition name="home-demos-swap" mode="out-in">
-            <div :key="demoKey(current)">
-              <ReuseStage :demo="current" />
-            </div>
-          </Transition>
-        </div>
-      </div>
+      <UButton
+        to="/skills/demos"
+        :label="`All ${more} demos`"
+        color="neutral"
+        variant="ghost"
+        size="sm"
+        trailing-icon="i-lucide-arrow-right"
+        class="mt-4 min-h-11"
+      />
     </div>
   </section>
 </template>
-
-<style scoped>
-.home-demos__grid {
-  display: grid;
-  gap: 1.5rem;
-}
-
-@media (min-width: 64rem) {
-  .home-demos__grid {
-    grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
-    gap: 2.5rem;
-    align-items: start;
-  }
-}
-
-.home-demos__list {
-  display: grid;
-  align-content: start;
-  gap: 0.5rem;
-}
-
-@media (min-width: 64rem) {
-  .home-demos__grid {
-    align-items: stretch;
-  }
-
-  .home-demos__rail {
-    position: relative;
-  }
-
-  /* Out of flow, so the stage alone sets the row height and the list scrolls in it. */
-  .home-demos__list {
-    position: absolute;
-    inset: 0;
-    overflow-y: auto;
-    overscroll-behavior: contain;
-    scrollbar-width: thin;
-    /* Room for the focus ring, which the scroll box would clip. */
-    padding: 3px 0.5rem 3px 3px;
-  }
-}
-
-.home-demos__pick {
-  display: grid;
-  inline-size: 100%;
-  gap: 0.375rem;
-  min-block-size: 2.75rem;
-  padding: 0.75rem 0.875rem;
-  border: 1px solid var(--ui-border);
-  border-radius: var(--ui-radius);
-  background: var(--ui-bg);
-  text-align: start;
-  cursor: pointer;
-  transition: border-color 200ms ease-out, background-color 200ms ease-out;
-}
-
-@media (hover: hover) {
-  .home-demos__pick:hover {
-    border-color: var(--ui-border-accented);
-  }
-}
-
-.home-demos__pick:focus-visible {
-  outline: 2px solid var(--ui-border-accented);
-  outline-offset: 2px;
-}
-
-.home-demos__pick[aria-pressed='true'] {
-  border-color: var(--ui-border-accented);
-  background: var(--ui-bg-muted);
-}
-
-.home-demos__pick-head {
-  display: flex;
-  min-inline-size: 0;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-/* Stone for every prompt, rose for the one picked: the band's one rose dot. */
-.home-demos__dot {
-  flex: none;
-  inline-size: 0.5rem;
-  block-size: 0.5rem;
-  border: 1.5px solid var(--ui-text-dimmed);
-  border-radius: 9999px;
-}
-
-.home-demos__pick[aria-pressed='true'] .home-demos__dot {
-  border-color: var(--ui-primary);
-  background: var(--ui-primary);
-}
-
-.home-demos__avatar {
-  flex: none;
-  inline-size: 1.25rem;
-  block-size: 1.25rem;
-  border: 1px solid var(--ui-border);
-  border-radius: 9999px;
-  background: var(--ui-bg-muted);
-}
-
-.home-demos__name {
-  min-inline-size: 0;
-  overflow: hidden;
-  font-family: var(--font-mono);
-  font-size: 0.875rem;
-  color: var(--ui-text-highlighted);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.home-demos__by {
-  flex: none;
-  margin-inline-start: auto;
-  font-size: 0.75rem;
-  color: var(--ui-text-muted);
-}
-
-.home-demos__say {
-  padding-inline-start: 1rem;
-  font-size: 0.875rem;
-  line-height: 1.55;
-  color: var(--ui-text-muted);
-}
-
-.home-demos__pick[aria-pressed='true'] .home-demos__say {
-  color: var(--ui-text);
-}
-
-/* One stage per width: under the prompt on phones, beside the list from 1024px. */
-.home-demos__inline {
-  margin-block-start: 0.75rem;
-}
-
-.home-demos__stage {
-  display: none;
-}
-
-@media (min-width: 64rem) {
-  .home-demos__inline {
-    display: none;
-  }
-
-  .home-demos__stage {
-    display: block;
-    position: sticky;
-    inset-block-start: 6rem;
-  }
-}
-
-.home-demos__stage-head {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.25rem 0.75rem;
-  margin-block-end: 0.5rem;
-}
-
-.home-demos__open {
-  display: inline-flex;
-  min-block-size: 2.75rem;
-  align-items: center;
-  gap: 0.25rem;
-  margin-inline-start: auto;
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
-  color: var(--ui-text);
-  text-decoration: underline;
-  text-underline-offset: 4px;
-}
-
-.home-demos__open:hover {
-  color: var(--ui-text-highlighted);
-}
-
-/* The page scrolls inside one screen, as on the Skill page. */
-.home-demos__window {
-  aspect-ratio: 16 / 10;
-  overflow-x: hidden;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  border: 1px solid var(--ui-border);
-  border-radius: var(--ui-radius);
-  background: var(--ui-bg-muted);
-  scrollbar-width: thin;
-  --demo-height: auto;
-}
-
-.home-demos__window[data-film] {
-  overflow: hidden;
-  --demo-height: 100%;
-}
-
-@media (max-width: 39.99rem) {
-  .home-demos__window[data-phone] {
-    aspect-ratio: var(--phone-ratio, 4 / 5);
-  }
-}
-
-.home-demos__window:focus-visible {
-  outline: 2px solid var(--ui-border-accented);
-  outline-offset: 2px;
-}
-
-/* The Skill row's hover fill follows the rounded corners of everything around it. */
-.home-demos__id {
-  margin-block-start: 0.25rem;
-  overflow: hidden;
-  border-radius: var(--ui-radius);
-}
-
-.home-demos-swap-enter-active,
-.home-demos-swap-leave-active {
-  transition: opacity 150ms ease-out;
-}
-
-.home-demos-swap-enter-from,
-.home-demos-swap-leave-to {
-  opacity: 0;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .home-demos__pick {
-    transition: none;
-  }
-
-  .home-demos-swap-enter-active,
-  .home-demos-swap-leave-active {
-    transition: none;
-  }
-}
-</style>
diff --git a/app/components/_HeaderNavigation.vue b/app/components/_HeaderNavigation.vue
index 2a05761c..a53c7691 100644
--- a/app/components/_HeaderNavigation.vue
+++ b/app/components/_HeaderNavigation.vue
@@ -42,6 +42,18 @@ watch(() => route.fullPath, () => {
           </UButton>
         </NavigationMenuLink>
       </NavigationMenuItem>
+      <NavigationMenuItem>
+        <NavigationMenuLink as-child>
+          <UButton
+            to="/skills/demos"
+            label="Skill Demos"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            class="whitespace-nowrap"
+          />
+        </NavigationMenuLink>
+      </NavigationMenuItem>
       <NavigationMenuItem>
         <NavigationMenuLink as-child>
           <UButton
diff --git a/app/components/home-demos/_DemoVideo.vue b/app/components/home-demos/_DemoVideo.vue
index d739f27f..11fb5b95 100644
--- a/app/components/home-demos/_DemoVideo.vue
+++ b/app/components/home-demos/_DemoVideo.vue
@@ -126,7 +126,8 @@ const duration = computed(() => formatDemoDuration(video.durationSeconds))
   inset: 0;
   inline-size: 100%;
   block-size: 100%;
-  object-fit: cover;
+  /* The frame already matches the film, so nothing is cropped or stretched. */
+  object-fit: contain;
   object-position: center;
 }
 
diff --git a/app/utils/home-demos.ts b/app/utils/home-demos.ts
index bbe08534..c28e9270 100644
--- a/app/utils/home-demos.ts
+++ b/app/utils/home-demos.ts
@@ -1,3 +1,4 @@
+import type { DemoMakes } from '#shared/demo-groups'
 import type { SkillCardSkill } from '~/types/skill-card'
 import { demoAgentIcon, demoModelLabel } from '#shared/demo-recording'
 
@@ -10,6 +11,8 @@ export interface HomeDemoItem {
   repo: string
   name: string
   skillPath: string
+  /** What the Skill made: the demo's group on `/skills/demos`. */
+  makes: DemoMakes
   /** The Skill author, and the SKILL.md in their Repository (VISION principle 1). */
   authorName: string | null
   sourceUrl: string | null
@@ -21,6 +24,8 @@ export interface HomeDemoItem {
   recordedAt: string
   shots: { src: string, width: number, height: number, alt: string, viewport: 'desktop' | 'mobile' }[]
   /** A Skill whose output is a film. The poster is a JPG frame; `src` is a muted H.264 MP4. */
+  /** The sandboxed output page of a page demo; null for a film. */
+  liveUrl: string | null
   video: HomeDemoVideo | null
 }
 
diff --git a/layers/marketing/app/pages/skills/demos.vue b/layers/marketing/app/pages/skills/demos.vue
new file mode 100644
index 00000000..f90993c0
--- /dev/null
+++ b/layers/marketing/app/pages/skills/demos.vue
@@ -0,0 +1,244 @@
+<script setup lang="ts">
+import type { HomeDemoItem } from '~~/app/utils/home-demos'
+import { demoKey } from '~~/app/utils/home-demos'
+import { resolveAuthorName } from '~~/app/utils/skill-byline'
+import { groupDemos } from '#shared/demo-groups'
+import { githubAvatarProxyUrl } from '#shared/image-proxy'
+import { pageRobots } from '../../utils/page-admissions'
+
+/**
+ * Every demo, in the board shell `/skills/trending` uses. The rail lists the
+ * demos under what each Skill makes; the stage shows the picked one in full:
+ * its prompt, its output, and the Skill's run command. A pick lands in the URL
+ * as `?demo=owner/repo/name`, so a shared link opens on it.
+ *
+ * Indexable surface (VISION principle 2): the target query and admission bar
+ * live in `page-admissions.ts`. Below MIN_INDEXABLE_DEMOS the page answers
+ * noindex, the same guard `/skills/best` uses. Cull path: remove the
+ * admission entry, and the page goes noindex on the next deploy.
+ */
+
+// `await`, as on the other /skills pages: the server must render the demos.
+const { data } = await useFetch<{ items: HomeDemoItem[] }>('/api/skill-demos', { key: 'skill-demos-page' })
+
+const demos = computed(() => data.value?.items ?? [])
+const groups = computed(() => groupDemos(demos.value))
+
+const route = useRoute()
+const sharedKey = typeof route.query.demo === 'string' ? route.query.demo : undefined
+
+// The rail's first demo leads unless a shared link names another.
+const firstDemo = computed(() => groups.value[0]?.demos[0])
+const picked = ref(sharedKey ?? (firstDemo.value ? demoKey(firstDemo.value) : ''))
+const current = computed(() => demos.value.find(demo => demoKey(demo) === picked.value) ?? firstDemo.value)
+const currentKey = computed(() => current.value ? demoKey(current.value) : '')
+
+const stage = useTemplateRef<HTMLElement>('stage')
+const wide = useMediaQuery('(min-width: 64rem)')
+const reducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)')
+
+/** Shows the demo, keeps it in the URL, and on narrow screens brings the stage into view. */
+function pick(demo: HomeDemoItem) {
+  picked.value = demoKey(demo)
+  if (!wide.value)
+    stage.value?.scrollIntoView({ block: 'start', behavior: reducedMotion.value ? 'auto' : 'smooth' })
+  return navigateTo({ query: { ...route.query, demo: demoKey(demo) }, hash: route.hash }, { replace: true })
+}
+
+function author(demo: HomeDemoItem): string {
+  return resolveAuthorName(demo.owner, demo.authorName) ?? demo.owner
+}
+
+/** Below this many demos the page is too thin to index. */
+const MIN_INDEXABLE_DEMOS = 6
+
+const title = 'Claude skill examples: see what each one makes'
+const description = computed(() =>
+  `${demos.value.length} recorded runs of agent skills: the prompt, and the film, page, component or diagram the Agent made with the Skill. Open any of them live.`,
+)
+
+useSeoMeta({
+  title,
+  description,
+  ogTitle: title,
+  ogDescription: description,
+  robots: () => demos.value.length >= MIN_INDEXABLE_DEMOS ? pageRobots('/skills/demos') : 'noindex,follow',
+})
+
+useHead({
+  link: [{ rel: 'canonical', href: 'https://skilld.dev/skills/demos' }],
+})
+
+defineOgImage('Page.takumi', {
+  title: 'See what skills make',
+  description: 'Recorded runs of agent skills: the prompt, and what the Agent made.',
+}, { alt: 'Skill demos on skilld' })
+</script>
+
+<template>
+  <BoardShell heading-id="demos-heading" surface="demos" :show-weekly-cta="false" :cta-pending="false">
+    <template #header>
+      <h1 id="demos-heading" class="text-3xl font-semibold tracking-tight text-balance">
+        See what skills make
+      </h1>
+      <p class="mt-2 text-sm text-muted">
+        Each demo is one recorded run: the prompt, and what the Agent built with the Skill.
+      </p>
+    </template>
+
+    <template #sidebar>
+      <nav aria-label="Demos" class="demos-rail">
+        <section v-for="group in groups" :key="group.makes" :aria-labelledby="`demos-${group.makes}`">
+          <h2 :id="`demos-${group.makes}`" class="demos-rail__heading">
+            {{ group.label }}
+          </h2>
+          <ul class="list-none p-0">
+            <li v-for="demo in group.demos" :key="demoKey(demo)">
+              <button
+                type="button"
+                class="demos-rail__pick"
+                :aria-pressed="demoKey(demo) === currentKey"
+                aria-controls="demos-stage"
+                @click="() => pick(demo)"
+              >
+                <span class="demos-rail__dot" aria-hidden="true" />
+                <img
+                  :src="githubAvatarProxyUrl(demo.owner, 40)"
+                  alt=""
+                  width="20"
+                  height="20"
+                  loading="lazy"
+                  decoding="async"
+                  class="demos-rail__avatar"
+                >
+                <span class="min-w-0">
+                  <span class="demos-rail__name">/{{ demo.name }}</span>
+                  <span class="demos-rail__by">{{ author(demo) }}</span>
+                </span>
+              </button>
+            </li>
+          </ul>
+        </section>
+      </nav>
+    </template>
+
+    <div id="demos-stage" ref="stage" class="demos-stage scroll-mt-24">
+      <Transition name="demos-swap" mode="out-in">
+        <DemoStage v-if="current" :key="currentKey" :demo="current" show-prompt live eager surface="demos-page" />
+      </Transition>
+      <p v-if="!current" class="text-sm text-muted">
+        No demos are published yet.
+      </p>
+    </div>
+  </BoardShell>
+</template>
+
+<style scoped>
+.demos-rail {
+  display: grid;
+  gap: 1.25rem;
+}
+
+.demos-rail__heading {
+  margin-block-end: 0.375rem;
+  padding-inline: 0.5rem;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--ui-text-muted);
+}
+
+.demos-rail__pick {
+  display: grid;
+  grid-template-columns: auto auto minmax(0, 1fr);
+  align-items: center;
+  gap: 0.5rem;
+  inline-size: 100%;
+  min-block-size: 2.75rem;
+  padding: 0.375rem 0.5rem;
+  border-radius: var(--ui-radius);
+  text-align: start;
+  cursor: pointer;
+  transition: background-color 150ms ease;
+}
+
+@media (hover: hover) {
+  .demos-rail__pick:hover {
+    background: var(--ui-bg-elevated);
+  }
+}
+
+.demos-rail__pick:focus-visible {
+  outline: 2px solid var(--ui-border-accented);
+  outline-offset: 2px;
+}
+
+.demos-rail__pick[aria-pressed='true'] {
+  background: var(--ui-bg-muted);
+}
+
+/* Stone dots, and one rose dot for the demo on the stage. */
+.demos-rail__dot {
+  inline-size: 0.375rem;
+  block-size: 0.375rem;
+  border-radius: 9999px;
+  background: var(--ui-border-accented);
+}
+
+.demos-rail__pick[aria-pressed='true'] .demos-rail__dot {
+  background: var(--ui-primary);
+}
+
+.demos-rail__avatar {
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
+  border-radius: 9999px;
+  border: 1px solid var(--ui-border);
+  background: var(--ui-bg-muted);
+}
+
+.demos-rail__name {
+  display: block;
+  overflow: hidden;
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  line-height: 1.25rem;
+  color: var(--ui-text-highlighted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.demos-rail__by {
+  display: block;
+  overflow: hidden;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  color: var(--ui-text-muted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (min-width: 64rem) {
+  .demos-stage {
+    position: sticky;
+    inset-block-start: 5rem;
+  }
+}
+
+.demos-swap-enter-active,
+.demos-swap-leave-active {
+  transition: opacity 150ms ease-out;
+}
+
+.demos-swap-enter-from,
+.demos-swap-leave-to {
+  opacity: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .demos-rail__pick,
+  .demos-swap-enter-active,
+  .demos-swap-leave-active {
+    transition: none;
+  }
+}
+</style>
diff --git a/layers/marketing/app/utils/page-admissions.ts b/layers/marketing/app/utils/page-admissions.ts
index c5b2c0c7..7fa1d897 100644
--- a/layers/marketing/app/utils/page-admissions.ts
+++ b/layers/marketing/app/utils/page-admissions.ts
@@ -53,9 +53,14 @@ export const FREEZE_AUDIT_PATHS: readonly string[] = [
   '/learn/author-ruby-package-skills',
   '/learn/author-rust-package-skills',
   '/learn/author-go-package-skills',
+  '/skills/demos',
 ]
 
 export const PAGE_ADMISSIONS: Readonly<Record<string, PageAdmission>> = {
+  '/skills/demos': {
+    targetQuery: 'claude skills examples',
+    admissionBar: '720 searches a month, KD 32. NuxtSEO research keywords, 2026-10-06. Holds only demos a human approved by merging, and renders noindex below six. Review at the 2026-11-11 gate.',
+  },
   '/compare/humanize-writing-skills': {
     targetQuery: 'best humanizer skill for claude',
     admissionBar: 'Experiment F, owner-approved 2026-10-05: one original source comparison with contextual internal links. Query estimate: 30 US searches a month, below the volume bar. Retain admission at the 2026-11-11 gate only if indexed with relevant query impressions.',
diff --git a/layers/registry/app/components/_SkillDemo.vue b/layers/registry/app/components/_SkillDemo.vue
index 8c6377ca..4edab881 100644
--- a/layers/registry/app/components/_SkillDemo.vue
+++ b/layers/registry/app/components/_SkillDemo.vue
@@ -32,7 +32,7 @@ const live = ref(false)
     </div>
 
     <p class="skill-demo__prompt mt-3 text-sm leading-relaxed text-default">
-      <span class="data-label mr-2">You say</span>{{ demo.prompt }}
+      <span class="data-label mr-2">Prompt</span>{{ demo.prompt }}
     </p>
     <p v-if="demo.setup" class="mt-2 text-xs leading-relaxed text-muted">
       <span class="data-label mr-2">Folder</span>{{ demo.setup }}
@@ -57,6 +57,7 @@ const live = ref(false)
         playsinline
         preload="none"
         class="skill-demo__video"
+        :style="{ maxInlineSize: `${demo.video.width}px` }"
         :aria-label="`Video the Agent rendered with ${demo.name}`"
       >
         <source :src="demo.video.src" type="video/mp4">
@@ -137,10 +138,12 @@ const live = ref(false)
 </template>
 
 <style scoped>
+/* Never wider than the film was rendered, and centred when the panel is wider. */
 .skill-demo__video {
   display: block;
   width: 100%;
   height: auto;
+  margin-inline: auto;
   border: 1px solid var(--ui-border);
   border-radius: var(--ui-radius);
   background: var(--ui-bg-muted);
diff --git a/layers/registry/server/data/skill-demos.json b/layers/registry/server/data/skill-demos.json
index 1e822cb7..cac6a97b 100644
--- a/layers/registry/server/data/skill-demos.json
+++ b/layers/registry/server/data/skill-demos.json
@@ -4,6 +4,7 @@
       "owner": "anthropics",
       "repo": "skills",
       "name": "frontend-design",
+      "makes": "landing-page",
       "prompt": "Build a single-file landing page for Tidepool, a tide-chart app for surfers. Inline all CSS and JavaScript. Save it as index.html.",
       "agent": "Claude Code",
       "agentVersion": "2.1.291",
@@ -34,6 +35,7 @@
       "owner": "cathrynlavery",
       "repo": "diagram-design",
       "name": "diagram-design",
+      "makes": "diagram",
       "prompt": "Keep the default style guide. Draw an architecture diagram for Tidewhisk, a fictional ferry-booking service: web app, API gateway, booking service, seat cache, payments worker, database, and SMS notifier. Inline all CSS and JavaScript. Save it as diagram.html.",
       "agent": "Claude Code",
       "agentVersion": "2.1.291",
@@ -57,6 +59,7 @@
       "owner": "emilkowalski",
       "repo": "skills",
       "name": "emil-design-eng",
+      "makes": "ui-component",
       "prompt": "Build toast.html, a single-file HTML demo of a toast notification stack for Pebblequill, a fictional note-sync app. Show three stacked toasts on load that stay until dismissed, expand on hover, and dismiss on swipe. Inline all CSS and JavaScript.",
       "agent": "Claude Code",
       "agentVersion": "2.1.291",
@@ -89,6 +92,7 @@
       "name": "hyperframes",
       "authorName": "HeyGen",
       "sourceUrl": "https://github.com/heygen-com/hyperframes/blob/main/skills/hyperframes/SKILL.md",
+      "makes": "film",
       "prompt": "Make a 12-second 1920x1080 promo video for Fernlight, a fictional plant-care app: a title card, three feature beats, and an end card. Render it as promo.mp4 in this folder.",
       "agent": "Claude Code",
       "agentVersion": "2.1.291",
@@ -110,12 +114,14 @@
           "viewport": "desktop",
           "alt": "A frame from the video the Agent rendered for: Make a 12-second 1920x1080 promo video for Fernlight, a fictional plant-care app: a title card, three feature beats, and"
         }
-      ]
+      ],
+      "pin": 3
     },
     {
       "owner": "humanlayer",
       "repo": "skills",
       "name": "show-me",
+      "makes": "diagram",
       "prompt": "Show me how Cogwhistle, a fictional bike-courier dispatch app, assigns a new delivery to a rider, from order to pickup. Write it as one focused HTML file named flow.html in this folder, with all CSS and JavaScript inline.",
       "agent": "Claude Code",
       "agentVersion": "2.1.291",
@@ -139,6 +145,7 @@
       "owner": "jakubkrehel",
       "repo": "make-interfaces-feel-better",
       "name": "make-interfaces-feel-better",
+      "makes": "ui-component",
       "prompt": "Build pricing.html, a single-file HTML pricing section for Glintwork, a fictional photo-editing app: three plan cards, a monthly and yearly toggle, and full hover and focus states. Inline all CSS and JavaScript.",
       "agent": "Claude Code",
       "agentVersion": "2.1.291",
@@ -171,6 +178,7 @@
       "name": "brag",
       "authorName": "Latent Spaces",
       "sourceUrl": "https://github.com/latent-spaces/brag/blob/main/skills/brag/SKILL.md",
+      "makes": "film",
       "prompt": "/brag: make a short launch video for this project. Save the final video as launch.mp4 in this folder.",
       "setup": "The folder held the Tidepool landing page from the frontend-design demo, and a one-line README.",
       "agent": "Claude Code",
@@ -202,6 +210,7 @@
       "name": "lemo-opuscar",
       "authorName": "Lemomo",
       "sourceUrl": "https://github.com/lemomo-ai/lemo-opuscar/blob/main/plugin/skills/lemo-opuscar/SKILL.md",
+      "makes": "film",
       "prompt": "Make a 15-second film in the Chinese Ink Wash style about a lighthouse keeper on Wrenhollow, a fictional island, who rescues a paper boat from a storm. No narration. Render the final film as film.mp4 in this folder.",
       "agent": "Claude Code",
       "agentVersion": "2.1.291",
@@ -223,7 +232,8 @@
           "viewport": "desktop",
           "alt": "A frame from the video the Agent rendered for: Make a 15-second film in the Chinese Ink Wash style about a lighthouse keeper on Wrenhollow, a fictional island, who res"
         }
-      ]
+      ],
+      "pin": 2
     }
   ]
 }
diff --git a/layers/registry/server/utils/skill-demos.ts b/layers/registry/server/utils/skill-demos.ts
index e28d1530..6be474b6 100644
--- a/layers/registry/server/utils/skill-demos.ts
+++ b/layers/registry/server/utils/skill-demos.ts
@@ -1,4 +1,6 @@
+import type { DemoMakes } from '#shared/demo-groups'
 import { z } from 'zod'
+import { DEMO_MAKES } from '#shared/demo-groups'
 import { repoSkillPath } from '#shared/skill-routes'
 import manifest from '../data/skill-demos.json'
 
@@ -45,6 +47,8 @@ const demoSchema = z.object({
   authorName: z.string().min(1).nullable().optional(),
   /** The SKILL.md in the author's Repository. */
   sourceUrl: z.string().url().optional(),
+  /** What the Skill made, which groups the demo on `/skills/demos`. */
+  makes: z.enum(DEMO_MAKES),
   /** The exact text the Agent received after loading the Skill. */
   prompt: z.string().min(1),
   /** What the folder held before the Agent started, when the recording seeded one. */
@@ -114,6 +118,7 @@ export interface SkillDemoView {
   repo: string
   name: string
   skillPath: string
+  makes: DemoMakes
   authorName: string | null
   sourceUrl: string | null
   prompt: string
@@ -139,6 +144,7 @@ export function presentSkillDemo(demo: SkillDemoRecord, currentCommit: string |
     repo: demo.repo,
     name: demo.name,
     skillPath: repoSkillPath(demo.owner, demo.repo, demo.name),
+    makes: demo.makes,
     authorName: demo.authorName ?? null,
     sourceUrl: demo.sourceUrl ?? null,
     prompt: demo.prompt,
diff --git a/layers/registry/server/utils/skills-route-policy.ts b/layers/registry/server/utils/skills-route-policy.ts
index 888ff17b..76d6ccd8 100644
--- a/layers/registry/server/utils/skills-route-policy.ts
+++ b/layers/registry/server/utils/skills-route-policy.ts
@@ -9,6 +9,7 @@ const marketingPaths = new Set([
   '/skills',
   '/skills/',
   '/skills/best',
+  '/skills/demos',
   '/skills/guide',
   // Merged into /skills/trending?range=all on 2026-08-15. The page is gone, so
   // this entry exists only to let the request reach nuxt.config's routeRules
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 45649617..2b45c2e2 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -573,6 +573,8 @@ export default defineNuxtConfig({
     // inside the 36000s nuxt-skew-protection keeps old chunks for.
     // `scripts/check-edge-cache.ts` proves it after each deploy.
     '/skills/trending': edgeCache({ maxAge: 60, staleWhileRevalidate: 3600 }),
+    // Demos change only on deploy.
+    '/skills/demos': edgeCache({ maxAge: 300, staleWhileRevalidate: 86400 }),
     // The homepage is the same shape as the board: rendered signed out, no
     // cookie read, and fed by the same feeds, so the same lifetimes hold. A
     // render measured 300 to 480 ms to first byte from Sydney on 2026-10-01.
diff --git a/scripts/record-skill-demo.ts b/scripts/record-skill-demo.ts
index 2b760d0d..6d95334e 100644
--- a/scripts/record-skill-demo.ts
+++ b/scripts/record-skill-demo.ts
@@ -1,9 +1,12 @@
 /**
  * Records one demo (GLOSSARY "demo") and writes it into the repository.
  *
- *   pnpm demo:record owner/repo/skill --prompt "Build ... Save it as index.html." --output index.html
- *   pnpm demo:record owner/repo/skill --prompt "Make ... Render it as film.mp4." --output film.mp4
- *   pnpm demo:record owner/repo/skill --prompt "..." --output launch.mp4 --seed ./site --setup "The folder held ..."
+ *   pnpm demo:record owner/repo/skill --makes landing-page --prompt "Build ... Save it as index.html." --output index.html
+ *   pnpm demo:record owner/repo/skill --makes film --prompt "Make ... Render it as film.mp4." --output film.mp4
+ *   pnpm demo:record owner/repo/skill --makes film --prompt "..." --output launch.mp4 --seed ./site --setup "The folder held ..."
+ *
+ * `--makes` is the demo's group on /skills/demos: one of DEMO_MAKES in
+ * shared/demo-groups.ts.
  *   pnpm demo:record owner/repo/skill --reshoot
  *
  * 1. Reads the Skill's current source commit from the public API.
@@ -30,6 +33,7 @@
  * the review step: a human approves each demo by merging it.
  */
 
+import type { DemoMakes } from '../shared/demo-groups'
 import { execFile } from 'node:child_process'
 import { createHash } from 'node:crypto'
 import { copyFile, cp, mkdir, mkdtemp, open, readdir, readFile, rm, stat, writeFile } from 'node:fs/promises'
@@ -39,6 +43,7 @@ import process from 'node:process'
 import { fileURLToPath, pathToFileURL } from 'node:url'
 import { parseArgs, promisify } from 'node:util'
 import { chromium } from '@playwright/test'
+import { DEMO_MAKES } from '../shared/demo-groups'
 
 const run = promisify(execFile)
 
@@ -105,6 +110,7 @@ interface DemoEntry {
   owner: string
   repo: string
   name: string
+  makes: DemoMakes
   authorName: string | null
   sourceUrl: string
   prompt: string
@@ -123,7 +129,7 @@ interface DemoEntry {
 type OutputKind = 'page' | 'video'
 
 type Parsed
-  = | { _tag: 'record', owner: string, repo: string, name: string, prompt: string, output: string, kind: OutputKind, seed: string | null, setup: string | null }
+  = | { _tag: 'record', owner: string, repo: string, name: string, makes: DemoMakes, prompt: string, output: string, kind: OutputKind, seed: string | null, setup: string | null }
     | { _tag: 'reshoot', owner: string, repo: string, name: string }
     | { _tag: 'usage', message: string }
 
@@ -133,6 +139,7 @@ function parseInput(argv: string[]): Parsed {
     allowPositionals: true,
     options: {
       prompt: { type: 'string' },
+      makes: { type: 'string' },
       output: { type: 'string', default: 'index.html' },
       seed: { type: 'string' },
       setup: { type: 'string' },
@@ -148,12 +155,15 @@ function parseInput(argv: string[]): Parsed {
     return { _tag: 'reshoot', owner, repo, name }
   if (!values.prompt)
     return { _tag: 'usage', message: 'Give the prompt with --prompt.' }
+  const makes = DEMO_MAKES.find(value => value === values.makes)
+  if (!makes)
+    return { _tag: 'usage', message: `Give the demo's group with --makes: one of ${DEMO_MAKES.join(', ')}.` }
   const kind: OutputKind | null = /^[\w-]+\.html$/.test(values.output) ? 'page' : /^[\w-]+\.mp4$/.test(values.output) ? 'video' : null
   if (!kind)
     return { _tag: 'usage', message: 'The --output file must be one HTML or MP4 file name, such as index.html or film.mp4.' }
   if (values.seed && !values.setup)
     return { _tag: 'usage', message: 'A --seed folder needs a --setup line that tells visitors what the folder held.' }
-  return { _tag: 'record', owner, repo, name, prompt: values.prompt, output: values.output, kind, seed: values.seed ? resolve(values.seed) : null, setup: values.setup ?? null }
+  return { _tag: 'record', owner, repo, name, makes, prompt: values.prompt, output: values.output, kind, seed: values.seed ? resolve(values.seed) : null, setup: values.setup ?? null }
 }
 
 interface SkillSource {
@@ -421,7 +431,7 @@ async function reshoot(owner: string, repo: string, name: string): Promise<void>
 async function main(): Promise<void> {
   const input = parseInput(process.argv.slice(2))
   if (input._tag === 'usage') {
-    console.error(`${input.message}\nUsage: pnpm demo:record owner/repo/skill --prompt "..." [--output index.html|film.mp4] [--seed dir --setup "..."]\n       pnpm demo:record owner/repo/skill --reshoot`)
+    console.error(`${input.message}\nUsage: pnpm demo:record owner/repo/skill --makes <group> --prompt "..." [--output index.html|film.mp4] [--seed dir --setup "..."]\n       pnpm demo:record owner/repo/skill --reshoot`)
     process.exitCode = 2
     return
   }
@@ -429,7 +439,7 @@ async function main(): Promise<void> {
     await reshoot(input.owner, input.repo, input.name)
     return
   }
-  const { owner, repo, name, prompt, output, kind, seed, setup } = input
+  const { owner, repo, name, makes, prompt, output, kind, seed, setup } = input
   const skillRef = `${owner}/${repo}/${name}`
   const source = await skillSource(owner, repo, name)
 
@@ -458,6 +468,7 @@ async function main(): Promise<void> {
     owner,
     repo,
     name,
+    makes,
     authorName: source.authorName,
     sourceUrl: source.sourceUrl,
     prompt,
diff --git a/shared/demo-groups.ts b/shared/demo-groups.ts
new file mode 100644
index 00000000..92c666cf
--- /dev/null
+++ b/shared/demo-groups.ts
@@ -0,0 +1,47 @@
+/**
+ * What a demo's Skill makes, which is how `/skills/demos` groups them. Named
+ * by the thing a visitor wants made, not by the kind of work, so a film Skill
+ * and a page Skill never share a group. The order is the page order.
+ *
+ * This module imports nothing, so the recorder script can load it directly.
+ */
+export const DEMO_GROUPS = [
+  {
+    makes: 'film',
+    label: 'Films and launch videos',
+    line: 'Videos a Skill directs and renders in code, from a prompt or a project folder.',
+  },
+  {
+    makes: 'landing-page',
+    label: 'Landing pages',
+    line: 'A whole page from one prompt.',
+  },
+  {
+    makes: 'ui-component',
+    label: 'UI components',
+    line: 'One component, with the states and motion the Skill teaches.',
+  },
+  {
+    makes: 'diagram',
+    label: 'Diagrams and explainers',
+    line: 'Systems and flows drawn so a reader can follow them.',
+  },
+] as const
+
+export type DemoMakes = typeof DEMO_GROUPS[number]['makes']
+
+export const DEMO_MAKES = DEMO_GROUPS.map(group => group.makes) as [DemoMakes, ...DemoMakes[]]
+
+export interface DemoGroup<T> {
+  makes: DemoMakes
+  label: string
+  line: string
+  demos: T[]
+}
+
+/** Demos under their group, in page order. A group with no demos is left out. */
+export function groupDemos<T extends { makes: DemoMakes }>(demos: readonly T[]): DemoGroup<T>[] {
+  return DEMO_GROUPS
+    .map(group => ({ makes: group.makes, label: group.label, line: group.line, demos: demos.filter(demo => demo.makes === group.makes) }))
+    .filter(group => group.demos.length > 0)
+}
diff --git a/test/a11y.spec.ts b/test/a11y.spec.ts
index cac0e473..958f4ab2 100644
--- a/test/a11y.spec.ts
+++ b/test/a11y.spec.ts
@@ -600,6 +600,7 @@ describe('accessibility: components', () => {
       repo: 'skills',
       name,
       skillPath: `/gh/anthropics/skills/${name}`,
+      makes: 'landing-page' as const,
       authorName: 'Anthropic',
       sourceUrl: `https://github.com/anthropics/skills/blob/main/skills/${name}/SKILL.md`,
       prompt: `Build the ${name} page for Tidepool.`,
@@ -607,6 +608,7 @@ describe('accessibility: components', () => {
       model: 'claude-opus-5-5',
       recordedAt: '2026-10-06',
       shots: [shot],
+      liveUrl: null,
       video: null,
     }))
     const container = createIsolatedContainer()
@@ -619,7 +621,7 @@ describe('accessibility: components', () => {
     const picks = [...container.querySelectorAll<HTMLButtonElement>('button[aria-pressed]')]
     expect(picks).toHaveLength(3)
     expect(picks[0]?.getAttribute('aria-pressed')).toBe('true')
-    const stage = () => container.querySelector('.home-demos__stage .home-demos__open')?.getAttribute('href')
+    const stage = () => container.querySelector('.demo-index__stage .demo-stage__open')?.getAttribute('href')
     expect(stage()).toBe('/gh/anthropics/skills/one#demo')
 
     picks[1]!.click()
@@ -627,6 +629,41 @@ describe('accessibility: components', () => {
     await new Promise(done => setTimeout(done, 400))
     expect(picks[1]?.getAttribute('aria-pressed')).toBe('true')
     expect(stage()).toBe('/gh/anthropics/skills/two#demo')
+    expect(container.querySelector('a[href="/skills/demos"]')?.textContent).toContain('All 3 demos')
+    wrapper.unmount()
+  })
+
+  it('demoIndex opens on a shared demo and reports each pick', async () => {
+    const shot = { src: '/d.jpg', width: 1440, height: 900, alt: 'Desktop screenshot', viewport: 'desktop' as const }
+    const demos = ['one', 'two'].map(name => ({
+      owner: 'o',
+      repo: 'r',
+      name,
+      skillPath: `/gh/o/r/${name}`,
+      makes: 'diagram' as const,
+      authorName: null,
+      sourceUrl: null,
+      prompt: `Draw ${name}.`,
+      agent: 'Claude Code',
+      model: 'claude-opus-5-5',
+      recordedAt: '2026-10-06',
+      shots: [shot],
+      liveUrl: null,
+      video: null,
+    }))
+    const container = createIsolatedContainer()
+    const wrapper = await mountSuspended(
+      await loadComponent('DemoIndex'),
+      { attachTo: container, props: { demos, initialKey: 'o/r/two' } },
+    )
+    const results = await runAxe(container)
+    expect(results.violations, formatViolations(results)).toHaveLength(0)
+    const picks = [...container.querySelectorAll<HTMLButtonElement>('button[aria-pressed]')]
+    expect(picks[1]?.getAttribute('aria-pressed')).toBe('true')
+
+    picks[0]!.click()
+    await nextTick()
+    expect(wrapper.emitted('pick')?.[0]?.[0]).toMatchObject({ name: 'one' })
     wrapper.unmount()
   })
 
@@ -817,6 +854,7 @@ describe('accessibility: component coverage', () => {
     'StatsLeaderboard', // Tested at page level
     'UiTooltip', // Wrapper around UTooltip, exercised by parent components
     '_ChipSwitch', // The switch above RunChip and CliInstallChip, axe-scanned and clicked through both
+    'DemoStage', // The stage DemoIndex and /skills/demos render, scanned inside the HomeDemos and DemoIndex tests
     'home-demos/_DemoMedia', // A part of HomeDemos, scanned inside the HomeDemos tests
     'home-demos/_DemoPicture', // A part of HomeDemos, scanned inside the HomeDemos tests
     'home-demos/_DemoRecording', // A part of HomeDemos, scanned inside the HomeDemos tests
diff --git a/test/unit/demo-groups.test.ts b/test/unit/demo-groups.test.ts
new file mode 100644
index 00000000..16d22eec
--- /dev/null
+++ b/test/unit/demo-groups.test.ts
@@ -0,0 +1,16 @@
+import { describe, expect, it } from 'vitest'
+import { groupDemos } from '../../shared/demo-groups'
+
+describe('groupDemos', () => {
+  it('puts demos under their group in page order and leaves empty groups out', () => {
+    const groups = groupDemos([
+      { name: 'diagram-design', makes: 'diagram' as const },
+      { name: 'brag', makes: 'film' as const },
+      { name: 'show-me', makes: 'diagram' as const },
+    ])
+    expect(groups.map(group => [group.label, group.demos.map(demo => demo.name)])).toEqual([
+      ['Films and launch videos', ['brag']],
+      ['Diagrams and explainers', ['diagram-design', 'show-me']],
+    ])
+  })
+})