本仓库包含 36 个 Skill，覆盖前端开发、UI 设计、动画、测试、文档、Obsidian、工作流等多个领域。每个 Skill 都是独立的指令集，在对应场景下自动激活。

• 一、前端开发核心
• 二、UI 设计与实现
• 三、测试与质量
• 四、内容创作与文档
• 五、Obsidian 生态
• 六、工具与调试
• 七、开发工作流
• 快速参考

Vue 3.5+ 核心开发指南，覆盖响应式系统、组件通信、生命周期、TypeScript 集成。

核心能力：

• 响应式系统：ref()、reactive()、computed()、watch()/watchEffect()
• 组件通信：defineProps + defineEmits、defineModel()、provide/inject
• 生命周期：onMounted、onUnmounted、onBeforeUpdate 等
• TypeScript 集成：类型推导、泛型组件、类型安全 props

工作流：

新建组件 → <script setup lang="ts"> + ref() 声明状态
复用逻辑 → 提取为 composable（参考 vueuse-functions）
父子通信 → defineProps + defineEmits，v-model 用 defineModel()

相关 Skill： vue-best-practices | vueuse-functions | pinia

Vue + TypeScript 类型安全最佳实践，解决模板报错、props 提取、CSS Modules 等。

核心规则：

Vue 官方状态管理库，支持 Setup Stores、TypeScript、SSR。

工作流：

定义 Store → defineStore('id', () => { ... })
组件中使用 → const store = useCounterStore()
解构保持响应式 → storeToRefs(store)
测试时 mock → @pinia/testing

VueUse 组合式函数决策指南，覆盖 200+ 个常用工具函数。

常用函数：

共 8 个 Skill，按使用顺序排列：

gsap-core (核心引擎) → gsap-timeline (时间线) → gsap-scrolltrigger (滚动)
         ↓
gsap-plugins (插件) | gsap-react/frameworks (框架集成) | gsap-performance/utils (优化)

GSAP 核心动画引擎。单元素动画、缓动函数、stagger、响应式动画。

核心方法： gsap.to() | gsap.from() | gsap.fromTo() | gsap.set()

gsap.to(".box", { x: 100, duration: 1, ease: "power3.out" })
gsap.from(".item", { opacity: 0, y: 20, stagger: 0.1 })

// 响应式 + 减少动画偏好
let mm = gsap.matchMedia()
mm.add("(prefers-reduced-motion: reduce)", () => {
  gsap.set(".box", { x: 100 })
})

多步骤动画编排，控制时间线、label、嵌套。

const tl = gsap.timeline({ defaults: { duration: 0.5 } })
tl.to(".a", { x: 100 }, 0)           // 0秒开始
tl.to(".b", { y: 50 }, "+=0.3")      // 延迟0.3秒
tl.to(".c", { opacity: 0 }, "<0.2")  // 相对上一个

滚动驱动动画，pin、scrub、batch。

gsap.to(".box", {
  scrollTrigger: {
    trigger: ".box",
    start: "top center",
    scrub: true,
    pin: true
  }
})

GSAP 插件系统：Flip、Draggable、SplitText、MorphSVG、DrawSVG。

React/Vue/Svelte 中集成 GSAP。

React：

import { useGSAP } from "@gsap/react"
useGSAP(() => { gsap.to(".box", { x: 100 }) }, { scope: container })

Vue：

onMounted(() => {
  const ctx = gsap.context(() => { gsap.to(".box", { x: 100 }) }, container.value)
})
onUnmounted(() => ctx?.revert())

Vite 6.x 构建工具配置指南。

核心能力： 开发服务器、生产构建、插件系统、环境变量、Library Mode

生产级前端界面设计，避免"AI 感"，追求独特视觉风格。

设计原则： OKLCH 色彩系统 | 独特字体搭配 | 不对称布局 | 有意义的动效

前端界面全面优化工具，包含 23 个子命令，覆盖设计、构建、评估、优化全流程。

impeccable 分为两个核心 Register（寄存器）：

audit 评分维度（0-20分）：

评级标准：

• 18-20：Excellent
• 14-17：Good
• 10-13：Acceptable
• 6-9：Poor
• 0-5：Critical

新建项目：

/impeccable init          # 设置项目上下文
/impeccable shape 首页    # 规划设计
/impeccable craft 首页    # 端到端构建
/impeccable audit 首页    # 检查质量
/impeccable polish 首页   # 最终打磨

优化现有页面：

/impeccable audit 首页    # 发现问题
/impeccable layout 首页   # 修复间距
/impeccable animate 首页  # 添加动效
/impeccable polish 首页   # 最终检查

impeccable 强制禁止以下 AI 常见反模式：

• ❌ 侧边框装饰：border-left/right > 1px 作为卡片装饰
• ❌ 渐变文字：background-clip: text + 渐变背景
• ❌ 玻璃拟态滥用：作为默认装饰
• ❌ Hero-metric 模板：大数字 + 小标签 + 渐变
• ❌ 相同卡片网格：无限重复的卡片
• ❌ 每节上方的小写标签：01/02/03 或 ABOUT/PROCESS
• ❌ 文字溢出容器：标题在不同断点溢出

使用 Pencil MCP 创建工业级 UI 设计稿。

核心能力：

• 设计系统变量：颜色、字体、间距、圆角、阴影
• 可复用组件：Button、Card、Input、Avatar、Badge
• 图标系统：Material Symbols Rounded（不是 Lucide！）
• 图片处理：AI 生成 + Stock 图片

工作流：

1. 设置设计系统变量 → mcp_pencil_set_variables
2. 创建可复用组件 → reusable: true
3. 用 I() 插入组件，U() 更新属性，G() 生成图片
4. 截图验证 → mcp_pencil_get_screenshot

Dify 前端测试规范，Vitest + React Testing Library。

技术栈： Vitest 4.0.16 | React Testing Library 16.0 | jsdom | nock

工作流：

1. 分析复杂度 → pnpm analyze-component <路径>
2. 按复杂度排序 → 工具函数 → Hooks → 简单组件 → 复杂组件
3. 逐个编写测试 → 渲染、Props、交互、边界情况
4. 目标覆盖率 → 函数/语句 100%，分支/行 >95%

测试原则：

• AAA 模式：Arrange → Act → Assert
• 黑盒测试：测试可观察行为
• 单一行为：每个测试验证一个用户行为

测试驱动开发工作流，强制先写测试再实现。

核心原则：

• 测试优先于代码
• 最低 80% 覆盖率（单元 + 集成 + E2E）
• 覆盖所有边缘情况和错误场景

TDD 步骤：

1. 编写用户旅程
2. 生成测试用例（正常 + 边界 + 错误）
3. 运行测试（应该失败）
4. 实现代码使测试通过
5. 重构，保持测试通过
6. 验证覆盖率 >80%

代码审查最佳实践，支持 React/Vue/Rust/TypeScript/Python/Java/C/C++。

工作流：

1. 上下文收集 → PR 描述、改动范围、CI 状态
2. 高层审查 → 架构设计、性能、测试策略
3. 逐行审查 → 逻辑正确性、安全、可维护性
4. 总结反馈 → 标记阻塞/重要/建议级别

零依赖 HTML 演示文稿，支持 PPT 转换。

工作流：

1. 确定模式 → 新建 / PPT 转换 / 优化现有
2. 内容发现 → 用途、页数、内容就绪度
3. 风格探索 → 生成 3 个预览文件
4. 生成完整演示文稿 → 每页适配视口，无滚动
5. 导航支持 → 键盘/触摸/滚轮

Word 文档创建与编辑。

工作流：

新建文档 → 使用 docx-js 库，设置页面尺寸
编辑文档 → 解压 → 编辑 XML → 打包

关键规则： 表格双宽度、DXA 单位、避免 unicode 项目符号

README 最佳实践。

结构： 标题 + 描述 → 徽章 → 安装 → 使用示例 → 配置 → 贡献指南

从代码自动生成文档。

工作流： 识别类型 → 提取信息 → 生成文档 → 添加验证

Next.js 文档更新工作流。

工作流： git diff → 映射改动 → 更新文档 → pnpm lint

从 Git 提交生成更新日志。

工作流： 扫描历史 → 分类 → 翻译为用户语言 → 过滤内部提交

Obsidian 专属 Markdown 语法。

核心语法：

[[笔记名]]                    # 内部链接
[[笔记名|显示文本]]            # 自定义显示
![[图片.png|300]]             # 嵌入内容
> [!note] 标题               # Callout
%%隐藏内容%%                 # 注释
==高亮文本==                 # 高亮

通过命令行操作 Obsidian 仓库。

常用命令：

obsidian read file="笔记名"
obsidian create name="新笔记" content="# 标题"
obsidian append file="笔记名" content="追加内容"
obsidian search query="关键词" limit=10
obsidian daily:append content="- [ ] 任务"
obsidian property:set name="status" value="done"

开发调试：

obsidian plugin:reload id=my-plugin
obsidian dev:errors
obsidian dev:screenshot path=screenshot.png

数据库视图（.base 文件），类似 Notion 数据库。

工作流：

1. 创建 .base 文件，定义 YAML 结构
2. 设置 filters 筛选笔记
3. 定义 formulas 计算字段
4. 配置 views（table/cards/list/map）

示例：

filters:
  and:
    - file.hasTag("task")
formulas:
  days_until_due: 'if(due, (date(due) - today()).days, "")'
views:
  - type: table
    name: "待办任务"
    order: [file.name, status, formula.days_until_due]

可视化画布（.canvas 文件），思维导图、流程图。

工作流：

1. 创建 .canvas 文件 → {"nodes": [], "edges": []}
2. 添加节点 → text/file/link/group
3. 添加边 → fromNode → toNode
4. 验证 → ID 唯一、边引用有效

节点类型：

Obsidian 插件开发模式（TypeScript）。

核心模式：

浏览器调试、性能分析、自动化。

工作流：

元素定位 → take_snapshot 获取 uid → click(uid) / fill(uid)
错误排查 → list_console_messages + list_network_requests
性能分析 → performance_start_trace → performance_analyze_insight

从网页提取干净内容（去广告、去导航）。

使用：

defuddle parse <url> --md           # Markdown 输出
defuddle parse <url> --md -o out.md # 保存文件
defuddle parse <url> -p title       # 提取标题

检查 UI 是否符合 Web Interface Guidelines。

工作流：

1. 从 GitHub 获取最新指南
2. 读取指定文件
3. 逐条检查规则
4. 输出 file:line 格式的问题列表

本仓库包含一系列通用开发工作流 Skill，作为开发实践的最佳实践指南：

这些工作流文件是通用指南，不需要特定触发词，可在相应场景下参考使用。

vue (组件开发)
  ├── vue-best-practices (TypeScript 类型问题)
  ├── vueuse-functions (组合式函数)
  ├── pinia (状态管理)
  └── vite (构建配置)

gsap-core (基础动画)
  → gsap-timeline (多步骤编排)
  → gsap-scrolltrigger (滚动驱动)
  → gsap-plugins (高级效果)
  
gsap-react / gsap-frameworks (框架集成)
gsap-performance / gsap-utils (性能优化)

评估 → audit / critique
  ↓
优化 → layout / animate / colorize / typeset
  ↓
精炼 → polish / bolder / quieter / distill
  ↓
生产 → harden / onboard

tdd-workflow (TDD 流程)
  → frontend-testing (具体测试实现)
  → code-review-excellence (代码审查)

1. 在仓库根目录创建文件夹：skill-name/
2. 创建 SKILL.md 文件，包含：
   • name：Skill 名称
   • description：描述和触发条件
   • 详细说明和使用示例
3. 如有参考文档，放在 reference/ 子目录
4. 更新本 README 的快速参考表

---
name: skill-name
description: "描述和触发条件"
---

# Skill 标题

## 何时使用

## 工作流

## 示例

## 参考

各 Skill 遵循其各自的许可证声明。未特别说明的遵循 Apache 2.0 许可证。