Claude Academy 学习推荐示例：直接回答后链接至官方 Claude Code 学习入口
项目截图关于这个 Skill
用 React 制作多组件 HTML 产物，处理状态与路由，并通过打包流程交付。需要 Node.js 和原初始化、打包脚本；安装依赖可能需要网络访问。
为什么推荐
适合包含状态、路由或复用界面组件的交互作品，提供 React 与 TypeScript 构建路径，以及打包为独立 HTML 作品的流程。
适合用来做什么
- 制作交互计划看板。
- 制作包含多个视图的交互作品。
- 将界面打包为 HTML 作品。
工作方式
1. 初始化提供的前端项目结构
初始化作品项目，确定交互所需组件与状态。
2. 实现组件状态、路由及界面
使用配套样式和组件工具实现 React 界面。
3. 把应用打包为可分享的 HTML 产物
打包为独立 HTML 文件，并测试目标交互。
示例任务
可以这样描述任务：“为虚构工作坊制作一个可交互的计划看板。”
预览是 SkillHey 为这类任务制作的原创示例，内容为虚构演示；并非 Anthropic 官方截图或 Agent 评测结果。
第二个示例
可以这样描述任务：“制作可随参加人数变化的本地交互式工作坊预算。”
安装单个 Skill 或官方插件
单独安装时，用上方命令把完整目录复制到项目 Skills 根目录，最终入口为 .claude/skills/web-artifacts-builder/SKILL.md。保留引用资料、脚本与素材。
| 命令 | 用途与使用时机 |
|---|---|
/plugin marketplace add anthropics/skills | 在 Claude Code 中注册官方插件市场。 |
/plugin install example-skills@anthropic-agent-skills | 安装官方插件；可能同时包含其他 Skill，具体以插件清单为准。 |
依赖与许可
需要 Node.js 和原初始化、打包脚本；安装依赖可能需要网络访问。
方法文件可免费访问；运行 Agent 或外部服务可能产生相应费用。
再次分发文件前，请查看该 Skill 的 LICENSE.txt。
使用前需要了解
- 需要 Node.js 和原初始化、打包脚本；安装依赖可能需要网络访问。
支持的 Agent
Claude Code
常见问题
这是独立的 Skill 吗？
是。web-artifacts-builder 有自己的 SKILL.md 和目录，同时属于「Anthropic 官方 Skills」专题。
资料与来源
原始资料见下方链接；文中的上手建议由 SkillHey 编辑整理。
