# 交互课程+学习目标Skill

**Repository Path**: XTDqq0613/Interactive-Doc-Course-Claude-Skill

## Basic Information

- **Project Name**: 交互课程+学习目标Skill
- **Description**: 把任意学习目标生成一个可运行的交互式文档教程网站。这个 Skill 会让 Claude 先确认学习目标和深度，再基于 React/Vite 模板逐章生成课程内容，适合用来制作自学教程、入门课程、技术文档式课程网站。
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-06-17
- **Last Updated**: 2026-06-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Interactive Doc Course Claude Skill

把任意学习目标生成一个可运行的交互式文档教程网站。这个 Skill 会让 Claude 先确认学习目标和深度，再基于 React/Vite 模板逐章生成课程内容，适合用来制作自学教程、入门课程、技术文档式课程网站。

![图示1](https://raw.giteeusercontent.com/XTDqq0613/Interactive-Doc-Course-Claude-Skill/raw/master/d26cff4b-6859-475e-9c5c-09da73fe6ffa.png?metadata=eyJyIjoibWFzdGVyIiwiZnAiOiJkMjZjZmY0Yi02ODU5LTQ3NWUtOWM1Yy0wOWRhNzNmZTZmZmEucG5nIiwidWlkIjoxMzQ5ODEwOCwicGlkIjo0ODU2MTYwNywic3RvIjoiZ2l0LXNoYXJkaW5nLXN0by0xMHQtMDQ0IiwicnAiOiJyZXBvcy9iZC8wYy9iZDBjMWMwZDNmYjJhMmUwOWEyMTA1Y2YzYWEwMDM4Yjg5ZjMyMTEzYjMxYTViNjRiYzY1OTdhNDFmNmUzOWViLmdpdCIsImlzcCI6dHJ1ZSwiZXhwaXJlX2F0IjoxNzgxNzE0NDAwfQ&signature=sH911lwqw7re4auuA48qg_5gS6Igyd-YJwO308S1oss)

## 适合谁使用

- 想让 Claude 为某个主题生成完整学习网站的用户
- 想把课程内容做成左侧章节导航、右侧文档正文的交互式页面
- 想在教程中包含代码示例、练习、小测验、总结、标签笔记和 AI 助手

示例提示词：

```text
我想学习 React Hooks，帮我生成一个交互式教程网站
```

```text
给我做一个 Python 入门课程网站，适合零基础用户
```

```text
生成一个 TypeScript 基础到进阶的文档式教程
```

## 安装方式一：Claude.ai 上传

适合 Claude 网页版或桌面端用户。

1. 打开本仓库的 Releases。
2. 下载 `interactive-doc-course.zip`。
3. 打开 Claude。
4. 进入 `Customize > Skills`。
5. 点击创建或上传 Skill。
6. 选择刚下载的 `interactive-doc-course.zip` 并启用。

注意：推荐下载 Releases 里的 `interactive-doc-course.zip`，不要直接使用 Gitee 的“下载源码 ZIP”。源码 ZIP 通常会多包一层目录，可能导致 Claude 无法正确识别 Skill。

## 安装方式二：Claude Code

适合本地使用 Claude Code 的用户。

macOS / Linux:

```bash
mkdir -p ~/.claude/skills
git clone https://gitee.com/<你的用户名>/interactive-doc-course.git ~/.claude/skills/interactive-doc-course
```

Windows PowerShell:

```powershell
New-Item -ItemType Directory -Force "$HOME\.claude\skills" | Out-Null
git clone https://gitee.com/<你的用户名>/interactive-doc-course.git "$HOME\.claude\skills\interactive-doc-course"
```

安装后，可以直接对 Claude 说：

```text
我想学习 React Hooks，帮我生成一个交互式教程网站
```

或者在 Claude Code 中显式提到：

```text
使用 interactive-doc-course 这个 Skill，帮我生成一个机器学习入门教程网站
```

## 本地依赖

这个 Skill 生成的网站基于 React、Vite 和 Node.js。使用生成结果前，请确保本机已安装：

- Node.js
- npm

生成课程网站后，通常在生成目录中运行：

```bash
npm install
npm run dev
```

## 重新打包发布

如果你修改了 `SKILL.md` 或模板文件，可以在仓库根目录运行：

```powershell
powershell -ExecutionPolicy Bypass -File .\tools\package-skill.ps1
```

脚本会生成：

```text
dist/interactive-doc-course.zip
```

这个 ZIP 可以直接上传到 Claude 的 Skill 管理页面，也可以作为 Gitee Release 附件发布。

## 仓库结构

```text
interactive-doc-course/
├── README.md
├── SKILL.md
├── scripts/
│   └── course-template/
└── tools/
    └── package-skill.ps1
```

其中：

- `SKILL.md` 是 Claude 识别 Skill 的核心文件。
- `scripts/course-template/` 是生成交互式教程网站时复制使用的 React/Vite 模板。
- `tools/package-skill.ps1` 用于生成可直接上传 Claude 的 ZIP 包。

## 安全说明

- 导入 Skill 前建议检查 `SKILL.md` 和 `scripts/` 目录内容。
- 不要在 Skill 或模板中预填真实 API Key。
- 模板中的 AI 助手配置应由最终用户在本地填写。