From aa8c17ddb111041c4449643081eddd38909bb859 Mon Sep 17 00:00:00 2001 From: Harlan Wilton Date: Thu, 8 Oct 2026 02:36:11 +1100 Subject: [PATCH 1/3] feat(demos): add three new visual Skill recordings --- layers/registry/server/data/skill-demos.json | 120 ++++++++++++++++++ .../taste-skill/brutalist-skill/index.html | 59 +++++++++ .../taste-skill/minimalist-skill/index.html | 27 ++++ .../taste-skill/soft-skill/index.html | 69 ++++++++++ 4 files changed, 275 insertions(+) create mode 100644 layers/registry/server/demos/leonxlnx/taste-skill/brutalist-skill/index.html create mode 100644 layers/registry/server/demos/leonxlnx/taste-skill/minimalist-skill/index.html create mode 100644 layers/registry/server/demos/leonxlnx/taste-skill/soft-skill/index.html diff --git a/layers/registry/server/data/skill-demos.json b/layers/registry/server/data/skill-demos.json index 6dcb619f..9dccd1d7 100644 --- a/layers/registry/server/data/skill-demos.json +++ b/layers/registry/server/data/skill-demos.json @@ -585,6 +585,126 @@ } ] }, + { + "owner": "leonxlnx", + "repo": "taste-skill", + "name": "brutalist-skill", + "makes": "ui-component", + "authorName": "Leon Lin", + "sourceUrl": "https://github.com/Leonxlnx/taste-skill/blob/main/skills/brutalist-skill/SKILL.md", + "prompt": "Build Signal Yard, a fictional freight-dispatch control panel with Swiss typography and industrial terminal aesthetics. Show authored illustrative shipment data, a route map, working status filters, shipment detail selection, and dispatch confirmation. No real shipment claims. Don't ask questions. Make the design calls yourself. Use TypeScript for build tooling if needed. Save the final demo as one self-contained index.html with all CSS and runtime JavaScript inline. Bundle any package code locally. All visible controls must work. It will run in an opaque iframe with sandbox allow-scripts only: no form submissions, storage, popups, or downloads. Use explicit button handlers and in-page results. Support reduced motion, keyboard use, 390px mobile, and 1440px desktop. Verify the important controls in a browser before finishing.", + "agent": "Codex", + "agentVersion": "0.160.1", + "model": "gpt-6.1-sol", + "effort": "medium", + "skillCommit": "3206dd44fce91412cbfd5b2dbead29fb29a91bb9", + "recordedAt": "2026-10-07", + "outputFile": "index.html", + "shots": [ + { + "file": "desktop-0a0fe95042.jpg", + "width": 1440, + "height": 1423, + "viewport": "desktop", + "alt": "Desktop screenshot of the page the Agent built for: Build Signal Yard, a fictional freight-dispatch control panel with Swiss typography and industrial terminal aesthetics. ", + "poster": { + "file": "desktop-poster-515d7d13d6.jpg", + "height": 900 + } + }, + { + "file": "mobile-44b14a0686.jpg", + "width": 390, + "height": 2364, + "viewport": "mobile", + "alt": "Phone screenshot of the page the Agent built for: Build Signal Yard, a fictional freight-dispatch control panel with Swiss typography and industrial terminal aesthetics. ", + "poster": { + "file": "mobile-poster-94fcc71c35.jpg", + "height": 844 + } + } + ] + }, + { + "owner": "leonxlnx", + "repo": "taste-skill", + "name": "minimalist-skill", + "makes": "ui-component", + "authorName": "Leon Lin", + "sourceUrl": "https://github.com/Leonxlnx/taste-skill/blob/main/skills/minimalist-skill/SKILL.md", + "prompt": "Build Margin Notes, a fictional quiet reading-journal workspace. Show an asymmetric editorial reading queue, a featured book, note editor, completion toggle, and working book filter. Use warm monochrome and meaningful muted tags. Keep session data in memory. Don't ask questions. Make the design calls yourself. Use TypeScript for build tooling if needed. Save the final demo as one self-contained index.html with all CSS and runtime JavaScript inline. Bundle any package code locally. All visible controls must work. It will run in an opaque iframe with sandbox allow-scripts only: no form submissions, storage, popups, or downloads. Use explicit button handlers and in-page results. Support reduced motion, keyboard use, 390px mobile, and 1440px desktop. Verify the important controls in a browser before finishing.", + "agent": "Codex", + "agentVersion": "0.160.1", + "model": "gpt-6.1-sol", + "effort": "medium", + "skillCommit": "3206dd44fce91412cbfd5b2dbead29fb29a91bb9", + "recordedAt": "2026-10-07", + "outputFile": "index.html", + "shots": [ + { + "file": "desktop-ed7eb1520e.jpg", + "width": 1440, + "height": 1273, + "viewport": "desktop", + "alt": "Desktop screenshot of the page the Agent built for: Build Margin Notes, a fictional quiet reading-journal workspace. Show an asymmetric editorial reading queue, a featured ", + "poster": { + "file": "desktop-poster-e9c685238b.jpg", + "height": 900 + } + }, + { + "file": "mobile-fe451dd5d6.jpg", + "width": 390, + "height": 2124, + "viewport": "mobile", + "alt": "Phone screenshot of the page the Agent built for: Build Margin Notes, a fictional quiet reading-journal workspace. Show an asymmetric editorial reading queue, a featured ", + "poster": { + "file": "mobile-poster-9ae8cbbb3b.jpg", + "height": 844 + } + } + ] + }, + { + "owner": "leonxlnx", + "repo": "taste-skill", + "name": "soft-skill", + "makes": "landing-page", + "authorName": "Leon Lin", + "sourceUrl": "https://github.com/Leonxlnx/taste-skill/blob/main/skills/soft-skill/SKILL.md", + "prompt": "Build a premium landing page for Lilt House, a fictional listening room hosting small acoustic concerts. Choose editorial luxury with spacious typography and authored line art. Show three upcoming evenings, a working event selector, seat quantity, and an in-page reservation confirmation. Don't ask questions. Make the design calls yourself. Use TypeScript for build tooling if needed. Save the final demo as one self-contained index.html with all CSS and runtime JavaScript inline. Bundle any package code locally. All visible controls must work. It will run in an opaque iframe with sandbox allow-scripts only: no form submissions, storage, popups, or downloads. Use explicit button handlers and in-page results. Support reduced motion, keyboard use, 390px mobile, and 1440px desktop. Verify the important controls in a browser before finishing.", + "agent": "Codex", + "agentVersion": "0.160.1", + "model": "gpt-6.1-sol", + "effort": "medium", + "skillCommit": "3206dd44fce91412cbfd5b2dbead29fb29a91bb9", + "recordedAt": "2026-10-07", + "outputFile": "index.html", + "shots": [ + { + "file": "desktop-75d8e55d03.jpg", + "width": 1440, + "height": 2825, + "viewport": "desktop", + "alt": "Desktop screenshot of the page the Agent built for: Build a premium landing page for Lilt House, a fictional listening room hosting small acoustic concerts. Choose editoria", + "poster": { + "file": "desktop-poster-38e4dec80b.jpg", + "height": 900 + } + }, + { + "file": "mobile-9f396a010e.jpg", + "width": 390, + "height": 3445, + "viewport": "mobile", + "alt": "Phone screenshot of the page the Agent built for: Build a premium landing page for Lilt House, a fictional listening room hosting small acoustic concerts. Choose editoria", + "poster": { + "file": "mobile-poster-fb08d569b3.jpg", + "height": 844 + } + } + ] + }, { "owner": "leonxlnx", "repo": "taste-skill", diff --git a/layers/registry/server/demos/leonxlnx/taste-skill/brutalist-skill/index.html b/layers/registry/server/demos/leonxlnx/taste-skill/brutalist-skill/index.html new file mode 100644 index 00000000..ea65900e --- /dev/null +++ b/layers/registry/server/demos/leonxlnx/taste-skill/brutalist-skill/index.html @@ -0,0 +1,59 @@ + + + + +Signal Yard / Dispatch control + + + + +
+
SIGNAL YARD®
SECTOR / 04Fictional demo
+
+
● FREIGHT CONTROL SYSTEM / VOL. 01

SIGNAL YARD.

Movement, made precise./// DISPATCH CONSOLE
SIMULATION CLOCK / UTC
08:42:16

MON 12 OCT 2026
Authored data. No live operations.

+
Total shipmentsSector 04 / Today
08
In transitMoving through network
03
Ready to dispatchCleared for departure
03
On holdRequires attention
01
+

01 / Shipment register

8 units / authored
Shipment / LoadRouteStatus
Showing 08 of 08Select a unit →
+

02 / Network schematic

SY / CORRIDOR 04
SCHEMATIC · NOT TO SCALE
Fictional freight route networkThe selected shipment route appears in red. Shipment details list its origin and destination.GRID 04 / SIX TERMINALSN ↑
Selected corridorNetwork286 KM

Confirmation required / Simulation only

+
Latest event /08:40 · SY-2084 cleared for dispatch. Bay 03 assigned.
+
+
SIGNAL YARD / FICTIONAL FREIGHT OPERATIONS
ALL SHIPMENTS AND EVENTS ARE ILLUSTRATIVE.DESIGNED FOR MOVEMENT.
REV 01.04 / DEMO ENVIRONMENT
+
DISPATCH AUTHORIZATION / DEMO

Release shipment?

This changes the fictional shipment to In transit. It sends no real dispatch instruction.

 +
SECTOR 04 / DEMO RECORD

Event log.

 +
OPERATOR GUIDE / 01

Read. Select. Release.

Filter or search the shipment register. Select a shipment to inspect its route and load.

Ready shipments can be dispatched after confirmation. Held shipments need clearance and cannot be released in this demo.

Use Tab to reach controls. Use Enter or Space to select. Use Escape to close a dialog.

All data is fictional. Changes last until you reload the page.

 +
+ + + diff --git a/layers/registry/server/demos/leonxlnx/taste-skill/minimalist-skill/index.html b/layers/registry/server/demos/leonxlnx/taste-skill/minimalist-skill/index.html new file mode 100644 index 00000000..d9dae35b --- /dev/null +++ b/layers/registry/server/demos/leonxlnx/taste-skill/minimalist-skill/index.html @@ -0,0 +1,27 @@ + +Margin Notes · Your reading room +
+ +
Your workspace/Reading desk
Make room for a good book.
A LITTLE ROOM FOR READING

Between the lines.

A place for the books you’re reading, and the thoughts that stay.

03BOOKS ON YOUR HORIZON
+
ON YOUR NIGHTSTAND01 / 04
READING

The Creative Act: A Way of Being

Rick Rubin

On paying attention. And making space for possibility.

PAGE 172 OF 432
+ +

Your reading queue

04 BOOKS
    Select a book to open its notes.4 on your shelf
    +

    In the margins

    PERSONAL NOTE
    The Creative Act · Rick Rubin
    Less scrolling. More turning pages.Made for the slow parts of your day.
    +

    A new book on your shelf.

    Something you’re reading, or something for later.

     + + diff --git a/layers/registry/server/demos/leonxlnx/taste-skill/soft-skill/index.html b/layers/registry/server/demos/leonxlnx/taste-skill/soft-skill/index.html new file mode 100644 index 00000000..8cc51fdd --- /dev/null +++ b/layers/registry/server/demos/leonxlnx/taste-skill/soft-skill/index.html @@ -0,0 +1,69 @@ + + + + + + +Lilt House · A room for listening + + + + +
    +
    + + +
    +
    +
    +
    Small room. Full feeling.

    A little closer.A little quieter.

    An intimate room. A voice, a few strings.
    Evenings that stay with you long after
    the last note.

    tucked away in Fitzroy, Melbourne
    +
    +An original line drawing of an acoustic guitar beside a chair in a sunlit listening room. + + + +COME AS YOU ARE. LISTEN AS YOU FEEL. +
    Unplugged. Unhurried. Unforgettable.Est. 2026
    +
    +
    An invitation to be here

    40 seats. No bad ones. Just good listening.

    No big stage. No distance.
    +
    The upcoming sessions · October 2026

    Three evenings.
    A world of feeling.

    Different voices, the same close company.
    Find the evening that speaks to you.

    +
      +
    • 16FRI · OCT
      Acoustic folk · A homecoming

      The quiet between

      Clara Finch & her guitar · Doors 7 pm · Music 7:30 pm

      $32 per seat

      • +
    • 23FRI · OCT
      Soul & strings · Two voices, one room

      Softly, together

      Jules & June · Doors 7 pm · Music 7:30 pm

      $38 per seat

      • +
    • 30FRI · OCT
      Fingerstyle guitar · After dark

      Notes to the night

      Elliot Moss · Doors 7 pm · Music 7:30 pm

      $30 per seat

      • +
    +
    Leave the noise at the door

    There’s a seat for you.

    Bring someone, or just yourself.
    We’ll take care of the evening.

    +

    Clara Finch · Friday, 16 October · 7:30 pm

    02 · Your company
    1

    1 to 6 seats per reservation

    03 · The evening, all in

    $32 AUD · no added fees

    Your seat includes the music and a welcome tea.
    Demo reservation only. No payment or personal details needed.

    +
    +
    +
    A smaller kind of night out

    Less between you
    and the music.

    Made for listening

    A little house with a big love for live music. Forty chairs, warm light, and artists close enough to hear every breath.

    18 Little Napier Lane
    Fitzroy, Melbourne
    Our fictional home, for this demo.

    Make yourself at home

    Doors open at 7 pm. Settle in with a tea before the music starts at 7:30. Evenings run for about 90 minutes.

    All ages welcome. Step-free entry.
    Phones away, ears open.

    +
    +
    lilt house

    Good music. Close company.

    © 2026 Lilt House · A fictional listening room

    +
    + + + From ded965b9f63614fbadac4a0b77939ac9be89ff03 Mon Sep 17 00:00:00 2001 From: Harlan Wilton Date: Thu, 8 Oct 2026 02:50:02 +1100 Subject: [PATCH 2/3] feat(demos): add three recordings and fix sandbox temp files --- layers/registry/server/data/skill-demos.json | 190 ++++++++++++++++++ .../web-design-engineer/index.html | 75 +++++++ .../taste-skill/redesign-skill/index.html | 46 +++++ .../tech-visualizer/index.html | 84 ++++++++ scripts/lib/demo-agent.ts | 3 +- test/fixtures/demo-agent-tmp.ts | 7 + test/unit/demo-agent.test.ts | 10 + 7 files changed, 414 insertions(+), 1 deletion(-) create mode 100644 layers/registry/server/demos/conardli/garden-skills/web-design-engineer/index.html create mode 100644 layers/registry/server/demos/leonxlnx/taste-skill/redesign-skill/index.html create mode 100644 layers/registry/server/demos/yfe404/tech-visualizer/tech-visualizer/index.html create mode 100644 test/fixtures/demo-agent-tmp.ts diff --git a/layers/registry/server/data/skill-demos.json b/layers/registry/server/data/skill-demos.json index 9dccd1d7..2d0469d6 100644 --- a/layers/registry/server/data/skill-demos.json +++ b/layers/registry/server/data/skill-demos.json @@ -1,5 +1,45 @@ { "demos": [ + { + "owner": "aktsmm", + "repo": "agent-skills", + "name": "visualize-as-infographic", + "makes": "diagram", + "authorName": "yamapan", + "sourceUrl": "https://github.com/aktsmm/Agent-Skills/blob/master/visualize-as-infographic/SKILL.md", + "prompt": "Create two colourful 1200x675 infographic patterns explaining a community tool library's four lending rules: reserve one tool, collect with ID, return within seven days, report damage. Use English, dark backgrounds, no signature, no numeric impact claims, and distinct visual directions. Follow the Skill: independent HTML files, render both PNGs, inspect both and fix defects. Also create index.html that embeds both final posters as inline images in a responsive gallery, with a working pattern selector and concise descriptions. Don't ask questions. Make the design calls yourself. Use TypeScript for build tooling if needed. Save the final demo as one self-contained index.html with all CSS and runtime JavaScript inline. Bundle any package code locally. All visible controls must work. It will run in an opaque iframe with sandbox allow-scripts only: no form submissions, storage, popups, or downloads. Use explicit button handlers and in-page results. Support reduced motion, keyboard use, 390px mobile, and 1440px desktop. Verify the important controls in a browser before finishing.", + "agent": "Codex", + "agentVersion": "0.160.1", + "model": "gpt-6.1-sol", + "effort": "medium", + "skillCommit": "e1c4ed13c42e7e28f6c98d1efe355d66a47ea43d", + "recordedAt": "2026-10-07", + "outputFile": "index.html", + "shots": [ + { + "file": "desktop-46c71a94ef.jpg", + "width": 1440, + "height": 2369, + "viewport": "desktop", + "alt": "Desktop screenshot of the page the Agent built for: Create two colourful 1200x675 infographic patterns explaining a community tool library's four lending rules: reserve one", + "poster": { + "file": "desktop-poster-5c45036ac0.jpg", + "height": 900 + } + }, + { + "file": "mobile-44b64e39bd.jpg", + "width": 390, + "height": 1574, + "viewport": "mobile", + "alt": "Phone screenshot of the page the Agent built for: Create two colourful 1200x675 infographic patterns explaining a community tool library's four lending rules: reserve one", + "poster": { + "file": "mobile-poster-40c457b954.jpg", + "height": 844 + } + } + ] + }, { "owner": "anthropics", "repo": "skills", @@ -98,6 +138,46 @@ } ] }, + { + "owner": "conardli", + "repo": "garden-skills", + "name": "web-design-engineer", + "makes": "ui-component", + "authorName": "ConardLi", + "sourceUrl": "https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/SKILL.md", + "prompt": "Build Daybreak Observatory, a fictional volunteer stargazing-session planner. Use an editorial dark astronomical visual direction with an authored star chart and copper accent. Label all observing conditions as illustrative. Show date selection, three session cards, a working participant count, target filter, reservation confirmation, and a hidden Tweaks panel with accent and density controls. Choose your temporary design system; no existing product branding applies. Don't ask questions. Make the design calls yourself. Use TypeScript for build tooling if needed. Save the final demo as one self-contained index.html with all CSS and runtime JavaScript inline. Bundle any package code locally. All visible controls must work. It will run in an opaque iframe with sandbox allow-scripts only: no form submissions, storage, popups, or downloads. Use explicit button handlers and in-page results. Support reduced motion, keyboard use, 390px mobile, and 1440px desktop. Verify the important controls in a browser before finishing.", + "agent": "Codex", + "agentVersion": "0.160.1", + "model": "gpt-6.1-sol", + "effort": "medium", + "skillCommit": "ea45dc563a42042341de36cc11806d8a870a6606", + "recordedAt": "2026-10-07", + "outputFile": "index.html", + "shots": [ + { + "file": "desktop-efb7b9ac74.jpg", + "width": 1440, + "height": 1624, + "viewport": "desktop", + "alt": "Desktop screenshot of the page the Agent built for: Build Daybreak Observatory, a fictional volunteer stargazing-session planner. Use an editorial dark astronomical visual ", + "poster": { + "file": "desktop-poster-5e982269ff.jpg", + "height": 900 + } + }, + { + "file": "mobile-98ca86c9d0.jpg", + "width": 390, + "height": 2853, + "viewport": "mobile", + "alt": "Phone screenshot of the page the Agent built for: Build Daybreak Observatory, a fictional volunteer stargazing-session planner. Use an editorial dark astronomical visual ", + "poster": { + "file": "mobile-poster-3ec3d614f4.jpg", + "height": 844 + } + } + ] + }, { "owner": "echris6", "repo": "motion-video-kit", @@ -420,6 +500,35 @@ "authorName": "Jakub Krehel", "sourceUrl": "https://github.com/jakubkrehel/make-interfaces-feel-better/blob/main/skills/make-interfaces-feel-better/SKILL.md" }, + { + "owner": "jimliu", + "repo": "baoyu-skills", + "name": "baoyu-diagram", + "makes": "diagram", + "authorName": "Jim Liu 宝玉", + "sourceUrl": "https://github.com/JimLiu/baoyu-skills/blob/main/skills/baoyu-diagram/SKILL.md", + "prompt": "Create a professional dark SVG sequence diagram for a fictional parcel-locker pickup. Actors are customer, kiosk, booking service, and locker. Messages are scan pickup code, validate code, valid booking response, unlock locker, door opens, and mark collected. Include invalid-code alternative clearly. Follow the Skill's standalone SVG output and save diagram.svg. Also embed that exact SVG into one responsive index.html, with a readable title and numbered-message legend, for the demo viewer. Do not replace the SVG with generic boxes. Don't ask questions. Make the design calls yourself. Use TypeScript for build tooling if needed. Save the final demo as one self-contained index.html with all CSS and runtime JavaScript inline. Bundle any package code locally. All visible controls must work. It will run in an opaque iframe with sandbox allow-scripts only: no form submissions, storage, popups, or downloads. Use explicit button handlers and in-page results. Support reduced motion, keyboard use, 390px mobile, and 1440px desktop. Verify the important controls in a browser before finishing.", + "agent": "Codex", + "agentVersion": "0.160.1", + "model": "gpt-6.1-sol", + "effort": "medium", + "skillCommit": "6699b802c049d6a165e403250a98477d87000b07", + "recordedAt": "2026-10-07", + "outputFile": "index.html", + "shots": [ + { + "file": "desktop-5a6f8ccb51.jpg", + "width": 1440, + "height": 1309, + "viewport": "desktop", + "alt": "Desktop screenshot of the page the Agent built for: Create a professional dark SVG sequence diagram for a fictional parcel-locker pickup. Actors are customer, kiosk, bookin", + "poster": { + "file": "desktop-poster-87dc351305.jpg", + "height": 900 + } + } + ] + }, { "owner": "justinwetch", "repo": "higagentskills", @@ -665,6 +774,47 @@ } ] }, + { + "owner": "leonxlnx", + "repo": "taste-skill", + "name": "redesign-skill", + "makes": "landing-page", + "authorName": "Leon Lin", + "sourceUrl": "https://github.com/Leonxlnx/taste-skill/blob/main/skills/redesign-skill/SKILL.md", + "prompt": "Audit and redesign the supplied Needlework Repair page as a premium local clothing-repair service. Preserve its repair selector, exact prices ($18 hem, $12 button, $34 zip), and working booking confirmation. Keep vanilla CSS. Capture a before view, then verify those interactions after redesign. Don't ask questions. Make the design calls yourself. Use TypeScript for build tooling if needed. Save the final demo as one self-contained index.html with all CSS and runtime JavaScript inline. Bundle any package code locally. All visible controls must work. It will run in an opaque iframe with sandbox allow-scripts only: no form submissions, storage, popups, or downloads. Use explicit button handlers and in-page results. Support reduced motion, keyboard use, 390px mobile, and 1440px desktop. Verify the important controls in a browser before finishing.", + "setup": "The folder held a plain clothing-repair booking page with a repair selector, price calculation, and booking confirmation.", + "agent": "Codex", + "agentVersion": "0.160.1", + "model": "gpt-6.1-sol", + "effort": "medium", + "skillCommit": "3206dd44fce91412cbfd5b2dbead29fb29a91bb9", + "recordedAt": "2026-10-07", + "outputFile": "index.html", + "shots": [ + { + "file": "desktop-b8d456492b.jpg", + "width": 1440, + "height": 2246, + "viewport": "desktop", + "alt": "Desktop screenshot of the page the Agent built for: Audit and redesign the supplied Needlework Repair page as a premium local clothing-repair service. Preserve its repair s", + "poster": { + "file": "desktop-poster-bbd1d720d4.jpg", + "height": 900 + } + }, + { + "file": "mobile-673d8b9ce1.jpg", + "width": 390, + "height": 2891, + "viewport": "mobile", + "alt": "Phone screenshot of the page the Agent built for: Audit and redesign the supplied Needlework Repair page as a premium local clothing-repair service. Preserve its repair s", + "poster": { + "file": "mobile-poster-ed2e89bd2b.jpg", + "height": 844 + } + } + ] + }, { "owner": "leonxlnx", "repo": "taste-skill", @@ -1159,6 +1309,46 @@ } ] }, + { + "owner": "yfe404", + "repo": "tech-visualizer", + "name": "tech-visualizer", + "makes": "diagram", + "authorName": "Yann", + "sourceUrl": "https://github.com/yfe404/tech-visualizer/blob/main/tech-visualizer/SKILL.md", + "prompt": "Build a precise interactive explainer of breadth-first search called Searchfront. Use a small original graph with six labelled nodes. Show a queue, visited nodes, shortest-path discovery, live start/target selectors, play/pause, step, back, and reset. Make the difference between queued and visited nodes clear. The algorithm must run from input data rather than a canned animation. Don't ask questions. Make the design calls yourself. Use TypeScript for build tooling if needed. Save the final demo as one self-contained index.html with all CSS and runtime JavaScript inline. Bundle any package code locally. All visible controls must work. It will run in an opaque iframe with sandbox allow-scripts only: no form submissions, storage, popups, or downloads. Use explicit button handlers and in-page results. Support reduced motion, keyboard use, 390px mobile, and 1440px desktop. Verify the important controls in a browser before finishing.", + "agent": "Codex", + "agentVersion": "0.160.1", + "model": "gpt-6.1-sol", + "effort": "medium", + "skillCommit": "1995a33c7af638830bb6e2440d6c1d22c59df317", + "recordedAt": "2026-10-07", + "outputFile": "index.html", + "shots": [ + { + "file": "desktop-05d8094e8a.jpg", + "width": 1440, + "height": 1395, + "viewport": "desktop", + "alt": "Desktop screenshot of the page the Agent built for: Build a precise interactive explainer of breadth-first search called Searchfront. Use a small original graph with six la", + "poster": { + "file": "desktop-poster-fc30d6f004.jpg", + "height": 900 + } + }, + { + "file": "mobile-47a19050d3.jpg", + "width": 390, + "height": 1441, + "viewport": "mobile", + "alt": "Phone screenshot of the page the Agent built for: Build a precise interactive explainer of breadth-first search called Searchfront. Use a small original graph with six la", + "poster": { + "file": "mobile-poster-0343a979d6.jpg", + "height": 844 + } + } + ] + }, { "owner": "zarazhangrui", "repo": "frontend-slides", diff --git a/layers/registry/server/demos/conardli/garden-skills/web-design-engineer/index.html b/layers/registry/server/demos/conardli/garden-skills/web-design-engineer/index.html new file mode 100644 index 00000000..35068096 --- /dev/null +++ b/layers/registry/server/demos/conardli/garden-skills/web-design-engineer/index.html @@ -0,0 +1,75 @@ + + + + + + +Plan a night under the stars · Daybreak Observatory + + + + +
    Daybreak
    Community observatory
    A little closer to the cosmos
    +
    +
    The night is for everyone

    Less scrolling.
    More stargazing.

    Trade the everyday for a sky full of possibility.
    Join our volunteers for a night at the eyepiece.

    ↗   Fernwood RidgeAll curious minds welcome
    +
    An imagined field map of the northern skyAn authored circular star chart connects Lyra, Cygnus, and Aquila. This is an illustrative diagram, not a navigation chart.NESW60°30°HORIZONVEGADENEBCYGNUSLYRAALTAIRAQUILAFIELD NOTES / 001
    Illustrative star chart · Looking up, together
    +
    A window into the nightAll observing conditions are illustrative
    Cloud cover12% · Mostly clear
    Moon illumination18% · Crescent
    Seeing4 / 5 · Steady
    A fictional forecast.
    A real sense of wonder.
    +

    Find your night.

    Choose a date. Bring your curiosity. We’ll bring the telescopes.

    01 / Observing sessions
    +
    Participants
    1
    +
    Free, volunteer-led sessions. Equipment provided. No experience needed.3 sessions · Friday, 16 October
    +

    01   Come as you are

    First time looking through a telescope? Perfect. Our volunteers will show you the way.

    02   A few small essentials

    Bring a warm layer, sturdy shoes, and a red-light torch if you have one.

    03   Leave room for wonder

    Meet at the ridge gate 15 minutes early. Take your time. The sky is worth it.

    +
    +
    Daybreak Observatory   /   A fictional place for real curiosity.
    +

    Your night awaits.

    A place at the eyepiece, with your name on it.
    Check your session before you reserve.

    Demo only. No real reservation or personal details.

     +

    Tweaks

    Make this corner of the cosmos yours.

     +
    + + + diff --git a/layers/registry/server/demos/leonxlnx/taste-skill/redesign-skill/index.html b/layers/registry/server/demos/leonxlnx/taste-skill/redesign-skill/index.html new file mode 100644 index 00000000..7a5ae912 --- /dev/null +++ b/layers/registry/server/demos/leonxlnx/taste-skill/redesign-skill/index.html @@ -0,0 +1,46 @@ + + +Needlework Repair · Good clothes. More life. + + + +
    +
    +

    Your local clothing repair studio

    Good clothes.
    More life.

    The jeans you live in. The shirt you love.
    A little care can keep them going.

    Made to be worn. Worth repairing.

    Hands carefully guiding denim through a sewing machine
    Small repairs. Considered details.01 / The work
    +
    Care in every stitchSimple, upfront pricesKeep your favourites in use
    +
    A fresh start for an old favourite

    Small fix.
    Big difference.

    A fallen hem, a missing button, a stubborn zip. Choose your repair and leave the stitching to us.

    Saturday drop-off · Bring your garment with you.

    Book a repair

    One garment at a time

    Shorten a trouser hem for a better fit.

    Estimated price

    $18

    No payment now. We’ll check your garment together at drop-off.

    +

    The repair menu

    Back in your rotation.

    Everyday repairs for everyday favourites.

    +
    01

    Hems, just right.

    Shorten a trouser hem.

    $18
    +
    02

    Buttons, back on.

    Replace a missing button.

    $12
    +
    03

    Zips that zip.

    Replace a broken zip.

    $34
    +

    From your wardrobe, back again

    Easy as
    one, two, three.

    01

    Choose your repair

    Pick the fix your garment needs. See your price before you book.

    02

    Bring it on Saturday

    Drop off your garment. We’ll take a look and talk through the details.

    03

    Wear it again

    We’ll confirm collection at drop-off. Then it’s back to being your favourite.

    +
    needlework repair

    Less replacing. More repairing.

    Photography: Reza Erfanian / Unsplash

    About this demo & privacy

    This demo confirms your repair on this page only. It does not send a booking to a studio.

    We do not collect personal details, use cookies, or save your selection.

    + diff --git a/layers/registry/server/demos/yfe404/tech-visualizer/tech-visualizer/index.html b/layers/registry/server/demos/yfe404/tech-visualizer/tech-visualizer/index.html new file mode 100644 index 00000000..6b445365 --- /dev/null +++ b/layers/registry/server/demos/yfe404/tech-visualizer/tech-visualizer/index.html @@ -0,0 +1,84 @@ + + + + +Searchfront · Breadth-first search + + + +
    Searchfront/
    ● ALGORITHM FIELDNOTES   001
    +
    +
    Graph algorithms / An interactive study

    Explore wide.
    Find the shortest path.

    Breadth-first search explores one layer at a time.
    Follow the queue and see why the first path is the shortest.

    BFS   /   O(V + E)
    +
    +
    +
    01 / The graph6 nodes · 8 edges · undirected
    UnseenQueuedCurrentVisited ✓
    Inspect a node to see its distance and parent.
    +
    +
    +
    +
    00

    queue ← [start]; discovered ← {start}
    while queue is not empty:
      node ← queue.shift(); visit(node)
      if node = target: return path
      for neighbor in sorted neighbors:
       if unseen: discover & enqueue
    +
    The key idea   Fewer edges first. Shortest paths in unweighted graphs.← → step   Space play / pause
    +
    + + + diff --git a/scripts/lib/demo-agent.ts b/scripts/lib/demo-agent.ts index bd8c2ca5..77c82a9f 100644 --- a/scripts/lib/demo-agent.ts +++ b/scripts/lib/demo-agent.ts @@ -12,7 +12,8 @@ export async function runDemoAgent(input: { command: string, args: string[], cwd const stderrLog = createWriteStream(join(input.cwd, 'codex-stderr.log')) const execution = run(input.command, input.args, { cwd: input.cwd, - env: input.env, + // Shell heredocs and renderers must keep temporary files in the writable sandbox. + env: { ...input.env, TMPDIR: input.cwd }, timeout: input.timeout, maxBuffer: 64 * 1024 * 1024, }) diff --git a/test/fixtures/demo-agent-tmp.ts b/test/fixtures/demo-agent-tmp.ts new file mode 100644 index 00000000..515770da --- /dev/null +++ b/test/fixtures/demo-agent-tmp.ts @@ -0,0 +1,7 @@ +import { mkdtemp, rm } from 'node:fs/promises' +import { tmpdir } from 'node:os' +import { join } from 'node:path' + +const folder = await mkdtemp(join(tmpdir(), 'shell-temp-')) +process.stdout.write(folder) +await rm(folder, { recursive: true }) diff --git a/test/unit/demo-agent.test.ts b/test/unit/demo-agent.test.ts index a616dbdd..d9373bce 100644 --- a/test/unit/demo-agent.test.ts +++ b/test/unit/demo-agent.test.ts @@ -15,3 +15,13 @@ describe('runDemoAgent', () => { expect(result.stdout).toBe('input closed') }) }) + +describe('agent temporary files', () => { + it('creates temporary files inside the writable recording folder', async () => { + const cwd = await mkdtemp(join(tmpdir(), 'demo-agent-test-')) + const fixture = fileURLToPath(new URL('../fixtures/demo-agent-tmp.ts', import.meta.url)) + const result = await runDemoAgent({ command: process.execPath, args: [fixture], cwd, env: { ...process.env, TMPDIR: tmpdir() }, timeout: 2000 }) + .finally(() => rm(cwd, { recursive: true })) + expect(result.stdout.startsWith(join(cwd, 'shell-temp-'))).toBe(true) + }) +}) From c45b79a880bbf11a571e679f557a6d528f837654 Mon Sep 17 00:00:00 2001 From: Harlan Wilton Date: Thu, 8 Oct 2026 03:11:42 +1100 Subject: [PATCH 3/3] feat(demos): add diagrams and Three.js recordings --- layers/registry/server/data/skill-demos.json | 80 + .../visualize-as-infographic/index.html | 40 + .../threejs-animation/index.html | 4232 ++++++++++++++++ .../threejs-skills/threejs-shaders/index.html | 4287 +++++++++++++++++ .../baoyu-skills/baoyu-diagram/index.html | 83 + 5 files changed, 8722 insertions(+) create mode 100644 layers/registry/server/demos/aktsmm/agent-skills/visualize-as-infographic/index.html create mode 100644 layers/registry/server/demos/cloudai-x/threejs-skills/threejs-animation/index.html create mode 100644 layers/registry/server/demos/cloudai-x/threejs-skills/threejs-shaders/index.html create mode 100644 layers/registry/server/demos/jimliu/baoyu-skills/baoyu-diagram/index.html diff --git a/layers/registry/server/data/skill-demos.json b/layers/registry/server/data/skill-demos.json index 2d0469d6..f7cd5b14 100644 --- a/layers/registry/server/data/skill-demos.json +++ b/layers/registry/server/data/skill-demos.json @@ -107,6 +107,46 @@ "authorName": "Cathryn Lavery", "sourceUrl": "https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/SKILL.md" }, + { + "owner": "cloudai-x", + "repo": "threejs-skills", + "name": "threejs-animation", + "makes": "game", + "authorName": "CloudAI-X", + "sourceUrl": "https://github.com/CloudAI-X/threejs-skills/blob/main/skills/threejs-animation/SKILL.md", + "prompt": "Build Clockwork Grove, a Three.js animated mechanical garden with original procedural flowers that unfold in a choreographed loop. Use actual Three.js AnimationClip tracks and mixers, with play/pause, speed, bloom phase scrubber, and reset controls. No external model assets. Bundle Three.js inline. Ensure the opening view already shows an interesting scene; include a clear WebGL-unavailable state. Don't ask questions. Make the design calls yourself. Use TypeScript for build tooling if needed. Save the final demo as one self-contained index.html with all CSS and runtime JavaScript inline. Bundle any package code locally. All visible controls must work. It will run in an opaque iframe with sandbox allow-scripts only: no form submissions, storage, popups, or downloads. Use explicit button handlers and in-page results. Support reduced motion, keyboard use, 390px mobile, and 1440px desktop. Verify the important controls in a browser before finishing.", + "agent": "Codex", + "agentVersion": "0.160.1", + "model": "gpt-6.1-sol", + "effort": "medium", + "skillCommit": "945fb8dfd3bb1a0fc1193089ec740ab28bdcc9c5", + "recordedAt": "2026-10-07", + "outputFile": "index.html", + "shots": [ + { + "file": "desktop-e93a839653.jpg", + "width": 1440, + "height": 913, + "viewport": "desktop", + "alt": "Desktop screenshot of the page the Agent built for: Build Clockwork Grove, a Three.js animated mechanical garden with original procedural flowers that unfold in a choreogra", + "poster": { + "file": "desktop-poster-e4d906d754.jpg", + "height": 900 + } + }, + { + "file": "mobile-557a1ee98c.jpg", + "width": 390, + "height": 1002, + "viewport": "mobile", + "alt": "Phone screenshot of the page the Agent built for: Build Clockwork Grove, a Three.js animated mechanical garden with original procedural flowers that unfold in a choreogra", + "poster": { + "file": "mobile-poster-96bcaadc42.jpg", + "height": 844 + } + } + ] + }, { "owner": "cloudai-x", "repo": "threejs-skills", @@ -138,6 +178,46 @@ } ] }, + { + "owner": "cloudai-x", + "repo": "threejs-skills", + "name": "threejs-shaders", + "makes": "game", + "authorName": "CloudAI-X", + "sourceUrl": "https://github.com/CloudAI-X/threejs-skills/blob/main/skills/threejs-shaders/SKILL.md", + "prompt": "Build Chromatic Loom, a Three.js shader toy showing an original undulating fabric surface with woven bands and a luminous edge. Use actual ShaderMaterial vertex displacement and fragment colour, authored GLSL, and working amplitude, weave density, palette, pause, and reset controls. Bundle Three.js inline. Ensure a composed camera view and a clear WebGL-unavailable state. Don't ask questions. Make the design calls yourself. Use TypeScript for build tooling if needed. Save the final demo as one self-contained index.html with all CSS and runtime JavaScript inline. Bundle any package code locally. All visible controls must work. It will run in an opaque iframe with sandbox allow-scripts only: no form submissions, storage, popups, or downloads. Use explicit button handlers and in-page results. Support reduced motion, keyboard use, 390px mobile, and 1440px desktop. Verify the important controls in a browser before finishing.", + "agent": "Codex", + "agentVersion": "0.160.1", + "model": "gpt-6.1-sol", + "effort": "medium", + "skillCommit": "945fb8dfd3bb1a0fc1193089ec740ab28bdcc9c5", + "recordedAt": "2026-10-07", + "outputFile": "index.html", + "shots": [ + { + "file": "desktop-ec605c5301.jpg", + "width": 1440, + "height": 1097, + "viewport": "desktop", + "alt": "Desktop screenshot of the page the Agent built for: Build Chromatic Loom, a Three.js shader toy showing an original undulating fabric surface with woven bands and a luminou", + "poster": { + "file": "desktop-poster-4793ec0b18.jpg", + "height": 900 + } + }, + { + "file": "mobile-982b1ed468.jpg", + "width": 390, + "height": 1451, + "viewport": "mobile", + "alt": "Phone screenshot of the page the Agent built for: Build Chromatic Loom, a Three.js shader toy showing an original undulating fabric surface with woven bands and a luminou", + "poster": { + "file": "mobile-poster-607de95b06.jpg", + "height": 844 + } + } + ] + }, { "owner": "conardli", "repo": "garden-skills", diff --git a/layers/registry/server/demos/aktsmm/agent-skills/visualize-as-infographic/index.html b/layers/registry/server/demos/aktsmm/agent-skills/visualize-as-infographic/index.html new file mode 100644 index 00000000..2dacab0e --- /dev/null +++ b/layers/registry/server/demos/aktsmm/agent-skills/visualize-as-infographic/index.html @@ -0,0 +1,40 @@ +Community tool library · Lending rules
    Community tool library
    The lending guide

    A little care goes a long way

    Borrowing made
    simple.

    Tools for your next project.
    Two colourful guides to the rules
    that keep them ready to share.

    Showing both patterns

    The lending rules

    1. Reserve one tool
    2. Collect with ID
    3. Return within seven days
    4. Report damage
    Good tools. Good neighbours.Take care of what we share.

    Poster preview

     \ No newline at end of file diff --git a/layers/registry/server/demos/cloudai-x/threejs-skills/threejs-animation/index.html b/layers/registry/server/demos/cloudai-x/threejs-skills/threejs-animation/index.html new file mode 100644 index 00000000..2372f837 --- /dev/null +++ b/layers/registry/server/demos/cloudai-x/threejs-skills/threejs-animation/index.html @@ -0,0 +1,4232 @@ + +Clockwork Grove · A mechanical garden
    THE KINETIC CONSERVATORY
    STUDY NO. 001 EST. 2026
    A botanical mechanism

    Clockwork
    Grove

    A little engineering. A little wonder.
    A garden that blooms on borrowed time.

    FIVE BLOOMS · ONE RHYTHM
    PROCEDURAL SPECIMENS
    Brass / porcelain / light
    18-second perpetual cycle
    FIG. 01   /   THE GROVE
    Petals, patiently arranged.
    DRAG TO EXPLORE
    34%
    SEEDUNFOLDBLOOMREST
    Changing the bloom phase pauses the animation. Use arrow keys to change the phase.
    1.0×
    0.25×2×
    Loop runningUnfolding   /   06.2 / 18.0 s

    Grown from geometry. Driven by clockwork.
    No two moments quite the same.

    Nature, reimagined.AN INTERACTIVE STUDY
    diff --git a/layers/registry/server/demos/cloudai-x/threejs-skills/threejs-shaders/index.html b/layers/registry/server/demos/cloudai-x/threejs-skills/threejs-shaders/index.html new file mode 100644 index 00000000..ad53cd3f --- /dev/null +++ b/layers/registry/server/demos/cloudai-x/threejs-skills/threejs-shaders/index.html @@ -0,0 +1,4287 @@ + +Chromatic Loom · A study in motion + +
    Chromatic Loom
    ✳ DIGITAL MATERIAL STUDIES
    +

    Study 001 / Woven light

    Soft surface.
    Infinite possibility.

    A fabric made of light and mathematics.
    Shape its motion. Find your own colour.

    +
    LIVE SHADER / 01In motion
    Chromatic weavePROCEDURAL TEXTILE · NO TEXTURES
    3D SPACE
    +
    +
    01

    Movement, in the vertices

    Layered waves lift every point of the fabric.

    02

    Colour, in the threads

    Warp and weft interlace into shifting bands.

    03

    Light, along the edge

    A luminous hem traces the surface in space.

    CHROMATIC LOOM © 2026Built from waves. Woven with code.
    + diff --git a/layers/registry/server/demos/jimliu/baoyu-skills/baoyu-diagram/index.html b/layers/registry/server/demos/jimliu/baoyu-skills/baoyu-diagram/index.html new file mode 100644 index 00000000..1b3ca235 --- /dev/null +++ b/layers/registry/server/demos/jimliu/baoyu-skills/baoyu-diagram/index.html @@ -0,0 +1,83 @@ + +Parcel · Pickup sequence + + +
    parcelProtocol studio
    Interactive sequence
    +

    FROM CODE TO COLLECTION

    A parcel. A code. An open door.

    Follow a locker pickup, one message at a time.
    See what happens when the code is valid, or when it isn’t.

    04 participants02 outcomesSVG sequence
    +

    Scroll sideways to explore all four participants →

    +Parcel-locker pickup sequence +Four actors: customer, kiosk, booking service, and locker. The customer scans a pickup code. The kiosk validates it. If valid, the kiosk unlocks the locker and marks the booking collected after the door opens. If invalid, the service rejects the code and the kiosk shows an error. The locker stays locked. + + + + + + + + + +alt +[ valid code ] +[ invalid code ] +Locker stays locked + + + + + + +Scan pickup code1Validate code2Valid booking response3Unlock locker4Door opens5Mark collected6Invalid code response3aShow code error4a +CustomerParcel recipientKioskPickup interfaceBooking serviceBooking authorityLockerPhysical compartment +RequestResponse / eventProcessingTime flows ↓ +Parcel-locker pickupSEQUENCE DIAGRAM / 01 +
    FIG. 01   PARCEL-LOCKER PICKUPFICTIONAL SYSTEM · TIME FLOWS DOWNWARD
    +
    +
    ONE PICKUP. FOUR PARTICIPANTS. TWO POSSIBLE OUTCOMES.Designed for clarity, built as SVG.
    + \ No newline at end of file