Skip to content

project-setup.md

Latest commit

 

History

History
126 lines (90 loc) · 3.73 KB

project-setup.md

File metadata and controls

126 lines (90 loc) · 3.73 KB

Example: Setting Up a New Project with the Toolkit

A step-by-step walkthrough of configuring a new Next.js project with the awesome-claude-code-toolkit for maximum productivity.

1. Initialize the Project

pnpm create next-app@latest my-saas-app --typescript --tailwind --app --src-dir
cd my-saas-app
git init && git add -A && git commit -m "Initial Next.js scaffold"

2. Create CLAUDE.md

Start with a template and customize it for your project:

cp ~/awesome-claude-code-toolkit/templates/claude-md/fullstack-app.md ./CLAUDE.md

Edit CLAUDE.md to reflect your actual stack, commands, and project structure. This file is the single most important artifact for Claude Code productivity.

3. Add Rules

Copy relevant rule files into your project's .claude/rules/ directory:

mkdir -p .claude/rules
cp ~/awesome-claude-code-toolkit/rules/coding-style.md .claude/rules/
cp ~/awesome-claude-code-toolkit/rules/testing.md .claude/rules/
cp ~/awesome-claude-code-toolkit/rules/security.md .claude/rules/
cp ~/awesome-claude-code-toolkit/rules/api-design.md .claude/rules/
cp ~/awesome-claude-code-toolkit/rules/git-workflow.md .claude/rules/

These rules are automatically loaded by Claude Code and applied to all interactions.

4. Configure MCP Servers

Copy the appropriate MCP config for your stack:

cp ~/awesome-claude-code-toolkit/mcp-configs/fullstack.json .claude/mcp.json

Edit the config to set your actual database connection string, API keys, and project paths. Never commit real credentials.

5. Set Up Hooks

Copy the hooks configuration for automated quality checks:

cp -r ~/awesome-claude-code-toolkit/hooks/ .claude/hooks/

Key hooks to enable:

  • session-start.js: Loads context and checks for pending tasks on session start.
  • post-edit-check.js: Runs linter after file edits to catch issues immediately.
  • pre-push-check.js: Runs tests before allowing git push.
  • stop-check.js: Reminds you to commit and document before ending a session.

6. Add Contexts

Copy context files for different working modes:

mkdir -p .claude/contexts
cp ~/awesome-claude-code-toolkit/contexts/dev.md .claude/contexts/
cp ~/awesome-claude-code-toolkit/contexts/review.md .claude/contexts/
cp ~/awesome-claude-code-toolkit/contexts/debug.md .claude/contexts/
cp ~/awesome-claude-code-toolkit/contexts/deploy.md .claude/contexts/

Switch contexts during your session with /context load dev or /context load debug.

7. Install Skills (Optional)

If you use SkillKit, install relevant skills:

npx skillkit install tdd-mastery
npx skillkit install api-design-patterns
npx skillkit install security-hardening

8. Verify the Setup

Start a Claude Code session and verify everything loads correctly:

> What rules, hooks, and MCP servers are active in this project?

Claude should list the rules from .claude/rules/, the configured hooks, and the available MCP servers. If anything is missing, check file paths and permissions.

9. First Development Session

With the toolkit configured, start building:

> /context load dev
> Let's build the user authentication flow. Plan the implementation first,
  then implement it step by step with tests.

The rules guide code style, the hooks enforce quality gates, the MCP servers provide tool access, and the context shapes Claude's behavior for development work.

Project Structure After Setup

my-saas-app/
  .claude/
    rules/          - Coding standards and conventions
    hooks/          - Automated quality checks
    contexts/       - Working mode definitions
    mcp.json        - MCP server configuration
  src/              - Application source code
  CLAUDE.md         - Project context for Claude Code
  package.json