FlowGram Material Component Development
建置 FlowGram Material 元件
建立 FlowGram 表單素材元件需要一致的結構、匯出與 Storybook 驗證。此技能會引導元件樣板建立、TypeScript 模式、匯出與本機檢查。
使用我的智慧代理安裝
將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。
Review the Skillstore skill "FlowGram Material Component Development" from https://skillstore.io/skills/bytedance-material-component-dev.md and its manifest at https://skillstore.io/api/skills/bytedance-material-component-dev/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。
Agent 可讀資源
當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。
測試它
正在使用「FlowGram Material Component Development」。 規劃一個新的 schema picker 元件，用於 form-materials。
預期結果:
一份精簡的實作計畫，包含元件資料夾、必要檔案、props、具名匯出與 Storybook story 位置。
正在使用「FlowGram Material Component Development」。 審查一個未能出現在 Storybook 中的元件。
預期結果:
一份可能匯出與 import 缺口的檢查清單，接著提供針對元件進入點的修正。
正在使用「FlowGram Material Component Development」。 修正關於 React 或 json-schema 型別的 TypeScript 錯誤。
預期結果:
一份診斷，指出應檢查明確的 React imports 或 FlowGram json-schema 型別，以及受影響的檔案。
安全審計
安全All 57 static findings are false positives caused by Markdown code formatting, fenced examples, a localhost Storybook URL, and a compile-time relative import. The documented shell commands use fixed local development arguments and show no dynamic input, exfiltration, prompt injection, or malicious intent. No security remediation is required.
風險因素
⚙️ 外部命令 (50)
🌐 網路存取 (1)
📁 檔案系統存取 (1)
分享與引用此報告
分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。
複製報告連結
https://skillstore.io/skills/bytedance-material-component-dev/audits/10?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/bytedance-material-component-dev?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/bytedance-material-component-dev?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/bytedance-material-component-dev/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/bytedance-material-component-dev.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>學術引用 (APA · BibTeX · CFF)
APA 引用
bytedance. (2026). FlowGram Material Component Development security audit report (audit version 10) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/bytedance-material-component-dev/audits/10BibTeX 引用
@techreport{bytedance-bytedance-material-component-dev-2026,
author = {bytedance},
title = {FlowGram Material Component Development security audit report (audit version 10)},
institution = {Skillstore},
year = {2026},
number = {10},
url = {https://skillstore.io/skills/bytedance-material-component-dev/audits/10},
note = {Author version 1.0.0}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "FlowGram Material Component Development security audit report (audit version 10)"
version: "1.0.0"
type: report
authors:
- name: "bytedance"
date-released: "2026-07-19"
url: "https://skillstore.io/skills/bytedance-material-component-dev/audits/10"
identifiers:
- type: other
value: "skillstore:bytedance-material-component-dev:audit:10"
description: "Skillstore immutable audit report identifier"
Skillstore 評分
評分依據 證據置信度: 高你可以打造什麼
新增表單素材
建立符合 FlowGram 慣例的元件資料夾、核心檔案、匯出與 Storybook demo。
標準化元件審查
在合併元件變更前，檢查 props、具名匯出、相依項目使用方式與驗證步驟。
導入素材開發
學習 form-materials 工作所預期的結構、import 規則、範例與驗收標準。
試試這些提示
使用此技能來規劃名為 MyComponent 的新 FlowGram 表單素材元件。找出我需要的資料夾、props、匯出與 Storybook story。
使用此技能來 scaffold 一個 FlowGram form-materials 元件，用於選取 JSON schema 欄位。遵循具名匯出與 Semi UI 規則。
使用此技能來審查我的新 form-materials 元件是否符合 FlowGram 慣例、匯出涵蓋範圍、props 設計與 Storybook 就緒狀態。
使用此技能來診斷 FlowGram material 元件中的 TypeScript 與 Storybook 問題。聚焦於 React imports、套件匯出與 json-schema 型別。
最佳實務
- 讓每個素材專注於一個明確功能，並保持精簡的 props 介面。
- 一致使用 FlowGram 內部型別、Semi UI 元件與具名匯出。
- 在審查前透過型別檢查與 Storybook demo 驗證變更。
避免
- 不要為單一 form-materials 元件建立獨立套件。
- 當套件預期使用具名匯出時，不要使用 default exports。
- 不要新增與元件目標無關的廣泛設定 props。