Web Artifacts Builder
anthropics/skills
Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.
学习助手技能：根据用户已有知识水平，定制化学习新技术/新概念. An agent skill from 312362115/claude.
MITAuto-check passed
Install Learning Companion
$ npx skills add 312362115/claude --skill learning-companion -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install 312362115/claude learning-companion --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/312362115/claude.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/learning-companion .claude/skills/learning-companion && 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 "learning-companion" agent skill from https://github.com/312362115/claude/tree/main/skills/learning-companion into .claude/skills/learning-companion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "learning-companion", 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/312362115/claude/tree/main/skills/learning-companionType 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 312362115/claude --skill learning-companion -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install 312362115/claude learning-companion --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/312362115/claude.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/learning-companion .agents/skills/learning-companion && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "learning-companion" agent skill from https://github.com/312362115/claude/tree/main/skills/learning-companion into .agents/skills/learning-companion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "learning-companion", 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 312362115/claude --skill learning-companion -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install 312362115/claude learning-companion --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/312362115/claude.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/learning-companion .cursor/skills/learning-companion && 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 "learning-companion" agent skill from https://github.com/312362115/claude/tree/main/skills/learning-companion into .cursor/skills/learning-companion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "learning-companion", 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/312362115/claude.git --path skills/learning-companion--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 312362115/claude --skill learning-companion -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install 312362115/claude learning-companion --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/312362115/claude.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/learning-companion .gemini/skills/learning-companion && 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 "learning-companion" agent skill from https://github.com/312362115/claude/tree/main/skills/learning-companion into .gemini/skills/learning-companion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "learning-companion", 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 312362115/claude learning-companionInstalls 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 312362115/claude --skill learning-companion -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/312362115/claude.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/learning-companion .github/skills/learning-companion && 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 "learning-companion" agent skill from https://github.com/312362115/claude/tree/main/skills/learning-companion into .github/skills/learning-companion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "learning-companion", 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 312362115/claude --skill learning-companion -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install 312362115/claude learning-companion --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/312362115/claude.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/learning-companion .opencode/skills/learning-companion && 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 "learning-companion" agent skill from https://github.com/312362115/claude/tree/main/skills/learning-companion into .opencode/skills/learning-companion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "learning-companion", 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
learning-companion- GitHub stars
- 107
- Token cost
- ~567 tokens
- SKILL.md length
- 117 words
- Files
- 1
- Skills in repo
- 20
- Repo updated
- First seen
- Licence
- MIT
At a glance
学习助手技能：根据用户已有知识水平，定制化学习新技术/新概念. An agent skill from 312362115/claude.
- SKILL.md covers 第一步：了解学习者, 第二步：选择教学策略, 第三步：组织内容 and 教学准则, plus 2 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Learning Companion is an agent skill from 312362115/claude. 学习助手技能：根据用户已有知识水平，定制化学习新技术/新概念。 用类比和对比已知领域来解释新概念，而不是从零开始教。 触发词：帮我学一下、这是什么、怎么理解、学习、入门、教我。 触发场景：接触新技术栈、学习新概念、理解不熟悉的架构模式、准备技术分享。 即使用户没有说"学习"，只要意图是"理解一个自己不熟悉的概念/技术"，都应触发此技能。
Its SKILL.md is about 570 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It works with React. The licence is MIT.
Example prompts
- “，只要意图是”
- “/learning-companion”
What it can do on your machine
Read from SKILL.md and the folder at commit 2d4fa49. 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
No scripts in the folder and no shell commands in SKILL.md.
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
Learning Companion loads about 567 tokens when it runs. Until then it costs about 47 tokens; SKILL.md has 117 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 312362115/claude at commit 2d4fa49, republished under its MIT licence (© 312362115). 117 words, ~567 tokens.
Download SKILL.mdSave it as
.claude/skills/learning-companion/SKILL.md (or your agent's skills folder).- name
- learning-companion
- description
- 学习助手技能：根据用户已有知识水平，定制化学习新技术/新概念。 用类比和对比已知领域来解释新概念，而不是从零开始教。 触发词：帮我学一下、这是什么、怎么理解、学习、入门、教我。 触发场景：接触新技术栈、学习新概念、理解不熟悉的架构模式、准备技术分享。 即使用户没有说"学习"，只要意图是"理解一个自己不熟悉的概念/技术"，都应触发此技能。
- version
- 1.0.0
- last_updated
- 2026-04-08
- repository
- https://github.com/312362115/claude
学习助手（Learning Companion）
最好的老师不是知道最多的人，而是最了解学生的人。 本 skill 的核心：先了解你已经知道什么，再用你已知的语言解释未知的东西。
第一步：了解学习者
在开始解释之前，先确认：
| 问题 | 为什么重要 |
|---|---|
| 你已经会什么？ | 用已知类比未知。"你懂 Express？那 Fastify 就像是..." |
| 学习目的 | 了解概念 vs 准备上手 vs 准备分享，深度完全不同 |
| 期望形式 | 要简短概括还是完整教程？ |
如果从 memory 中知道用户背景，直接用，不重复问。比如 memory 记录了"深 Go 经验、新学 React"，就直接用 Go 的类比解释 React。
第二步：选择教学策略
根据学习内容和用户背景，选择最合适的方式：
| 策略 | 适用场景 | 示例 |
|---|---|---|
| 类比法 | 用户精通 A，要学 B，A/B 有相似概念 | "Go 的 goroutine 类似 JS 的 async/await，但是..." |
| 对比法 | 学习相似概念的差异 | "useEffect vs useLayoutEffect：timing 不同..." |
| 渐进法 | 全新领域，无类比基础 | 从最简单的例子开始，逐步加复杂度 |
| 实践法 | 用户偏好动手学 | 给一个最小可运行的例子，边改边学 |
| 溯源法 | 理解设计理念 | "为什么要有 React Hooks？之前用 class 有什么痛点？" |
第三步：组织内容
3.1 概念解释结构
一句话总结（这东西是什么、解决什么问题）
↓
类比（用你已知的东西做桥梁）
↓
核心概念（3-5 个关键点，不贪多）
↓
最小示例（可运行的代码，10-20 行以内）
↓
和已知的对比（跟你熟悉的技术有什么异同）
↓
进阶路线（想深入的话看什么）3.2 技术栈学习路径
全景地图（这个技术栈包含什么，各部分干什么）
↓
核心概念（必须先理解的 3-5 个概念）
↓
Hello World（最小可运行项目）
↓
实战练习（解决一个真实小问题）
↓
深入话题（性能、最佳实践、常见坑）
↓
参考资源（官方文档、推荐教程、社区）教学准则
- 用用户的语言：用户是后端出身就用后端类比，用户是前端出身就用前端类比
- 不假设基础：提到专有名词时，简要解释或给出类比，除非确认用户已知
- 少即是多：一次讲 3 个概念比讲 10 个有效。信息过载 = 没学到
- 代码胜千言：一个 10 行的可运行示例比 3 段文字描述更有效
- 诚实说"这很复杂"：有些东西确实难，不要假装简单。说清楚"这个概念需要时间消化"
- 鼓励提问：解释完后主动问"有没有哪里不太清楚？"
- 不跑题：用户问 React Hooks 就讲 Hooks，不要把整个 React 生态都介绍一遍
常见学习场景
| 场景 | 教学重点 |
|---|---|
| 新框架入门 | 核心理念→和已知框架对比→Hello World→核心 API |
| 新语言入门 | 语法差异对比→类型系统→并发模型→包管理→最小项目 |
| 设计模式 | 解决什么问题→不用会怎样→最小示例→实际代码中的应用 |
| 架构概念 | 为什么需要→解决什么问题→和不用相比的 trade-off→实际案例 |
| 算法/数据结构 | 直觉解释→可视化→伪代码→复杂度分析→何时使用 |
与其他 skill 的关系
接手新项目，不懂技术栈 → learning-companion（学技术栈）
↓
code-walkthrough（理解项目代码）
调研中发现不懂的概念 → learning-companion（学概念）
↓
继续 deep-research© 312362115, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in skills/learning-companion of 312362115/claude.
Open the folder on GitHubat commit 2d4fa49
Compare with similar skills
Learning Companion 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 |
|---|---|---|---|---|---|---|
| Learning Companion this skill312362115/claude | 107 | — | ~567 | Automated safety check: Pass | MIT | |
| Web Artifacts Builderanthropics/skills | 180k | 40 repos | ~769 | Automated safety check: Pass | Apache-2.0 | |
| Vercel Composition Patternssupabase/supabase | 111k | 58 repos | ~726 | Automated safety check: Pass | MIT | |
| React Doctormakeplane/plane | 61k | 12 repos | ~657 | Automated safety check: Pass | AGPL-3.0 | |
| React Router Developmentremix-run/react-router | 57k | 1 repos | ~1.5k | Automated safety check: Pass | MIT | |
| React UI State PatternsChrisWiles/claude-code-showcase | 6.1k | 8 repos | ~1.6k | Automated safety check: Pass | None |
Similar skills
- Official
- Official
Vercel Composition Patterns
supabase/supabase
React composition patterns that scale. An agent skill from supabase/supabase.
React Doctor
makeplane/plane
Scans React code for lint, accessibility, bundle size and architecture issues, reports a health score and checks that changes do not lower it.
React Router Development
remix-run/react-router
Guides work on React Router apps by first identifying whether the app uses Framework, Data or Declarative mode, then loading the matching reference and the installed package docs.
React UI State Patterns
ChrisWiles/claude-code-showcase
Sets patterns for React interfaces: when to show loading spinners or skeletons, how to surface errors, how to disable buttons during async work and how to handle empty lists.
Electron Multi-Process Architecture
iOfficeAI/AionUi
Tells the agent where new code belongs in an Electron multi-process project and which APIs each process may use, with rules for new bridges, services, agents and workers.
More from 312362115/claude
All 20 skills in this repoDiagram
312362115/claude
专业图表生成技能：根据需求自动选择合适的图表类型，生成符合设计规范的 PNG 图表. An agent skill from 312362115/claude.
Deep Research
312362115/claude
深度调研技能：对任意命题进行系统性调研并输出专业研究报告. An agent skill from 312362115/claude.
Preview Md
312362115/claude
MD 文件浏览器预览：GitHub 风格渲染 + 左侧自动目录. An agent skill from 312362115/claude.
Writing
312362115/claude
通用写作技能：以"内容→组件→组合"的方式产出技术文档、产品文档、汇报材料. An agent skill from 312362115/claude.
Code Walkthrough
312362115/claude
代码导读技能：帮助快速理解不熟悉的项目或模块，建立心智模型. An agent skill from 312362115/claude.
DB Review
312362115/claude
数据库代码审查 + Migration 安全检查. An agent skill from 312362115/claude.
Related
Works with
Questions about Learning Companion
What does Learning Companion do?
学习助手技能：根据用户已有知识水平，定制化学习新技术/新概念. An agent skill from 312362115/claude. Learning Companion is an agent skill from 312362115/claude.
How do I install Learning Companion in Claude Code?
Run `npx skills add 312362115/claude --skill learning-companion -a claude-code`. Or copy the skill folder (skills/learning-companion in 312362115/claude) into .claude/skills/learning-companion in your project. Claude Code loads it when a task matches its description.
How do I install Learning Companion in Codex?
Run `npx skills add 312362115/claude --skill learning-companion -a codex`. Or copy the skill folder (skills/learning-companion in 312362115/claude) into .agents/skills/learning-companion in your project. Codex loads it when a task matches its description.
Can I use Learning Companion 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 312362115/claude --skill learning-companion -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/learning-companion, .gemini/skills/learning-companion, .github/skills/learning-companion and .opencode/skills/learning-companion in your project.
What does Learning Companion need to run?
SKILL.md names no scripts, command-line tools or credentials: Learning Companion is instructions for the agent only.
Does Learning Companion 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 Learning Companion 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 Learning Companion use?
Learning Companion 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 Learning Companion use?
About 567 tokens (SKILL.md is roughly 2.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Learning Companion?
Skills that share tags, products or a category with Learning Companion: Web Artifacts Builder (anthropics/skills, 180k stars), Vercel Composition Patterns (supabase/supabase, 111k stars), React Doctor (makeplane/plane, 61k stars) and React Router Development (remix-run/react-router, 57k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Learning Companion?
312362115 (a GitHub user) maintains it in 312362115/claude, which has 107 GitHub stars. The repository holds 20 skills in this directory. The repository was last updated on May 14, 2026.
Source: 312362115/claude on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.