# Build FlowGram Material Components

Creating FlowGram form materials requires consistent folders, exports, props, and Storybook coverage. This skill gives a focused workflow for component files, exports, demos, and validation commands.

## Install

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

## Metadata

- Status: approved
- Slug: bytedance-material-component-dev
- Version: 1.0.0
- Author version: 1.0.0
- Skillstore revision: r1
- Version status: valid
- Tree hash: 50d0f83cf7d58c48d24396b3c0f6666e9d0b295103dcbf26e39deee681e51be2
- Author: bytedance
- GitHub username: bytedance
- License: MIT
- Repository: https://github.com/bytedance/flowgram.ai/tree/main/.claude/skills/material-component-dev
- Ref: 67e6747f5b57a33ea8c62a0043d8f2ef310189ab
- 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: external\_commands, network, filesystem
- Quality score: 78
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/bytedance-material-component-dev
- Manifest: https://skillstore.pages.dev/api/skills/bytedance-material-component-dev/manifest

## Capabilities

- Explains where to place new components in the FlowGram form-materials package.
- Provides TypeScript component patterns for helpers, modals, main components, and named exports.
- Shows how to add component exports through the form-materials entry points.
- Guides Storybook story creation for manual component testing.
- Lists validation commands for TypeScript checks and local Storybook review.
- Documents fixes for common React, export, schema type, and CodeEditor errors.

## Use Cases

- Add a new form material: Create a component folder, TypeScript files, exports, and Storybook story using the established FlowGram structure.
- Standardize component reviews: Check that a new material uses named exports, concise props, internal types, and Semi UI components.
- Troubleshoot integration errors: Resolve common React import, missing export, schema type, and CodeEditor height issues during development.

## Prompt Templates

### Plan a component

```
Help me plan a new FlowGram form material component named StatusSelector. Define its purpose, required props, folder structure, and Storybook demo scope.
```

### Create component files

```
Guide me through creating a FlowGram form material component with a main TypeScript React file, named exports, and a simple helper utility.
```

### Wire exports and Storybook

```
Review my new FlowGram component and tell me which form-materials entry files and Storybook story files need updates.
```

### Audit a finished material

```
Evaluate this FlowGram material component for prop scope, named exports, Semi UI usage, type safety, Storybook coverage, and common integration errors.
```

## Limitations

- It is scoped to FlowGram form-materials components and related Storybook demos.
- It does not generate production-ready business logic without project-specific requirements.
- It recommends manual Storybook testing and does not require unit tests.
- It assumes the target repository already has FlowGram dependencies and scripts installed.

## Best Practices

- Keep each material focused on one clear responsibility with minimal required props.
- Use named exports and explicit React imports to match FlowGram package conventions.
- Validate changes with type checks and a Storybook story before review.

## Anti Patterns

- Creating a separate npm package for a single form material component.
- Adding broad configuration props before a concrete product need exists.
- Importing external schema packages when FlowGram internal schema types are available.

## Security Audit

- Audited at: 2026-07-19T02:47:45.846\+00:00
- Summary: 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.

## Stats

- Views: 173
- Downloads: 9
- Favorites: 0
- Popularity score: 0