feat: improved the Claude Kit as a plugin

This commit is contained in:
duthaho
2026-04-19 14:09:14 +07:00
parent 3103a8da1b
commit d1a6d2a2bc
186 changed files with 771 additions and 1691 deletions
@@ -15,13 +15,11 @@ Agents are specialized subagents that Claude dispatches for independent, focused
### Agent Structure
Agent files live in `.claude/agents/`:
Plugin agents live in the `agents/` directory at the plugin root. For project-specific agents, create them in `.claude/agents/`:
```
.claude/agents/
├── code-reviewer.md
├── debugger.md
└── my-custom-agent.md
├── my-custom-agent.md
```
### Agent File Format
@@ -105,13 +103,13 @@ Modes change Claude's communication style, output format, and problem-solving ap
### Mode Structure
Mode files live in `.claude/modes/`:
After running `/claudekit:init`, built-in modes are installed to `.claude/modes/`. You can add custom modes alongside them:
```
.claude/modes/
├── brainstorm.md
├── implementation.md
└── my-custom-mode.md
├── brainstorm.md # Installed by /claudekit:init
├── implementation.md # Installed by /claudekit:init
└── my-custom-mode.md # Your custom mode
```
### Mode File Format
@@ -9,7 +9,7 @@ Skills are the core building block of Claude Kit. You can create custom skills f
## Skill Structure
Each skill is a directory in `.claude/skills/` containing a `SKILL.md` file:
Plugin skills live in the `skills/` directory at the plugin root. For project-specific skills, create them in `.claude/skills/`:
```
.claude/skills/
@@ -103,7 +103,7 @@ description: Authentication skill for handling auth stuff.
For complex skills, include reference documents in a `resources/` subdirectory:
```
.claude/skills/my-framework/
my-framework/
├── SKILL.md
└── resources/
├── api-reference.md # Framework API docs
@@ -190,5 +190,5 @@ description: Use when deploying to Fly.io or configuring Fly.io
## Related Pages
- [Skills Reference](/claudekit/reference/skills/) — All 43 built-in skills
- [Skills Reference](/claudekit/reference/skills/) — All 44 built-in skills
- [Creating Agents & Modes](/claudekit/customization/creating-agents-and-modes/) — Custom agents and modes
@@ -1,139 +1,37 @@
---
title: Configuration
description: How to customize Claude Kit for your project.
description: How to configure Claude Kit for your project using the init wizard.
---
# Configuration
Claude Kit works out of the box, but customizing it for your project makes it significantly more effective.
Claude Kit works out of the box after installing the plugin. Run `/claudekit:init` to scaffold project-level configuration for rules, modes, hooks, and MCP servers.
## CLAUDE.md
## The Init Wizard
The main configuration file is `.claude/CLAUDE.md`. This tells Claude about your project so skills can provide relevant guidance.
### Key Sections
#### Tech Stack
```markdown
## Tech Stack
- **Languages**: Python 3.11, TypeScript 5.0
- **Backend Framework**: FastAPI with SQLAlchemy
- **Frontend Framework**: Next.js 14 with App Router
- **Database**: PostgreSQL 15
- **Testing**: pytest, vitest, Playwright
- **Deployment**: Docker, GitHub Actions
```
/claudekit:init
```
#### Code Conventions
The wizard walks you through four steps, asking one question at a time:
```markdown
## Code Conventions
### Step 1: Rules
### Naming
| Type | Python | TypeScript |
|------|--------|------------|
| Files | `snake_case.py` | `kebab-case.ts` |
| Functions | `snake_case` | `camelCase` |
| Classes | `PascalCase` | `PascalCase` |
| Constants | `UPPER_SNAKE` | `UPPER_SNAKE` |
```
Rules enforce standards when Claude works on specific file types:
#### Security Standards
| Rule | Applies To | What It Enforces |
|------|-----------|------------------|
| `api.md` | API routes, controllers | Input validation, error responses, rate limiting |
| `frontend.md` | `.tsx`, `.jsx`, components | PascalCase, Server Components, accessibility |
| `migrations.md` | Migration files | Reversible migrations, indexes, transactions |
| `security.md` | All files | No hardcoded secrets, parameterized queries, no `eval()` |
| `testing.md` | Test files | Naming conventions, coverage thresholds, no `.only()` |
```markdown
## Security Standards
Rules are installed to `.claude/rules/`.
### Forbidden
- No hardcoded secrets
- No `eval()` or dynamic code execution
- No SQL string concatenation
- No `any` types in TypeScript
### Step 2: Modes
### Required
- Input validation on all user inputs
- Authentication on protected endpoints
- Secrets via environment variables only
```
#### Git Conventions
```markdown
## Git Conventions
### Branch Naming
- `feature/[ticket]-[description]`
- `fix/[ticket]-[description]`
- `hotfix/[description]`
### Commit Messages
Format: `type(scope): subject`
Types: feat, fix, docs, style, refactor, test, chore
```
## settings.json
The `.claude/settings.json` file controls Claude Code permissions and hooks:
```json
{
"permissions": {
"allow": [
"git status", "git diff", "git log",
"npm test", "npm run lint",
"pytest", "ruff check"
]
}
}
```
### Auto-Linting Hooks
Claude Kit includes PostToolUse hooks that auto-lint files after edits:
```json
{
"hooks": {
"PostToolUse": [
{
"matcher": "Edit|Write",
"hooks": [
{
"type": "command",
"command": "ruff check --fix $FILE",
"match_files": "*.py"
}
]
}
]
}
}
```
## Agent Behavior Overrides
Customize how specialized agents behave in your CLAUDE.md:
```markdown
## Agent Behavior Overrides
### Planner Agent
- Break tasks into 15-60 minute chunks
- Always identify testing requirements
### Code-Reviewer Agent
- Enforce strict typing
- Security-first reviews
- Check for test coverage
### Tester Agent
- Use pytest for Python, vitest for TypeScript
- Generate edge case tests
```
## Modes
Set default modes or customize their behavior. Mode files live in `.claude/modes/`:
Modes change how Claude communicates and solves problems:
| Mode | Best For |
|------|----------|
@@ -145,50 +43,87 @@ Set default modes or customize their behavior. Mode files live in `.claude/modes
| `deep-research` | Investigation, audits |
| `orchestration` | Multi-agent coordination |
Switch modes naturally: "switch to brainstorm mode" or "use implementation mode".
Modes are installed to `.claude/modes/`. Switch with natural language: "switch to brainstorm mode".
## Example Complete Configuration
### Step 3: Hooks
Hooks run automatically in response to Claude Code events:
| Hook | Event | What It Does |
|------|-------|-------------|
| `auto-format` | After Write/Edit | Runs ruff (Python) or eslint (JS/TS) on changed files |
| `block-dangerous-commands` | Before Bash | Blocks `rm -rf /`, force push to main, `DROP TABLE`, etc. |
| `notify` | Notification | Cross-platform desktop notifications |
Hooks are installed to `.claude/hooks/` with config in `settings.local.json` (gitignored).
### Step 4: MCP Servers
MCP servers extend Claude with external tools:
| Server | Purpose |
|--------|---------|
| Context7 | Real-time library documentation |
| Sequential Thinking | Structured step-by-step reasoning |
| Playwright | Browser automation for E2E testing |
| Memory | Persistent knowledge graph |
| Filesystem | Secure file operations |
MCP servers are configured in `.mcp.json` with automatic platform detection (Windows vs macOS/Linux).
### Install Everything
Skip all prompts and install everything:
```
/claudekit:init --all
```
## Project-Level CLAUDE.md
After running init, you may want to create your own `.claude/CLAUDE.md` for project-specific instructions. This is independent of Claude Kit — it's a standard Claude Code feature:
```markdown
# My SaaS Project
## Overview
A B2B SaaS platform for project management.
## Tech Stack
- **Backend**: FastAPI + PostgreSQL
- **Frontend**: Next.js 14 + Tailwind
- **Auth**: Clerk
- **Payments**: Stripe
## Architecture
src/
├── api/ # FastAPI routes
├── services/ # Business logic
├── models/ # SQLAlchemy models
├── frontend/ # Next.js app
└── tests/ # Test files
## Code Conventions
- Python: PEP 8, type hints required
- TypeScript: Strict mode, Zod for validation
## Security
- All inputs validated with Pydantic/Zod
- SQL via SQLAlchemy ORM only
- Secrets in environment variables
## Testing
- Python: pytest with 80% coverage minimum
- Frontend: vitest + Playwright
```
## Git
- Branches: feature/*, fix/*, hotfix/*
- Commits: conventional commits format
## Agent Behavior Overrides
You can customize agent behavior in your CLAUDE.md:
```markdown
## Agent Behavior Overrides
### claudekit:planner
- Break tasks into 15-60 minute chunks
- Always identify testing requirements
### claudekit:code-reviewer
- Enforce strict typing
- Security-first reviews
- Check for test coverage
### claudekit:tester
- Use pytest for Python, vitest for TypeScript
- Generate edge case tests
```
## Next Steps
- [Workflows](/claudekit/workflows/planning-and-building/) — See how skills work together
- [Skills Reference](/claudekit/reference/skills/) — Browse all 43 skills
- [Skills Reference](/claudekit/reference/skills/) — Browse all 44 skills
- [Creating Skills](/claudekit/customization/creating-skills/) — Build your own
@@ -1,122 +1,118 @@
---
title: Installation
description: How to install Claude Kit in your project.
description: How to install Claude Kit as a Claude Code plugin.
---
# Installation
Claude Kit installs in under 2 minutes. Choose your preferred method below.
Claude Kit installs as a Claude Code plugin via a marketplace. Setup takes under 2 minutes.
## Prerequisites
- [Claude Code](https://claude.ai/code) installed and authenticated
- Git (for cloning the repository)
- Node.js (for MCP servers, if you choose to configure them)
## Method 1: Clone and Copy (Recommended)
## Install the Plugin
```bash
# Clone Claude Kit
git clone https://github.com/duthaho/claudekit.git
### Step 1: Add the Marketplace
# Copy the .claude folder to your project
cp -r claudekit/.claude /path/to/your-project/
# Navigate to your project
cd /path/to/your-project
# Start Claude Code
claude
```
/plugin marketplace add duthaho/claudekit-marketplace
```
## Method 2: Download ZIP
### Step 2: Install Claude Kit
1. Go to [github.com/duthaho/claudekit](https://github.com/duthaho/claudekit)
2. Click **Code** > **Download ZIP**
3. Extract the ZIP file
4. Copy the `.claude` folder to your project root
## Method 3: Git Submodule
Track Claude Kit updates via Git:
```bash
# Add as submodule
git submodule add https://github.com/duthaho/claudekit.git .claudekit
# Create symlink to .claude folder
ln -s .claudekit/.claude .claude
# Commit the changes
git add .claudekit .claude
git commit -m "Add Claude Kit"
```
/plugin install claudekit
```
To update later:
That's it — all 44 skills and 20 agents are now available. Skills auto-trigger based on context, and agents can be dispatched as `claudekit:<agent-name>`.
### Step 3: Configure Your Project (Optional)
Run the setup wizard to scaffold project-level configuration:
```
/claudekit:init
```
The wizard interactively installs:
| Category | What | Location |
|----------|------|----------|
| **Rules** | API, frontend, migrations, security, testing | `.claude/rules/` |
| **Modes** | brainstorm, deep-research, default, implementation, orchestration, review, token-efficient | `.claude/modes/` |
| **Hooks** | auto-format, block-dangerous-commands, notifications | `.claude/hooks/` + `settings.local.json` |
| **MCP Servers** | Context7, Sequential, Playwright, Memory, Filesystem | `.mcp.json` |
Or install everything at once:
```
/claudekit:init --all
```
## Local Development
To test the plugin locally without the marketplace:
```bash
git submodule update --remote .claudekit
claude --plugin-dir ./path/to/claudekit
```
Use `/reload-plugins` to pick up changes without restarting.
## Verify Installation
```bash
cd your-project
claude
```
Skills trigger automatically based on your conversation. Try asking Claude to brainstorm a feature or debug an error — the relevant skills will activate.
## Folder Structure
After installation, your project should have:
After installing, skills trigger automatically based on your conversation:
```
your-project/
├── .claude/
│ ├── CLAUDE.md # Project instructions
│ ├── agents/ # 20 specialized subagents
│ │ ├── code-reviewer.md
│ │ ├── debugger.md
│ │ └── ...
│ ├── modes/ # 7 behavioral modes
│ │ ├── brainstorm.md
│ │ ├── implementation.md
│ │ └── ...
│ ├── skills/ # 43 knowledge modules
│ │ ├── brainstorming/
│ │ ├── testing/
│ │ ├── languages/
│ │ └── ...
│ ├── mcp/ # MCP server configs
│ └── settings.json # Claude Code settings
└── ... (your project files)
You: "I need to add user authentication to our app"
→ triggers: claudekit:brainstorming, claudekit:authentication
You: "There's a TypeError in the UserService"
→ triggers: claudekit:systematic-debugging
```
You can also invoke skills manually:
```
/claudekit:brainstorming
/claudekit:init
```
## Updating
Update to the latest version:
```
/plugin marketplace update
```
## Troubleshooting
### Skills not triggering
Make sure the `.claude` folder is in your project root (same level as `package.json` or `pyproject.toml`).
Make sure the plugin is installed and enabled:
### Permission errors
On Unix systems, ensure the files are readable:
```bash
chmod -R 644 .claude/
```
/plugin list
```
### Claude Code not finding CLAUDE.md
You should see `claudekit` in the list.
Restart Claude Code after adding the `.claude` folder:
### MCP servers not working
```bash
# Exit Claude Code (Ctrl+C or /exit)
# Restart
claude
MCP servers are only available after running `/claudekit:init` and selecting them. Verify your `.mcp.json` has the correct entries, then restart Claude Code.
### Plugin not found in marketplace
Make sure you've added the marketplace first:
```
/plugin marketplace add duthaho/claudekit-marketplace
```
## Next Steps
1. [Configuration](/claudekit/getting-started/configuration/) — Customize for your project
1. [Configuration](/claudekit/getting-started/configuration/) — Customize rules, modes, and more via `/claudekit:init`
2. [Workflows](/claudekit/workflows/planning-and-building/) — See how skills work together
@@ -5,15 +5,16 @@ description: Learn what Claude Kit is and how it accelerates your development wo
# Introduction to Claude Kit
Claude Kit is an open-source toolkit that transforms Claude Code into a production-ready AI development team. It provides auto-triggered skills, specialized agents, and intelligent modes that accelerate your development workflow.
Claude Kit is an open-source Claude Code plugin that transforms Claude Code into a production-ready AI development team. It provides auto-triggered skills, specialized agents, and an interactive setup wizard that accelerates your development workflow.
## What is Claude Kit?
Claude Kit is a `.claude` folder you add to your project containing:
Claude Kit is a Claude Code plugin you install via a marketplace:
- **43 Skills** — Knowledge modules that auto-trigger based on what you're doing (debugging, planning, testing, etc.)
- **44 Skills** — Knowledge modules that auto-trigger based on what you're doing (debugging, planning, testing, etc.)
- **20 Agents** — Specialized subagents for focused tasks (code review, security audit, database design, etc.)
- **7 Modes** — Behavioral configurations that optimize Claude for specific task types
- **7 Modes** — Behavioral configurations installed via `/claudekit:init`
- **Setup Wizard** — `/claudekit:init` scaffolds rules, modes, hooks, and MCP servers into your project
Skills activate automatically based on keywords in your conversation. No commands to memorize — just describe what you want to do.
@@ -60,6 +61,6 @@ No slash commands needed — Claude reads your intent and activates the right sk
## Next Steps
1. [Install Claude Kit](/claudekit/getting-started/installation/) — Add it to your project
2. [Configuration](/claudekit/getting-started/configuration/) — Customize for your project
3. [Skills Reference](/claudekit/reference/skills/) — Browse all 43 skills
1. [Install Claude Kit](/claudekit/getting-started/installation/) — Install the plugin
2. [Configuration](/claudekit/getting-started/configuration/) — Run `/claudekit:init` to customize
3. [Skills Reference](/claudekit/reference/skills/) — Browse all 44 skills
+11 -12
View File
@@ -1,9 +1,9 @@
---
title: Claude Kit
description: The open-source AI dev toolkit for Claude Code. 43 skills, 20 agents, 7 modes — structure that makes Claude Code production-ready. Free forever.
description: The open-source AI dev toolkit for Claude Code. 44 skills, 20 agents, 7 modes — install as a plugin and go. Free forever.
template: splash
hero:
tagline: The open-source AI dev toolkit for Claude Code. 43 skills, 20 agents, 7 modes — structure that makes Claude Code production-ready. Free forever.
tagline: The open-source AI dev toolkit for Claude Code. 44 skills, 20 agents, 7 modes — install as a plugin and go. Free forever.
image:
dark: ../../assets/hero-dark.svg
light: ../../assets/hero-light.svg
@@ -25,7 +25,7 @@ import { Card, CardGrid, LinkCard } from '@astrojs/starlight/components';
Claude Kit transforms Claude Code into a production-ready AI development team. Pre-built skills, specialized agents, and intelligent modes — all open source.
<CardGrid>
<Card title="43 Skills" icon="puzzle">
<Card title="44 Skills" icon="puzzle">
Auto-triggered knowledge for Python, TypeScript, React, FastAPI, TDD, debugging, security, and more. Claude knows your stack without being told.
</Card>
<Card title="20 Agents" icon="rocket">
@@ -46,15 +46,14 @@ Claude Kit transforms Claude Code into a production-ready AI development team. P
Get up and running in under 2 minutes:
```bash
# Clone the repository
git clone https://github.com/duthaho/claudekit.git
# Add the marketplace
/plugin marketplace add duthaho/claudekit-marketplace
# Copy the kit to your project
cp -r claudekit/.claude your-project/
# Install the plugin
/plugin install claudekit
# Start using it
cd your-project
claude
# Configure your project (optional)
/claudekit:init
```
Skills trigger automatically based on what you're doing. Ask Claude to brainstorm a feature, write a plan, debug an error, or review code — the right skills activate without any commands needed.
@@ -100,7 +99,7 @@ Claude Kit uses three layers that work together:
<CardGrid>
<LinkCard
title="Skills"
description="43 knowledge modules that auto-trigger based on keywords. Cover languages, frameworks, testing, debugging, security, and development methodology."
description="44 knowledge modules that auto-trigger based on keywords. Cover languages, frameworks, testing, debugging, security, and development methodology."
href="/claudekit/reference/skills/"
/>
<LinkCard
@@ -146,7 +145,7 @@ Claude Kit connects skills and agents into complete workflows:
/>
<LinkCard
title="Skills Reference"
description="All 43 skills organized by category"
description="All 44 skills organized by category"
href="/claudekit/reference/skills/"
/>
<LinkCard
+1 -1
View File
@@ -9,7 +9,7 @@ Agents are specialized subagents that Claude can dispatch for focused tasks. Eac
## How Agents Work
Agents are defined as markdown files in `.claude/agents/`. When Claude dispatches a subagent, it starts a fresh context focused entirely on the task at hand:
Agents are bundled with the Claude Kit plugin. When Claude dispatches a subagent, it starts a fresh context focused entirely on the task at hand:
```
You: "Review this code for security issues"
@@ -11,7 +11,7 @@ Claude Kit includes optional [Model Context Protocol (MCP)](https://modelcontext
MCP servers give Claude access to tools it doesn't have natively — browser automation, persistent memory, real-time documentation, and structured reasoning. They run as local processes that Claude communicates with during your session.
Server configurations live in `.claude/mcp/`.
MCP servers are configured via `/claudekit:init`, which adds them to your project's `.mcp.json` with automatic platform detection (Windows vs macOS/Linux).
---
@@ -32,7 +32,7 @@ Claude fetches current Next.js 15 docs via Context7
**Best for**: API syntax, configuration, version migration, library-specific debugging.
**Config**: `.claude/mcp/context7.json`
**Setup**: Run `/claudekit:init` and select Context7
---
@@ -52,7 +52,7 @@ Complex debugging scenario:
**Best for**: Complex debugging, architecture decisions, security analysis.
**Config**: `.claude/mcp/sequential.json`
**Setup**: Run `/claudekit:init` and select Sequential Thinking
---
@@ -111,29 +111,21 @@ Claude launches browser via Playwright MCP:
MCP servers require Node.js installed on your system.
### Enabling a Server
### Enabling Servers
1. Check the config file in `.claude/mcp/` for the server you want
2. Install any required dependencies (noted in the config)
3. Restart Claude Code
Run the setup wizard and select which servers to configure:
### Configuration Format
Each server has a JSON config file:
```json
{
"mcpServers": {
"server-name": {
"command": "npx",
"args": ["-y", "@package/server-name"],
"env": {}
}
}
}
```
/claudekit:init
```
See `.claude/mcp/README.md` for detailed setup instructions.
Or install all servers at once:
```
/claudekit:init --all
```
The wizard automatically detects your platform and configures the correct command format in `.mcp.json`. Restart Claude Code after configuration.
## Skills That Use MCP
+2 -2
View File
@@ -17,7 +17,7 @@ Switch modes naturally in conversation:
"go into review mode"
```
Mode files live in `.claude/modes/`. Each defines communication style, output format, and problem-solving approach.
Modes are installed into your project's `.claude/modes/` via `/claudekit:init`. Each defines communication style, output format, and problem-solving approach.
---
@@ -174,4 +174,4 @@ Claude coordinates multiple agents:
## Customizing Modes
Mode files are markdown in `.claude/modes/`. You can edit existing modes or create new ones. See [Creating Agents & Modes](/claudekit/customization/creating-agents-and-modes/) for details.
After running `/claudekit:init`, mode files are markdown in `.claude/modes/`. You can edit the installed modes or create new ones. See [Creating Agents & Modes](/claudekit/customization/creating-agents-and-modes/) for details.
+8 -2
View File
@@ -1,6 +1,6 @@
---
title: Skills Reference
description: All 43 skills in Claude Kit, organized by category.
description: All 44 skills in Claude Kit, organized by category.
---
# Skills Reference
@@ -18,7 +18,7 @@ Each skill has a trigger description with keywords. When you say something that
"switch to brainstorm" → mode-switching, brainstorming
```
Skills live in `.claude/skills/` and can be customized or extended.
Skills are bundled with the plugin and auto-trigger when installed. You can also create project-level skills in `.claude/skills/`.
---
@@ -106,3 +106,9 @@ Skills for multi-agent workflows and team processes.
| **receiving-code-review** | Processing review feedback systematically | Review comments, PR feedback |
| **finishing-a-development-branch** | Branch completion: verify, review, merge/PR options | "ship it", "ready to merge" |
| **writing-skills** | Creating and editing skills for this kit | "create a skill", "new skill" |
## Setup
| Skill | Description | Triggers On |
|-------|-------------|-------------|
| **init** | Interactive setup wizard — scaffolds rules, modes, hooks, MCP configs | `/claudekit:init` (user-invocable) |
@@ -148,4 +148,4 @@ These skills activate automatically during planning and building:
- [Testing & Debugging](/claudekit/workflows/testing-and-debugging/) — TDD and debugging workflows
- [Reviewing & Shipping](/claudekit/workflows/reviewing-and-shipping/) — Code review and git workflows
- [Skills Reference](/claudekit/reference/skills/) — All 43 skills
- [Skills Reference](/claudekit/reference/skills/) — All 44 skills
@@ -144,4 +144,4 @@ The git-workflows skill generates changelogs from conventional commits:
- [Planning & Building](/claudekit/workflows/planning-and-building/) — Brainstorm, plan, execute
- [Testing & Debugging](/claudekit/workflows/testing-and-debugging/) — TDD and debugging workflows
- [Skills Reference](/claudekit/reference/skills/) — All 43 skills
- [Skills Reference](/claudekit/reference/skills/) — All 44 skills
@@ -142,4 +142,4 @@ Database layer: Constraints (NOT NULL, UNIQUE, CHECK)
- [Planning & Building](/claudekit/workflows/planning-and-building/) — Brainstorm, plan, execute
- [Reviewing & Shipping](/claudekit/workflows/reviewing-and-shipping/) — Code review and git workflows
- [Skills Reference](/claudekit/reference/skills/) — All 43 skills
- [Skills Reference](/claudekit/reference/skills/) — All 44 skills