Repository navigation
feat(registry): add Skill demos to the Skill page and the homepage - #470
Merged
Merged
Conversation
A visitor could not see what a Skill makes before running it. A demo is one recorded run: a fixed prompt, the Agent's output, and how it was recorded. The Skill page shows the prompt, a scrolling full-page screenshot, and a live demo in a sandboxed frame. The homepage lists Skills with demos once three exist. scripts/record-skill-demo.ts records a demo locally with Claude Code and writes it into the repository, so merging the pull request is the human approval. The output page is served under a CSP sandbox and noindex.
VISION principle 1: every surface that shows a Skill names its author and links its source file. Demo cards had neither.
Harlan's review: show the screenshot that fits the device, shorten the recording line to the Agent logo, model, date and commit, make the demo section the first content section, and put author avatars on the cards.
Video Skills render an MP4, so the recorder gives them a sandboxed shell, re-encodes the film small with a poster frame, and can seed the folder with a project. Cards play the video muted on hover or focus; the Skill page shows a player. Adds the show-me demo.
Harlan asked each demo card to say how it was recorded with the Agent logo, the model and the day, and to play film demos. The endpoint already sends agent, model and recordedAt, so the homepage type now reads them. The optional video field matches the shape feat/skill-demos will add. The helpers pick the shot that fits the screen, keep a one-screen phone page whole so a toast at its foot stays in view, and format the model and the film length.
The demo section moves to the top of the homepage, so Harlan wants to compare layouts before one replaces HomeDemos. Each take reads the same HomeDemoItem list: an output grid, a before and after lead with a ledger, a rail of tall page frames, and a prompt index with a stage. Every take names the Skill through SkillCard, so the avatar, author and SKILL.md link match every other embed. Films show a poster and play muted on hover or focus, never on touch screens or under reduced motion. /_playground/home-demos renders all four in development and 404s in production.
Harlan picked take D: the prompts are the menu and the stage shows the picked demo. In the stage a film plays muted as soon as it is on screen, except under reduced motion. Takes A to C and the lab page go.
…g line Harlan's review: drop the Agent output label and the date, since the model is enough; no SKILL.md link on the stage, so visitors inspect a Skill on its page; round the Skill row hover; scroll the prompt list inside the stage height; pin brag to the top.
The client icon bundle lacks lucide volume-x, so the chip logged a failed load each time a film played. The play glyph and the length stay put instead.
harlan-zw
added
the
harlan-agent-review
harlan-github-agent
Bot
added
harlan-agent-review-required
Contributor
🤖 MERGED
GitHub merged this pull request. No material findings were recorded. The pull request closed. |
harlan-github-agent
Bot
removed
the
harlan-agent-running
This was referenced Oct 6, 2026
harlan-github-agent
Bot
removed
the
harlan-agent-review-required
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🔗 Linked issue
None. Follows #463 and the skillry.dev comparison, where Harlan asked for visuals and live demos.
❓ Type of change
📚 Description
A visitor could not see what a Skill makes before running it. This adds demos (new GLOSSARY term): one recorded run of a Skill, with its prompt, the output an Agent made, and the Agent and model that made it.
bragis pinned first.pnpm demo:record owner/repo/skill --prompt "…" --output index.html|film.mp4runs Claude Code headless in a temp folder with the Skill loaded throughnpx skilld run, then writes the demo into the repository. Page Skills get Read, Write and Edit only. Video Skills must run their renderer, so their Bash runs in the Claude Code sandbox: writes stay in the temp folder,~/.ssh,~/.config,~/sitesand similar stay unreadable, and the network reaches only package, code and font hosts. Merging the pull request is the human approval; nothing records into production./api/skill-demoslists demos; the Skill detail response gainsdemo. Output pages are served from/demos/<owner>/<repo>/<name>/liveunderContent-Security-Policy: sandbox allow-scriptsand noindex, so generated code never runs as skilld.dev./demos/**isrobots: false.Seven demos:
bragandhyperframes(videos),frontend-design,diagram-design,emil-design-eng,show-meandmake-interfaces-feel-better(pages). The media adds about 2.5 MB to the repository.lemo-opuscaris still rendering and will follow.Decisions for Harlan:
anthropics/skills/frontend-designis noindex in production but has a demo here.