feat: Skills 渐进式披露机制 — Anthropic SKILL.md 解析器 + 文件加载

2026-06-07 22:51:44 +08:00
parent 513ab249fb
commit e47587f492
14 changed files with 1705 additions and 6 deletions
@@ -0,0 +1,188 @@
+/**
+ * Demo F — 真实 Anthropic Skills（从 SKILL.md 解析）
+ *
+ * 场景：用户请求帮助完成网页应用的 Playwright 测试，
+ * Agent 检测到合适 skill 并建议触发 /webapp-testing。
+ *
+ * 关键展示：
+ *   1. Skills 使用了真实的 Anthropic SKILL.md 格式
+ *   2. parseSkillMarkdown() 解析 YAML frontmatter → SkillItem
+ *   3. SkillsView 渐进式披露 L1→L2→L3，L3 显示原始 SKILL.md body
+ *   4. Agent 以工具调用方式触发 skill
+ *   5. 对话中展示 static_var 展开（日期、用户身份）
+ */
+
+import type { PromptEnvelope } from '../../types/protocol'
+import { getRealSkills } from '../skills-loader'
+
+const now = Date.now()
+
+export const demoF: PromptEnvelope = {
+  version: '1.0',
+  model: 'claude-opus-4-8',
+  messages: [
+    // --- System message: 加载真实 Anthropic skills ---
+    {
+      id: 'f-1',
+      role: 'system',
+      segments: [
+        {
+          kind: 'static_var',
+          name: 'current_date',
+          value: '2026年6月7日',
+          description: '当前对话日期',
+        },
+        {
+          kind: 'system_prompt',
+          content: `你是 Claude，具备 Anthropic Skills 机制的 HCI 研究助手。
+
+你加载了以下从官方 skills 仓库的 SKILL.md 文件解析得到的 skills。
+每个 skill 的 YAML frontmatter（name + description）始终在你的上下文中可用；
+当 skill 被触发时，SKILL.md 的完整 body 会被加载。`,
+          collapsed: true,
+        },
+        {
+          kind: 'skills',
+          description:
+            '以下 skills 来自 Anthropic 官方 skills 仓库，通过 parseSkillMarkdown() 从 SKILL.md 文件解析。name 和 description 取自 YAML frontmatter（L1），body 作为完整指令（L2/L3）。',
+          items: getRealSkills(['webapp-testing', 'pdf', 'doc-coauthoring', 'mcp-builder']),
+          collapsed: false, // 默认展开展示解析效果
+        },
+        {
+          kind: 'tool_overview',
+          items: [
+            {
+              name: 'run_skill',
+              description: '执行一个 Skill',
+              parameters: 'skill_name: string, input: string',
+              schema: {
+                type: 'object',
+                properties: {
+                  skill_name: { type: 'string', description: 'Skill 名称' },
+                  input: { type: 'string', description: '传递给 skill 的输入' },
+                },
+                required: ['skill_name', 'input'],
+              },
+            },
+          ],
+          collapsed: true,
+        },
+      ],
+      timestamp: now - 360000,
+    },
+    // --- User 提出测试需求 ---
+    {
+      id: 'f-2',
+      role: 'user',
+      segments: [
+        {
+          kind: 'static_var',
+          name: 'user_name',
+          value: '小明',
+          description: '当前用户名',
+        },
+        {
+          kind: 'text',
+          content: `我在做一个 HCI 课程项目——一个 React 聊天界面。本地 dev server 在 http://localhost:5173 运行。
+
+我想验证几个功能：
+1. 页面是否正常加载
+2. 场景切换按钮是否响应点击
+3. 右侧的 Protocol Panel 是否正确显示 JSON
+
+能帮我自动化测试一下吗？`,
+        },
+      ],
+      timestamp: now - 300000,
+    },
+    // --- Assistant 识别需求，触发 webapp-testing skill ---
+    {
+      id: 'f-3',
+      role: 'assistant',
+      segments: [
+        {
+          kind: 'text',
+          content: `你的测试需求非常适合用 **/webapp-testing** skill 来处理——它正是为本地 web 应用的 Playwright 自动化测试设计的。
+
+让我触发这个 skill 来生成测试脚本。它来自 Anthropic 官方 skills 仓库，通过 \`parseSkillMarkdown()\` 解析 SKILL.md 的 YAML frontmatter 和 Markdown body：
+
+> **解析结构：**
+> - **L1** — \`name: webapp-testing\` + \`description\`（从 frontmatter 提取）
+> - **L2** — body 摘要（前 10 行 + 统计信息）
+> - **L3** — 完整 SKILL.md 原始内容（点击「查看原始 SKILL.md」展开）`,
+        },
+        {
+          kind: 'tool_call_request',
+          toolName: 'run_skill',
+          arguments: {
+            skill_name: 'webapp-testing',
+            input: 'Test a React chat app at http://localhost:5173. Verify: (1) page loads correctly, (2) demo scenario buttons respond to clicks, (3) the right-side Protocol Panel displays JSON correctly. Use Playwright with the reconnaissance-then-action pattern.',
+          },
+          collapsed: false,
+        },
+      ],
+      timestamp: now - 280000,
+    },
+    // --- Skill 执行结果 ---
+    {
+      id: 'f-4',
+      role: 'assistant',
+      segments: [
+        {
+          kind: 'tool_call_result',
+          toolName: 'run_skill',
+          success: true,
+          result: `[/webapp-testing] 执行完成
+
+→ 启动 Playwright (headless Chromium)
+→ 导航至 http://localhost:5173
+→ 等待 networkidle ... 就绪
+→ 执行侦察（截图 + DOM 检查）
+
+📸 页面截图: /tmp/inspect.png
+
+测试结果:
+  ✅ (1) 页面加载 — 标题 "Prompt Envelope Protocol" 可见，4 个 demo 按钮就位
+  ✅ (2) 场景切换 — 点击「场景 A」→ 对话内容正确更新；点击「场景 C」→ 长文本+文档显示正常
+  ✅ (3) Protocol Panel — 右侧面板显示 OpenAI Format JSON，包含 model/messages/tools 字段
+
+总计: 3/3 测试通过 🎉
+
+建议: 无需修改，界面功能正常。如需添加更多测试（如 Protocol Panel 复制/导出功能），请告知。`,
+          collapsed: false,
+        },
+      ],
+      timestamp: now - 260000,
+    },
+    // --- Assistant 总结 ---
+    {
+      id: 'f-5',
+      role: 'assistant',
+      segments: [
+        {
+          kind: 'text',
+          content: `## 测试结果：全部通过 ✅
+
+\`/webapp-testing\` skill 使用了 **reconnaissance-then-action** 模式：
+
+1. 先截图 + 检查 DOM 获取真实渲染状态
+2. 从渲染结果中识别选择器（而非猜测）
+3. 用发现的选择器执行操作
+
+### 关于 Skills 的 HCI 应用
+
+这个 demo 展示了 **Anthropic Skills 格式的关键优势**：
+
+| 层级 | 内容 | HCI 意义 |
+|------|------|---------|
+| L1 | name + description | **识别**（recognition over recall） |
+| L2 | body 摘要 + 触发条件 | **评估**（用户判断 skill 是否适用） |
+| L3 | 完整 SKILL.md body | **理解**（透明化——用户可审阅完整指令） |
+
+这种设计直接对应 Shneiderman 的 "Overview first, zoom and filter, then details-on-demand" 信息可视化 mantra。`,
+        },
+      ],
+      timestamp: now - 240000,
+    },
+  ],
+}