Summary

Landing-site site/index.html terminal demo previously played one canonical flow ("one ticket, start to finish") on autoplay. With the v1.2.0 skill surface expansion (4 new skills, 8+ new hooks), one flow no longer represents the framework's breadth.

This PR adds tabs to the terminal chrome — four flows that auto-cycle (or visitors can click directly):

1. one ticket — existing flow, content unchanged
2. /handover — adopt an external repo into the portfolio
3. /setup — first-run framework bootstrap on a fresh fork
4. /fan-out — spawn 3 parallel agents on independent tickets

Auto-advance: on completion of the active tab's script, the demo pauses ~1.8s, then advances to the next tab. Loops at the end. The user can interrupt by clicking any tab or hitting Replay (which restarts the active tab).

Hero metrics also corrected to current reality alongside the PR #161 fix that catches the same numbers in CLAUDE.md / CHANGELOG.md:

• Skills: 32 → 39
• Hooks: 18 → 24

Refs me2resh/apexyard#160 — the release ticket bundles "release v1.2.0" and "landing-site refresh"; this PR delivers the site half. The release-tag half follows once #159 (testing) is closed and #161 (voice + counts bundle) is merged.

Implementation notes

• HTML chrome — single title span replaced with a role="tablist" of 4 buttons. Each tab carries data-tab=<idx> for the JS dispatcher. Aria semantics: role="tab", aria-selected. Tabs are keyboard-focusable and clickable. Tab strip scrolls horizontally on narrow viewports.
• CSS — new .shell-demo__tabs flex container + .shell-demo__tab button with an accent underline on is-active. Mobile-responsive padding + font-size at max-width: 720px.
• JS — refactored the existing IIFE from one script array to an array of four. New setActiveTab(idx) updates ARIA state. play(idx) takes a tab index. End-of-script auto-advances to (idx + 1) % N unless the user clicked away during the pause window. Added a new cmd type for slash-command invocations (renders with the same > prompt prefix as you).
• prefers-reduced-motion — JS still bails early; the static seed at body-init shows tab 0's content as the no-animation fallback. Same behaviour as before, just clearer about which flow it represents.
• No JS bundler / build step added — keeps with the framework's static-only landing-site convention. The whole change is one HTML file edit (270+ inserts, 87 deletes).

Testing

• JS syntax — awk '/multi-tab shell animation/,/})\(\);$/' site/index.html | node --check → clean.
• HTML balance — <div\b open/close count: 0 delta. <script> open/close: balanced.
• Static seed fallback — body still seeded with tab 0's content; verified with grep against the post-edit file.
• Hero metric counts match reality — ls .claude/skills/*/ | wc -l = 39 ✓; ls .claude/hooks/*.sh | grep -v _lib- | wc -l post-chore(#157): remove voice-prompts feature + correct hook/skill counts #161 = 24 ✓.
• Visual + behaviour smoke (manual) — open site/index.html in a browser:
  • Tab 0 plays on load (canonical one-ticket flow)
  • Auto-advances to tab 1 (/handover) after ~1.8s pause
  • Auto-advances to tab 2 (/setup), tab 3 (/fan-out), then loops back to tab 0
  • Click tab 2 mid-flow → jumps to /setup, restarts that tab from line 1
  • Click Replay on the active tab → restarts that tab from line 1
  • Mobile viewport: tab strip scrolls horizontally if the labels overflow

Glossary

🤖 Generated with Claude Code