tailwindcss

```bash

npx github:blencorp/claude-code-kit

```

What happens:

1. Detects your frameworks (Next.js, React, Express, Prisma, etc.)
2. Asks which kits to install
3. Copies hooks, agents, commands, and skills to .claude/
4. Configures automatic skill activation via skill-rules.json
5. 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.

---

Frontend Kits

| Kit | Description | Documentation |

|-----|-------------|---------------|

| Next.js | Next.js 15+ App Router, Server Components, Server Actions | [README](cli/kits/nextjs/README.md) |

| React | React 19 hooks, Suspense, lazy loading, TypeScript patterns | [README](cli/kits/react/README.md) |

| shadcn/ui | shadcn/ui component library with Tailwind CSS | [README](cli/kits/shadcn/README.md) |

| Tailwind CSS | Tailwind v4 utilities, responsive design, theming | [README](cli/kits/tailwindcss/README.md) |

| Material-UI | MUI v7 components, sx prop styling, theming | [README](cli/kits/mui/README.md) |

| TanStack Router | File-based routing, loaders, type-safe navigation | [README](cli/kits/tanstack-router/README.md) |

| TanStack Query | Data fetching with useSuspenseQuery, cache management | [README](cli/kits/tanstack-query/README.md) |

Backend Kits

| Kit | Description | Documentation |

|-----|-------------|---------------|

| Express | Express.js routing, middleware, controllers | [README](cli/kits/express/README.md) |

| Node.js | Layered architecture, async patterns, error handling | [README](cli/kits/nodejs/README.md) |

| Prisma | Prisma ORM query patterns, repository pattern, transactions | [README](cli/kits/prisma/README.md) |

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

---

Every installation includes:

Hooks (6)

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

Agents (6)

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

Commands (6)

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

Skills (1)

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

---

Auto-Activation System

Skills automatically activate based on:

1. Prompt Keywords

- Example: "create a table component" → shadcn skill activates

- Example: "query the database" → Prisma skill activates

1. Intent Patterns (Regex)

- Example: "add.*authentication" → relevant auth patterns activate

- Example: "optimize.*component" → React performance skill activates

1. File Path Triggers

- Editing app/*/.tsx → Next.js skill activates

- Editing prisma/schema.prisma → Prisma skill activates

1. 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).

What Gets Installed

```

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

```bash

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

```bash

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

```bash

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

```bash

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:

Kit Structure

```

cli/kits/your-framework/

├── kit.json # Metadata and detection

├── skills/

│ └── your-framework/

│ ├── SKILL.md # Main skill file (<500 lines)

│