paveg · paveg · Feb 4, 2026 · Feb 4, 2026 · Feb 4, 2026
diff --git a/dot_claude/rules/browser-automation.md 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
@@ -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
@@ -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/rules/react.md 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)
diff --git a/dot_claude/skills/browser-e2e-test/SKILL.md 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
@@ -0,0 +1,72 @@
+# GitHub Issue Template for E2E Test Bugs
+
+## Issue Creation Command
+
+```bash
+gh issue create --title "<type>: <concise description>" --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
@@ -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
@@ -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