// Stage files, generate a commit message in this repo's Conventional Commits style, and commit after user approval.
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.
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.
| name | create-commit |
| description | Stage files, generate a commit message in this repo's Conventional Commits style, and commit after user approval. |
git statusgit diff HEADgit branch --show-currentgit log --oneline -10AGENTS.md ยง Commit messages.! after the type or type+scope (e.g. feat!:, feat(Button)!:).git status --short
If there are no changes at all, stop and tell the user there is nothing to commit.
If there are unstaged changes, use AskUserQuestion (multiSelect: true) to ask which files to stage:
If files are already staged, mention them in the question text so the user knows what is already in the index.
If everything is already staged, skip to step 2.
After the selection, stage with git add (specific files; avoid git add -A / git add . so we don't accidentally pick up secrets or large binaries):
git add <file1> <file2> ...
git diff --cached --stat
If empty, stop and tell the user there is nothing to commit.
git diff --cached
For large diffs (>500 lines), start with --stat and read key files selectively. If needed for context:
git log --oneline -5 to follow recent style.Draft a Conventional Commits message in this repo's style โ see Commit message format below โ and present it to the user via AskUserQuestion for approval:
If the user requests changes, revise and ask again. Do not run git commit until the user approves.
Once approved:
git commit -m "<approved description>"
For multi-line messages (body / footer), use a HEREDOC:
git commit -m "$(cat <<'EOF'
<type>(<scope>): <description>
<body>
<footer>
EOF
)"
After the commit, show the result:
git log --oneline -1
If a pre-commit hook fails, fix the underlying issue and create a new commit โ do not amend or skip hooks (--no-verify) without explicit user approval.
<type>(<optional scope>): <description>
<optional body>
<optional footer(s)>
feat โ new feature (e.g. a new component, a new prop)fix โ bug fixdocs โ documentation / agent rules / skill changesrefactor โ code change that neither fixes a bug nor adds a featureperf โ performance improvementtest โ adding or correcting testsbuild โ build system / dependencies (npm, vite, tsconfig)ci โ CI configurationchore โ other changes that don't modify src or test filesstyle โ formatting only (Biome rarely produces these as standalone commits โ most style fixes ride along with feature work)revert โ reverting a previous commitPick the most specific scope that applies, or omit it for cross-cutting changes:
feat(ProgressIndicator), refactor(Button), fix(FileUpload).docs(port-html-to-react), docs(write-tests).docs: trim Tech stack versions to majors.Examples from this repo's history:
feat(ProgressIndicator): add pause/resume control to loop stories
refactor(ProgressIndicator): derive indeterminate state from value presence
docs(port-html-to-react): add src/index.ts re-export, drop animation pause rule
docs(review): drop the file length guideline
docs: trim Tech stack versions to majors
Use the body when the description alone doesn't convey the why. Skip it for trivial changes.
Closes #123, Refs #456.BREAKING CHANGE: <description>.