Claude Code Kit: Reliable Coding Using Claude Skills, Hooks and Command

3 days ago 2

Claude Code infrastructure with auto-activating skills and framework-specific kits.

Install complete Claude Code infrastructure in 30 seconds with automatic framework detection and skill auto-activation.

npx github:blencorp/claude-code-kit

What happens:

Detects your frameworks (Next.js, React, Express, Prisma, etc.)
Asks which kits to install
Copies hooks, agents, commands, and skills to .claude/
Configures automatic skill activation via skill-rules.json
Installs everything in < 30 seconds

Result: Skills automatically activate when you need them based on your prompts, file edits, and technology usage.

A kit is a framework-specific package that includes:

Skill - Best practices, patterns, and examples for the framework
Auto-activation triggers - Keywords and patterns that activate the skill
Resources - Detailed guides organized by topic
Detection logic - Automatic framework detection

When installed, kits make Claude Code an expert in your stack.

Kit Description Documentation

Next.js	Next.js 15+ App Router, Server Components, Server Actions	SKILL.md
React	React 19 hooks, Suspense, lazy loading, TypeScript patterns	README
shadcn/ui	shadcn/ui component library with Tailwind CSS	SKILL.md
Tailwind CSS	Tailwind v4 utilities, responsive design, theming	SKILL.md
Material-UI	MUI v7 components, sx prop styling, theming	README
TanStack Router	File-based routing, loaders, type-safe navigation	README
TanStack Query	Data fetching with useSuspenseQuery, cache management	README

Kit Description Documentation

Express	Express.js routing, middleware, controllers	README
Node.js	Layered architecture, async patterns, error handling	README
Prisma	Prisma ORM query patterns, repository pattern, transactions	README

All kits are auto-detected during installation based on your package.json and project structure.

Every installation includes:

Essential (Auto-configured):

skill-activation-prompt (UserPromptSubmit) - Analyzes prompts and suggests relevant skills automatically
post-tool-use-tracker (PostToolUse) - Tracks file changes to maintain context across sessions

Optional (Requires customization):

tsc-check (Stop) - TypeScript compilation check (monorepo-friendly)
trigger-build-resolver (Stop) - Auto-launches build-error-resolver agent on build failures
error-handling-reminder (Stop) - Gentle reminders for error handling patterns
stop-build-check-enhanced (Stop) - Enhanced build checking with smart filtering

Specialized assistants for complex tasks:

code-architecture-reviewer - Reviews code for adherence to best practices and architectural consistency
code-refactor-master - Refactors code for better organization, cleaner architecture, improved maintainability
documentation-architect - Creates comprehensive documentation from code and memory
plan-reviewer - Reviews development plans for completeness and potential issues
refactor-planner - Analyzes code structure and creates comprehensive refactoring plans
web-research-specialist - Researches technical solutions across GitHub, Stack Overflow, Reddit, forums

Slash commands for common workflows:

/build-and-fix - Builds project and automatically fixes errors
/code-review - Conducts comprehensive code review with best practices
/dev-docs - Creates strategic development plans with structured task breakdown
/dev-docs-update - Updates development documentation before context compaction
/route-research-for-testing - Maps edited routes and launches comprehensive tests
/test-route - Tests authenticated API routes with proper auth context

skill-developer - Meta-skill for creating and managing Claude Code skills following Anthropic best practices

Skills automatically activate based on:

Prompt Keywords
- Example: "create a table component" → shadcn skill activates
- Example: "query the database" → Prisma skill activates
Intent Patterns (Regex)
- Example: "add.*authentication" → relevant auth patterns activate
- Example: "optimize.*component" → React performance skill activates
File Path Triggers
- Editing app/**/*.tsx → Next.js skill activates
- Editing prisma/schema.prisma → Prisma skill activates
Content Patterns
- File contains useQuery( → TanStack Query skill activates
- File contains createFileRoute → TanStack Router skill activates

All configured in .claude/skills/skill-rules.json (auto-generated during install).

your-project/ └── .claude/ ├── hooks/ # Automation scripts │ ├── skill-activation-prompt.* │ ├── post-tool-use-tracker.sh │ └── ... (4 optional hooks) ├── agents/ # Specialized assistants │ ├── code-architecture-reviewer.md │ ├── refactor-planner.md │ └── ... (4 more agents) ├── commands/ # Slash commands │ ├── dev-docs.md │ ├── build-and-fix.md │ └── ... (4 more commands) └── skills/ # Skills + auto-activation ├── skill-developer/ ├── nextjs/ # If installed ├── react/ # If installed ├── shadcn/ # If installed └── skill-rules.json # Auto-activation config

Installing for Next.js + shadcn Project

cd my-nextjs-app npx github:blencorp/claude-code-kit

Detects:

Next.js (from package.json)
React (from package.json)
shadcn/ui (from components.json)
Tailwind CSS (from tailwind.config.ts)

Prompts: "Install these detected kits? (Y/n)"

Result: Next.js, React, shadcn, and Tailwind skills auto-activate when you:

Ask: "create a server component with a data table"
Edit: app/dashboard/page.tsx
Mention: "use shadcn table component"

Installing for Express Backend

cd my-api npx github:blencorp/claude-code-kit

Detects:

Express (from package.json)
Node.js (module type)
Prisma (from prisma/schema.prisma)

Prompts: "Install these detected kits? (Y/n)"

Result: Express, Node.js, and Prisma skills auto-activate when you:

Ask: "create an API route for users"
Edit: routes/users.ts
Mention: "query users from database"

Installing for Full-Stack App

cd my-fullstack-app npx github:blencorp/claude-code-kit

Detects both frontend and backend kits automatically

Prompts: Select from detected frameworks

Result: Complete coverage of your entire stack

Re-running to Add More Kits

npx github:blencorp/claude-code-kit

Detects: Existing installation

Offers:

Update existing kits
Add new kits
Keep current setup

Want to add support for a new framework? Here's how to create a kit:

cli/kits/your-framework/ ├── kit.json # Metadata and detection ├── skills/ │ └── your-framework/ │ ├── SKILL.md # Main skill file (<500 lines) │ ├── skill-rules-fragment.json # Auto-activation triggers │ └── resources/ # Optional: detailed guides │ ├── topic-1.md │ └── topic-2.md └── agents/ # Optional: kit-specific agents └── your-framework-agent.md

{ "name": "your-framework", "displayName": "Your Framework", "description": "Short description of what this kit provides", "detect": "command to detect framework", "provides": ["skill:your-framework"] }

Detection Examples:

# Detect from package.json "detect": "grep -q '\"your-framework\"' package.json" # Detect from config file "detect": "test -f your-framework.config.js" # Detect from directory "detect": "test -d src/your-framework"

Follow Anthropic best practices:

Keep main file < 500 lines
Use YAML frontmatter
Add table of contents
Use progressive disclosure (link to resources/)
Include complete examples

--- name: your-framework displayName: Your Framework description: Complete description with all keywords for trigger matching (max 1024 chars) version: 1.0.0 --- # Your Framework Development Guide Best practices for using Your Framework... ## Table of Contents - [Getting Started](#getting-started) - [Core Concepts](#core-concepts) ... ## Additional Resources For detailed information, see: - [Advanced Patterns](resources/advanced-patterns.md) - [API Reference](resources/api-reference.md)

skill-rules-fragment.json Format

{ "your-framework": { "type": "domain", "enforcement": "suggest", "priority": "high", "promptTriggers": { "keywords": [ "your framework", "framework name", "key concepts" ], "intentPatterns": [ "create.*(component|route|feature)", "add.*framework.*feature" ] }, "fileTriggers": { "pathPatterns": [ "**/your-framework/**/*.ts", "**/config.framework.js" ], "contentPatterns": [ "import.*from.*your-framework" ] } } }

Test detection:

cd test-project bash cli/kits/your-framework/kit.json # run detect command
Test installation:

./claude-setup # Select your kit # Verify files copied to .claude/
Test auto-activation:
- Use trigger keywords in prompts
- Edit files matching pathPatterns
- Verify skill activates

Fork the repository
Create your kit in cli/kits/your-framework/
Test thoroughly
Update this README's kit catalog
Submit pull request with:
- Kit name and description
- What it covers
- Detection mechanism
- Example usage

claude-code-kit/ ├── cli/ │ ├── core/ # Always installed │ │ ├── hooks/ # 6 hooks │ │ ├── agents/ # 6 agents │ │ ├── commands/ # 6 commands │ │ └── skills/ │ │ └── skill-developer/ # Meta-skill │ └── kits/ # Framework-specific (optional) │ ├── nextjs/ │ ├── react/ │ ├── shadcn/ │ ├── tailwindcss/ │ ├── mui/ │ ├── tanstack-router/ │ ├── tanstack-query/ │ ├── express/ │ ├── nodejs/ │ └── prisma/ ├── claude-setup # Installation script ├── package.json └── README.md

Template vs Installation:

cli/ directory = Template (what gets copied)
User's .claude/ = Installation (what they get)

Re-run the installer to update or add kits:

npx github:blencorp/claude-code-kit

The installer detects existing installations and offers:

Update existing kits to latest versions
Add new kits
Keep current setup

MIT - See LICENSE for details.

Born from solving "skills don't activate automatically" problem.

The Problem: Claude Code skills just sat there. You had to remember to use them.

The Solution: Auto-activation hooks + framework detection + skill-rules.json = Skills that activate when you need them.

Available as a reference implementation for the community.

Installation issues: Check detection commands in kit.json files
Skills not activating: Check .claude/skills/skill-rules.json was generated
Framework not detected: Create an issue or submit a kit!
Contributing: See Contributing Kits section above

Read Entire Article

Claude Code Kit: Reliable Coding Using Claude Skills, Hooks and Command

Installing for Next.js + shadcn Project

Installing for Express Backend

Installing for Full-Stack App

Re-running to Add More Kits

skill-rules-fragment.json Format

Related

A PoC to make a backdoored PyTorch neural network

CoreWeave CEO Plays Down Concerns About AI-Spending Bubble

Grammarly Rebrands Company as Superhuman, Introduces Superhu...