s2-docs

用途

Spectrum 2 Docs（s2-docs）是一个文档查询技能，用于在使用 React Spectrum（RSP）或 Spectrum Web Components（SWC）构建界面时，查找 Spectrum 2（S2）组件的官方文档、设计指南与使用模式。其核心目标是在建议任何 Spectrum 组件或模式之前先获取权威 S2 文档，从而避免常见的“凭感觉写代码”错误，例如选错变体、硬编码尺寸、以分隔线优先的布局、遗漏必填属性等。

主要能力

该技能通过一个 lookup.js 脚本提供多种查询命令：

• 获取特定组件文档（在编写任何 RSP/SWC 代码前使用）： node ${CLAUDE_SKILL_DIR}/scripts/lookup.js get <component-name>
• 按用例查找组件： node ${CLAUDE_SKILL_DIR}/scripts/lookup.js use-case "<phrase>"
• 按名称搜索： node ${CLAUDE_SKILL_DIR}/scripts/lookup.js search <query>
• 列出某个分类下的所有组件（分类包括 actions、containers、feedback、inputs、navigation、status）： node ${CLAUDE_SKILL_DIR}/scripts/lookup.js list --category <category>

使用方式

在 Cursor 中使用时，由于 Cursor 不支持内联 shell 注入，需显式使用 Bash 并加上 --cursor 参数以获得精简、带分隔符的输出：

• node ${CLAUDE_SKILL_DIR}/scripts/lookup.js get <component-name> --cursor
• node ${CLAUDE_SKILL_DIR}/scripts/lookup.js use-case "<phrase>" --cursor

推荐工作流：

1. 确定用户需要的组件——如果不确定，使用 use-case 或 search。
2. 对每个相关组件使用 get <name> 获取文档。
3. 阅读“Component options”表格——注意变体、尺寸、必填属性。
4. 在编写代码前应用反漂移检查清单。

反漂移检查清单

获取文档后，需对照以下各项验证每一条建议：

• 正确的组件——例如 ComboBox（自由输入 + 自动补全）与 Picker（仅选择）、ActionButton 与 Button 等。
• 正确的变体——不要默认使用 accent；应匹配用例（primary、secondary、negative）。
• 无硬编码尺寸——使用 Spectrum 尺寸令牌，而非 px 值。
• 间距优先分组——S2 使用间距来分隔内容，而非分隔线。
• 必填属性齐全——例如所有输入组件上的 label，必填时的 necessityIndicator。
• 静态颜色使用正确——仅在放置于自定义背景上时使用。

关键 S2 设计决策（速查）

• Button 变体：accent = 主要 CTA（每屏最多 3 个）；primary = 中等强调；secondary = 低强调；negative = 破坏性操作。
• ActionButton 与 Button：ActionButton 紧凑且以图标为中心，适用于工具栏；Button 用于主要流程。
• ComboBox 与 Picker：ComboBox 允许自由文本 + 自动补全；Picker 仅支持选择。
• 间距优于分隔线：S2 用间距取代分隔线作为主要分组机制。
• 尺寸令牌：始终使用 size="S|M|L|XL" 属性，绝不硬编码 px。

适用场景

适用于使用 React Spectrum 或 Spectrum Web Components 进行界面开发时，需要查询 S2 组件文档、设计指南与使用模式的场景，尤其适合在编写组件代码前进行文档核对，以保持与 S2 设计规范一致。

限制

资料未提供该技能的安装方式、依赖要求、支持的平台范围、收费或价格信息，暂未提供。