LobeHub Interactive Prototype
lobehub/lobehub
Builds single-file interactive HTML prototypes rendered with the real LobeHub UI components and written as production-style React, so they can later be split into files.
Build an interactive visual course as one self-contained HTML page, one idea per screen.
Install Training Guide
$ npx skills add forefy/.context --skill training-guide -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install forefy/.context training-guide --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/forefy/.context.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/generic-utils/training-guide .claude/skills/training-guide && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "training-guide" agent skill from https://github.com/forefy/.context/tree/main/skills/generic-utils/training-guide into .claude/skills/training-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "training-guide", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/forefy/.context/tree/main/skills/generic-utils/training-guideType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add forefy/.context --skill training-guide -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install forefy/.context training-guide --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/forefy/.context.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/generic-utils/training-guide .agents/skills/training-guide && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "training-guide" agent skill from https://github.com/forefy/.context/tree/main/skills/generic-utils/training-guide into .agents/skills/training-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "training-guide", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add forefy/.context --skill training-guide -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install forefy/.context training-guide --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/forefy/.context.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/generic-utils/training-guide .cursor/skills/training-guide && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "training-guide" agent skill from https://github.com/forefy/.context/tree/main/skills/generic-utils/training-guide into .cursor/skills/training-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "training-guide", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/forefy/.context.git --path skills/generic-utils/training-guide--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add forefy/.context --skill training-guide -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install forefy/.context training-guide --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/forefy/.context.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/generic-utils/training-guide .gemini/skills/training-guide && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "training-guide" agent skill from https://github.com/forefy/.context/tree/main/skills/generic-utils/training-guide into .gemini/skills/training-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "training-guide", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install forefy/.context training-guideInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add forefy/.context --skill training-guide -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/forefy/.context.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/generic-utils/training-guide .github/skills/training-guide && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "training-guide" agent skill from https://github.com/forefy/.context/tree/main/skills/generic-utils/training-guide into .github/skills/training-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "training-guide", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add forefy/.context --skill training-guide -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install forefy/.context training-guide --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/forefy/.context.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/generic-utils/training-guide .opencode/skills/training-guide && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "training-guide" agent skill from https://github.com/forefy/.context/tree/main/skills/generic-utils/training-guide into .opencode/skills/training-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "training-guide", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
training-guide- GitHub stars
- 152
- Token cost
- ~1.3k tokens
- SKILL.md length
- 748 words
- Files
- 3 (incl. references, assets)
- Skills in repo
- 20
- Repo updated
- First seen
- Licence
- MIT
At a glance
Build an interactive visual course as one self-contained HTML page, one idea per screen.
- Works in 5 steps: Pin the subject and the audience. Pull… → Design the concept ladder before writing… → Copy the template and fill it in. Copy… → …
- Teach a subject visually
- SKILL.md covers Workflow, What makes these good (the bar), Design system (fixed, so every… and What if content has mistakes
- Calls python3
What it does
Training Guide is an agent skill from forefy/.context. Build an interactive visual course as one self-contained HTML page, one idea per screen. Use to explain or teach a subject visually, step by step.
Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files, including reference files and assets (for example `references/authoring.md`).
It sits in Frontend & Design, covering HTML artifacts. The repository describes itself as: AI Agent Skills, Goals and Dynamic Workflows for Security Auditing, Pentesting and Research. The licence is MIT.
When your agent uses it
- Teach a subject visually
- Tasks that involve HTML artifacts
Example prompts
- “/training-guide”
Requirements
- Python 3
Workflow steps
5 steps, taken from the first numbered list in SKILL.md.
- Pin the subject and the audience. Pull it from the conversation - the report, code, or
- Design the concept ladder before writing any code. This is the craft. List the ideas in
- Copy the template and fill it in. Copy assets/template.html to a working file (the user's
- Verify before publishing - never ship a lesson you haven't watched run. Serve the file
- Publish and hand off. Publish with the Artifact tool for a shareable URL, and also leave the
What it can do on your machine
Read from SKILL.md and the folder at commit c8ff161. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
python3
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Training Guide loads about 1.3k tokens when it runs, and up to ~3.3k if it reads all its reference files. Until then it costs about 40 tokens; SKILL.md has 748 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from forefy/.context at commit c8ff161, republished under its MIT licence (© forefy). 748 words, ~1,278 tokens.
Download SKILL.mdSave it as
.claude/skills/training-guide/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.- name
- training-guide
- description
- Build an interactive visual course as one self-contained HTML page, one idea per screen. Use to explain or teach a subject visually, step by step.
Training Guide - interactive visual primer
Turn a subject into a self-paced, click-through course: a full-bleed two-column page where a hand-built diagram sits on the left and one idea's explanation sits on the right, advanced with Next / Back / arrow keys. It teaches the way a good tutor does - build the machine one piece at a time, name each term the first time it appears, drop in a trick question to check understanding, and reveal an analogy on demand.
The engine (design system, stepper, diagram helpers, quiz mechanics) already exists in
assets/template.html. Your whole job is content: infer the subject, design the teaching
order, and write the steps array plus one small diagram function per screen. Do not rebuild the
engine.
Workflow
Pin the subject and the audience. Pull it from the conversation - the report, code, or topic in play. If genuinely ambiguous, ask one sentence's worth of clarification (subject + who's learning + how deep). Otherwise infer and proceed; the user can redirect.
Design the concept ladder before writing any code. This is the craft. List the ideas in dependency order and check the golden rule: every term a later screen uses must be taught on an earlier screen. If a "gotcha" or finding screen will say
DeploymentVerifierorECDH, there must be an earlier plain screen that introduces it. A good arc is usually: mechanics (the core moving parts) → the build (what it's for / the features) → the machinery (supporting infrastructure the gotchas will reference) → where it gets tricky (pitfalls, findings, edge cases). Put a quiz after each act.Copy the template and fill it in. Copy
assets/template.htmlto a working file (the user's Desktop or the scratchpad). Then:- Set
CONFIG(brand, title, legend meanings). - Optionally reskin the palette: change the ONE accent colour (
--accent/--accent-ink/--accent-soft) and the neutrals in the CSS:rootblocks to suit the subject's world. Keep--warnand--dangersemantic-only. Design both light and dark. - Replace the example diagram functions with one per concept, built from the
box / wire / lbl / seal / svghelpers (640×300 viewBox). ReusedQuiz()for quiz screens. - Replace the
stepsarray with your ladder. Readreferences/authoring.mdfor the full helper API, the screen-object schema, layout math, and worked examples - read it before writing diagrams so they don't overlap.
- Set
Verify before publishing - never ship a lesson you haven't watched run. Serve the file locally (
python3 -m http.serverin its directory) and open it in the browser tool. Check the console has no errors, then click through: the first screen, a couple of diagram screens (confirm no overlapping labels), a quiz (answer it - correct flags teal, wrong flags red), and the last screen. Fix anything, re-verify. Then stop the server.Publish and hand off. Publish with the Artifact tool for a shareable URL, and also leave the standalone
.htmlon the user's Desktop so they have an offline, dependency-free copy. Give them the link and a short map of the acts.
Show full SKILL.md (260 more words)Show less
What makes these good (the bar)
- One idea per screen. If a screen needs two diagrams to explain, it's two screens.
- Terms are earned, never dropped cold. The single most common failure is a later screen using vocabulary the course never introduced. Walk the ladder and fix every unexplained term.
- The reveal is for intuition, not more facts. The body states the mechanic; the
ahareveal gives the everyday analogy or the "so what". Keep them distinct. - Quizzes are traps that teach. The tempting answer should be the intuitive-but-wrong one; the explanation is where the real lesson lands. 2–4 options, exactly one correct.
- Diagrams show one relationship. Boxes are things, wires are flow, teal = the good/verified path, danger = where it breaks, warn = caution. Don't rainbow it.
- Length matches the subject. A tight concept is ~8 screens; a full system with findings is ~15–22. Self-paced, so thoroughness is fine - but every screen must earn its place.
Design system (fixed, so every course feels like one product)
Two-column full-bleed card; diagram left, reading right, controls pinned bottom. Mono for labels
and eyebrows (the "technical ledger" voice), sans for reading. One accent colour carries
highlight/verified; warn and danger are semantic only. Theme-aware (light/dark) and responsive
(stacks below 900px). All of this is already wired in the template - keep it; reskin only the
accent + neutrals when the subject calls for a different mood.
What if content has mistakes
If you are certain the content you're tutoring about has some mistake, consult with the user before stamping it into the guide, data correctness is important.
© forefy, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 2 other files (references, assets) in skills/generic-utils/training-guide of forefy/.context.
- SKILL.md
- assets/template.html
- references/authoring.md
Open the folder on GitHubat commit c8ff161
Compare with similar skills
Training Guide next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Training Guide this skillforefy/.context | 152 | — | ~1.3k | Automated safety check: Pass | MIT | |
| LobeHub Interactive Prototypelobehub/lobehub | 83k | — | ~1.6k | Automated safety check: Pass | Custom licence | |
| Paperclip Pagepaperclipai/paperclip | 99k | — | ~1k | Automated safety check: Pass | MIT | |
| Openkb Deck NeonVectifyAI/OpenKB | 4.7k | 1 repos | ~4.3k | Automated safety check: Pass | Apache-2.0 | |
| Webhome Homepage Builderwebhtv/webhtv | 1.7k | — | ~3.8k | Automated safety check: Pass | GPL-3.0 | |
| Solo Artifactssolo-agent/solo | 697 | — | ~961 | Automated safety check: Pass | MIT |
Similar skills
Paperclip Page
paperclipai/paperclip
Publish static HTML pages and asset folders to the Paperclip S3/CloudFront page host.
Openkb Deck Neon
VectifyAI/OpenKB
A skill your agent uses when the user asks the openkb chat to make a deck / slide presentation / PPT / slides / 演示稿 / 幻灯片 from their compiled KB content AND wants a dark, high-tech, neon / glow /…
Webhome Homepage Builder
webhtv/webhtv
Build, review, debug, reverse-engineer data sources for, and package FongMi/WebHome custom homepage single-file HTML.
Solo Artifacts
solo-agent/solo
A skill your agent uses when a Solo task or thread should become an interactive, reviewable, self-contained HTML artifact for progress/status, review/decision, or comparison/leaderboard work inside…
Paper2html
QuZhan51496/paper2anything
Convert an academic paper PDF into a publish-ready, self-contained single-page project homepage (a self-contained index.html) — the kind of paper landing page researchers host on GitHub Pages.
More from forefy/.context
All 20 skills in this repoGoogle Docs Audit Reports
forefy/.context
Builds and formats security audit reports in Google Docs through the Docs API, with fixes for index drift, code styling and cross-reference links.
Safe Multisig Governance Audit
forefy/.context
Audits the Safe multisig wallets of DeFi protocols for governance misconfigurations, scoring each against a finding library and producing a severity-ranked report.
Cloud Bucket Exposure Finder
forefy/.context
Turns a company's domains into likely storage bucket names and checks six cloud providers for publicly readable buckets, for authorized security assessments only.
Audit Scope
forefy/.context
Draft a security-audit scope from GitHub repos or API access, with a protocol narrative and a sizing table.
External Enumeration
forefy/.context
Passively map a company's domains, subdomains, DNS ownership, tech stack, and CDNs.
Smart Contract Audit
forefy/.context
Comprehensive smart contract security audit framework with multi-expert analysis.
Related
Categories
Questions about Training Guide
What does Training Guide do?
Build an interactive visual course as one self-contained HTML page, one idea per screen. context. Build an interactive visual course as one self-contained HTML page, one idea per screen.
When should I use Training Guide?
Training Guide fits situations like: teach a subject visually; tasks that involve HTML artifacts.
How do I install Training Guide in Claude Code?
Run `npx skills add forefy/.context --skill training-guide -a claude-code`. Or copy the skill folder (skills/generic-utils/training-guide in forefy/.context) into .claude/skills/training-guide in your project. Claude Code loads it when a task matches its description.
How do I install Training Guide in Codex?
Run `npx skills add forefy/.context --skill training-guide -a codex`. Or copy the skill folder (skills/generic-utils/training-guide in forefy/.context) into .agents/skills/training-guide in your project. Codex loads it when a task matches its description.
Can I use Training Guide in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add forefy/.context --skill training-guide -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/training-guide, .gemini/skills/training-guide, .github/skills/training-guide and .opencode/skills/training-guide in your project.
What does Training Guide need to run?
Going by SKILL.md and its folder, Training Guide needs the command-line tools its instructions call (python3). Our summary lists: Python 3.
Does Training Guide access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Training Guide safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Training Guide use?
Training Guide is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Training Guide use?
About 1.3k tokens (SKILL.md is roughly 5.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 2k tokens, read only when the agent opens those files.
What are the alternatives to Training Guide?
Skills that share tags, products or a category with Training Guide: LobeHub Interactive Prototype (lobehub/lobehub, 83k stars), Paperclip Page (paperclipai/paperclip, 99k stars), Openkb Deck Neon (VectifyAI/OpenKB, 4.7k stars) and Webhome Homepage Builder (webhtv/webhtv, 1.7k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Training Guide?
forefy (a GitHub user) maintains it in forefy/.context, which has 152 GitHub stars. The repository holds 20 skills in this directory. The repository was last updated on October 4, 2026.
Source: forefy/.context on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.