Fullstack Developer — Claude Code Toolkit

A reusable set of Claude Code agents and rules for fullstack JavaScript development teams. Copy this toolkit into any new project to get Claude working with your project's specific context from day one.

Tech Stack: JavaScript/TypeScript, React + Vite, Ant Design, Express, Firebase Functions, Cloud Run

What's in this toolkit

.claude/
├── CONTEXT.md                   ← project-level instructions loaded by Claude automatically
├── kin-coding-agent-instructions.md ← Kin Analytics coding standards and non-negotiables
├── agents/
│   ├── code-reviewer.md         ← structured code review for React/Express/fullstack
│   ├── debugger.md              ← root-cause debugging for frontend and backend
│   ├── doc-writer.md            ← JSDoc, component docs, and API documentation
│   └── security-checker.md      ← security scanning for XSS, secrets, and vulnerabilities
└── rules/
    ├── javascript.md            ← JavaScript/React/Express style and best practices
    └── security.md              ← security rules for web applications and APIs

How to adopt this toolkit in a new project

1. Copy the .claude/ directory into your project root

cp -r /path/to/fullstack_developer/.claude /path/to/your-project/

2. Update .claude/CONTEXT.md

Open CONTEXT.md and add your project's actual build, test, and deployment commands to the Build, Test, and Deployment Commands section. Update the stack description if your project differs from the defaults.

3. Configure .claude/settings.json

Review and adjust permissions based on your project's needs.

4. Start using the agents

See the full guide below.

How to use the agents

Agents are markdown files that tell Claude how to approach a specific task — what to check, in what order, and how to format the response. You invoke them by naming them in your prompt. No special syntax required.

code-reviewer.md — Code Review

When to use it: before merging code, after finishing a component or API endpoint, or when you want a second opinion on your implementation.

What to pass: the file path, component name, or API endpoint to review.

# Review a full component
claude "Use the code-reviewer agent to review src/components/UserProfile.jsx"

# Review an API endpoint
claude "Use the code-reviewer agent to review the /api/users route in src/routes/users.js"

# Review with specific focus
claude "Use the code-reviewer agent to review src/hooks/useAuth.js, focusing on error handling"

What to expect: an overall summary of code quality, followed by findings organized by severity (critical / important / suggestion), and at least one positive. Each finding includes the affected code, why it is a problem, and the suggested fix.

debugger.md — Debugging

When to use it: when you have a console error, when the app behaves unexpectedly, when an API endpoint fails, or when React components aren't rendering correctly.

What to pass: the full error message from the console/terminal and/or the path of the file where the error occurs.

# Pass the error message directly
claude "I have this error:
Uncaught TypeError: Cannot read property 'name' of undefined
  at UserCard.jsx:15
Use the debugger agent to find the root cause."

# Point to the file
claude "Use the debugger agent to inspect src/components/Dashboard.jsx — data isn't loading"

# Debug an API issue
claude "Use the debugger agent for POST /api/login — getting 401 errors"

What to expect: root cause in one sentence, evidence from the error/logs, fix in code, explanation of why the fix works, and a prevention suggestion.

doc-writer.md — Documentation

When to use it: after finishing a component or function, before sharing code with the team, or when you inherit undocumented code.

What to pass: the file path, component name, or API endpoint to document.

# Document all functions in a module
claude "Use the doc-writer agent to write JSDoc for all functions in src/utils/auth.js"

# Document a component
claude "Use the doc-writer agent to document the UserProfile component in src/components/UserProfile.jsx"

# Document an API endpoint
claude "Use the doc-writer agent to document the POST /api/users endpoint"

# Generate a README for a module
claude "Use the doc-writer agent to generate a README for the src/hooks/ directory"

What to expect: JSDoc comments with proper formatting, component documentation with props and usage examples, API endpoint documentation with request/response examples.

security-checker.md — Security Audit

When to use it: before deployment, during code review, or when adding new features that handle user data or authentication.

What to pass: the file path or feature to audit.

# Security scan for a specific file
claude "Use the security-checker agent to audit src/routes/auth.js"

# Full security audit
claude "Use the security-checker agent to scan the entire src/ directory for security issues"

# Check for exposed secrets
claude "Use the security-checker agent to check if any API keys or secrets are hardcoded"

What to expect: security findings organized by severity (critical → high → medium → low), with specific locations, impact descriptions, and secure code alternatives.

Rules that are always active

The files in .claude/rules/ are loaded as standing instructions — Claude follows them in every interaction without you needing to ask.

• javascript.md — JavaScript/React/Express best practices, naming conventions, patterns
• security.md — security rules for web apps (XSS, auth, secrets, CORS, etc.)

These rules apply from the first message. You don't need to reference them explicitly.

Extending the toolkit

If your project needs conventions not covered here (GraphQL, WebSockets, Docker, etc.), add new files to .claude/rules/. Claude will pick them up automatically.

The development team owns these files — if a rule doesn't match your project's reality, update it. The toolkit should serve the project, not the other way around.

Common Workflows

Starting a new feature

claude "I need to add user profile editing. Can you help me plan this out?"
# Claude will create a todo list and plan the implementation

Code review before PR

claude "Use the code-reviewer agent to review src/components/EditProfile.jsx before I create a PR"

Debugging an issue

claude "Getting error: 'Cannot read property map of undefined' in UserList.jsx:42. Use the debugger agent."

Pre-deployment security check

claude "Use the security-checker agent to audit the authentication flow before deployment"

Project Structure Example

your-project/
├── .claude/                     ← Claude Code toolkit (copy from here)
│   ├── CONTEXT.md
│   ├── kin-coding-agent-instructions.md
│   ├── agents/
│   │   ├── code-reviewer.md
│   │   ├── debugger.md
│   │   ├── doc-writer.md
│   │   └── security-checker.md
│   └── rules/
│       ├── javascript.md
│       └── security.md
├── src/
│   ├── components/              ← React components
│   ├── hooks/                   ← Custom hooks
│   ├── pages/                   ← Page components
│   ├── api/                     ← API client functions
│   └── utils/                   ← Utility functions
├── server/
│   ├── routes/                  ← Express routes
│   ├── middleware/              ← Express middleware
│   ├── models/                  ← Database models
│   └── index.js                 ← Server entry point
├── functions/                   ← Firebase Functions (if used)
├── .env.example                 ← Environment variable template
├── firebase.json                ← Firebase configuration
├── package.json
└── vite.config.js

Tech Stack Details

Frontend

• React — UI library with functional components and hooks
• Vite — Fast build tool and dev server
• Ant Design — Enterprise-class UI component library
• React Router — Client-side routing
• Axios / Fetch — HTTP client for API calls

Backend

• Express — Web framework for Node.js
• Firebase Functions — Serverless functions (optional)
• Cloud Run — Container-based serverless (optional)
• Firestore / PostgreSQL / MongoDB — Database (depends on project)

DevOps

• Firebase Hosting — Static site hosting
• Cloud Build / GitHub Actions — CI/CD
• ESLint / Prettier — Code quality and formatting
• Jest / Vitest — Testing framework

Questions or improvements

Raise them in the internal toolkit repository or bring them to the team lead.

If you find a better pattern or discover a missing convention, update the toolkit and share with the team!

Quick Reference

| Task | Command | |---|---| | Code review | claude "Use code-reviewer agent to review [file]" | | Debug error | claude "Use debugger agent: [error message]" | | Write docs | claude "Use doc-writer agent for [component/function]" | | Security scan | claude "Use security-checker agent for [file/feature]" | | Plan feature | claude "Help me plan implementing [feature]" | | Explain code | claude "Explain how [file/component] works" |

License

Internal use only — adapt for your projects as needed.