An agent skill for Cursor, Claude Code, Windsurf, OpenClaw, and similar hosts: point it at an Agent Skill repo on GitHub and get a single self-contained HTML that traces the UI/UX path—what you do in the product vs what the host and model load next. Meant for learning and orientation, not for turning an app codebase into a shipped web product.
Who is it for? Vibe coders and anyone on GitHub who wants to see where to install, what triggers the skill, and which files load in what order. READMEs are often high-level while real entrypoints sit under hooks, references/, or subcommands—this page is one scrollable map instead of many small Markdown hops.
中文：README.zh-CN.md · Repository: YeJe-cpu/web-learning-github
Below, a single-page example built from titanwings/colleague-skill (web/colleague-skill-prototype-gold.html). Media layout: (1) a static PNG of the top of the page—project title, avatar, stars, blurb, plus the upper half of the component-path strip; (2)–(3) are GIFs for component path and Simulator interactions. English / 中文 in the same file.
Asset 1 (PNG): top of the viewport—name, avatar, stars, intro, and a partial view into the component path area.
Asset 2 (GIF): full component path strip—stepping, controls, side notes.
Asset 3 (GIF): Simulator tab—stepped bubbles for post-install chat flow.
| Block | What you see | What you get from the full HTML (worth opening) |
|---|---|---|
| Hero | Title, reading order | Know in seconds whether to follow the path first or the long copy—less guessing. |
| Meta | Stars, forks, link | Instant “this is the repo I meant.” |
| Component path | Flow SVG, rails, step controls, side notes | The spine: trigger → branches/steps → disk, like scrubbing a timeline—easier to follow than a wall of README prose. |
| Learn | Long sections, lists | Background, install, and limits in one continuous read for people who want the full picture once. |
| Simulator | Bubble steps | How a real session might sound after install—less imagination tax. |
| Deep dive | Heavy Q&A, caveats | Permissions, deps, and how this differs from “todo-only” tools—cheap failures here before you commit in production. |
| After install | Foldable checklist | Aligned with component path and simulator so you can execute in order. |
| Tree + bullets | File tree, README-style bullets | Where artifacts land and how the author sells the project—last glance before you try or fork. |
Full interactive page: git clone this repo → open web/colleague-skill-prototype-gold.html in a browser and click through / switch tabs. Another reference page, web/lark-minutes-tasks-walkthrough.html, is for a different product story—clone locally to open it; this README does not include a second set of images for it.
- Copy this repo (or only the
web-learning-githubfolder) into your host’s skills directory. - In chat, paste the target skill’s GitHub URL and say you want this skill (Web Learning GitHub) to generate that one-page walkthrough.
| Host | Typical path |
|---|---|
| Cursor | e.g. .agents/skills/web-learning-github/ |
| Claude Code | e.g. ~/.claude/skills/web-learning-github/ |
| Windsurf | follow current product docs |
| OpenClaw | e.g. ~/.openclaw/skills/ — Skills |
You might say: “Repo is https://github.com/someone/some-skill — use Web Learning GitHub to give me one self-contained HTML that explains install, trigger, and file order.” Add “bilingual EN/中文 on the page” if you need a language toggle.
Agents follow SKILL.md, SKILL.zh-CN.md, and references/. After cloning this bundle, the usual output path is web/<owner>-<repo>.html (one target repo → one file unless you agree otherwise).
web-learning-github/
├── SKILL.md
├── SKILL.zh-CN.md
├── references/
├── assets/ # README screenshots & GIFs
├── web/
│ ├── colleague-skill-prototype-gold.html # colleague-skill demo (titanwings/colleague-skill)
│ ├── lark-minutes-tasks-walkthrough.html # other reference scenario (lark-minutes-tasks)
│ └── .gitkeep
├── README.md
├── README.zh-CN.md
├── LICENSE
└── CONTRIBUTING.md # notes for people who edit this skill repo
See references/README.md for references/.
MIT — see LICENSE.