Skip to content

Commit 83d8b75

Browse files
gatezhgatezh
committed
fix(claude-code): scope theme to sandbox, add extensions/plugins/hooks (#61, #62)
- Remove workbench.colorTheme and coral status bar from default variant - Add Claude Dark theme extension to sandbox (was missing, theme couldn't render) - Add 7 shared extensions: spell checker, npm intellisense, TS error translator, color-info, colorize, Drizzle snippets, Playwright - Expand init-plugins.sh to 11 plugins with rtk init and agent-browser - Add PreToolUse hooks gating commit/PR behind lint/test/build - Remove Bash(gh:*) from permissions allowlist
1 parent 6ab4a67 commit 83d8b75

5 files changed

Lines changed: 110 additions & 21 deletions

File tree

‎claude-code/.claude/settings.json‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,32 @@
55
"Bash(npx:*)",
66
"Bash(git:*)",
77
"Bash(mise:*)",
8-
"Bash(gh:*)",
98
"Bash(curl:*)",
109
"Bash(ls:*)",
1110
"Bash(mkdir:*)",
1211
"Bash(cat:*)",
1312
"Bash(find:*)"
1413
]
14+
},
15+
"hooks": {
16+
"PreToolUse": [
17+
{
18+
"matcher": "Bash",
19+
"hooks": [
20+
{
21+
"type": "command",
22+
"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; }",
23+
"timeout": 30,
24+
"statusMessage": "Running lint and typecheck..."
25+
},
26+
{
27+
"type": "command",
28+
"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; }",
29+
"timeout": 300,
30+
"statusMessage": "Running full CI checks (lint, test, build)..."
31+
}
32+
]
33+
}
34+
]
1535
}
1636
}

‎claude-code/.devcontainer/claude-sandbox/devcontainer.json‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,35 @@
3737
// Markdown Preview Github Styles - renders Markdown preview with GitHub's CSS
3838
"bierner.markdown-preview-github-styles",
3939
// Docker - Dockerfile and Compose syntax, linting, and image management
40-
"ms-azuretools.vscode-docker"
40+
"ms-azuretools.vscode-docker",
41+
42+
// **Spelling**
43+
// Code Spell Checker - catches typos in code and comments
44+
"streetsidesoftware.code-spell-checker",
45+
46+
// **JavaScript / TypeScript**
47+
// npm IntelliSense - autocomplete npm imports in import statements
48+
"christian-kohler.npm-intellisense",
49+
// TypeScript Error Translator - human-readable TS error messages
50+
"mattpocock.ts-error-translator",
51+
52+
// **CSS / Colors**
53+
// Color Info - preview CSS colors on hover
54+
"bierner.color-info",
55+
// Colorize - visualize CSS colors inline in the editor
56+
"kamikillerto.vscode-colorize",
57+
58+
// **Frameworks**
59+
// Drizzle ORM Snippets - code snippets for Drizzle ORM
60+
"drizzle-team.drizzle-orm-snippets",
61+
62+
// **Testing**
63+
// Playwright - run, debug, and generate Playwright tests from VS Code
64+
"ms-playwright.playwright",
65+
66+
// **Sandbox Theme**
67+
// Claude Theme - provides "Claude Dark" referenced by workbench.colorTheme
68+
"SamiHindi.claude-theme-sami-hindi"
4169
],
4270
"settings": {
4371
"terminal.integrated.defaultProfile.linux": "fish",

‎claude-code/.devcontainer/devcontainer.json‎

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,31 @@
3535
// Markdown Preview Github Styles - renders Markdown preview with GitHub's CSS
3636
"bierner.markdown-preview-github-styles",
3737
// Docker - Dockerfile and Compose syntax, linting, and image management
38-
"ms-azuretools.vscode-docker"
38+
"ms-azuretools.vscode-docker",
39+
40+
// **Spelling**
41+
// Code Spell Checker - catches typos in code and comments
42+
"streetsidesoftware.code-spell-checker",
43+
44+
// **JavaScript / TypeScript**
45+
// npm IntelliSense - autocomplete npm imports in import statements
46+
"christian-kohler.npm-intellisense",
47+
// TypeScript Error Translator - human-readable TS error messages
48+
"mattpocock.ts-error-translator",
49+
50+
// **CSS / Colors**
51+
// Color Info - preview CSS colors on hover
52+
"bierner.color-info",
53+
// Colorize - visualize CSS colors inline in the editor
54+
"kamikillerto.vscode-colorize",
55+
56+
// **Frameworks**
57+
// Drizzle ORM Snippets - code snippets for Drizzle ORM
58+
"drizzle-team.drizzle-orm-snippets",
59+
60+
// **Testing**
61+
// Playwright - run, debug, and generate Playwright tests from VS Code
62+
"ms-playwright.playwright"
3963
],
4064
"settings": {
4165
"terminal.integrated.defaultProfile.linux": "fish",
@@ -56,13 +80,7 @@
5680
"source.organizeImports": "explicit"
5781
},
5882
// Show workspace folder name in window title
59-
"window.title": "${localWorkspaceFolderBasename}",
60-
// Visual identity — Claude Dark theme with coral remote indicator
61-
"workbench.colorTheme": "Claude Dark",
62-
"workbench.colorCustomizations": {
63-
"statusBarItem.remoteBackground": "#C15F3C",
64-
"statusBarItem.remoteForeground": "#ffffff"
65-
}
83+
"window.title": "${localWorkspaceFolderBasename}"
6684
}
6785
}
6886
},

‎claude-code/.devcontainer/init-plugins.sh‎

Lines changed: 31 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,36 @@ else
1616
echo '{"hasCompletedOnboarding":true}' > "$HOME/.claude/.claude.json"
1717
fi
1818

19-
# Install plugins (customize this list)
20-
for plugin in \
21-
"frontend-design@claude-plugins-official" \
22-
"code-review@claude-plugins-official"; do
19+
# ── Claude Code plugins ─────────────────────────────────────────────────────
20+
# Customize this list — remove plugins you don't use.
21+
PLUGINS=(
22+
"frontend-design@claude-plugins-official"
23+
"code-review@claude-plugins-official"
24+
"typescript-lsp@claude-plugins-official"
25+
"code-simplifier@claude-plugins-official"
26+
"playwright@claude-plugins-official"
27+
"superpowers@claude-plugins-official"
28+
"explanatory-output-style@claude-plugins-official"
29+
"claude-md-management@claude-plugins-official"
30+
"claude-code-setup@claude-plugins-official"
31+
"posthog@claude-plugins-official"
32+
"ralphex@ralphex"
33+
)
34+
35+
for plugin in "${PLUGINS[@]}"; do
2336
claude plugin install "$plugin" 2>/dev/null || true
2437
done
38+
39+
# ── rtk init (token-optimized CLI proxy) ────────────────────────────────────
40+
# Configures rtk for the current workspace. Safe to run multiple times.
41+
# rtk is pre-installed in the devcontainer image.
42+
if command -v rtk &>/dev/null; then
43+
rtk init 2>/dev/null || true
44+
fi
45+
46+
# ── agent-browser skill ─────────────────────────────────────────────────────
47+
# Installs the agent-browser Claude Code skill for headless browser automation.
48+
# agent-browser CLI is pre-installed in the default devcontainer image (not sandbox).
49+
if command -v agent-browser &>/dev/null; then
50+
agent-browser install-skill 2>/dev/null || true
51+
fi

‎claude-code/README.md‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -54,9 +54,9 @@ Copy the example files into your project's `.devcontainer/` directory and custom
5454
Copy these to your project's `.devcontainer/`:
5555

5656
- [`.devcontainer/docker-compose.yml`](.devcontainer/docker-compose.yml) — image reference with `pull_policy: always`
57-
- [`.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
57+
- [`.devcontainer/devcontainer.json`](.devcontainer/devcontainer.json) — full config with VS Code extensions, fish shell, OXC formatter, node_modules volume isolation, and lifecycle commands
5858

59-
**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.
59+
**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.
6060

6161
### Sandbox variant
6262

@@ -166,15 +166,11 @@ Add `.env.local` to `.gitignore`. Note: Docker Compose fails to start if `.env.l
166166
167167
### Recommended additional extensions
168168
169-
The template includes core extensions (Claude Code, Bun, OXC, Tailwind, YAML, Docker, Markdown Preview). These are commonly added by consumer projects:
169+
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:
170170
171171
| Extension | Purpose |
172172
|-----------|---------|
173-
| `streetsidesoftware.code-spell-checker` | Catch typos |
174-
| `christian-kohler.npm-intellisense` | Autocomplete npm imports |
175-
| `mattpocock.ts-error-translator` | Human-readable TS errors |
176173
| `eamodio.gitlens` | Git blame, history, annotations |
177-
| `ms-playwright.playwright` | Playwright test runner |
178174
179175
### Complete file structure
180176

0 commit comments

Comments
 (0)