Agent skill · software engineering · aiskillstore
material-component-dev
FlowGram 物料组件开发指南 - 用于在 form-materials 包中创建新的物料组件
Why this skill is useful
Provides specific guidelines for creating components in the FlowGram framework, including directory structure and coding standards that the AI wouldn't reliably generate on its own.
What it needs
Requires yarn installed locally. About 4k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
FlowGram Material Component Development 概述 本 SKILL 用于指导在 FlowGram 项目的 @flowgram.ai/form-materials 包中创建新的物料组件。 核心原则 1. 组件位置 ✅ 在现有包中创建：直接在 packages/materials/form-materials/src/components/ 下创建组件目录 ❌ 不要单独拆包：不创建新的 npm 包，保持简洁 2. 代码质量 ✅ 使用 named export：所有导出使用 named export 提高 tree shake 性能 ❌ 不写单元测试：通过 Storybook 进行手动测试 ✅ 通过类型检查：必须通过 yarn ts-check ✅ 符合代码规范：遵循项目 ESLint 规则 3. 物料设计 ✅ 保持精简：只保留必要的 props，不添加非核心功能配置项 ✅ 功能单一：一个物料只做一件事 ✅ 使用内部依赖：优先使用 FlowGram 内部的组件和类型 4. 技术栈 UI 组件库：@douyinfe/semi-ui 代码编辑器：JsonCodeEditor, CodeEditor 等来自 ../code-editor 类型定义：IJsonSchema 来自 @flowgram.ai/json-schema（不使用外部的 json-schema 包） React：必须显式 import React 避免 UMD 全局引用错误 开发流程 Step 1: 规划组件结构 确定组件的： 功能：组件要解决什么问题 Props 接口：只保留核心必需的 props 命名：使用 PascalCase，清晰描述功能 Step 2: 创建目录结构 典型结构： Step 3: 实现组件 3.1 工具函数（如需要） 3.2 辅助组件（如需要） 3.3 主组件 关键点： ✅ 显式 import React ✅ 使用 Semi UI 组件 ✅ 使用 function 声明而非 React.FC ✅ Props 精简，只保留核心功能 ✅ Named export 3.4 导出文件 Step 4: 在 form-materials 主入口导出 编辑 packages/materials/form-materials/src/components/index.ts： 然后编辑 packages/materials/form-materials/src/index.ts，确保新组件在主导出列表中： Step 5: 创建 Storybook Story 在 apps/demo-materials/src/stories/components/ 创建 Story： Step 6: 运行类型检查 确保通过所有类型检查。 Step 7: 启动开发环境测试 开启两个 Terminal： Terminal 1 - 监听包编译： Terminal 2 - 启动 Storybook： 访问 http://localhost:6006/，找到你的组件进行测试。 常见问题 Q1: React 引用错误 错误信息： 解决方案： 在文件顶部添加： Q2: 组件未导出 错误信息： 解决方案： 检查以下文件的导出： 1. components/{组件名}/index.tsx 2. components/index.ts 3. src/index.ts Q3: 类型找不到 错误信息： 解决方案： 使用 type IJsonSchema 而非 type JSONSchema7 从 @flowgram.ai/json-schema 导入而非 json-schema Q4: CodeEditor 没有 height 属性 错误信息： 解决方案： 使用外层 div 设置高度： 验收标准 [ ] 组件在 packages/materials/form-materials/src/components/ 下创建 [ ] 使用 named export [ ] 通过 yarn ts-check 类型检查 [ ] Props 精简，只保留核心功能 [ ] 在 Storybook 中可以正常显示和使用 [ ] 功能正常，无明显 bug [ ] 代码符合 FlowGram 代码规范 最佳实践 1. 组件设计 单一职责：一个组件只做一件事 Props 精简：避免过度配置 命名清晰：组件名和 Props 名要清晰易懂 2. 代码风格 使用 TypeScript：充分利用类型系统 显式导入：明确导入所需的依赖 注释适度：关键逻辑添加注释 3. UI 一致性 使用 Semi UI：保持 UI 风格一致 响应式设计：考虑不同屏幕尺寸 错误处理：友好的错误提示 4. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/material-component-dev