Agent skill · writing content · aiskillstore
material-component-doc
用于 FlowGram 物料库组件文档撰写的专用技能，提供组件文档生成、Story 创建、翻译等功能的指导和自动化支持
Why this skill is useful
Provides specific documentation templates and workflows for generating component documentation in FlowGram, which the AI wouldn't reliably generate on its own.
What it needs
About 3k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
FlowGram 文档的组织结构 英文文档: apps/docs/src/en 中文文档: apps/docs/src/zh Story 组件: apps/docs/components/form-materials/components 物料源码: packages/materials/form-materials/src/components 文档模板: ./templates/material.mdx 组件物料文档撰写流程 1. 源码定位 在 packages/materials/form-materials/src/components 目录下确认物料源代码地址。 操作： 使用 Glob 工具搜索物料文件 确认目录结构（是否有 hooks.ts, context.tsx 等） 记录导出名称和文件路径 2. 需求收集 向用户询问物料使用实例和具体需求。 收集信息： 主要使用场景 典型代码示例（1-2 个） 特殊配置或高级用法 是否需要配图 3. 功能分析 深入阅读源代码，理解物料功能。 分析要点： Props 接口（类型、默认值、描述） 核心功能和实现方式 依赖关系（FlowGram API、其他物料、第三方库） Hooks 和 Context 特殊逻辑（条件渲染、副作用等） 4. Story 创建 在 apps/docs/components/form-materials/components 下创建 Story 组件（详见下方 Story 规范）。 5. 文档撰写 基于模板 ./templates/material.mdx 撰写完整文档。 文档位置： 中文：apps/docs/src/zh/materials/components/{物料名称}.mdx 英文：apps/docs/src/en/materials/components/{物料名称}.mdx（翻译后） 6. 质量检查 检查清单： [ ] Story 组件能正常运行 [ ] 代码示例准确无误 [ ] API 表格完整 [ ] 依赖链接正确可访问 [ ] 图片路径正确 [ ] Mermaid 流程图语法正确 [ ] CLI 命令路径准确 用户确认中文文档的撰写后，再执行翻译。 用户确认中文文档的撰写后，再执行翻译。 用户确认中文文档的撰写后，再执行翻译。 --- Story 组件规范 参考示例: apps/docs/components/form-materials/components/variable-selector.tsx 命名规范 文件命名: kebab-case，与物料名称一致 ✅ variable-selector.tsx ✅ dynamic-value-input.tsx ❌ VariableSelector.tsx Story 导出命名: PascalCase + "Story" 后缀 BasicStory - 基础使用（必需） WithSchemaStory - 带 Schema 约束 DisabledStory - 禁用状态 CustomFilterStory - 自定义过滤 根据物料特性命名，见名知意 代码要求 1. 懒加载导入 2. 包装组件 3. 类型标注 4. 语言规范 代码和注释只使用英文，无中文。 完整示例 --- 物料文档格式 使用模板 模板文件: ./templates/material.mdx 文档必须严格按照模板格式编写，包含以下章节： 1. Import 语句 2. 标题和简介（带可选配图） 3. 案例演示（基本使用 + 高级用法） 4. API 参考（Props 表格） 5. 源码导读（目录结构、核心实现、流程图、依赖梳理） 参考示例 dynamic-value-input.mdx - 完整的流程图和依赖说明 variable-selector.mdx - 多个 API 表格和警告提示 关键注意事项 API 表格要求： 必须包含所有公开的 Props 类型使用反引号（如 \string\） 描述清晰简洁 多个相关类型分开列表 源码导读要求： 目录结构：展示文件列表及说明 核心实现：用代码片段说明关键逻辑 整体流程：Mermaid 流程图（推荐） 依赖梳理：分类列出 FlowGram API、其他物料、第三方库 --- 图片处理指南 截图要求 1. 时机: Story 组件完成后，运行 docs 站点截图 2. 内容: 捕获物料的典型使用状态，清晰可见 3. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/material-component-doc