design-system-example-components-react

Rules and conventions for building React components in this repo (composition pattern, no logic in component body, styling tokens, file layout, etc.). Read this before writing or editing any component.

Stage files, generate a commit message in this repo's Conventional Commits style, and commit after user approval.

Port a component from the HTML reference (digital-go-jp/design-system-example-components-html) to this React + Storybook project.

Run the pre-completion checks before declaring a task done. Executes lint, markup lint, build (tsc), tests, and reminds the user to verify Storybook visually.

Review changed code in this repo against the project's review checklist (readability, maintainability, performance, security, consistency).

Author component documentation in this project. Docs live inside the component's *.stories.tsx (Storybook autodocs), translated from the HTML reference's MDX structure into JSX, in Japanese.

Write tests for components in this project. Covers Storybook-based UI tests (composeStories + vitest-browser-react), unit tests for hooks/utils, and the conventions that keep tests deterministic and meaningful.