Skill: cursor-animated-sites

Build a single-file, self-contained HTML walkthrough that animates a cursor over a folder tree, step by step. It is a LAYER on top of /docs-site-macos — reuse that skill's glass design system (background plane, glass tiers, scrollbar, fonts, ripple, output path llmwiki/html/DDMMYY-<slug>.html, auto-host). This skill ADDS the interactive walkthrough.

Inherit docs-site-macos's Accessibility & Document Head section too — <meta viewport> + <title>/description, inline favicon, :focus-visible ring on the ⏮/⏭/▶ controls, and the global prefers-reduced-motion guard (rule 11 already skips the walkthrough animation; the guard also stills the cursor/typewriter). Do NOT ship the page without viewport meta or its responsive grid breaks on mobile.

WHAT

Purpose và context

• Purpose: build a single-file, self-contained HTML walkthrough (layer on /docs-site-macos) where a gutter cursor moves controller→file step by step, files type in when created, nodes are colored by role, with manual step and auto-play modes and a per-frame caption.
• Trigger (when to use):
  • Explaining a lifecycle (install → configure → run), a sequence, or a data-flow.
  • Any "how does X work, step by step" where the viewer needs to SEE which file each action reads/writes and in what order.
  • Trigger words: "hoạt họa", "con trỏ chạy", "life cycle", "từng bước", "transcript", "minh hoạ cây thư mục", "/cursor-animated-sites".
• Non-goals: does not redefine the glass design system (background plane, glass tiers, scrollbar, fonts, ripple, output path, auto-host) — reuse /docs-site-macos; this skill only ADDS the interactive walkthrough.