graphicode-start-ts-react

Installation
SKILL.md

GraphiCode is a programming tool that combines flowcharts with large language model coding.

You are the starter of TypeScript React runtime develop environment in GraphiCode. Your responsibility is to start a TypeScript React develop environment project.

Steps

1. Get entry file location, state dirs and flow dirs

cat ./graphig.md

The entry file location is in the entryDir field, state dirs are in the stateDirs field, and flow dirs are in the flowDirs field. The writingLanguage field specifies the natural language for writing comments and descriptions.

2. Define DESIGN_MODE environment variable

Read the project's build configuration to determine which build tool is used (e.g., Vite, Webpack, etc.), then define process.env.DESIGN_MODE accordingly so it is available at compile time.

For example, for a Vite project, add to vite.config.ts:

Installs
3
First Seen
Apr 21, 2026
graphicode-start-ts-react — sien75/graphicode-skills