diff --git a/claude-code/.claude/settings.json b/claude-code/.claude/settings.json index 7ae8a69..156ac91 100644 --- a/claude-code/.claude/settings.json +++ b/claude-code/.claude/settings.json @@ -5,12 +5,32 @@ "Bash(npx:*)", "Bash(git:*)", "Bash(mise:*)", - "Bash(gh:*)", "Bash(curl:*)", "Bash(ls:*)", "Bash(mkdir:*)", "Bash(cat:*)", "Bash(find:*)" ] + }, + "hooks": { + "PreToolUse": [ + { + "matcher": "Bash", + "hooks": [ + { + "type": "command", + "command": "jq -r '.tool_input.command' | { read -r cmd; if echo \"$cmd\" | grep -qE 'git commit'; then cd /workspace && if ! bun run check 2>&1; then echo '{\"hookSpecificOutput\":{\"hookEventName\":\"PreToolUse\",\"permissionDecision\":\"deny\",\"permissionDecisionReason\":\"Lint/typecheck failed. Fix issues before committing.\"}}'; fi; fi; }", + "timeout": 30, + "statusMessage": "Running lint and typecheck..." + }, + { + "type": "command", + "command": "jq -r '.tool_input.command' | { read -r cmd; if echo \"$cmd\" | grep -qE 'gh pr create'; then cd /workspace && if ! (bun run check && bun run test && bun run build) 2>&1; then echo '{\"hookSpecificOutput\":{\"hookEventName\":\"PreToolUse\",\"permissionDecision\":\"deny\",\"permissionDecisionReason\":\"CI checks failed (lint/test/build). Fix issues before opening PR.\"}}'; fi; fi; }", + "timeout": 300, + "statusMessage": "Running full CI checks (lint, test, build)..." + } + ] + } + ] } } diff --git a/claude-code/.devcontainer/claude-sandbox/devcontainer.json b/claude-code/.devcontainer/claude-sandbox/devcontainer.json index 839e2ad..b12f616 100644 --- a/claude-code/.devcontainer/claude-sandbox/devcontainer.json +++ b/claude-code/.devcontainer/claude-sandbox/devcontainer.json @@ -37,7 +37,35 @@ // Markdown Preview Github Styles - renders Markdown preview with GitHub's CSS "bierner.markdown-preview-github-styles", // Docker - Dockerfile and Compose syntax, linting, and image management - "ms-azuretools.vscode-docker" + "ms-azuretools.vscode-docker", + + // **Spelling** + // Code Spell Checker - catches typos in code and comments + "streetsidesoftware.code-spell-checker", + + // **JavaScript / TypeScript** + // npm IntelliSense - autocomplete npm imports in import statements + "christian-kohler.npm-intellisense", + // TypeScript Error Translator - human-readable TS error messages + "mattpocock.ts-error-translator", + + // **CSS / Colors** + // Color Info - preview CSS colors on hover + "bierner.color-info", + // Colorize - visualize CSS colors inline in the editor + "kamikillerto.vscode-colorize", + + // **Frameworks** + // Drizzle ORM Snippets - code snippets for Drizzle ORM + "drizzle-team.drizzle-orm-snippets", + + // **Testing** + // Playwright - run, debug, and generate Playwright tests from VS Code + "ms-playwright.playwright", + + // **Sandbox Theme** + // Claude Theme - provides "Claude Dark" referenced by workbench.colorTheme + "SamiHindi.claude-theme-sami-hindi" ], "settings": { "terminal.integrated.defaultProfile.linux": "fish", diff --git a/claude-code/.devcontainer/devcontainer.json b/claude-code/.devcontainer/devcontainer.json index f44e5cf..fa78a3b 100644 --- a/claude-code/.devcontainer/devcontainer.json +++ b/claude-code/.devcontainer/devcontainer.json @@ -35,7 +35,31 @@ // Markdown Preview Github Styles - renders Markdown preview with GitHub's CSS "bierner.markdown-preview-github-styles", // Docker - Dockerfile and Compose syntax, linting, and image management - "ms-azuretools.vscode-docker" + "ms-azuretools.vscode-docker", + + // **Spelling** + // Code Spell Checker - catches typos in code and comments + "streetsidesoftware.code-spell-checker", + + // **JavaScript / TypeScript** + // npm IntelliSense - autocomplete npm imports in import statements + "christian-kohler.npm-intellisense", + // TypeScript Error Translator - human-readable TS error messages + "mattpocock.ts-error-translator", + + // **CSS / Colors** + // Color Info - preview CSS colors on hover + "bierner.color-info", + // Colorize - visualize CSS colors inline in the editor + "kamikillerto.vscode-colorize", + + // **Frameworks** + // Drizzle ORM Snippets - code snippets for Drizzle ORM + "drizzle-team.drizzle-orm-snippets", + + // **Testing** + // Playwright - run, debug, and generate Playwright tests from VS Code + "ms-playwright.playwright" ], "settings": { "terminal.integrated.defaultProfile.linux": "fish", @@ -56,13 +80,7 @@ "source.organizeImports": "explicit" }, // Show workspace folder name in window title - "window.title": "${localWorkspaceFolderBasename}", - // Visual identity — Claude Dark theme with coral remote indicator - "workbench.colorTheme": "Claude Dark", - "workbench.colorCustomizations": { - "statusBarItem.remoteBackground": "#C15F3C", - "statusBarItem.remoteForeground": "#ffffff" - } + "window.title": "${localWorkspaceFolderBasename}" } } }, diff --git a/claude-code/.devcontainer/init-plugins.sh b/claude-code/.devcontainer/init-plugins.sh index 6a013f1..22c594b 100644 --- a/claude-code/.devcontainer/init-plugins.sh +++ b/claude-code/.devcontainer/init-plugins.sh @@ -16,9 +16,36 @@ else echo '{"hasCompletedOnboarding":true}' > "$HOME/.claude/.claude.json" fi -# Install plugins (customize this list) -for plugin in \ - "frontend-design@claude-plugins-official" \ - "code-review@claude-plugins-official"; do +# ── Claude Code plugins ───────────────────────────────────────────────────── +# Customize this list — remove plugins you don't use. +PLUGINS=( + "frontend-design@claude-plugins-official" + "code-review@claude-plugins-official" + "typescript-lsp@claude-plugins-official" + "code-simplifier@claude-plugins-official" + "playwright@claude-plugins-official" + "superpowers@claude-plugins-official" + "explanatory-output-style@claude-plugins-official" + "claude-md-management@claude-plugins-official" + "claude-code-setup@claude-plugins-official" + "posthog@claude-plugins-official" + "ralphex@ralphex" +) + +for plugin in "${PLUGINS[@]}"; do claude plugin install "$plugin" 2>/dev/null || true done + +# ── rtk init (token-optimized CLI proxy) ──────────────────────────────────── +# Configures rtk for the current workspace. Safe to run multiple times. +# rtk is pre-installed in the devcontainer image. +if command -v rtk &>/dev/null; then + rtk init 2>/dev/null || true +fi + +# ── agent-browser skill ───────────────────────────────────────────────────── +# Installs the agent-browser Claude Code skill for headless browser automation. +# agent-browser CLI is pre-installed in the default devcontainer image (not sandbox). +if command -v agent-browser &>/dev/null; then + agent-browser install-skill 2>/dev/null || true +fi diff --git a/claude-code/README.md b/claude-code/README.md index 4aac3b4..58dd818 100644 --- a/claude-code/README.md +++ b/claude-code/README.md @@ -54,9 +54,9 @@ Copy the example files into your project's `.devcontainer/` directory and custom Copy these to your project's `.devcontainer/`: - [`.devcontainer/docker-compose.yml`](.devcontainer/docker-compose.yml) — image reference with `pull_policy: always` -- [`.devcontainer/devcontainer.json`](.devcontainer/devcontainer.json) — full config with VS Code extensions, Claude Dark theme, fish shell, OXC formatter, node_modules volume isolation, and lifecycle commands +- [`.devcontainer/devcontainer.json`](.devcontainer/devcontainer.json) — full config with VS Code extensions, fish shell, OXC formatter, node_modules volume isolation, and lifecycle commands -**Key settings included:** Claude Dark theme with coral remote indicator, fish + bash terminal profiles, OXC formatter (with comments for switching to Biome/Prettier), node_modules/Claude config/fish history volume mounts, and `updateContentCommand` for mise/bun/Playwright setup. +**Key settings included:** fish + bash terminal profiles, OXC formatter (with comments for switching to Biome/Prettier), node_modules/Claude config/fish history volume mounts, and `updateContentCommand` for mise/bun/Playwright setup. ### Sandbox variant @@ -166,15 +166,11 @@ Add `.env.local` to `.gitignore`. Note: Docker Compose fails to start if `.env.l ### Recommended additional extensions -The template includes core extensions (Claude Code, Bun, OXC, Tailwind, YAML, Docker, Markdown Preview). These are commonly added by consumer projects: +The template includes extensions for Claude Code, Bun, OXC, Tailwind, YAML, Docker, Markdown Preview, spell checking, npm IntelliSense, TypeScript errors, CSS colors, Drizzle ORM, and Playwright. These are commonly added by consumer projects: | Extension | Purpose | |-----------|---------| -| `streetsidesoftware.code-spell-checker` | Catch typos | -| `christian-kohler.npm-intellisense` | Autocomplete npm imports | -| `mattpocock.ts-error-translator` | Human-readable TS errors | | `eamodio.gitlens` | Git blame, history, annotations | -| `ms-playwright.playwright` | Playwright test runner | ### Complete file structure