# Create FlowGram Component Docs

FlowGram material components need consistent docs, runnable Story examples, API tables, and bilingual review steps. This skill gives Claude, Codex, and Claude Code a structured workflow for producing those assets.

## Install

```bash
npx skillstore add bytedance/material-component-doc
```

## Metadata

- Status: approved
- Slug: bytedance-material-component-doc
- Version: 1.1.0
- Author version: 1.1.0
- Skillstore revision: r1
- Version status: valid
- Tree hash: ea52cae7bfc730bdfdecd9b62d6cd3d6abb5afaef5b110957e1a70093e567245
- Author: bytedance
- GitHub username: bytedance
- License: MIT
- Repository: https://github.com/bytedance/flowgram.ai/tree/main/.claude/skills/material-component-doc
- Ref: 7db9b9f06e0ab79c575b58bc48c4d8dc9849f424
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: scripts, external\_commands, filesystem, network
- Quality score: 81
- Quality tier: silver
- Public page: https://skillstore.pages.dev/skills/bytedance-material-component-doc
- Manifest: https://skillstore.pages.dev/api/skills/bytedance-material-component-doc/manifest

## Capabilities

- Locate FlowGram material component source files and related exports before drafting documentation.
- Create Story component guidance using React.lazy and the project FreeFormMetaStoryBuilder wrapper.
- Draft MDX component docs with demos, API reference tables, source walkthroughs, and dependency sections.
- Guide screenshot naming, storage paths, and image embedding for material component pages.
- Translate approved Chinese documentation to English while preserving code blocks, commands, paths, and links.
- Run checklist-style reviews for Story behavior, examples, links, Mermaid diagrams, and terminology.

## Use Cases

- Document a new material component: Turn a FlowGram component source folder into a complete MDX page with demos, API tables, source notes, and dependency links.
- Standardize Story examples: Create Story examples that follow project naming, lazy loading, wrapper, and type annotation rules.
- Prepare bilingual component docs: Translate an approved Chinese component document to English while preserving code, paths, commands, and internal link structure.

## Prompt Templates

### Start a component document

```
Use the material-component-doc skill to help me document the FlowGram component named <component>. First inspect the source and ask me what examples I want included.
```

### Create Story examples

```
Use the skill to draft Story examples for <component>. Include BasicStory and one advanced scenario, and follow the React.lazy and FreeFormMetaStoryBuilder requirements.
```

### Review an MDX draft

```
Review this FlowGram material component MDX draft with the skill checklist. Check demos, API tables, source walkthrough, dependencies, screenshots, and link format.
```

### Translate approved documentation

```
The Chinese document for <component> is approved. Use the skill translation process to create the English version while preserving code blocks, commands, paths, and external links.
```

## Limitations

- The skill is tailored to FlowGram material components and assumes that repository structure.
- It does not generate verified screenshots unless the documentation site is run separately.
- It requires user confirmation before translating Chinese documentation into English.
- It provides templates and workflow guidance, not automatic validation of every component prop.

## Best Practices

- Inspect the component source, exports, hooks, and dependencies before drafting the document.
- Confirm the Chinese document with the user before starting the English translation.
- Verify Story examples and documentation links in the docs site before publishing.

## Anti Patterns

- Do not import material components directly in Story examples when the project requires React.lazy.
- Do not translate code blocks, commands, paths, component names, or API identifiers.
- Do not publish a component page with missing props, broken links, or unchecked screenshot paths.

## Security Audit

- Audited at: 2026-07-09T01:36:22.312\+00:00
- Summary: The static findings are false positives from Markdown examples, code fences, documentation links, Mermaid diagrams, and a normal React.lazy import pattern. No prompt injection, data exfiltration intent, hidden execution hook, or malicious filesystem behavior was found in SKILL.md or templates/material.mdx.

## Stats

- Views: 269
- Downloads: 11
- Favorites: 0
- Popularity score: 0