Note Skill

SKILL.md

---
name: 学霸笔记
description: 生成手写笔记本风格的单文件 HTML 学习笔记。当用户需要将技术内容、漏洞分析、知识总结等转化为视觉精美的网页笔记时使用。
trigger_words:
  - 学霸笔记
  - 笔记
  - 手写笔记
  - 漏洞笔记
  - 学习笔记
  - 网页笔记
  - HTML笔记
  - note
  - notebook style
---

# 学霸笔记 Skill

生成**手写笔记本风格**的单文件 HTML 学习笔记，视觉模拟真实笔记本：螺旋装订孔、横线纸、胶带、咖啡渍、手写字体、涂鸦装饰。

> **⚠️ 硬性约束（P0 级别，必须遵守）**
> - **禁止使用 emoji 作为任何图标或装饰符号**
> - 所有图标必须使用 **Lucide SVG 图标库**（通过 CSS class 引入，如 `<i class="lucide-bug"></i>`）
> - 包括但不限于：标题前缀、小节图标、便签装饰、涂鸦装饰、日期徽章等
> - 如果需要图标，必须从 `references/components.md` 的 Lucide 图标表中选取

## 适用场景

- 技术笔记、漏洞分析、安全研究记录
- 知识点总结、课程笔记、读书笔记
- 需要"手写感"和"个人风格"的内容呈现
- 社交媒体分享的技术科普内容

## 不适用场景

- 正式报告、商业文档（太随意）
- 需要打印的内容（深色背景浪费墨水）
- 大量表格数据（手写风格不适合密集表格）

---

## 完整工作流

### Step 1 · 需求澄清

如果用户未提供完整内容，需澄清以下问题：

1. **笔记主题**：标题是什么？副标题？
2. **内容大纲**：有哪些章节/知识点？
3. **技术术语**：需要高亮的关键词、代码术语？
4. **视觉元素**：需要哪些组件（流程图、对比框、警告框、代码块等）？
5. **图标主题**：需要哪些装饰图标（bug、锁、代码、AI 等）？使用 Lucide SVG 图标。

### Step 2 · 拷贝模板

```bash
mkdir -p "项目/XXX/notes"
cp "<SKILL_ROOT>/assets/template.html" "项目/XXX/notes/index.html"
```

**立即修改** `<title>` 标签中的占位符 `[必填] 替换为笔记标题`。

### Step 3 · 填充内容

1. **预检**：读取模板的 `<style>` 块，确认所有可用的组件类名。
2. **选择布局**：从 `references/layouts.md` 中选择合适的页面布局。
3. **使用组件**：从 `references/components.md` 中挑选组件（流程图、对比框、攻击链、代码块等）。
4. **添加入场动画**：所有内容元素添加 `write-in` 类和递增的 `animation-delay`。
5. **添加便签**：在关键位置添加 `.side-note` 做旁注提醒。
6. **添加装饰图标**：**必须使用 Lucide SVG 图标**（`<i class="lucide-xxx"></i>`），**绝对禁止使用 emoji**。参考 `references/components.md` 中的图标表。

### Step 4 · 对照检查清单自检

生成后，打开 `references/checklist.md` 逐项检查。

### Step 5 · 本地预览

直接在浏览器中打开生成的 HTML 文件即可预览。

### Step 6 · 迭代

根据用户反馈修改，调整内容、样式、动画延迟等。

---

## 设计原则

1. **手写感第一**：字体用 Kalam/Patrick Hand/Zeyada，模拟真实手写。
2. **纸质质感**：米黄背景 + 横线 + 红色装订线 + 阴影。
3. **装饰克制**：胶带、咖啡渍、涂鸦是点缀，不能喧宾夺主。
4. **颜色编码**：红=警告/强调、蓝=信息/术语、绿=安全/正面、紫=技术/代码。
5. **动画节奏**：`write-in` 动画按内容顺序递增延迟，模拟"边写边出现"。
6. **便签即旁注**：`.side-note` 用于补充说明，旋转角度增加真实感。
7. **单文件输出**：所有 CSS/JS 内联，浏览器直接打开。
8. **禁止 emoji**：不使用 emoji 作为图标。需要图标时，使用 Lucide SVG 图标库（通过 CSS class 引入，如 `<i class="lucide-bug"></i>`）。

---

## 资源文件结构

```
note-skill/
├── SKILL.md                    # 本文件
├── assets/
│   └── template.html           # 基础模板
└── references/
    ├── layouts.md              # 页面布局库
    ├── components.md           # 组件手册
    └── checklist.md            # 质量检查清单
```

**加载顺序**：SKILL.md → 读取模板 → 参考 layouts.md → 参考 components.md → 自检 checklist.md