From 9546a012c6106cdae4801c70071864f4bf7591d3 Mon Sep 17 00:00:00 2001 From: Harlan Wilton Date: Wed, 7 Oct 2026 12:24:21 +1100 Subject: [PATCH 1/2] feat(registry): add five more Skill demos taste-skill, hallmark, archify, apple-design and flow-diagram, picked from trending and the design and diagrams tracks. Each Skill loads with no shell, so the page recorder covers it. visual-explainer was dropped: skilld asks for approval because it reads credential files. --- .../skills/{demos.vue => demos/[...demo].vue} | 0 layers/registry/server/data/skill-demos.json | 157 ++++ .../skills/apple-design/sheet.html | 738 ++++++++++++++++++ .../taste-skill/taste-skill/index.html | 719 +++++++++++++++++ .../nutlope/hallmark/hallmark/index.html | 718 +++++++++++++++++ .../demos/tt-a1i/archify/archify/diagram.html | 324 ++++++++ .../agent-skills/flow-diagram/flow.html | 620 +++++++++++++++ 7 files changed, 3276 insertions(+) rename layers/marketing/app/pages/skills/{demos.vue => demos/[...demo].vue} (100%) create mode 100644 layers/registry/server/demos/emilkowalski/skills/apple-design/sheet.html create mode 100644 layers/registry/server/demos/leonxlnx/taste-skill/taste-skill/index.html create mode 100644 layers/registry/server/demos/nutlope/hallmark/hallmark/index.html create mode 100644 layers/registry/server/demos/tt-a1i/archify/archify/diagram.html create mode 100644 layers/registry/server/demos/unclecatvn/agent-skills/flow-diagram/flow.html diff --git a/layers/marketing/app/pages/skills/demos.vue b/layers/marketing/app/pages/skills/demos/[...demo].vue similarity index 100% rename from layers/marketing/app/pages/skills/demos.vue rename to layers/marketing/app/pages/skills/demos/[...demo].vue diff --git a/layers/registry/server/data/skill-demos.json b/layers/registry/server/data/skill-demos.json index 3b2b2032..50858231 100644 --- a/layers/registry/server/data/skill-demos.json +++ b/layers/registry/server/data/skill-demos.json @@ -137,6 +137,37 @@ } ] }, + { + "owner": "emilkowalski", + "repo": "skills", + "name": "apple-design", + "makes": "ui-component", + "authorName": "Emil Kowalski", + "sourceUrl": "https://github.com/emilkowalski/skills/blob/main/skills/apple-design/SKILL.md", + "prompt": "Build sheet.html: a draggable bottom sheet for Hollowmere, a fictional trail-map app. It snaps to three heights, carries the speed of a flick, rubber-bands past its edges, and can be grabbed mid-motion. Inline all CSS and JavaScript.", + "agent": "Claude Code", + "agentVersion": "2.1.292", + "model": "claude-opus-5-5", + "skillCommit": "85e8e2363b713506e1d5b6e07a0eb2da66be1bc3", + "recordedAt": "2026-10-07", + "outputFile": "sheet.html", + "shots": [ + { + "file": "desktop-9e7faf5dab.jpg", + "width": 1440, + "height": 900, + "viewport": "desktop", + "alt": "Desktop screenshot of the page the Agent built for: Build sheet.html: a draggable bottom sheet for Hollowmere, a fictional trail-map app. It snaps to three heights, carries" + }, + { + "file": "mobile-602c340f70.jpg", + "width": 390, + "height": 844, + "viewport": "mobile", + "alt": "Phone screenshot of the page the Agent built for: Build sheet.html: a draggable bottom sheet for Hollowmere, a fictional trail-map app. It snaps to three heights, carries" + } + ] + }, { "owner": "emilkowalski", "repo": "skills", @@ -360,6 +391,45 @@ ], "pin": 2 }, + { + "owner": "leonxlnx", + "repo": "taste-skill", + "name": "taste-skill", + "makes": "landing-page", + "authorName": "Leon Lin", + "sourceUrl": "https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md", + "prompt": "Build a landing page for Marrowgate, a fictional sleeper-train company that runs overnight routes between six mountain towns. Don't stop to ask me questions; make the design calls yourself. Save it as one self-contained index.html with all CSS and JavaScript inline.", + "agent": "Claude Code", + "agentVersion": "2.1.292", + "model": "claude-opus-5-5", + "skillCommit": "3c7017d636c3a4aad378433ea6d0cfa6c921da4a", + "recordedAt": "2026-10-07", + "outputFile": "index.html", + "shots": [ + { + "file": "desktop-55e6bf594a.jpg", + "width": 1440, + "height": 6000, + "viewport": "desktop", + "alt": "Desktop screenshot of the page the Agent built for: Build a landing page for Marrowgate, a fictional sleeper-train company that runs overnight routes between six mountain t", + "poster": { + "file": "desktop-poster-bff8fbec94.jpg", + "height": 900 + } + }, + { + "file": "mobile-239dae4144.jpg", + "width": 390, + "height": 6000, + "viewport": "mobile", + "alt": "Phone screenshot of the page the Agent built for: Build a landing page for Marrowgate, a fictional sleeper-train company that runs overnight routes between six mountain t", + "poster": { + "file": "mobile-poster-b509149d32.jpg", + "height": 844 + } + } + ] + }, { "owner": "ntcoding", "repo": "claude-skillz", @@ -399,6 +469,34 @@ } ] }, + { + "owner": "nutlope", + "repo": "hallmark", + "name": "hallmark", + "makes": "landing-page", + "authorName": "Hassan El Mghari", + "sourceUrl": "https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md", + "prompt": "Build a landing page for Quillmoor, a fictional reading-log app for book clubs that tracks who finished which chapter. Don't stop to ask me questions; make the design calls yourself. Save it as one self-contained index.html with all CSS and JavaScript inline.", + "agent": "Claude Code", + "agentVersion": "2.1.292", + "model": "claude-opus-5-5", + "skillCommit": "f5f4a2ceb0ff302f2e69fb33679501611eadee32", + "recordedAt": "2026-10-07", + "outputFile": "index.html", + "shots": [ + { + "file": "desktop-5b1f7fd33f.jpg", + "width": 1440, + "height": 2577, + "viewport": "desktop", + "alt": "Desktop screenshot of the page the Agent built for: Build a landing page for Quillmoor, a fictional reading-log app for book clubs that tracks who finished which chapter. D", + "poster": { + "file": "desktop-poster-1e21101a33.jpg", + "height": 900 + } + } + ] + }, { "owner": "pbakaus", "repo": "impeccable", @@ -482,6 +580,65 @@ } ] }, + { + "owner": "tt-a1i", + "repo": "archify", + "name": "archify", + "makes": "diagram", + "authorName": null, + "sourceUrl": "https://github.com/tt-a1i/archify/blob/main/archify/SKILL.md", + "prompt": "Draw an architecture diagram for Ferncastle, a fictional library app: phone app, API gateway, auth service, catalog service, holds queue, search index, Postgres, and push notifier. Show how a book reservation flows through it. Save it as one self-contained diagram.html with all CSS and JavaScript inline.", + "agent": "Claude Code", + "agentVersion": "2.1.292", + "model": "claude-opus-5-5", + "skillCommit": "67c47c119ece23e3640692bbf10b333f49d14c71", + "recordedAt": "2026-10-07", + "outputFile": "diagram.html", + "shots": [ + { + "file": "desktop-35a0f40375.jpg", + "width": 1440, + "height": 933, + "viewport": "desktop", + "alt": "Desktop screenshot of the page the Agent built for: Draw an architecture diagram for Ferncastle, a fictional library app: phone app, API gateway, auth service, catalog serv", + "poster": { + "file": "desktop-poster-9575d21ad9.jpg", + "height": 900 + } + } + ] + }, + { + "owner": "unclecatvn", + "repo": "agent-skills", + "name": "flow-diagram", + "makes": "diagram", + "authorName": "Hoai Nam", + "sourceUrl": "https://github.com/unclecatvn/agent-skills/blob/main/skills/flow-diagram/SKILL.md", + "prompt": "Write it in English, and don't stop to ask me questions. Draw an interactive flow diagram for Sleetgarden, a fictional photo-sharing app: how one uploaded photo becomes three thumbnails, through the upload API, virus scan, resize queue, image workers, object storage, and CDN, including what happens when a resize fails. Save it as one self-contained flow.html with all CSS and JavaScript inline.", + "agent": "Claude Code", + "agentVersion": "2.1.292", + "model": "claude-opus-5-5", + "skillCommit": "148f0b19b29df6dfede6bae1f17681569154538b", + "recordedAt": "2026-10-07", + "outputFile": "flow.html", + "shots": [ + { + "file": "desktop-4d9c4e413c.jpg", + "width": 1440, + "height": 900, + "viewport": "desktop", + "alt": "Desktop screenshot of the page the Agent built for: Write it in English, and don't stop to ask me questions. Draw an interactive flow diagram for Sleetgarden, a fictional p" + }, + { + "file": "mobile-6d86281bde.jpg", + "width": 390, + "height": 844, + "viewport": "mobile", + "alt": "Phone screenshot of the page the Agent built for: Write it in English, and don't stop to ask me questions. Draw an interactive flow diagram for Sleetgarden, a fictional p" + } + ] + }, { "owner": "zarazhangrui", "repo": "frontend-slides", diff --git a/layers/registry/server/demos/emilkowalski/skills/apple-design/sheet.html b/layers/registry/server/demos/emilkowalski/skills/apple-design/sheet.html new file mode 100644 index 00000000..4c1dd332 --- /dev/null +++ b/layers/registry/server/demos/emilkowalski/skills/apple-design/sheet.html @@ -0,0 +1,738 @@ + + + + + + +Hollowmere — Trails + + + + + + +
+ +
+ + +
+ +
+ + +
+
    +
    • +
    • +
    • +
    • +
    • +
+ +

Conditions at the mere

+
+
9°Feels like 6°
+
18:42Sunset
+
LowMist on water
+
+

Ranger note: the ferry crossing to Lanternfall runs every 40 minutes until dusk. Greywater Ridge is exposed — turn back if cloud drops below the cairns.

+ +

Saved

+
    +
    • +
    • +
+
+
+ + + + diff --git a/layers/registry/server/demos/leonxlnx/taste-skill/taste-skill/index.html b/layers/registry/server/demos/leonxlnx/taste-skill/taste-skill/index.html new file mode 100644 index 00000000..fcc87833 --- /dev/null +++ b/layers/registry/server/demos/leonxlnx/taste-skill/taste-skill/index.html @@ -0,0 +1,719 @@ + + + + + +Marrowgate | Night trains between six mountain towns + + + + + + + + +
+
+ + + Marrowgate + + +
+ + Book a berth +
+
+
+ +
+ +
+
+
+

Sleep through the mountains.

+

Overnight sleeper trains between six mountain towns. Board after dinner, sleep in a real bed, arrive for breakfast.

+
+ Book a berth + See the routes +
+
+
+ A river valley under steep forested mountains +
+
+
+ +
+
+

Eight night routes. Every train arrives before eight.

+

Pick a town to see where tonight's trains from there are headed.

+ +
+
+ +
+
+
+

From Harrowmere

+ Departs nightly +
+
    +

    Need two legs? Change at any town over breakfast and take the next night's train. Book a berth

    +
    +
    +
    +
    + +
    +
    +

    Three ways to spend the night.

    +
    +
    +
    A river winding through a mountain valley, seen from above
    +
    +

    Double suite

    +

    A proper double bed facing a full-width window, a private washroom, and breakfast brought to your door.

    +
    from€245per cabin
    +
    +
    +
    +
    A still lake below pine forest
    +
    +

    Single

    +

    Your own cabin with a fold-down desk, a washbasin, and a door that locks.

    +
    from€169
    +
    +
    +
    +
    +

    Couchette

    +

    Six bunks to a compartment, fresh linen on every one. The cheapest bed across the mountains.

    +
    from€89per berth
    +
    +
    +
    +
    +
    + +
    +
    +
    + Northern lights above a dark mountain lake +
    + +
    +
    +

    A night aboard

    +

    From the platform to breakfast.

    +
      +
    1. + 21:40 +

      Board with time to spare

      +

      Doors open forty minutes before departure. Your cabin is made up and the lamp is already on.

      +
      2. +
    2. + 22:15 +

      Supper in the dining car

      +

      Soup, bread, a local cheese, and a short wine list from the towns on your line. Last orders at eleven.

      +
      3. +
    3. + 00:30 +

      Over the high passes

      +

      The climb happens while you sleep. We run slowly on the steep sections, so the ride stays smooth.

      +
      4. +
    4. + 06:15 +

      Coffee at your door

      +

      A knock, a tray, and the valley turning light outside the window.

      +
      5. +
    5. + 07:05 +

      Step off in town

      +

      Every station is a short walk from the centre. Shower rooms on the platform if you want one.

      +
      6. +
    +
    +
    +
    + +
    +
    +
    “I’ve taken the Skarn train to Pellow Pass eleven times and still haven’t seen the pass in daylight. I’ve never minded.”
    +
    + + Ilse VargaSchoolteacher in Lisch +
    +
    +
    + +
    +
    +
    +

    Book a berth for tonight or any night.

    +

    Choose two towns and a date. Bookings open ninety days ahead, and you can cancel for free until 18:00 on the day.

    +
    + +
    +
    + + +

    +
    +
    + + +

    +
    +
    + + +

    The date you board. You arrive the next morning.

    +

    +
    +
    + Cabin +
    + + + +
    +
    +
    + +
    +
    +

    Your train, times, and fare will show up here.

    +
    +
    +
    +
    + +
    +
    +

    Questions people ask before their first night.

    +
    +
    +
    Can I bring skis or a bike?

    Yes. Every train has a luggage van with ski racks and bike hooks. Add one when you book; it costs €12 per item.

    +
    Are dogs allowed?

    Dogs travel free in single cabins and double suites. Couchettes are kept pet-free for people with allergies.

    +
    +
    +
    What happens if snow closes a pass?

    We hold the train at the last town before the pass, keep the heating on, and serve breakfast aboard. If you arrive more than two hours late, we refund half the fare.

    +
    Is it suitable for children?

    Very. Under-fours ride free in a parent’s berth, and a couchette compartment can be booked as a single family cabin.

    +
    +
    +
    +
    + +
    + + + + + + diff --git a/layers/registry/server/demos/nutlope/hallmark/hallmark/index.html b/layers/registry/server/demos/nutlope/hallmark/hallmark/index.html new file mode 100644 index 00000000..05cfd78d --- /dev/null +++ b/layers/registry/server/demos/nutlope/hallmark/hallmark/index.html @@ -0,0 +1,718 @@ + + + + + +Quillmoor — a reading log for book clubs + + + + + + + + +
    +

    A reading log for book clubs · Autumn 2026

    +

    Quillmoor

    + + +
    + +
    +
    +

    Six readers. Twenty-four chapters. One safe line.

    +

    Quillmoor keeps a ledger of who in your club has finished which chapter. It finds the last chapter everyone has read and draws a line there, so Thursday’s talk stops where your slowest reader does.

    +
    + +
    +
    +
    +

    Persuasion

    +

    Jane Austen · 24 chapters · the Harbour Street club

    +
    + +
    +
    + +
    + +
    +
    +
    +

    Swipe the ledger sideways to see later chapters.

    + +
    +
    + + +
    + +
    +

    What the ledger does, and what it won’t

    +
    +
    +
    Mark a chapter
    +
    One tap when you finish it. No page counts, no streaks, no reading-speed leaderboard. A chapter is either read or it isn’t.
    +
    +
    +
    The line moves on its own
    +
    Quillmoor works out the last chapter every member has finished and moves the line there. Nobody has to tell the group they’re behind.
    +
    +
    +
    Margin notes wait for you
    +
    Notes are pinned to a chapter and stay folded until you’ve marked it. Readers who are ahead can write as much as they like, and nobody else sees it early.
    +
    +
    +
    One ledger per book
    +
    When the club picks its next title, the old ledger closes and goes into an archive you can look back through, with every note still in place.
    +
    +
    +
    + +
    +

    Open a ledger for your club.

    +

    We’re letting clubs in a few at a time. Leave an address and we’ll write when there’s room for yours. Nothing else lands in your inbox.

    +
    +
    + + +
    + +

    +
    +
    +
    + + + + + + diff --git a/layers/registry/server/demos/tt-a1i/archify/archify/diagram.html b/layers/registry/server/demos/tt-a1i/archify/archify/diagram.html new file mode 100644 index 00000000..43ad89eb --- /dev/null +++ b/layers/registry/server/demos/tt-a1i/archify/archify/diagram.html @@ -0,0 +1,324 @@ + + + + + +Ferncastle — Book Reservation Architecture + + + +
    +
    +

    Ferncastle — Book Reservation Flow

    +

    Fictional library app · architecture view · numbered path shows a patron placing a hold

    +
    +
    + + + +
    +
    + +
    +
    + + Ferncastle architecture + Phone app calls the API gateway, which verifies tokens with the auth service and routes to the catalog service. The catalog service reads the search index and Postgres, enqueues a hold on the holds queue, and the push notifier consumes it to notify the phone app. + + + + + + + + + + + + + + FERNCASTLE CLOUD + + + + PRIVATE SERVICE NETWORK + + + + + + + + POST /holds + 1 + + + + + verify JWT + 2 + + + + + route request + 3 + + + + + find title + 4 + + + + 5 + + lock + + insert + + + + + HoldPlaced event + 6 + + + + + 202 · queue # + 7 + + + + + + + 8 + + consume + + + + + push: "Your hold is placed" + 9 + + + + + + + CLIENT + Phone App + iOS / Android patron app + + + + EDGE + API Gateway + TLS · rate limit · routing + + + + SECURITY + Auth Service + patron login · JWT verify + + + + SERVICE + Catalog Service + titles · copies · holds API + + + + INDEX + Search Index + title / author / ISBN + + + + DATABASE + Postgres + source of truth · holds + + + + QUEUE + Holds Queue + HoldPlaced / HoldReady + + + + WORKER + Push Notifier + APNs / FCM fan-out + + +
    + + +
    + + + + diff --git a/layers/registry/server/demos/unclecatvn/agent-skills/flow-diagram/flow.html b/layers/registry/server/demos/unclecatvn/agent-skills/flow-diagram/flow.html new file mode 100644 index 00000000..70a63409 --- /dev/null +++ b/layers/registry/server/demos/unclecatvn/agent-skills/flow-diagram/flow.html @@ -0,0 +1,620 @@ + + + + + +Sleetgarden: from one upload to three thumbnails + + + + +
    +
    +

    Sleetgarden: from one upload to three thumbnails

    +

    Solid line = request · dashed green = response or return leg · a small arc = two lines passing over each other. Scroll to zoom, drag to pan.

    +
    + +
    + + + +
    +
    +
    + + 100% + + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Upload & scan (synchronous edge) + + + + Async resize pipeline + + + + + + Sleetgarden app + iOS · Android · web + + + + Upload API + POST /photos · GET /photos/:id + + + + Virus scan + sandboxed scanner · no network + + + + Resize queue + resize-jobs · max 3 receives + + + + Dead-letter queue + resize-jobs-dlq · kept 14 days + + + + Photo DB + status · owner · thumbnail keys + + + + Object storage + quarantine/ · originals/ · thumbs/ + + S + 150 px + + M + 600 px + + L + 1200 px + + + + Image workers + libvips · autoscale on queue depth + + + + On-call alert + fires when DLQ depth > 0 + + + + CDN + img.sleetgarden.app · 1-year cache + + + + + + 1 + POST /photos + 2 + to quarantine/ + 3 + insert row + 4 + row saved + 5 + 202 Accepted + + + S1 + scan job + S2 + scan, then promote + S3 + verdict + + + R1 + if clean + R2 + pull job + R3 + read original + R4 + write 3 thumbnails + R5 + status: ready / failed + + + F1 + nack, retry later + F2 + F3 + after 3 attempts + F4 + page on-call + F5 + manual replay + + + D1 + GET thumbnail + D2 + cache miss + D3 + origin bytes + D4 + cached image + + +
    +
    + + +
    + + + + From 0303da7568178c28ae351b02e149da6ebc3349db Mon Sep 17 00:00:00 2001 From: Harlan Wilton Date: Wed, 7 Oct 2026 12:24:28 +1100 Subject: [PATCH 2/2] feat(demos): give each demo its own indexable page A demo pick lived in a query string on /skills/demos, so search engines saw one page and no demo had a URL worth ranking. Each demo now answers at /skills/demos/// under the /skills/demos admission, and a demos sitemap lists them. The board itself was missing from every sitemap, since the pages sitemap excludes /skills/**; it is listed now too. Old ?demo= links 301 to the demo page. --- COPY.md | 1 + GLOSSARY.md | 2 +- .../app/pages/skills/demos/[...demo].vue | 122 ++++++++++++------ layers/marketing/app/utils/page-admissions.ts | 2 +- .../registry/server/api/__sitemap__/demos.ts | 11 ++ .../server/api/skill-demos/index.get.ts | 16 +-- layers/registry/server/utils/skill-demos.ts | 31 +++++ .../server/utils/skills-route-policy.ts | 4 +- nuxt.config.ts | 9 +- shared/demo-groups.ts | 15 ++- shared/demo-pages.ts | 34 +++++ test/unit/demo-pages.test.ts | 26 ++++ test/unit/skill-demos.test.ts | 24 +++- test/unit/skills-route-policy.test.ts | 5 + 14 files changed, 243 insertions(+), 59 deletions(-) create mode 100644 layers/registry/server/api/__sitemap__/demos.ts create mode 100644 shared/demo-pages.ts create mode 100644 test/unit/demo-pages.test.ts diff --git a/COPY.md b/COPY.md index 9f4f6c00..91fe377a 100644 --- a/COPY.md +++ b/COPY.md @@ -42,6 +42,7 @@ These exact strings. Do not paraphrase them per page. | 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 page | What /{name} made · One recorded run: the prompt, and what the Agent built with the Skill. | guidance only: the H1 and line of a demo page, `/skills/demos///`. The meta title is "{name} skill example: {noun}" for the query " skill example", with `noun` from `DEMO_GROUPS`. The meta description is "{agent} made this {noun} with the /{name} skill from one prompt: “{prompt}”", cut at a word to 160 characters | | 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 · 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 | diff --git a/GLOSSARY.md b/GLOSSARY.md index fe98bd98..39b5b234 100644 --- a/GLOSSARY.md +++ b/GLOSSARY.md @@ -92,7 +92,7 @@ Collisions **Is:** one recorded run of a Skill: a fixed prompt, the output an Agent made with the Skill, and how it was recorded (Agent, model, Skill commit, date). A human approves each one before it ships. -**Use for:** the Demo panel on the Skill page, the homepage demo section, and "live demo" for the sandboxed output page. +**Use for:** the Demo panel on the Skill page, the homepage demo section, a demo page at `/skills/demos///`, and "live demo" for the sandboxed output page. **Never:** example output, showcase, sample. Preview names the step of watching a demo, never the demo itself. diff --git a/layers/marketing/app/pages/skills/demos/[...demo].vue b/layers/marketing/app/pages/skills/demos/[...demo].vue index f90993c0..4b59b91a 100644 --- a/layers/marketing/app/pages/skills/demos/[...demo].vue +++ b/layers/marketing/app/pages/skills/demos/[...demo].vue @@ -1,23 +1,34 @@