Skip to content

Commit 63f296d

Browse files
harlan-zwharlan-zw
authored
feat(demos): record visual Skills with Codex effort (#565)
1 parent 7433913 commit 63f296d

16 files changed

Lines changed: 1062 additions & 24 deletions

File tree

‎COPY.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ These exact strings. Do not paraphrase them per page.
4646
| 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 |
4747
| Demo stage | Open the demo | guidance only: the demo stage link. On the homepage it opens the demo page; on a demo page it opens the Skill page Demo panel |
4848
| Demo panel | Demo · Prompt · Open live demo · Open in a new tab · Run it yourself · All demos | guidance only: the Skill page Demo panel. "Show screenshots" replaces "Open live demo" while the live output shows. "All demos" opens the demo page. It hides for a Skill page only demo, and while the Skill holds a run check flag |
49-
| 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 |
49+
| Demo provenance | {Agent logo} {model}, {effort} effort | guidance only: the recording line on the Skill page panel and the homepage stage. Screen readers and the title get "Recorded with {agent}, {model}, {effort} effort". Omit effort when the recording has no evidence for it. No date and no GitHub link: the Skill page is where visitors inspect a Skill |
5050
| Demo outdated | Recorded on an older version of this Skill. | guidance only: under the Demo panel when the Skill moved past the recorded commit |
5151
| Home section: changes | Keep up with skill changes. | guidance only: the homepage section heading for watching and the digest |
5252
| Home section: why | What skilld does differently. | guidance only: the homepage Why band heading, after trending. No line under it: the three columns from `HOME_WHY_REASONS` follow directly, each a title, `summary`, and picture. Their skills.sh lines stay on `/vs/skills-sh` |

‎layers/registry/app/components/_SkillDemo.vue‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup lang="ts">
22
import type { SkillDemoView } from '../../server/utils/skill-demos'
33
import { demoPagePath } from '#shared/demo-pages'
4-
import { demoAgentIcon, demoModelLabel } from '#shared/demo-recording'
4+
import { demoAgentIcon, demoRecordingLabel } from '#shared/demo-recording'
55
import SkillDemoShot from './_SkillDemoShot.vue'
66
77
/**
@@ -21,7 +21,8 @@ const { demo, onBoard = true } = defineProps<{
2121
2222
const desktopShot = computed(() => demo.shots.find(shot => shot.viewport === 'desktop') ?? demo.shots[0])
2323
const mobileShot = computed(() => demo.shots.find(shot => shot.viewport === 'mobile' && shot !== desktopShot.value))
24-
const recordedLabel = computed(() => `Recorded with ${demo.agent}, ${demoModelLabel(demo.model)}`)
24+
const recording = computed(() => demoRecordingLabel(demo.model, demo.effort))
25+
const recordedLabel = computed(() => `Recorded with ${demo.agent}, ${recording.value}`)
2526
2627
const live = ref(false)
2728
@@ -40,7 +41,7 @@ const DESKTOP_WINDOW_MEDIA = '(min-width: 48rem)'
4041
<p class="data-label inline-flex items-center gap-1.5" :title="recordedLabel">
4142
<span class="sr-only">{{ recordedLabel }}</span>
4243
<UIcon :name="demoAgentIcon(demo.agent)" class="size-3.5 shrink-0 text-default" aria-hidden="true" />
43-
<span aria-hidden="true">{{ demoModelLabel(demo.model) }}</span>
44+
<span aria-hidden="true">{{ recording }}</span>
4445
</p>
4546
</div>
4647

‎layers/registry/server/data/skill-demos.json‎

Lines changed: 275 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,67 @@
9898
}
9999
]
100100
},
101+
{
102+
"owner": "echris6",
103+
"repo": "motion-video-kit",
104+
"name": "business-motion-film",
105+
"makes": "film",
106+
"authorName": null,
107+
"sourceUrl": "https://github.com/echris6/motion-video-kit/blob/main/business-motion-film/SKILL.md",
108+
"prompt": "Make a 12-second commercial for Mossbridge, a fictional mobile bicycle repair service. The offer is a tune-up at your doorstep, booked in three steps. Use procedural visuals, authored motion, and synthesized audio without paid external generation. Don't ask questions. Make the design calls yourself. Render the final output as film.mp4.",
109+
"agent": "Codex",
110+
"agentVersion": "0.160.1",
111+
"model": "gpt-6.1-sol",
112+
"effort": "medium",
113+
"skillCommit": "255562b04b1e5ecaa4ba98e5c9aa191d5ba7f6fa",
114+
"recordedAt": "2026-10-07",
115+
"video": {
116+
"file": "video-2f3ad8de17.mp4",
117+
"poster": "poster-164c3b325a.jpg",
118+
"width": 1280,
119+
"height": 720,
120+
"durationSeconds": 12
121+
},
122+
"shots": [
123+
{
124+
"file": "poster-164c3b325a.jpg",
125+
"width": 1280,
126+
"height": 720,
127+
"viewport": "desktop",
128+
"alt": "A frame from the video the Agent rendered for: Make a 12-second commercial for Mossbridge, a fictional mobile bicycle repair service. The offer is a tune-up at your do"
129+
}
130+
]
131+
},
132+
{
133+
"owner": "egonex-ai",
134+
"repo": "understand-anything",
135+
"name": "understand",
136+
"makes": "diagram",
137+
"authorName": "EgonexAI",
138+
"sourceUrl": "https://github.com/Egonex-AI/Understand-Anything/blob/main/understand-anything-plugin/skills/understand/SKILL.md",
139+
"prompt": "Analyze the supplied Reedharbour Bookings source files with the understand Skill. Make the knowledge graph explorable, with clickable modules, relationship links, and a detail panel. Don't ask questions. Make the design calls yourself. Keep the generated knowledge graph and save its interactive viewer as one self-contained diagram.html with all CSS, JavaScript, and graph data inline.",
140+
"setup": "The folder held a six-file fictional ferry-booking TypeScript project, with booking, payment, storage, and SMS modules.",
141+
"agent": "Codex",
142+
"agentVersion": "0.160.1",
143+
"model": "gpt-6.1-sol",
144+
"effort": "medium",
145+
"skillCommit": "e3590a2e92fc60e291afb35c52cc7f9c4f2a1e41",
146+
"recordedAt": "2026-10-07",
147+
"outputFile": "diagram.html",
148+
"shots": [
149+
{
150+
"file": "desktop-17d4733927.jpg",
151+
"width": 1440,
152+
"height": 1324,
153+
"viewport": "desktop",
154+
"alt": "Desktop screenshot of the page the Agent built for: Analyze the supplied Reedharbour Bookings source files with the understand Skill. Make the knowledge graph explorable, w",
155+
"poster": {
156+
"file": "desktop-poster-72dfd2e2a2.jpg",
157+
"height": 900
158+
}
159+
}
160+
]
161+
},
101162
{
102163
"owner": "elayadesign",
103164
"repo": "ai-design-skills",
@@ -359,6 +420,46 @@
359420
"authorName": "Jakub Krehel",
360421
"sourceUrl": "https://github.com/jakubkrehel/make-interfaces-feel-better/blob/main/skills/make-interfaces-feel-better/SKILL.md"
361422
},
423+
{
424+
"owner": "justinwetch",
425+
"repo": "higagentskills",
426+
"name": "higagentskills",
427+
"makes": "ui-component",
428+
"authorName": "Justin Wetch",
429+
"sourceUrl": "https://github.com/justinwetch/HIGAgentSkills/blob/main/SKILL.md",
430+
"prompt": "Design a mobile-first Apple-style reading timer for Foxglove, a fictional reading app. Include a session timer, a book picker, daily progress, and accessible working controls. Don't ask questions. Make the design calls yourself. Save it as one self-contained index.html with all CSS and JavaScript inline.",
431+
"agent": "Codex",
432+
"agentVersion": "0.160.1",
433+
"model": "gpt-6.1-sol",
434+
"effort": "medium",
435+
"skillCommit": "1b4c9ecb406b6c30bbeea0c840f5c01310e1eb18",
436+
"recordedAt": "2026-10-07",
437+
"outputFile": "index.html",
438+
"shots": [
439+
{
440+
"file": "desktop-df5c927e93.jpg",
441+
"width": 1440,
442+
"height": 1218,
443+
"viewport": "desktop",
444+
"alt": "Desktop screenshot of the page the Agent built for: Design a mobile-first Apple-style reading timer for Foxglove, a fictional reading app. Include a session timer, a book p",
445+
"poster": {
446+
"file": "desktop-poster-f38a0128d4.jpg",
447+
"height": 900
448+
}
449+
},
450+
{
451+
"file": "mobile-3e5d72ec7e.jpg",
452+
"width": 390,
453+
"height": 1855,
454+
"viewport": "mobile",
455+
"alt": "Phone screenshot of the page the Agent built for: Design a mobile-first Apple-style reading timer for Foxglove, a fictional reading app. Include a session timer, a book p",
456+
"poster": {
457+
"file": "mobile-poster-e84851f5fc.jpg",
458+
"height": 844
459+
}
460+
}
461+
]
462+
},
362463
{
363464
"owner": "larashero3-dotcom",
364465
"repo": "lieflat-charts",
@@ -453,6 +554,37 @@
453554
],
454555
"pin": 2
455556
},
557+
{
558+
"owner": "leonxlnx",
559+
"repo": "cinetic",
560+
"name": "cinetic",
561+
"makes": "film",
562+
"authorName": "Leon Lin",
563+
"sourceUrl": "https://github.com/Leonxlnx/cinetic/blob/main/skills/cinetic/SKILL.md",
564+
"prompt": "Make a 12-second launch film for Brambleline, a fictional night-train booking app. Show choosing a route, a sleeper cabin, and a ticket becoming a moving train. Use code-built visuals and a synthesized soundtrack. Don't ask questions. Make the design calls yourself. Render the final output as film.mp4.",
565+
"agent": "Codex",
566+
"agentVersion": "0.160.1",
567+
"model": "gpt-6.1-sol",
568+
"effort": "medium",
569+
"skillCommit": "04a79d2baedf4957a4134e373f377ee196bf4751",
570+
"recordedAt": "2026-10-07",
571+
"video": {
572+
"file": "video-aa398df5a2.mp4",
573+
"poster": "poster-7a20858818.jpg",
574+
"width": 1280,
575+
"height": 720,
576+
"durationSeconds": 12
577+
},
578+
"shots": [
579+
{
580+
"file": "poster-7a20858818.jpg",
581+
"width": 1280,
582+
"height": 720,
583+
"viewport": "desktop",
584+
"alt": "A frame from the video the Agent rendered for: Make a 12-second launch film for Brambleline, a fictional night-train booking app. Show choosing a route, a sleeper cabi"
585+
}
586+
]
587+
},
456588
{
457589
"owner": "leonxlnx",
458590
"repo": "taste-skill",
@@ -523,6 +655,46 @@
523655
}
524656
]
525657
},
658+
{
659+
"owner": "nicobailon",
660+
"repo": "visual-explainer",
661+
"name": "visual-explainer",
662+
"makes": "diagram",
663+
"authorName": "Nico Bailon",
664+
"sourceUrl": "https://github.com/nicobailon/visual-explainer/blob/main/plugins/visual-explainer/SKILL.md",
665+
"prompt": "Explain how a community seed library lends seeds and records harvest returns. Draw the flow from catalog to checkout, planting, harvest, and restocking, with clickable steps and a seasonal timeline. Don't ask questions. Make the design calls yourself. Save it as one self-contained diagram.html with all CSS and JavaScript inline.",
666+
"agent": "Codex",
667+
"agentVersion": "0.160.1",
668+
"model": "gpt-6.1-sol",
669+
"effort": "medium",
670+
"skillCommit": "0cc6f15452c455a05fb7fceb036d0da31387c69c",
671+
"recordedAt": "2026-10-07",
672+
"outputFile": "diagram.html",
673+
"shots": [
674+
{
675+
"file": "desktop-9768fb23ea.jpg",
676+
"width": 1440,
677+
"height": 1750,
678+
"viewport": "desktop",
679+
"alt": "Desktop screenshot of the page the Agent built for: Explain how a community seed library lends seeds and records harvest returns. Draw the flow from catalog to checkout, pl",
680+
"poster": {
681+
"file": "desktop-poster-0ef77d3ddc.jpg",
682+
"height": 900
683+
}
684+
},
685+
{
686+
"file": "mobile-5a9f2efda5.jpg",
687+
"width": 390,
688+
"height": 2961,
689+
"viewport": "mobile",
690+
"alt": "Phone screenshot of the page the Agent built for: Explain how a community seed library lends seeds and records harvest returns. Draw the flow from catalog to checkout, pl",
691+
"poster": {
692+
"file": "mobile-poster-c5857d8455.jpg",
693+
"height": 844
694+
}
695+
}
696+
]
697+
},
526698
{
527699
"owner": "ntcoding",
528700
"repo": "claude-skillz",
@@ -673,6 +845,77 @@
673845
}
674846
]
675847
},
848+
{
849+
"owner": "shadcn",
850+
"repo": "ui",
851+
"name": "shadcn",
852+
"makes": "ui-component",
853+
"authorName": "shadcn",
854+
"sourceUrl": "https://github.com/shadcn-ui/ui/blob/main/skills/shadcn/SKILL.md",
855+
"prompt": "Build a polished booking panel for Fernhaven, a fictional shared ceramics studio. Show a date selector, kiln shelf sizes, a firing summary, and a confirmation state. Use shadcn components and make the controls work. Don't ask questions. Make the design calls yourself. Bundle the final output as one self-contained index.html with all CSS and JavaScript inline.",
856+
"agent": "Codex",
857+
"agentVersion": "0.160.1",
858+
"model": "gpt-6.1-sol",
859+
"effort": "medium",
860+
"skillCommit": "6cd3f4c65c361ab6554e06a77e6a0af9cf8b6e37",
861+
"recordedAt": "2026-10-07",
862+
"outputFile": "index.html",
863+
"shots": [
864+
{
865+
"file": "desktop-4f96db857d.jpg",
866+
"width": 1440,
867+
"height": 1488,
868+
"viewport": "desktop",
869+
"alt": "Desktop screenshot of the page the Agent built for: Build a polished booking panel for Fernhaven, a fictional shared ceramics studio. Show a date selector, kiln shelf sizes",
870+
"poster": {
871+
"file": "desktop-poster-216a708653.jpg",
872+
"height": 900
873+
}
874+
},
875+
{
876+
"file": "mobile-7a5026f661.jpg",
877+
"width": 390,
878+
"height": 2259,
879+
"viewport": "mobile",
880+
"alt": "Phone screenshot of the page the Agent built for: Build a polished booking panel for Fernhaven, a fictional shared ceramics studio. Show a date selector, kiln shelf sizes",
881+
"poster": {
882+
"file": "mobile-poster-8ca697b4b1.jpg",
883+
"height": 844
884+
}
885+
}
886+
]
887+
},
888+
{
889+
"owner": "tejashmakwana",
890+
"repo": "motionmaxxing",
891+
"name": "motionmaxxing",
892+
"makes": "film",
893+
"authorName": null,
894+
"sourceUrl": "https://github.com/Tejashmakwana/motionmaxxing/blob/main/SKILL.md",
895+
"prompt": "Make a 12-second motion-graphics launch film for Coilpost, a fictional bicycle courier service. Let a curved route line become a wheel, then a delivery confirmation. Use code-built visuals and a synthesized soundtrack. Don't ask questions. Make the design calls yourself. Render the final output as film.mp4.",
896+
"agent": "Codex",
897+
"agentVersion": "0.160.1",
898+
"model": "gpt-6.1-sol",
899+
"effort": "medium",
900+
"skillCommit": "1723d65295c261baad295f9b5d9b6c4d6aeb5631",
901+
"recordedAt": "2026-10-07",
902+
"video": {
903+
"file": "video-4e8843e59b.mp4",
904+
"poster": "poster-700f30d76a.jpg",
905+
"width": 1280,
906+
"height": 720,
907+
"durationSeconds": 12
908+
},
909+
"shots": [
910+
{
911+
"file": "poster-700f30d76a.jpg",
912+
"width": 1280,
913+
"height": 720,
914+
"viewport": "desktop",
915+
"alt": "A frame from the video the Agent rendered for: Make a 12-second motion-graphics launch film for Coilpost, a fictional bicycle courier service. Let a curved route line "
916+
}
917+
]
918+
},
676919
{
677920
"owner": "thebstar",
678921
"repo": "shipreel",
@@ -764,6 +1007,38 @@
7641007
}
7651008
]
7661009
},
1010+
{
1011+
"owner": "vercel-labs",
1012+
"repo": "vgpu",
1013+
"name": "vgpu",
1014+
"makes": "game",
1015+
"authorName": "Vercel Labs",
1016+
"sourceUrl": "https://github.com/vercel-labs/vgpu/blob/canary/skills/vgpu/SKILL.md",
1017+
"prompt": "Build a small interactive WebGPU toy called Prism Pond with vgpu: a glowing field of floating geometric islands, a camera you can orbit, and clickable islands that send coloured ripples across the pond. Use the installed vgpu package docs to implement it. Don't ask questions. Make the design calls yourself. Bundle the final output into one scene.html with all CSS and JavaScript inline. Include a clear WebGPU-unavailable message.",
1018+
"agent": "Codex",
1019+
"agentVersion": "0.160.1",
1020+
"model": "gpt-6.1-sol",
1021+
"effort": "medium",
1022+
"skillCommit": "e21eceeeb9162e452a10329b599099b1466e4087",
1023+
"recordedAt": "2026-10-07",
1024+
"outputFile": "scene.html",
1025+
"shots": [
1026+
{
1027+
"file": "desktop-34bea1dfef.jpg",
1028+
"width": 1440,
1029+
"height": 900,
1030+
"viewport": "desktop",
1031+
"alt": "Desktop screenshot of the page the Agent built for: Build a small interactive WebGPU toy called Prism Pond with vgpu: a glowing field of floating geometric islands, a camer"
1032+
},
1033+
{
1034+
"file": "mobile-f17deaacc1.jpg",
1035+
"width": 390,
1036+
"height": 844,
1037+
"viewport": "mobile",
1038+
"alt": "Phone screenshot of the page the Agent built for: Build a small interactive WebGPU toy called Prism Pond with vgpu: a glowing field of floating geometric islands, a camer"
1039+
}
1040+
]
1041+
},
7671042
{
7681043
"owner": "zarazhangrui",
7691044
"repo": "frontend-slides",

0 commit comments

Comments
 (0)