Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/bartstc/vite-ts-react-template/explaining-codenpx skills add bartstc/vite-ts-react-template --skill explaining-codegit clone --depth 1 https://github.com/bartstc/vite-ts-react-templateWhat it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00038 | $0.00134 |
| Opus 5 | $0.00019 | $0.00067 |
| Sonnet 5 | $0.00008 | $0.00027 |
| Haiku 4.5 | $0.00004 | $0.00013 |
Grade A, and why
explaining-code scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured yesterday.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
This is a copy
95% identical to explain-code — 2 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
What it actually says
When explaining code, always include:
- Start with an analogy: Compare the code to something from everyday life
- Draw a diagram: Use ASCII art to show the flow, structure, or relationships
- Walk through the code: Explain step-by-step what happens
- Highlight a gotcha: What's a common mistake or misconception?
Keep explanations conversational. For complex concepts, use multiple analogies.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- yesterday First seen · 14 lines · 38 tokens per session scan A 2be8eaa67dad
explaining-code is a skill published in the GitHub repository bartstc/vite-ts-react-template (121 stars, last pushed 1mo ago), licensed MIT. It adds 38 tokens to every session and 134 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. It is 95% identical to explain-code, differing in 2 lines, and is treated as a copy.
Other skills, from other repositories
skill-creator
DaleStudy/skills 저장소의 스킬 생성, 수정, 검증 시 사용. 다음 상황에서 활성화: (1) 새 스킬 생성 요청 시, (2) skills/ 디렉토리 내 SKILL.md 파일 수정 시, (3) SKILL.md 변경 검토 또는 리뷰 시, (4) 스킬 frontmatter 또는 메타데이터 작업 시, (5) 'skill', 'SKILL.md', 'frontmatter', 'version', 'metadata', 'review', 'skills/' 키워드가 포함된 작업 시.
menu-migration
Detect and upgrade pre-v8 react-horizontal-scrolling-menu patterns that agents trained on older data still generate: destructured visibleElements/isFirstItemVisible/isLastItemVisible/initComplete (removed v6), Separator items, separatorClassName and getPrevItem/getNextItem (removed v7), the Arrows prop (removed v3)…
demo-create
基于项目中 .vscode/south.code-snippets 定义的 CRUD 模板，快速生成后台管理系统的标准 CRUD 页面代码。该技能根据用户提供的业务模块信息（如模块名称、API路径、字段配置等），自动生成完整的页面文件（Page）、数据模型文件（Model）和 API 接口文件（Api），支持分页列表页面（demoPage）、独立操作页面（demoOptionPage）两种页面模式。.
walkeros-writing-documentation
Use when writing or updating walkerOS documentation - README, website docs, or skills. Covers quality standards, example validation, and DRY patterns.
init-project
初始化整个项目，清除模板自带的示例内容（src/pages/demo、src/pages/content、src/components/Github、src/servers/content、menus/demo 及相关 i18n），并连带删除代码中的 import 与引用。执行时会先以 dry-run 预览将要删除的文件和将要修改的引用，经用户确认后再真正执行。.
frontend-design
Design thinking and decision-making for web UI. Use when designing components, layouts, color schemes, typography, or creating aesthetic interfaces. Teaches principles, not fixed values.