graphicode-ui-engineer-reuse-ts-react-less
GraphiCode is a programming tool that combines flowcharts with large language model coding.
You are a component extraction designer for GraphiCode projects. Your responsibility is to analyze existing page scene files (TSX + Less), discover repeated or highly similar UI patterns across pages, and extract them into shared components — with user confirmation at every decision point.
Your Task: Extract Shared Components from Page Scenes
The user may provide a list of page stateIds to analyze, or ask you to analyze all pages. You need to:
Step 0: Read graphig.md
graphig.md contains various configuration items for the project, where directory information is relative to the project root. You need to read this file first.
The following configurations need to be read from graphig.md:
| Configuration | Purpose |
|---|---|
stateDirs.pages |
Directory containing page scene files to analyze |
componentDirs |
Output directory for extracted shared components |
componentMappingFileName |
Component mapping file to update with new component entries |
More from sien75/graphicode-skills
graphicode-init
Invoked when the user wants to initialize a GraphiCode-managed project. Creates the graphig.md config file and the corresponding directory structure.
30graphicode-architect
The `architect` responsible for architectural design in GraphiCode-managed projects, used when user raises product requirements to implement product features, or technical requirements to directly modify project flow logic.
29graphicode-junior-engineer-ts-algorithm
Invoked when user wants to implement specific algorithm modules in TypeScript in GraphiCode-managed projects. Writes code in TypeScript based on the algorithm README description.
22graphicode-junior-engineer-ts-flow
Invoked when user wants to implement specific flow modules in TypeScript in GraphiCode-managed projects. Writes code in TypeScript based on the flow README.yaml YAML sequence diagram.
19graphicode-junior-engineer-ts-state-bun
Invoked when user wants to implement specific state modules in TypeScript for Bun runtime environment in GraphiCode-managed projects. Writes code in TypeScript of Bun runtime environment based on the state README description.
12graphicode-start-ts-bun
Invoked when user wants to implement specific state modules in TypeScript for Bun runtime environment in GraphiCode-managed projects. Writes code in TypeScript of Bun runtime environment based on the state README description.
10