component-docs

用途

component-docs 技能用于浏览 fundamental-styles 组件文档，这是 SAP 的 CSS 组件库。当用户询问 fundamental-styles 组件相关内容时，该技能提供完整的组件文档访问能力。

主要能力

每个组件的文档包含：

Frontmatter：组件元数据（名称、选择器、CSS 文件、分类、标签）
HTML 示例：每个变体的完整可用代码
Modifiers：所有可用的修饰符类（例如 fd-button--emphasized）
States：状态类（例如 is-disabled、is-selected）
Elements：具有自身修饰符的子元素（例如 fd-table__cell）
ARIA Attributes：正确的无障碍标记

组件按以下分类组织：

Actions（4）：button、link、menu、split-button
Forms（26）：input、select、checkbox、radio、textarea、switch、date-picker、time-picker 等
Navigation（8）：tabs、breadcrumb、side-nav、pagination、menu、shellbar 等
Layout（11）：panel、card、page、section、bar、toolbar、wizard 等
Data Display（23）：table、list、tree、avatar、calendar、icon、object-status 等
Feedback（15）：dialog、popover、message-strip、alert、notification、busy-indicator 等

使用方式

方式一：直接读取 Markdown 文件

文档位于 docs/components/，每个组件一个 markdown 文件：

docs/components/button.md docs/components/table.md docs/components/input.md docs/components/dialog.md

适用场景：用户按名称询问特定组件，或需要包含 frontmatter 元数据的完整文档。

读取文件并提取：frontmatter（组件名称、选择器、CSS 文件、分类）、所有带标题的 HTML 示例、修饰符描述。

方式二：使用 MCP 工具（如可用）

如果可访问 fundamental-styles MCP 服务器，可使用 get_component_markdown 工具：

get_component_markdown("button") → 返回包含所有示例的结构化 JSON

get_component_markdown("input", examplesOnly: true) → 仅返回 HTML 代码块

适用场景：MCP 服务器可用，且需要结构化、程序化的文档访问。

方式三：浏览组件索引

读取 docs/components/README.md 查看按分类组织的全部 140 多个可用组件。适用场景：用户询问某类功能有哪些组件可用，或需要发现应该使用哪个组件。

适用场景

在用户进行以下操作时使用该技能：

询问任意 fundamental-styles 组件的 HTML 示例
需要查看某组件的全部变体/修饰符（例如「展示所有按钮类型」）
想要可直接复制粘贴使用的工作 HTML 代码
提到 Storybook 示例或故事
询问「如何使用组件 X？」
需要理解组件结构和嵌套
按名称引用特定组件（button、table、dialog、input 等）

组件命名约定

组件遵循 BEM 命名：

基础类：fd-{component}（例如 fd-button、fd-table）
修饰符：fd-{component}--{modifier}（例如 fd-button--emphasized）
元素：fd-{component}__{element}（例如 fd-table__cell）
状态：is-{state}（例如 is-disabled、is-selected）

用户引用组件时可能使用：正式名称（「button component」、「table component」）、仅组件名（「button」、「table」）、CSS 类（「fd-button」、「fd-table」）或 UI 概念（「submit button」、「data grid」）。需将这些映射到正确的 markdown 文件（例如「submit button」→ button.md）。

使用提示

始终读取 markdown 文件——不要猜测 HTML 结构或修饰符，文档是权威且完整的
查找多个示例——大多数组件有 10-20 个以上示例展示不同用例，展示最相关的一个，但提及其他示例存在
保留 ARIA 属性——所有示例都包含正确的无障碍标记，不要移除
解释修饰符——展示带修饰符的示例时，简要说明每个修饰符的作用（markdown 中有描述）
结合其他工具——如果用户需要实际构建内容，可将该技能与文件编辑结合以创建其组件

限制

关于该技能的收费、价格、平台支持等具体信息暂未提供。

技能介绍

用途