Skip to content

feat(skills): add /skills/demos, grouped by what each Skill makes - #472

Merged
harlan-zw merged 4 commits into
mainfrom
feat/skill-demos-page
Oct 6, 2026
Merged

harlan-zw merged 4 commits into
mainfrom
feat/skill-demos-page

Conversation

@harlan-zw

@harlan-zw harlan-zw commented Oct 6, 2026 •

Copy link
Copy Markdown
Collaborator

🔗 Linked issue

Follows #470 and #471.

❓ Type of change

  • 📖 Documentation
  • 🐞 Bug fix
  • 👌 Enhancement
  • ✨ New feature
  • 🧹 Chore
  • ⚠️ Breaking change

📚 Description

The homepage demo section caps at six, so make-interfaces-feel-better and lemo-opuscar never showed, and there was no room to record more. /skills/demos lists every demo, grouped by what the Skill makes, which is the framing Harlan picked over the work-shaped tracks.

  • Groups. Films and launch videos, Landing pages, UI components, Diagrams and explainers. Each demo now records makes, and shared/demo-groups.ts holds the list, the labels and the order; the recorder requires --makes. GLOSSARY.md notes that a group is not a track.
  • Page. The /skills/trending board shell: its header, a sticky left rail with the groups as compact headings and each demo as avatar, name and author, and one sticky stage that shows the full prompt, the output and the run command. Picking a demo writes ?demo=owner/repo/name without moving the page, and a shared link opens on that demo. On phones the rail comes first and a pick scrolls to the stage.
  • Header. A Skill Demos link after Trending Skills, in the header and the mobile menu.
  • Live output. On this page a page demo shows its real output in the sandboxed frame (sandbox="allow-scripts", served under the CSP sandbox), not a screenshot. Films keep their own aspect ratio, never grow past their rendered width, and shrink to fit the screen; they no longer crop. The prompt label reads "Prompt" everywhere.
  • Homepage. The prompt index moves into DemoIndex and its stage into DemoStage, which the page shares. The homepage keeps a teaser of six with the three films pinned first, and an "All 8 demos" link.
  • Indexing. Admitted in page-admissions.ts for "claude skills examples" (720 searches a month, KD 32, NuxtSEO 2026-10-06), and noindex below six demos. Cull path: remove the admission entry. /skills/** stays out of the pages sitemap under the running SEO experiment, so the homepage link is how crawlers find it.
  • skills-route-policy.ts lists the page, or the middleware would 404 it before the router; the existing filesystem test caught that.

Architecture: shared demo groups feed the registry presenter and the new /skills/demos page, which lists the groups in the BoardShell rail and shows one DemoStage; the homepage teaser renders DemoIndex with the same stage and links the page

🤖 AI disclosure: Harlan Agent Kit modified this description. My AI open-source policy.

The homepage section capped demos at six, so new ones fell off it. /skills/demos lists every demo under Films and launch videos, Landing pages, UI components, and Diagrams and explainers, each a prompt index with a shareable ?demo= link. The homepage keeps a teaser, films pinned first, and links the page. Indexable for "claude skills examples" (720/mo, KD 32), noindex below six demos.
@harlan-zw harlan-zw added the harlan-agent-review Pull request triage requires an adversarial Review. Adding this label manually always forces one. label Oct 6, 2026
@harlan-github-agent harlan-github-agent Bot added harlan-agent-review-required Pull request triage requires an adversarial Review for this head commit. and removed harlan-agent-review Pull request triage requires an adversarial Review. Adding this label manually always forces one. labels Oct 6, 2026
Harlan's review: the trending page's full-width shell and header, the groups as compact headings in the left rail, no descriptions or jump chips, and one stage that shows the full prompt. The stage moves into DemoStage so the homepage teaser and the page share it. Adds Skill Demos to the header and the mobile menu.
@harlan-zw harlan-zw added the harlan-agent-review Pull request triage requires an adversarial Review. Adding this label manually always forces one. label Oct 6, 2026
@harlan-github-agent harlan-github-agent Bot removed the harlan-agent-review Pull request triage requires an adversarial Review. Adding this label manually always forces one. label Oct 6, 2026
…eir frame

Harlan's review: page demos on /skills/demos show the real output in the sandboxed frame instead of a screenshot; films keep their own aspect ratio and never grow past their rendered width; the prompt label reads Prompt.
@harlan-github-agent harlan-github-agent Bot added the harlan-agent-running An Agent holds a Task on this issue or pull request right now. label Oct 6, 2026
@harlan-github-agent

harlan-github-agent Bot commented Oct 6, 2026 •

Copy link
Copy Markdown
Contributor

🤖 MERGED

Harlan Agent Kit posted this automated review. It is not Harlan's personal review or approval. AI open source policy. Last updated: 2026-10-06 14:52 UTC.

GitHub merged this pull request.

  • Logged (30/100): The third film never reaches the homepage teaser, contradicting the pull request's own stated curation. View code
    • Ask an agent to verify and fix this finding
  • Logged (25/100): Browser Back after picking demos changes the URL without updating the shown demo. View code
    • Ask an agent to verify and fix this finding
  • Logged (5/100): The page drifts from the canonical string this same pull request registers in COPY.md. View code
    • Ask an agent to verify and fix this finding
  • Logged (3/100): A misplaced JSDoc leaves the video field undocumented and liveUrl doubly documented. View code
    • Ask an agent to verify and fix this finding

Review completed. No finding above 80/100.

Selected findings run after merge and open separate pull requests.

@harlan-github-agent harlan-github-agent Bot removed the harlan-agent-running An Agent holds a Task on this issue or pull request right now. label Oct 6, 2026
DemoStage reads liveUrl from HomeDemoItem, which the API already sends but the type never declared, so typecheck failed on #472.
@harlan-github-agent harlan-github-agent Bot added the harlan-agent-running An Agent holds a Task on this issue or pull request right now. label Oct 6, 2026
@harlan-zw
harlan-zw merged commit 8b39bff into main Oct 6, 2026
7 checks passed
@harlan-zw
harlan-zw deleted the feat/skill-demos-page branch October 6, 2026 13:20
@harlan-github-agent harlan-github-agent Bot removed the harlan-agent-running An Agent holds a Task on this issue or pull request right now. label Oct 6, 2026
@harlan-github-agent harlan-github-agent Bot removed the harlan-agent-review-required Pull request triage requires an adversarial Review for this head commit. label Oct 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant