claude-code-templates 1.15.0 → 1.15.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -7
- package/bin/create-claude-config.js +15 -8
- package/package.json +2 -3
- package/src/analytics/core/AgentAnalyzer.js +17 -3
- package/src/analytics/core/ProcessDetector.js +23 -7
- package/src/analytics/core/StateCalculator.js +102 -33
- package/src/analytics/data/DataCache.js +7 -7
- package/src/analytics-web/chats_mobile.html +2590 -0
- package/src/analytics-web/components/App.js +10 -10
- package/src/analytics-web/components/SessionTimer.js +1 -1
- package/src/analytics-web/components/Sidebar.js +5 -14
- package/src/analytics-web/index.html +932 -78
- package/src/analytics.js +263 -5
- package/src/chats-mobile.js +682 -0
- package/src/claude-api-proxy.js +460 -0
- package/src/file-operations.js +422 -83
- package/src/health-check.js +310 -0
- package/src/index.js +944 -56
- package/src/tracking-service.js +31 -34
- package/components/agents/api-security-audit.md +0 -92
- package/components/agents/database-optimization.md +0 -94
- package/components/agents/react-performance-optimization.md +0 -64
- package/components/commands/check-file.md +0 -53
- package/components/commands/generate-tests.md +0 -68
- package/components/mcps/deepgraph-nextjs.json +0 -12
- package/components/mcps/deepgraph-react.json +0 -12
- package/components/mcps/deepgraph-typescript.json +0 -12
- package/components/mcps/deepgraph-vue.json +0 -12
- package/components/mcps/filesystem-access.json +0 -12
- package/components/mcps/github-integration.json +0 -11
- package/components/mcps/memory-integration.json +0 -8
- package/components/mcps/mysql-integration.json +0 -11
- package/components/mcps/postgresql-integration.json +0 -11
- package/components/mcps/web-fetch.json +0 -8
- package/src/analytics-web/components/AgentsPage.js +0 -4761
- package/templates/common/.claude/commands/git-workflow.md +0 -239
- package/templates/common/.claude/commands/project-setup.md +0 -316
- package/templates/common/.mcp.json +0 -41
- package/templates/common/CLAUDE.md +0 -109
- package/templates/common/README.md +0 -96
- package/templates/go/.mcp.json +0 -78
- package/templates/go/README.md +0 -25
- package/templates/javascript-typescript/.claude/commands/api-endpoint.md +0 -51
- package/templates/javascript-typescript/.claude/commands/debug.md +0 -52
- package/templates/javascript-typescript/.claude/commands/lint.md +0 -48
- package/templates/javascript-typescript/.claude/commands/npm-scripts.md +0 -48
- package/templates/javascript-typescript/.claude/commands/refactor.md +0 -55
- package/templates/javascript-typescript/.claude/commands/test.md +0 -61
- package/templates/javascript-typescript/.claude/commands/typescript-migrate.md +0 -51
- package/templates/javascript-typescript/.claude/settings.json +0 -142
- package/templates/javascript-typescript/.mcp.json +0 -80
- package/templates/javascript-typescript/CLAUDE.md +0 -185
- package/templates/javascript-typescript/README.md +0 -259
- package/templates/javascript-typescript/examples/angular-app/.claude/commands/components.md +0 -63
- package/templates/javascript-typescript/examples/angular-app/.claude/commands/services.md +0 -62
- package/templates/javascript-typescript/examples/node-api/.claude/commands/api-endpoint.md +0 -46
- package/templates/javascript-typescript/examples/node-api/.claude/commands/database.md +0 -56
- package/templates/javascript-typescript/examples/node-api/.claude/commands/middleware.md +0 -61
- package/templates/javascript-typescript/examples/node-api/.claude/commands/route.md +0 -57
- package/templates/javascript-typescript/examples/node-api/CLAUDE.md +0 -102
- package/templates/javascript-typescript/examples/react-app/.claude/commands/component.md +0 -29
- package/templates/javascript-typescript/examples/react-app/.claude/commands/hooks.md +0 -44
- package/templates/javascript-typescript/examples/react-app/.claude/commands/state-management.md +0 -45
- package/templates/javascript-typescript/examples/react-app/CLAUDE.md +0 -81
- package/templates/javascript-typescript/examples/react-app/agents/react-performance-optimization.md +0 -530
- package/templates/javascript-typescript/examples/react-app/agents/react-state-management.md +0 -295
- package/templates/javascript-typescript/examples/vue-app/.claude/commands/components.md +0 -46
- package/templates/javascript-typescript/examples/vue-app/.claude/commands/composables.md +0 -51
- package/templates/python/.claude/commands/lint.md +0 -111
- package/templates/python/.claude/commands/test.md +0 -73
- package/templates/python/.claude/settings.json +0 -153
- package/templates/python/.mcp.json +0 -78
- package/templates/python/CLAUDE.md +0 -276
- package/templates/python/examples/django-app/.claude/commands/admin.md +0 -264
- package/templates/python/examples/django-app/.claude/commands/django-model.md +0 -124
- package/templates/python/examples/django-app/.claude/commands/views.md +0 -222
- package/templates/python/examples/django-app/CLAUDE.md +0 -313
- package/templates/python/examples/django-app/agents/django-api-security.md +0 -642
- package/templates/python/examples/django-app/agents/django-database-optimization.md +0 -752
- package/templates/python/examples/fastapi-app/.claude/commands/api-endpoints.md +0 -513
- package/templates/python/examples/fastapi-app/.claude/commands/auth.md +0 -775
- package/templates/python/examples/fastapi-app/.claude/commands/database.md +0 -657
- package/templates/python/examples/fastapi-app/.claude/commands/deployment.md +0 -160
- package/templates/python/examples/fastapi-app/.claude/commands/testing.md +0 -927
- package/templates/python/examples/fastapi-app/CLAUDE.md +0 -229
- package/templates/python/examples/flask-app/.claude/commands/app-factory.md +0 -384
- package/templates/python/examples/flask-app/.claude/commands/blueprint.md +0 -243
- package/templates/python/examples/flask-app/.claude/commands/database.md +0 -410
- package/templates/python/examples/flask-app/.claude/commands/deployment.md +0 -620
- package/templates/python/examples/flask-app/.claude/commands/flask-route.md +0 -217
- package/templates/python/examples/flask-app/.claude/commands/testing.md +0 -559
- package/templates/python/examples/flask-app/CLAUDE.md +0 -391
- package/templates/ruby/.claude/commands/model.md +0 -360
- package/templates/ruby/.claude/commands/test.md +0 -480
- package/templates/ruby/.claude/settings.json +0 -146
- package/templates/ruby/.mcp.json +0 -83
- package/templates/ruby/CLAUDE.md +0 -284
- package/templates/ruby/examples/rails-app/.claude/commands/authentication.md +0 -490
- package/templates/ruby/examples/rails-app/CLAUDE.md +0 -376
- package/templates/rust/.mcp.json +0 -78
- package/templates/rust/README.md +0 -26
|
@@ -1,142 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"permissions": {
|
|
3
|
-
"allow": [
|
|
4
|
-
"Bash",
|
|
5
|
-
"Edit",
|
|
6
|
-
"MultiEdit",
|
|
7
|
-
"Write",
|
|
8
|
-
"Bash(npm:*)",
|
|
9
|
-
"Bash(yarn:*)",
|
|
10
|
-
"Bash(npx:*)",
|
|
11
|
-
"Bash(node:*)",
|
|
12
|
-
"Bash(git:*)",
|
|
13
|
-
"Bash(eslint:*)",
|
|
14
|
-
"Bash(prettier:*)",
|
|
15
|
-
"Bash(tsc:*)",
|
|
16
|
-
"Bash(jest:*)",
|
|
17
|
-
"Bash(vitest:*)",
|
|
18
|
-
"Bash(webpack:*)",
|
|
19
|
-
"Bash(vite:*)"
|
|
20
|
-
],
|
|
21
|
-
"deny": [
|
|
22
|
-
"Bash(curl:*)",
|
|
23
|
-
"Bash(wget:*)",
|
|
24
|
-
"Bash(rm -rf:*)"
|
|
25
|
-
],
|
|
26
|
-
"defaultMode": "allowEdits"
|
|
27
|
-
},
|
|
28
|
-
"env": {
|
|
29
|
-
"BASH_DEFAULT_TIMEOUT_MS": "60000",
|
|
30
|
-
"BASH_MAX_OUTPUT_LENGTH": "20000",
|
|
31
|
-
"CLAUDE_BASH_MAINTAIN_PROJECT_WORKING_DIR": "1",
|
|
32
|
-
"NODE_ENV": "development"
|
|
33
|
-
},
|
|
34
|
-
"includeCoAuthoredBy": true,
|
|
35
|
-
"cleanupPeriodDays": 30,
|
|
36
|
-
"hooks": {
|
|
37
|
-
"PreToolUse": [
|
|
38
|
-
{
|
|
39
|
-
"matcher": "Bash",
|
|
40
|
-
"hooks": [
|
|
41
|
-
{
|
|
42
|
-
"type": "command",
|
|
43
|
-
"command": "jq -r '\"\\(.tool_input.command) - \\(.tool_input.description // \"No description\")\"' >> ~/.claude/bash-command-log.txt"
|
|
44
|
-
}
|
|
45
|
-
]
|
|
46
|
-
},
|
|
47
|
-
{
|
|
48
|
-
"matcher": "Write",
|
|
49
|
-
"hooks": [
|
|
50
|
-
{
|
|
51
|
-
"type": "command",
|
|
52
|
-
"command": "FILE=$(echo $STDIN_JSON | jq -r '.tool_input.file_path // \"\"); CONTENT=$(echo $STDIN_JSON | jq -r '.tool_input.content // \"\"); if [[ \"$FILE\" =~ \\.(js|jsx|ts|tsx)$ ]] && echo \"$CONTENT\" | grep -q 'console\\.log'; then echo 'Warning: console.log statements should be removed before committing' >&2; exit 2; fi"
|
|
53
|
-
}
|
|
54
|
-
]
|
|
55
|
-
},
|
|
56
|
-
{
|
|
57
|
-
"matcher": "Write",
|
|
58
|
-
"hooks": [
|
|
59
|
-
{
|
|
60
|
-
"type": "command",
|
|
61
|
-
"command": "FILE=$(echo $STDIN_JSON | jq -r '.tool_input.file_path // \"\"'); if [[ \"$FILE\" == \"package.json\" ]]; then echo 'Checking for vulnerable dependencies...'; npm audit --audit-level=moderate; fi",
|
|
62
|
-
"timeout": 60
|
|
63
|
-
}
|
|
64
|
-
]
|
|
65
|
-
}
|
|
66
|
-
],
|
|
67
|
-
"PostToolUse": [
|
|
68
|
-
{
|
|
69
|
-
"matcher": "Write|Edit|MultiEdit",
|
|
70
|
-
"hooks": [
|
|
71
|
-
{
|
|
72
|
-
"type": "command",
|
|
73
|
-
"command": "FILE=$(echo $STDIN_JSON | jq -r '.tool_input.file_path // \"\"'); if [[ \"$FILE\" =~ \\.(js|jsx|ts|tsx)$ ]]; then npx prettier --write \"$FILE\"; fi",
|
|
74
|
-
"timeout": 30
|
|
75
|
-
}
|
|
76
|
-
]
|
|
77
|
-
},
|
|
78
|
-
{
|
|
79
|
-
"matcher": "Write|Edit|MultiEdit",
|
|
80
|
-
"hooks": [
|
|
81
|
-
{
|
|
82
|
-
"type": "command",
|
|
83
|
-
"command": "FILE=$(echo $STDIN_JSON | jq -r '.tool_input.file_path // \"\"'); if [[ \"$FILE\" =~ \\.(ts|tsx)$ ]]; then RESULT=$(npx tsc --noEmit 2>&1); if [ $? -ne 0 ]; then echo \"TypeScript errors found: $RESULT\" >&2; exit 2; fi; fi",
|
|
84
|
-
"timeout": 30
|
|
85
|
-
}
|
|
86
|
-
]
|
|
87
|
-
},
|
|
88
|
-
{
|
|
89
|
-
"matcher": "Write|Edit|MultiEdit",
|
|
90
|
-
"hooks": [
|
|
91
|
-
{
|
|
92
|
-
"type": "command",
|
|
93
|
-
"command": "FILE=$(echo $STDIN_JSON | jq -r '.tool_input.file_path // \"\"'); if [[ \"$FILE\" =~ \\.(js|jsx|ts|tsx)$ ]] && grep -q 'import \\* from' \"$FILE\"; then echo 'Warning: Avoid wildcard imports for better tree-shaking' >&2; exit 2; fi"
|
|
94
|
-
}
|
|
95
|
-
]
|
|
96
|
-
},
|
|
97
|
-
{
|
|
98
|
-
"matcher": "Write|Edit|MultiEdit",
|
|
99
|
-
"hooks": [
|
|
100
|
-
{
|
|
101
|
-
"type": "command",
|
|
102
|
-
"command": "FILE=$(echo $STDIN_JSON | jq -r '.tool_input.file_path // \"\"'); if [[ \"$FILE\" =~ \\.(js|jsx|ts|tsx)$ && \"$FILE\" != *\".test.\"* && \"$FILE\" != *\".spec.\"* ]]; then DIR=$(dirname \"$FILE\"); BASENAME=$(basename \"$FILE\" | sed -E 's/\\.(js|jsx|ts|tsx)$//'); for TEST_FILE in \"$DIR/$BASENAME.test.\"* \"$DIR/$BASENAME.spec.\"*; do if [ -f \"$TEST_FILE\" ]; then echo \"Running tests for $TEST_FILE...\"; if command -v jest >/dev/null 2>&1; then npx jest \"$TEST_FILE\" --passWithNoTests; elif command -v vitest >/dev/null 2>&1; then npx vitest run \"$TEST_FILE\"; fi; break; fi; done; fi",
|
|
103
|
-
"timeout": 60
|
|
104
|
-
}
|
|
105
|
-
]
|
|
106
|
-
}
|
|
107
|
-
],
|
|
108
|
-
"Notification": [
|
|
109
|
-
{
|
|
110
|
-
"matcher": "",
|
|
111
|
-
"hooks": [
|
|
112
|
-
{
|
|
113
|
-
"type": "command",
|
|
114
|
-
"command": "echo \"Claude Code notification: $(date)\" >> ~/.claude/notifications.log"
|
|
115
|
-
}
|
|
116
|
-
]
|
|
117
|
-
}
|
|
118
|
-
],
|
|
119
|
-
"Stop": [
|
|
120
|
-
{
|
|
121
|
-
"matcher": "",
|
|
122
|
-
"hooks": [
|
|
123
|
-
{
|
|
124
|
-
"type": "command",
|
|
125
|
-
"command": "if [[ -f package.json && $(git status --porcelain | grep -E '\\.js$|\\.jsx$|\\.ts$|\\.tsx$') ]]; then echo 'Running linter on changed files...'; npx eslint $(git diff --name-only --diff-filter=ACMR | grep -E '\\.js$|\\.jsx$|\\.ts$|\\.tsx$'); fi",
|
|
126
|
-
"timeout": 60
|
|
127
|
-
}
|
|
128
|
-
]
|
|
129
|
-
},
|
|
130
|
-
{
|
|
131
|
-
"matcher": "",
|
|
132
|
-
"hooks": [
|
|
133
|
-
{
|
|
134
|
-
"type": "command",
|
|
135
|
-
"command": "if [[ -f package.json && $(git status --porcelain | grep -E '\\.js$|\\.jsx$|\\.ts$|\\.tsx$') ]]; then echo 'Analyzing bundle size impact...'; if command -v bundlesize >/dev/null 2>&1; then npx bundlesize; elif npm list webpack-bundle-analyzer >/dev/null 2>&1; then echo 'Use: npx webpack-bundle-analyzer build/static/js/*.js'; else echo 'No bundle analysis tool found'; fi; fi",
|
|
136
|
-
"timeout": 60
|
|
137
|
-
}
|
|
138
|
-
]
|
|
139
|
-
}
|
|
140
|
-
]
|
|
141
|
-
}
|
|
142
|
-
}
|
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"mcpServers": {
|
|
3
|
-
"typescript-sdk": {
|
|
4
|
-
"name": "TypeScript SDK",
|
|
5
|
-
"description": "Official Anthropic SDK for building MCP servers and clients in JS/TS",
|
|
6
|
-
"command": "node",
|
|
7
|
-
"args": ["path/to/ts-sdk-server.js"],
|
|
8
|
-
"env": {}
|
|
9
|
-
},
|
|
10
|
-
"github": {
|
|
11
|
-
"name": "GitHub MCP",
|
|
12
|
-
"description": "Integration with GitHub API for managing repos, issues, and PRs",
|
|
13
|
-
"command": "node",
|
|
14
|
-
"args": ["path/to/server-github"],
|
|
15
|
-
"env": {
|
|
16
|
-
"GITHUB_TOKEN": "..."
|
|
17
|
-
}
|
|
18
|
-
},
|
|
19
|
-
"puppeteer": {
|
|
20
|
-
"name": "Puppeteer MCP",
|
|
21
|
-
"description": "Browser automation using Google Puppeteer",
|
|
22
|
-
"command": "node",
|
|
23
|
-
"args": ["path/to/server-puppeteer"],
|
|
24
|
-
"env": {}
|
|
25
|
-
},
|
|
26
|
-
"slack": {
|
|
27
|
-
"name": "Slack MCP",
|
|
28
|
-
"description": "Access to real-time Slack conversations and workflows",
|
|
29
|
-
"command": "node",
|
|
30
|
-
"args": ["path/to/server-slack"],
|
|
31
|
-
"env": {
|
|
32
|
-
"SLACK_TOKEN": "..."
|
|
33
|
-
}
|
|
34
|
-
},
|
|
35
|
-
"filesystem": {
|
|
36
|
-
"name": "File System MCP",
|
|
37
|
-
"description": "Local file management; compatible with any language",
|
|
38
|
-
"command": "node",
|
|
39
|
-
"args": ["path/to/server-filesystem"],
|
|
40
|
-
"env": {}
|
|
41
|
-
},
|
|
42
|
-
"memory-bank": {
|
|
43
|
-
"name": "Memory Bank MCP",
|
|
44
|
-
"description": "Centralized memory system for AI agents",
|
|
45
|
-
"command": "server-memory",
|
|
46
|
-
"args": [],
|
|
47
|
-
"env": {}
|
|
48
|
-
},
|
|
49
|
-
"sequential-thinking": {
|
|
50
|
-
"name": "Sequential Thinking MCP",
|
|
51
|
-
"description": "Helps LLMs decompose complex tasks into logical steps",
|
|
52
|
-
"command": "code-reasoning",
|
|
53
|
-
"args": [],
|
|
54
|
-
"env": {}
|
|
55
|
-
},
|
|
56
|
-
"brave-search": {
|
|
57
|
-
"name": "Brave Search MCP",
|
|
58
|
-
"description": "Privacy-focused web search tool",
|
|
59
|
-
"command": "server-brave-search",
|
|
60
|
-
"args": [],
|
|
61
|
-
"env": {}
|
|
62
|
-
},
|
|
63
|
-
"google-maps": {
|
|
64
|
-
"name": "Google Maps MCP",
|
|
65
|
-
"description": "Integrates Google Maps for geolocation and directions",
|
|
66
|
-
"command": "server-google-maps",
|
|
67
|
-
"args": [],
|
|
68
|
-
"env": {
|
|
69
|
-
"GOOGLE_MAPS_API_KEY": "..."
|
|
70
|
-
}
|
|
71
|
-
},
|
|
72
|
-
"deep-graph": {
|
|
73
|
-
"name": "Deep Graph MCP (Code Graph)",
|
|
74
|
-
"description": "Transforms source code into semantic graphs via DeepGraph",
|
|
75
|
-
"command": "mcp-code-graph",
|
|
76
|
-
"args": [],
|
|
77
|
-
"env": {}
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
}
|
|
@@ -1,185 +0,0 @@
|
|
|
1
|
-
# CLAUDE.md
|
|
2
|
-
|
|
3
|
-
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
|
4
|
-
|
|
5
|
-
## Project Overview
|
|
6
|
-
|
|
7
|
-
This is a JavaScript/TypeScript project optimized for modern web development. The project uses industry-standard tools and follows best practices for scalable application development.
|
|
8
|
-
|
|
9
|
-
## Development Commands
|
|
10
|
-
|
|
11
|
-
### Package Management
|
|
12
|
-
- `npm install` or `yarn install` - Install dependencies
|
|
13
|
-
- `npm ci` or `yarn install --frozen-lockfile` - Install dependencies for CI/CD
|
|
14
|
-
- `npm update` or `yarn upgrade` - Update dependencies
|
|
15
|
-
|
|
16
|
-
### Build Commands
|
|
17
|
-
- `npm run build` - Build the project for production
|
|
18
|
-
- `npm run dev` or `npm start` - Start development server
|
|
19
|
-
- `npm run preview` - Preview production build locally
|
|
20
|
-
|
|
21
|
-
### Testing Commands
|
|
22
|
-
- `npm test` or `npm run test` - Run all tests
|
|
23
|
-
- `npm run test:watch` - Run tests in watch mode
|
|
24
|
-
- `npm run test:coverage` - Run tests with coverage report
|
|
25
|
-
- `npm run test:unit` - Run unit tests only
|
|
26
|
-
- `npm run test:integration` - Run integration tests only
|
|
27
|
-
- `npm run test:e2e` - Run end-to-end tests
|
|
28
|
-
|
|
29
|
-
### Code Quality Commands
|
|
30
|
-
- `npm run lint` - Run ESLint for code linting
|
|
31
|
-
- `npm run lint:fix` - Run ESLint with auto-fix
|
|
32
|
-
- `npm run format` - Format code with Prettier
|
|
33
|
-
- `npm run format:check` - Check code formatting
|
|
34
|
-
- `npm run typecheck` - Run TypeScript type checking
|
|
35
|
-
|
|
36
|
-
### Development Tools
|
|
37
|
-
- `npm run storybook` - Start Storybook (if available)
|
|
38
|
-
- `npm run analyze` - Analyze bundle size
|
|
39
|
-
- `npm run clean` - Clean build artifacts
|
|
40
|
-
|
|
41
|
-
## Technology Stack
|
|
42
|
-
|
|
43
|
-
### Core Technologies
|
|
44
|
-
- **JavaScript/TypeScript** - Primary programming languages
|
|
45
|
-
- **Node.js** - Runtime environment
|
|
46
|
-
- **npm/yarn** - Package management
|
|
47
|
-
|
|
48
|
-
### Common Frameworks
|
|
49
|
-
- **React** - UI library with hooks and functional components
|
|
50
|
-
- **Vue.js** - Progressive framework for building user interfaces
|
|
51
|
-
- **Angular** - Full-featured framework for web applications
|
|
52
|
-
- **Express.js** - Web application framework for Node.js
|
|
53
|
-
- **Next.js** - React framework with SSR/SSG capabilities
|
|
54
|
-
|
|
55
|
-
### Build Tools
|
|
56
|
-
- **Vite** - Fast build tool and development server
|
|
57
|
-
- **Webpack** - Module bundler
|
|
58
|
-
- **Rollup** - Module bundler for libraries
|
|
59
|
-
- **esbuild** - Extremely fast JavaScript bundler
|
|
60
|
-
|
|
61
|
-
### Testing Framework
|
|
62
|
-
- **Jest** - JavaScript testing framework
|
|
63
|
-
- **Vitest** - Fast unit test framework
|
|
64
|
-
- **Testing Library** - Simple and complete testing utilities
|
|
65
|
-
- **Cypress** - End-to-end testing framework
|
|
66
|
-
- **Playwright** - Cross-browser testing
|
|
67
|
-
|
|
68
|
-
### Code Quality Tools
|
|
69
|
-
- **ESLint** - JavaScript/TypeScript linter
|
|
70
|
-
- **Prettier** - Code formatter
|
|
71
|
-
- **TypeScript** - Static type checking
|
|
72
|
-
- **Husky** - Git hooks
|
|
73
|
-
|
|
74
|
-
## Project Structure Guidelines
|
|
75
|
-
|
|
76
|
-
### File Organization
|
|
77
|
-
```
|
|
78
|
-
src/
|
|
79
|
-
├── components/ # Reusable UI components
|
|
80
|
-
├── pages/ # Page components or routes
|
|
81
|
-
├── hooks/ # Custom React hooks
|
|
82
|
-
├── utils/ # Utility functions
|
|
83
|
-
├── services/ # API calls and external services
|
|
84
|
-
├── types/ # TypeScript type definitions
|
|
85
|
-
├── constants/ # Application constants
|
|
86
|
-
├── styles/ # Global styles and themes
|
|
87
|
-
└── tests/ # Test files
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
### Naming Conventions
|
|
91
|
-
- **Files**: Use kebab-case for file names (`user-profile.component.ts`)
|
|
92
|
-
- **Components**: Use PascalCase for component names (`UserProfile`)
|
|
93
|
-
- **Functions**: Use camelCase for function names (`getUserData`)
|
|
94
|
-
- **Constants**: Use UPPER_SNAKE_CASE for constants (`API_BASE_URL`)
|
|
95
|
-
- **Types/Interfaces**: Use PascalCase with descriptive names (`UserData`, `ApiResponse`)
|
|
96
|
-
|
|
97
|
-
## TypeScript Guidelines
|
|
98
|
-
|
|
99
|
-
### Type Safety
|
|
100
|
-
- Enable strict mode in `tsconfig.json`
|
|
101
|
-
- Use explicit types for function parameters and return values
|
|
102
|
-
- Prefer interfaces over types for object shapes
|
|
103
|
-
- Use union types for multiple possible values
|
|
104
|
-
- Avoid `any` type - use `unknown` when type is truly unknown
|
|
105
|
-
|
|
106
|
-
### Best Practices
|
|
107
|
-
- Use type guards for runtime type checking
|
|
108
|
-
- Leverage utility types (`Partial`, `Pick`, `Omit`, etc.)
|
|
109
|
-
- Create custom types for domain-specific data
|
|
110
|
-
- Use enums for finite sets of values
|
|
111
|
-
- Document complex types with JSDoc comments
|
|
112
|
-
|
|
113
|
-
## Code Quality Standards
|
|
114
|
-
|
|
115
|
-
### ESLint Configuration
|
|
116
|
-
- Use recommended ESLint rules for JavaScript/TypeScript
|
|
117
|
-
- Enable React-specific rules if using React
|
|
118
|
-
- Configure import/export rules for consistent module usage
|
|
119
|
-
- Set up accessibility rules for inclusive development
|
|
120
|
-
|
|
121
|
-
### Prettier Configuration
|
|
122
|
-
- Use consistent indentation (2 spaces recommended)
|
|
123
|
-
- Set maximum line length (80-100 characters)
|
|
124
|
-
- Use single quotes for strings
|
|
125
|
-
- Add trailing commas for better git diffs
|
|
126
|
-
|
|
127
|
-
### Testing Standards
|
|
128
|
-
- Aim for 80%+ test coverage
|
|
129
|
-
- Write unit tests for utilities and business logic
|
|
130
|
-
- Use integration tests for component interactions
|
|
131
|
-
- Implement e2e tests for critical user flows
|
|
132
|
-
- Follow AAA pattern (Arrange, Act, Assert)
|
|
133
|
-
|
|
134
|
-
## Performance Optimization
|
|
135
|
-
|
|
136
|
-
### Bundle Optimization
|
|
137
|
-
- Use code splitting for large applications
|
|
138
|
-
- Implement lazy loading for routes and components
|
|
139
|
-
- Optimize images and assets
|
|
140
|
-
- Use tree shaking to eliminate dead code
|
|
141
|
-
- Analyze bundle size regularly
|
|
142
|
-
|
|
143
|
-
### Runtime Performance
|
|
144
|
-
- Implement proper memoization (React.memo, useMemo, useCallback)
|
|
145
|
-
- Use virtualization for large lists
|
|
146
|
-
- Optimize re-renders in React applications
|
|
147
|
-
- Implement proper error boundaries
|
|
148
|
-
- Use web workers for heavy computations
|
|
149
|
-
|
|
150
|
-
## Security Guidelines
|
|
151
|
-
|
|
152
|
-
### Dependencies
|
|
153
|
-
- Regularly audit dependencies with `npm audit`
|
|
154
|
-
- Keep dependencies updated
|
|
155
|
-
- Use lock files (`package-lock.json`, `yarn.lock`)
|
|
156
|
-
- Avoid dependencies with known vulnerabilities
|
|
157
|
-
|
|
158
|
-
### Code Security
|
|
159
|
-
- Sanitize user inputs
|
|
160
|
-
- Use HTTPS for API calls
|
|
161
|
-
- Implement proper authentication and authorization
|
|
162
|
-
- Store sensitive data securely (environment variables)
|
|
163
|
-
- Use Content Security Policy (CSP) headers
|
|
164
|
-
|
|
165
|
-
## Development Workflow
|
|
166
|
-
|
|
167
|
-
### Before Starting
|
|
168
|
-
1. Check Node.js version compatibility
|
|
169
|
-
2. Install dependencies with `npm install`
|
|
170
|
-
3. Copy environment variables from `.env.example`
|
|
171
|
-
4. Run type checking with `npm run typecheck`
|
|
172
|
-
|
|
173
|
-
### During Development
|
|
174
|
-
1. Use TypeScript for type safety
|
|
175
|
-
2. Run linter frequently to catch issues early
|
|
176
|
-
3. Write tests for new features
|
|
177
|
-
4. Use meaningful commit messages
|
|
178
|
-
5. Review code changes before committing
|
|
179
|
-
|
|
180
|
-
### Before Committing
|
|
181
|
-
1. Run full test suite: `npm test`
|
|
182
|
-
2. Check linting: `npm run lint`
|
|
183
|
-
3. Verify formatting: `npm run format:check`
|
|
184
|
-
4. Run type checking: `npm run typecheck`
|
|
185
|
-
5. Test production build: `npm run build`
|
|
@@ -1,259 +0,0 @@
|
|
|
1
|
-
# JavaScript/TypeScript Templates
|
|
2
|
-
|
|
3
|
-
**Claude Code configuration template optimized for modern JavaScript and TypeScript development**
|
|
4
|
-
|
|
5
|
-
This folder contains a comprehensive Claude Code template specifically designed for JavaScript and TypeScript projects, supporting popular frameworks like React, Vue.js, Angular, and Node.js.
|
|
6
|
-
|
|
7
|
-
## 📁 What's in This Folder
|
|
8
|
-
|
|
9
|
-
This template provides the foundation for JavaScript/TypeScript development with Claude Code:
|
|
10
|
-
|
|
11
|
-
### 📄 Files Included
|
|
12
|
-
- **`CLAUDE.md`** - Complete JavaScript/TypeScript development guidance for Claude Code
|
|
13
|
-
- **`README.md`** - This documentation file
|
|
14
|
-
|
|
15
|
-
### 🎯 Template Features
|
|
16
|
-
When you use this template with the installer, it automatically creates:
|
|
17
|
-
- **`.claude/settings.json`** - Optimized settings for JS/TS projects
|
|
18
|
-
- **`.claude/commands/`** - Ready-to-use commands for common tasks
|
|
19
|
-
|
|
20
|
-
## 🚀 How to Use This Template
|
|
21
|
-
|
|
22
|
-
### Option 1: Automated Installation (Recommended)
|
|
23
|
-
Use the CLI installer to automatically set up this template in your project:
|
|
24
|
-
|
|
25
|
-
```bash
|
|
26
|
-
cd your-javascript-project
|
|
27
|
-
npx claude-code-templates --language javascript-typescript
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
The installer will:
|
|
31
|
-
- Copy the `CLAUDE.md` file to your project
|
|
32
|
-
- Auto-detect your framework (React, Vue, Node.js, etc.)
|
|
33
|
-
- Create appropriate `.claude/` configuration files
|
|
34
|
-
- Set up framework-specific commands
|
|
35
|
-
- Configure development workflows
|
|
36
|
-
|
|
37
|
-
### Option 2: Manual Installation
|
|
38
|
-
Copy the template manually for more control:
|
|
39
|
-
|
|
40
|
-
```bash
|
|
41
|
-
# Clone the repository
|
|
42
|
-
git clone https://github.com/davila7/claude-code-templates.git
|
|
43
|
-
|
|
44
|
-
# Copy the JavaScript/TypeScript template
|
|
45
|
-
cp claude-code-templates/javascript-typescript/CLAUDE.md your-project/
|
|
46
|
-
|
|
47
|
-
# Then use the CLI to complete the setup
|
|
48
|
-
cd your-project
|
|
49
|
-
npx claude-code-templates --language javascript-typescript
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
## 🎨 Framework Support
|
|
53
|
-
|
|
54
|
-
This template automatically configures Claude Code for:
|
|
55
|
-
|
|
56
|
-
### Frontend Frameworks
|
|
57
|
-
- **React** - Components, hooks, JSX, testing with React Testing Library
|
|
58
|
-
- **Vue.js** - Composition API, single-file components, state management
|
|
59
|
-
- **Angular** - TypeScript-first development, RxJS patterns, CLI integration
|
|
60
|
-
- **Svelte** - Compile-time optimizations, modern JavaScript patterns
|
|
61
|
-
|
|
62
|
-
### Backend Frameworks
|
|
63
|
-
- **Express.js** - RESTful APIs, middleware, error handling
|
|
64
|
-
- **Fastify** - High-performance Node.js applications
|
|
65
|
-
- **NestJS** - Enterprise-grade TypeScript framework
|
|
66
|
-
- **Next.js** - Full-stack React applications with SSR/SSG
|
|
67
|
-
|
|
68
|
-
### Build Tools & Testing
|
|
69
|
-
- **Vite, Webpack, esbuild** - Modern build tool configurations
|
|
70
|
-
- **Jest, Vitest, Cypress** - Testing framework optimization
|
|
71
|
-
- **ESLint, Prettier, TypeScript** - Code quality and formatting
|
|
72
|
-
|
|
73
|
-
## 🛠️ Commands Created by the Template
|
|
74
|
-
|
|
75
|
-
When installed, this template provides commands for:
|
|
76
|
-
|
|
77
|
-
### 🧪 Testing & Quality
|
|
78
|
-
- **`/test`** - Run tests with Jest, Vitest, or other frameworks
|
|
79
|
-
- **`/lint`** - ESLint with auto-fix capabilities
|
|
80
|
-
- **`/typescript-migrate`** - Convert JavaScript files to TypeScript
|
|
81
|
-
|
|
82
|
-
### 🔧 Development Tools
|
|
83
|
-
- **`/debug`** - Debug Node.js applications and browser code
|
|
84
|
-
- **`/refactor`** - AI-assisted code refactoring
|
|
85
|
-
- **`/npm-scripts`** - Manage and execute npm/yarn scripts
|
|
86
|
-
|
|
87
|
-
### ⚡ Framework-Specific Commands
|
|
88
|
-
- **`/react-component`** - Generate React components (React projects)
|
|
89
|
-
- **`/api-endpoint`** - Create Express.js endpoints (Node.js projects)
|
|
90
|
-
- **`/route`** - Create API routes (Node.js projects)
|
|
91
|
-
- **`/component`** - Create components (React/Vue projects)
|
|
92
|
-
|
|
93
|
-
## 🎯 What Happens When You Install
|
|
94
|
-
|
|
95
|
-
### Step 1: Framework Detection
|
|
96
|
-
The installer analyzes your project to detect:
|
|
97
|
-
- Package.json dependencies
|
|
98
|
-
- Project structure
|
|
99
|
-
- Framework type (React, Vue, Angular, Node.js)
|
|
100
|
-
|
|
101
|
-
### Step 2: Template Configuration
|
|
102
|
-
Based on detection, it creates:
|
|
103
|
-
```
|
|
104
|
-
your-project/
|
|
105
|
-
├── CLAUDE.md # Copied from this template
|
|
106
|
-
├── .claude/
|
|
107
|
-
│ ├── settings.json # Framework-specific settings
|
|
108
|
-
│ └── commands/ # Commands for your framework
|
|
109
|
-
│ ├── test.md
|
|
110
|
-
│ ├── lint.md
|
|
111
|
-
│ ├── debug.md
|
|
112
|
-
│ └── [framework-specific commands]
|
|
113
|
-
```
|
|
114
|
-
|
|
115
|
-
### Step 3: Framework Customization
|
|
116
|
-
For specific frameworks, additional commands are added:
|
|
117
|
-
|
|
118
|
-
**React Projects:**
|
|
119
|
-
- Component generation with TypeScript support
|
|
120
|
-
- React hooks creation and management
|
|
121
|
-
- Testing with React Testing Library patterns
|
|
122
|
-
|
|
123
|
-
**Node.js Projects:**
|
|
124
|
-
- RESTful API endpoint creation
|
|
125
|
-
- Middleware development patterns
|
|
126
|
-
- Database integration helpers
|
|
127
|
-
|
|
128
|
-
**Vue.js Projects:**
|
|
129
|
-
- Single-file component templates
|
|
130
|
-
- Composition API patterns
|
|
131
|
-
- Vue 3 best practices
|
|
132
|
-
|
|
133
|
-
## 📚 What's in the CLAUDE.md File
|
|
134
|
-
|
|
135
|
-
The `CLAUDE.md` file in this folder contains comprehensive guidance for:
|
|
136
|
-
|
|
137
|
-
### Development Commands
|
|
138
|
-
- Package management (npm, yarn, pnpm)
|
|
139
|
-
- Build commands (dev, build, preview)
|
|
140
|
-
- Testing commands (unit, integration, e2e)
|
|
141
|
-
- Code quality commands (lint, format, typecheck)
|
|
142
|
-
|
|
143
|
-
### Technology Stack Guidelines
|
|
144
|
-
- JavaScript/TypeScript best practices
|
|
145
|
-
- Framework-specific patterns (React, Vue, Angular, Node.js)
|
|
146
|
-
- Build tools configuration (Vite, Webpack, esbuild)
|
|
147
|
-
- Testing frameworks (Jest, Vitest, Cypress, Playwright)
|
|
148
|
-
|
|
149
|
-
### Project Structure Recommendations
|
|
150
|
-
- File organization patterns
|
|
151
|
-
- Naming conventions
|
|
152
|
-
- TypeScript configuration
|
|
153
|
-
- Code quality standards
|
|
154
|
-
|
|
155
|
-
### Performance & Security
|
|
156
|
-
- Bundle optimization strategies
|
|
157
|
-
- Runtime performance tips
|
|
158
|
-
- Security best practices
|
|
159
|
-
- Dependency management
|
|
160
|
-
|
|
161
|
-
## 🚀 Getting Started
|
|
162
|
-
|
|
163
|
-
1. **Navigate to your JavaScript/TypeScript project:**
|
|
164
|
-
```bash
|
|
165
|
-
cd your-project
|
|
166
|
-
```
|
|
167
|
-
|
|
168
|
-
2. **Run the installer:**
|
|
169
|
-
```bash
|
|
170
|
-
npx claude-code-templates --language javascript-typescript
|
|
171
|
-
```
|
|
172
|
-
|
|
173
|
-
3. **Start Claude Code:**
|
|
174
|
-
```bash
|
|
175
|
-
claude
|
|
176
|
-
```
|
|
177
|
-
|
|
178
|
-
4. **Try the commands:**
|
|
179
|
-
```bash
|
|
180
|
-
/test # Run your tests
|
|
181
|
-
/lint # Check code quality
|
|
182
|
-
/component # Create components (React/Vue)
|
|
183
|
-
/route # Create API routes (Node.js)
|
|
184
|
-
```
|
|
185
|
-
|
|
186
|
-
## 🔧 Customization
|
|
187
|
-
|
|
188
|
-
After installation, you can customize the setup:
|
|
189
|
-
|
|
190
|
-
### Modify Commands
|
|
191
|
-
Edit files in `.claude/commands/` to match your workflow:
|
|
192
|
-
```bash
|
|
193
|
-
# Edit the test command
|
|
194
|
-
vim .claude/commands/test.md
|
|
195
|
-
|
|
196
|
-
# Add a custom command
|
|
197
|
-
echo "# Deploy Command" > .claude/commands/deploy.md
|
|
198
|
-
```
|
|
199
|
-
|
|
200
|
-
### Adjust Settings
|
|
201
|
-
Update `.claude/settings.json` for your project:
|
|
202
|
-
```json
|
|
203
|
-
{
|
|
204
|
-
"framework": "react",
|
|
205
|
-
"testFramework": "jest",
|
|
206
|
-
"packageManager": "npm",
|
|
207
|
-
"buildTool": "vite"
|
|
208
|
-
}
|
|
209
|
-
```
|
|
210
|
-
|
|
211
|
-
### Add Framework Features
|
|
212
|
-
The template adapts to your specific framework needs automatically.
|
|
213
|
-
|
|
214
|
-
## 📖 Learn More
|
|
215
|
-
|
|
216
|
-
- **Main Project**: [Claude Code Templates](../README.md)
|
|
217
|
-
- **Common Templates**: [Universal patterns](../common/README.md)
|
|
218
|
-
- **Python Templates**: [Python development](../python/README.md)
|
|
219
|
-
- **CLI Tool**: [Automated installer](../cli-tool/README.md)
|
|
220
|
-
|
|
221
|
-
## 💡 Why Use This Template?
|
|
222
|
-
|
|
223
|
-
### Before (Manual Setup)
|
|
224
|
-
```bash
|
|
225
|
-
# Create CLAUDE.md from scratch
|
|
226
|
-
# Research JS/TS best practices
|
|
227
|
-
# Configure commands manually
|
|
228
|
-
# Set up linting and testing
|
|
229
|
-
# Configure TypeScript
|
|
230
|
-
# ... hours of setup
|
|
231
|
-
```
|
|
232
|
-
|
|
233
|
-
### After (With This Template)
|
|
234
|
-
```bash
|
|
235
|
-
npx claude-code-templates --language javascript-typescript
|
|
236
|
-
# ✅ Everything configured in 30 seconds!
|
|
237
|
-
```
|
|
238
|
-
|
|
239
|
-
### Benefits
|
|
240
|
-
- **Instant Setup** - Get started immediately with proven configurations
|
|
241
|
-
- **Framework-Aware** - Automatically adapts to React, Vue, Node.js, etc.
|
|
242
|
-
- **Best Practices** - Uses industry-standard patterns and tools
|
|
243
|
-
- **TypeScript Ready** - Full TypeScript support out of the box
|
|
244
|
-
- **Testing Included** - Pre-configured for Jest, Vitest, and more
|
|
245
|
-
|
|
246
|
-
## 🤝 Contributing
|
|
247
|
-
|
|
248
|
-
Help improve this JavaScript/TypeScript template:
|
|
249
|
-
|
|
250
|
-
1. Test the template with different JS/TS projects
|
|
251
|
-
2. Report issues or suggest improvements
|
|
252
|
-
3. Add support for new frameworks or tools
|
|
253
|
-
4. Share your customizations and best practices
|
|
254
|
-
|
|
255
|
-
Your contributions make this template better for the entire JavaScript/TypeScript community!
|
|
256
|
-
|
|
257
|
-
---
|
|
258
|
-
|
|
259
|
-
**Ready to supercharge your JavaScript/TypeScript development?** Run `npx claude-code-templates --language javascript-typescript` in your project now!
|