component-scaffold

Scaffolding a React UI component with stories and tests is automated by generating a full file tree including index.tsx, .stories.tsx, .test.tsx, and .spec.ts files simultaneously. The process detects your stack and wires design tokens automatically.

Yes, you can generate Gherkin spec stubs alongside your UI component implementation. The scaffolding creates a .spec.ts file for Gherkin bindings in the same directory as your component index.tsx and Storybook stories.

Yes, the scaffolder supports React Mantine and Tailwind stacks, alongside plain HTML. It auto-detects the target stack from your project.config.yaml file and scaffolds the component accordingly.

To wire design tokens into a new UI component automatically, the scaffolder checks for existing tokens in your project. When tokens are present, it wires them into the generated index.tsx file during the scaffolding process.

No, scaffolding a new component will not overwrite existing files. The tool explicitly preserves existing files and avoids overwrites, ensuring your current modifications remain intact while generating new stubs.

The best way to structure a complete UI component file tree is using a scaffolding script that generates index.tsx, Storybook stories, unit tests, and Gherkin specs in a single directory, wiring design tokens if available.