القائمة
用于 FlowGram 物料库组件文档撰写的专用技能，提供组件文档生成、Story 创建、翻译等功能的指导和自动化支持
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/bytedance/flowgram.ai --skill material-component-docيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| name | material-component-doc |
| description | 用于 FlowGram 物料库组件文档撰写的专用技能，提供组件文档生成、Story 创建、翻译等功能的指导和自动化支持 |
| metadata | {"version":"1.1.0","category":"documentation","language":"zh-CN","framework":"FlowGram"} |
apps/docs/src/enapps/docs/src/zhapps/docs/components/form-materials/componentspackages/materials/form-materials/src/components./templates/material.mdx在 packages/materials/form-materials/src/components 目录下确认物料源代码地址。
操作：
向用户询问物料使用实例和具体需求。
收集信息：
深入阅读源代码，理解物料功能。
分析要点：
在 apps/docs/components/form-materials/components 下创建 Story 组件（详见下方 Story 规范）。
基于模板 ./templates/material.mdx 撰写完整文档。
文档位置：
apps/docs/src/zh/materials/components/{物料名称}.mdxapps/docs/src/en/materials/components/{物料名称}.mdx（翻译后）检查清单：
参考示例:
apps/docs/components/form-materials/components/variable-selector.tsx
文件命名: kebab-case，与物料名称一致
variable-selector.tsxdynamic-value-input.tsxVariableSelector.tsxStory 导出命名: PascalCase + "Story" 后缀
BasicStory - 基础使用（必需）WithSchemaStory - 带 Schema 约束DisabledStory - 禁用状态CustomFilterStory - 自定义过滤// ✅ 正确
const VariableSelector = React.lazy(() =>
import('@flowgram.ai/form-materials').then((module) => ({
default: module.VariableSelector,
}))
);
// ❌ 错误
import { VariableSelector } from '@flowgram.ai/form-materials';
// ✅ 正确
export const BasicStory = () => (
<FreeFormMetaStoryBuilder
filterEndNode
formMeta={{
render: () => (
<>
<FormHeader />
<Field<string[]> name="variable_selector">
{({ field }) => (
<VariableSelector
value={field.value}
onChange={(value) => field.onChange(value)}
/>
)}
</Field>
</>
),
}}
/>
);
// ❌ 错误：缺少包装
export const BasicStory = () => (
<VariableSelector value={[]} onChange={() => {}} />
);
// ✅ 正确
<Field<string[] | undefined> name="variable_selector">
// ❌ 错误
<Field<any> name="variable_selector">
代码和注释只使用英文，无中文。
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
import React from 'react';
import { Field } from '@flowgram.ai/free-layout-editor';
import { FreeFormMetaStoryBuilder, FormHeader } from '../../free-form-meta-story-builder';
const VariableSelector = React.lazy(() =>
import('@flowgram.ai/form-materials').then((module) => ({
default: module.VariableSelector,
}))
);
export const BasicStory = () => (
<FreeFormMetaStoryBuilder
filterEndNode
formMeta={{
render: () => (
<>
<FormHeader />
<Field<string[] | undefined> name="variable_selector">
{({ field }) => (
<VariableSelector
value={field.value}
onChange={(value) => field.onChange(value)}
/>
)}
</>
),
}}
/>
);
= () => (
);
模板文件: ./templates/material.mdx
文档必须严格按照模板格式编写，包含以下章节：
dynamic-value-input.mdx - 完整的流程图和依赖说明variable-selector.mdx - 多个 API 表格和警告提示API 表格要求：
源码导读要求：
{物料名称}.png（kebab-case）apps/docs/src/public/materials/{物料名称}.png/materials/{物料名称}.png<br />
<div>
<img loading="lazy" src="/materials/{物料名称}.png" alt="{物料名称} 组件" style={{ width: '50%' }} />
</div>
术语一致性：
代码不翻译：
链接处理：
/zh/ → /en/格式保持：
interface 或 type 定义defaultProps 确认默认值❌ 直接导入物料而不使用 React.lazy
❌ API 表格遗漏 Props
❌ 依赖链接失效
❌ 中英文混用
❌ 路径格式错误
✅ 参考优秀示例 ✅ 仔细阅读源码 ✅ 验证所有链接 ✅ 保持语言和格式一致 ✅ 使用项目约定的路径格式
# 启动文档站点
rush dev:docs
# 查看修改
git diff
git diff --cached
| 目录 | 说明 |
|---|---|
packages/materials/form-materials/src/components | 物料源码 |
apps/docs/src/zh/materials/components | 中文文档 |
apps/docs/src/en/materials/components | 英文文档 |
apps/docs/components/form-materials/components | Story 组件 |
apps/docs/src/public/materials | 图片资源 |
./templates | 文档模板 |