material-component-doc_skill

Overview

This skill streamlines writing FlowGram material component documentation, Story creation, screenshot handling, and translation guidance. It packages a repeatable workflow for locating source code, extracting props, authoring MDX docs from a template, and producing Story components that run in the docs site. The skill emphasizes consistency, correctness, and readiness for translation after user sign-off.

How this skill works

The skill inspects the materials source folder to locate component files and type definitions, then extracts Props, default values, and dependency imports. It scaffolds Story components using lazy imports and the required story wrapper, generates a markdown MDX document following the material template, and produces a checklist for QA and translation. It can also suggest screenshot capture instructions and file placement for docs assets.

When to use it

• Creating a new material component documentation page and Story for the docs site
• Updating documentation after component API changes or refactors
• Preparing a component for translation once Chinese docs are approved
• Performing a quality check before publishing docs or merging PRs
• Automating Prop extraction and API table generation from TypeScript types

Best practices

• Always lazy-load components in Stories using React.lazy with explicit default export mapping
• Wrap component demos in the provided FreeFormMetaStoryBuilder or equivalent story wrapper
• Extract Props from TypeScript interfaces/types and include default values and concise descriptions
• Keep code and comments fully English in Stories and docs source
• Only translate after the user confirms the final Chinese doc; keep code and paths unchanged during translation

Example use cases

• Generate a complete MDX doc for a new form material component with basic and advanced examples
• Create Story files (kebab-case) with BasicStory, WithSchemaStory, and DisabledStory exports
• Produce an API Props table by parsing TypeScript interfaces and defaultProps
• Provide a step-by-step checklist and mermaid flow suggestions for the source walkthrough section
• Prepare image assets: capture Story UI, save PNG in the public materials folder, and reference it in MDX