From cba799b5d4aa8e55a977f4cf0db71ea0b68839c6 Mon Sep 17 00:00:00 2001 From: Ryota Ikezawa Date: Wed, 4 Feb 2026 16:26:05 +0900 Subject: [PATCH 1/2] feat(claude,env): add browser automation rule, translate rules to English, and update env configs - Add browser-automation rule for chrome-in-claude best practices (verify-after-write) - Add configuration changes principle to development-principles rule - Translate pr-size rule from Japanese to English - Move browser-e2e-test skill into chezmoi management with full English translation - Add NPM_TOKEN auth to npmrc - Add MoonBit PATH to zshenv Co-Authored-By: Claude Opus 4.5 --- dot_claude/rules/browser-automation.md | 11 +++ dot_claude/rules/development-principles.md | 6 ++ dot_claude/rules/pr-size.md | 38 +++++----- dot_claude/skills/browser-e2e-test/SKILL.md | 76 +++++++++++++++++++ .../references/issue-template.md | 72 ++++++++++++++++++ dot_npmrc.tmpl | 3 + dot_zshenv.tmpl | 3 + 7 files changed, 190 insertions(+), 19 deletions(-) create mode 100644 dot_claude/rules/browser-automation.md create mode 100644 dot_claude/skills/browser-e2e-test/SKILL.md create mode 100644 dot_claude/skills/browser-e2e-test/references/issue-template.md diff --git a/dot_claude/rules/browser-automation.md b/dot_claude/rules/browser-automation.md new file mode 100644 index 0000000..fdc5ce7 --- /dev/null +++ b/dot_claude/rules/browser-automation.md @@ -0,0 +1,11 @@ +--- +alwaysApply: false +globs: [] +description: "Browser automation (chrome-in-claude) best practices" +--- + +# Browser Automation + +- Prefer click-and-type over form_input (especially for textareas) +- After filling any form field, read back all visible field values to verify no unintended changes +- Operate one field at a time: set value → verify → move to next diff --git a/dot_claude/rules/development-principles.md b/dot_claude/rules/development-principles.md index b4683de..f48b14a 100644 --- a/dot_claude/rules/development-principles.md +++ b/dot_claude/rules/development-principles.md @@ -27,6 +27,12 @@ alwaysApply: true - Do not speculate on specifications — ask or investigate - Admit uncertainty rather than guessing +## Configuration Changes + +- Before modifying allow/deny patterns or access controls, state the intended behavior explicitly +- Deny rules should be narrow and specific — block only the dangerous cases +- Verify the change doesn't break normal usage (dry-run or test examples) + ## Comments - Write "why", not "what" diff --git a/dot_claude/rules/pr-size.md b/dot_claude/rules/pr-size.md index 592ec92..256dc4f 100644 --- a/dot_claude/rules/pr-size.md +++ b/dot_claude/rules/pr-size.md @@ -2,33 +2,33 @@ alwaysApply: true --- -# PR/コミットサイズガイドライン +# PR/Commit Size Guidelines -## 基本原則 +## Principles -- PRは**動作確認可能な最小単位**で作成 -- レビュアーが1回で理解できる量に収める +- Create PRs in the **smallest shippable unit** +- Keep changes reviewable in a single sitting -## サイズ目安 +## Size Targets -| 言語 | 警告 | 分割検討 | -|------|------|----------| -| Ruby/TS | 400行 | 600行 | -| Go/Java | 600行 | 1000行 | +| Language | Warning | Consider Splitting | +|----------|---------|-------------------| +| Ruby/TS | 400 LOC | 600 LOC | +| Go/Java | 600 LOC | 1000 LOC | -**実質ロジック**（生成コード・テストデータ除く）は**300行以下**を目安。 +**Effective logic** (excluding generated code and test data) should stay **under 300 LOC**. -## 分割判断 +## When to Split -- 複数の独立した機能変更が含まれる -- レビューに1時間以上かかりそう +- Multiple independent functional changes in one PR +- Review would take over an hour -## コミット粒度 +## Commit Granularity -1コミット = 1つの論理的変更（100-200行目安） +1 commit = 1 logical change (target 100-200 LOC) -## PRが大きくなる場合 +## When a PR Is Unavoidably Large -PR説明に記載： -- 総変更行数 / 実質ロジック行数 -- 核心部分（要注意）と機械的変更（軽く見てOK）を明示 +Include in the PR description: +- Total LOC changed / effective logic LOC +- Which parts are core changes (need careful review) vs mechanical changes (skim OK) diff --git a/dot_claude/skills/browser-e2e-test/SKILL.md b/dot_claude/skills/browser-e2e-test/SKILL.md new file mode 100644 index 0000000..893105d --- /dev/null +++ b/dot_claude/skills/browser-e2e-test/SKILL.md @@ -0,0 +1,76 @@ +--- +name: browser-e2e-test +description: | + E2E testing workflow for web applications using Chrome in Claude. + Automates functional testing, bug detection, and GitHub Issue creation. + Use when: (1) running functional tests on web apps, (2) verifying staging/production behavior, + (3) finding bugs and creating Issues, (4) capturing UI behavior with screenshots +--- + +# Browser E2E Test + +E2E testing workflow for web applications using Chrome in Claude. + +## Workflow + +### 1. Setup + +``` +1. tabs_context_mcp to get browser context +2. tabs_create_mcp to create a new test tab +3. Confirm project structure (root, API endpoints) +4. TodoWrite to create a test plan +``` + +### 2. Test Execution + +For each feature under test: + +``` +1. navigate to the page +2. wait (2s) for page load +3. screenshot to capture current state +4. read_page (filter: interactive) to get actionable elements +5. Prefer click-and-type over form_input (especially for textareas) +6. After each field input, read back all visible field values to verify no unintended changes +7. screenshot to capture result +8. read_network_requests to check API responses +9. read_console_messages (onlyErrors: true) to check for errors +``` + +### 3. Issue Recording + +When a problem is found: +- Record API status codes (especially 4xx, 5xx) +- Record console errors +- Record reproduction steps +- Record screenshot IDs + +### 4. Issue Creation + +Create a GitHub Issue for each discovered problem via `gh issue create`. +See [references/issue-template.md](references/issue-template.md) for the template. + +## Chrome in Claude Tips + +### Page Interaction +- Use `read_page` with `filter: interactive` to get only buttons/links/inputs +- Use `ref` parameter for click targets (more stable than coordinates) +- Use `hover` to reveal elements that only appear on hover + +### Debugging +- `read_network_requests` captures requests made after the first call +- `read_console_messages` works the same way — call it early to start capturing +- Filter by API pattern: `urlPattern: "/api/"` + +### Caveats +- Avoid triggering alert dialogs (they block all interaction) +- Always use tab IDs from fresh tabs_context_mcp calls +- Add appropriate `wait` after interactions + +## Cleanup + +After testing is complete: +1. Delete any test data created during the session +2. Mark all TodoWrite tasks as complete +3. Output a test results summary diff --git a/dot_claude/skills/browser-e2e-test/references/issue-template.md b/dot_claude/skills/browser-e2e-test/references/issue-template.md new file mode 100644 index 0000000..d0b15ed --- /dev/null +++ b/dot_claude/skills/browser-e2e-test/references/issue-template.md @@ -0,0 +1,72 @@ +# GitHub Issue Template for E2E Test Bugs + +## Issue Creation Command + +```bash +gh issue create --title ": " --body "$(cat <<'EOF' +## Summary + +[1-2 sentence description of the problem] + +## Reproduction Steps + +1. Navigate to [URL] +2. [Action 1] +3. [Action 2] +4. [Expected behavior] does not occur / [Actual behavior] happens instead + +## Cause + +[API response or console error details] + +| API | Method | Status | +|-----|--------|--------| +| `/api/xxx` | GET/POST | 4xx/5xx | + +## Impact + +- [User impact 1] +- [User impact 2] + +## Technical Details + +[Relevant source files or suspected root cause] + +## Environment + +- URL: [tested URL] +- Browser: Chrome + +--- +This issue was discovered via functional testing with Chrome in Claude. +EOF +)" +``` + +## Type Prefix + +- `bug:` - Bugs / defects +- `fix:` - Issues requiring a fix +- `perf:` - Performance issues +- `a11y:` - Accessibility issues +- `ui:` - UI/UX issues + +## Examples + +### API Error + +```bash +gh issue create --title "bug: Tag list API (GET /api/tags) returns 500" --body "..." +``` + +### UI Issue + +```bash +gh issue create --title "ui: Dropdown menu renders off-screen on mobile" --body "..." +``` + +### Performance + +```bash +gh issue create --title "perf: Article list initial load takes over 5 seconds" --body "..." +``` diff --git a/dot_npmrc.tmpl b/dot_npmrc.tmpl index 52d3450..6406ac3 100644 --- a/dot_npmrc.tmpl +++ b/dot_npmrc.tmpl @@ -38,3 +38,6 @@ color=always engine-strict=true save-exact=true +# Auth (token from environment variable) +//registry.npmjs.org/:_authToken=${NPM_TOKEN} + diff --git a/dot_zshenv.tmpl b/dot_zshenv.tmpl index 8ea52b1..4ae906c 100644 --- a/dot_zshenv.tmpl +++ b/dot_zshenv.tmpl @@ -50,6 +50,9 @@ export PATH="${PATH}:${HOME}/go/bin" export BUN_INSTALL="$HOME/.bun" export PATH="$BUN_INSTALL/bin:$PATH" +# MoonBit +export PATH="$HOME/.moon/bin:$PATH" + # Devbox global (must be in zshenv for non-interactive shells like Claude Code) _devbox_cache="${XDG_CACHE_HOME}/devbox/shellenv.zsh" if [[ -f "$_devbox_cache" ]]; then From 92fa6767809f6e71e69c587df09b145f1bafc5c0 Mon Sep 17 00:00:00 2001 From: Ryota Ikezawa Date: Wed, 4 Feb 2026 17:48:35 +0900 Subject: [PATCH 2/2] feat(claude): add React conventions and library preferences rule Add glob-scoped rule for .tsx/.jsx files covering: - Avoid useEffect unless justified (prefer derived state, event handlers, TanStack Query) - Prefer arrow functions/function declarations over class components - Component reusability principles - Library preferences: Valibot (client), TanStack Query, Zod + Scalar (public API) Co-Authored-By: Claude Opus 4.5 --- dot_claude/rules/react.md | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 dot_claude/rules/react.md diff --git a/dot_claude/rules/react.md b/dot_claude/rules/react.md new file mode 100644 index 0000000..2c6ea75 --- /dev/null +++ b/dot_claude/rules/react.md @@ -0,0 +1,32 @@ +--- +alwaysApply: false +description: "React/JSX conventions for component design and hook usage" +globs: + - "**/*.tsx" + - "**/*.jsx" +--- + +# React Conventions + +## Avoid useEffect + +- Do not reach for `useEffect` unless there is a clear, justified reason (e.g., external system synchronization) +- Prefer derived state (`useMemo`), event handlers, or framework data-fetching primitives (TanStack Query, loader/action) +- If `useEffect` seems necessary, explain why in a comment + +## Function Style + +- Prefer arrow functions or function declarations over class components +- Use class definitions only when a library explicitly requires it (e.g., Error Boundaries before React 19) + +## Reusability + +- Design components to be reusable by default — accept props, avoid hardcoded values +- Extract shared logic into custom hooks +- Keep components focused on a single responsibility + +## Library Preferences + +- Use **Valibot** over Zod for client-side schema validation (smaller bundle, tree-shakeable) +- Use **TanStack Query** over SWR for data fetching +- For public API implementations, use **Zod + Scalar** (Zod schemas for OpenAPI generation, Scalar for API documentation UI)