diff --git a/.claude-plugin/marketplace.json b/.claude-plugin/marketplace.json new file mode 100644 index 0000000..16302b6 --- /dev/null +++ b/.claude-plugin/marketplace.json @@ -0,0 +1,82 @@ +{ + "$schema": "https://anthropic.com/claude-code/marketplace.schema.json", + "name": "claude-code-kit", + "version": "1.0.0", + "description": "Framework-specific plugins for Claude Code with automatic detection and installation", + "owner": { + "name": "blencorp", + "email": "support@blencorp.com" + }, + "plugins": [ + { + "name": "nextjs", + "description": "Next.js 15+ App Router, Server Components, Server Actions", + "source": "./cli/kits/nextjs", + "category": "development", + "version": "1.0.0" + }, + { + "name": "react", + "description": "React 18+ hooks, Suspense, lazy loading, TypeScript patterns", + "source": "./cli/kits/react", + "category": "development", + "version": "1.0.0" + }, + { + "name": "express", + "description": "Express.js routing, middleware, controllers, error handling", + "source": "./cli/kits/express", + "category": "development", + "version": "1.0.0" + }, + { + "name": "nodejs", + "description": "Node.js backend patterns with TypeScript and layered architecture", + "source": "./cli/kits/nodejs", + "category": "development", + "version": "1.0.0" + }, + { + "name": "prisma", + "description": "Prisma ORM patterns for type-safe database access", + "source": "./cli/kits/prisma", + "category": "development", + "version": "1.0.0" + }, + { + "name": "tailwindcss", + "description": "Tailwind CSS v4 utility patterns and responsive design", + "source": "./cli/kits/tailwindcss", + "category": "development", + "version": "1.0.0" + }, + { + "name": "shadcn", + "description": "shadcn/ui component library with Radix UI primitives", + "source": "./cli/kits/shadcn", + "category": "development", + "version": "1.0.0" + }, + { + "name": "mui", + "description": "Material-UI v7 components and sx prop styling", + "source": "./cli/kits/mui", + "category": "development", + "version": "1.0.0" + }, + { + "name": "tanstack-query", + "description": "TanStack Query v5 data fetching and cache management", + "source": "./cli/kits/tanstack-query", + "category": "development", + "version": "1.0.0" + }, + { + "name": "tanstack-router", + "description": "TanStack Router file-based routing with type-safe navigation", + "source": "./cli/kits/tanstack-router", + "category": "development", + "version": "1.0.0" + } + ] +} diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json new file mode 100644 index 0000000..f8d710f --- /dev/null +++ b/.claude-plugin/plugin.json @@ -0,0 +1,10 @@ +{ + "name": "claude-code-kit", + "description": "Framework detection and plugin installer for Claude Code. Detects your project's tech stack (Next.js, React, Express, Prisma, etc.) and installs the appropriate plugins automatically.", + "version": "1.0.0", + "author": { + "name": "blencorp", + "email": "support@blencorp.com" + }, + "repository": "https://github.com/blencorp/claude-code-kit" +} diff --git a/README.md b/README.md index 3c5366a..89d8c80 100644 --- a/README.md +++ b/README.md @@ -4,42 +4,74 @@ # Claude Code Kit -**Claude Code infrastructure with auto-activating skills and framework-specific kits.** +**A plugin marketplace for Claude Code with framework-specific skills and automatic detection.** -Install complete Claude Code infrastructure in 30 seconds with automatic framework detection and skill auto-activation. +Get expert-level Claude Code assistance for your tech stack in seconds. -## Quick Start +## Quick Start (Plugin Installation) ```bash -npx github:blencorp/claude-code-kit +# In Claude Code, add the marketplace and run setup: +/plugin marketplace add blencorp/claude-code-kit +/setup +``` + +**That's it.** `/setup` detects your frameworks and installs the appropriate plugins automatically. + +**Example:** ``` +## Detected Frameworks + +✓ Next.js (found "next" in package.json) +✓ React (found "react" in package.json) +✓ Prisma (found prisma/schema.prisma) +✓ TailwindCSS (found tailwind.config.ts) + +## Installing Plugins + +Installing: nextjs, react, prisma, tailwindcss +``` + +Skills then activate automatically based on your conversation context. + +--- -**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 +## Alternative: Legacy Installation -**Result:** Skills automatically activate when you need them based on your prompts, file edits, and technology usage. +For environments without plugin support, use the bash installer: + +```bash +npx github:blencorp/claude-code-kit +``` + +This copies hooks, agents, commands, and skills directly to `.claude/`. --- -## What's a Kit? +## What's a Plugin? -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 +A **plugin** is a framework-specific package following the official Claude Code plugin format: -When installed, kits make Claude Code an expert in your stack. +``` +plugin-name/ +├── .claude-plugin/ +│ └── plugin.json # Plugin metadata +├── skills/ +│ └── framework-name/ +│ ├── SKILL.md # Best practices and patterns (<500 lines) +│ └── resources/ # Detailed guides (progressive disclosure) +├── commands/ # Optional slash commands +├── agents/ # Optional specialized agents +└── hooks/ # Optional event handlers +``` + +Claude automatically loads skills based on their description - no manual trigger configuration needed. --- -## Available Kits +## Available Plugins -### Frontend Kits +### Frontend Plugins | Kit | Description | Documentation | |-----|-------------|---------------| @@ -51,7 +83,7 @@ When installed, kits make Claude Code an expert in your stack. | **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 +### Backend Plugins | Kit | Description | Documentation | |-----|-------------|---------------| @@ -59,7 +91,7 @@ When installed, kits make Claude Code an expert in your stack. | **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.** +**All plugins are auto-detected by `/setup` based on your package.json and project structure.** --- @@ -109,27 +141,22 @@ Slash commands for common workflows: ## How It Works -### Auto-Activation System +### Native Skill Activation -Skills automatically activate based on: +Claude Code natively loads skills based on their SKILL.md description. When you install a plugin: -1. **Prompt Keywords** - - Example: "create a table component" → shadcn skill activates - - Example: "query the database" → Prisma skill activates +1. **Claude reads the skill description** - Each SKILL.md has a `description` field in its YAML frontmatter +2. **Claude activates contextually** - Based on your conversation, Claude automatically loads relevant skills +3. **No configuration needed** - Unlike the legacy system, you don't need to manage trigger rules -2. **Intent Patterns** (Regex) - - Example: "add.*authentication" → relevant auth patterns activate - - Example: "optimize.*component" → React performance skill activates +**Examples:** +- Ask "create a server component" → Next.js skill activates +- Ask "query the database" → Prisma skill activates +- Ask "add a button with shadcn" → shadcn skill activates -3. **File Path Triggers** - - Editing `app/**/*.tsx` → Next.js skill activates - - Editing `prisma/schema.prisma` → Prisma skill activates +### Legacy Auto-Activation (Optional) -4. **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). +The legacy `claude-setup` installer includes a hook-based trigger system with `skill-rules.json` for explicit control over activation. This is optional - Claude's native skill loading handles most cases. ### What Gets Installed @@ -233,75 +260,86 @@ npx github:blencorp/claude-code-kit --- -## Contributing Kits +## Contributing Plugins -Want to add support for a new framework? Here's how to create a kit: +Want to add support for a new framework? Here's how to create a plugin: -### Kit Structure +### Plugin Structure ``` cli/kits/your-framework/ -├── kit.json # Metadata and detection +├── .claude-plugin/ +│ └── plugin.json # Plugin metadata (required) +├── kit.json # Detection logic (for /setup) ├── 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 +├── commands/ # Optional: slash commands +├── agents/ # Optional: specialized agents +└── hooks/ # Optional: event handlers ``` -### kit.json Format +### plugin.json Format + +```json +{ + "name": "your-framework", + "description": "Complete description including keywords Claude uses to activate this skill contextually. Mention key concepts, APIs, and use cases.", + "version": "1.0.0", + "author": { + "name": "your-name" + } +} +``` + +### kit.json Format (for /setup detection) ```json { "name": "your-framework", "displayName": "Your Framework", - "description": "Short description of what this kit provides", - "detect": "command to detect framework", - "provides": ["skill:your-framework"] + "description": "Short description", + "detect": { + "command": "grep -q '\"your-framework\"' package.json" + } } ``` **Detection Examples:** ```bash # Detect from package.json -"detect": "grep -q '\"your-framework\"' package.json" +"command": "grep -q '\"your-framework\"' package.json" # Detect from config file -"detect": "test -f your-framework.config.js" +"command": "test -f your-framework.config.js" -# Detect from directory -"detect": "test -d src/your-framework" +# Multiple conditions +"command": "grep -q '\"dep\"' package.json || test -f config.js" ``` ### SKILL.md Format Follow Anthropic best practices: - Keep main file < 500 lines -- Use YAML frontmatter -- Add table of contents +- Use YAML frontmatter with rich description - Use progressive disclosure (link to resources/) - Include complete examples ```markdown --- name: your-framework -displayName: Your Framework -description: Complete description with all keywords for trigger matching (max 1024 chars) -version: 1.0.0 +description: Complete description with keywords that help Claude activate this skill. Include framework name, key APIs, common tasks, and use cases. This is what Claude reads to decide when to load the skill. --- # Your Framework Development Guide Best practices for using Your Framework... -## Table of Contents +## Core Concepts -- [Getting Started](#getting-started) -- [Core Concepts](#core-concepts) ... ## Additional Resources @@ -311,68 +349,37 @@ For detailed information, see: - [API Reference](resources/api-reference.md) ``` -### skill-rules-fragment.json Format +**Key insight:** The `description` field is critical - Claude uses it to decide when to load your skill. Include all relevant keywords naturally in the description. -```json -{ - "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" - ] - } - } -} -``` - -### Testing Your Kit +### Testing Your Plugin -1. **Test detection:** +1. **Test with plugin system:** ```bash - cd test-project - bash cli/kits/your-framework/kit.json # run detect command + # In Claude Code + /plugin install path/to/your-plugin ``` -2. **Test installation:** +2. **Test detection (for /setup):** ```bash - ./claude-setup - # Select your kit - # Verify files copied to .claude/ + cd test-project + # Run the detect command from kit.json + grep -q '"your-framework"' package.json && echo "detected" ``` -3. **Test auto-activation:** - - Use trigger keywords in prompts - - Edit files matching pathPatterns - - Verify skill activates +3. **Test skill activation:** + - Mention framework concepts in conversation + - Verify Claude loads and uses the skill -### Submitting Your Kit +### Submitting Your Plugin 1. Fork the repository -2. Create your kit in `cli/kits/your-framework/` -3. Test thoroughly -4. Update this README's kit catalog +2. Create your plugin in `cli/kits/your-framework/` +3. Test with the plugin system +4. Update this README's plugin catalog 5. Submit pull request with: - - Kit name and description + - Plugin name and description - What it covers - - Detection mechanism + - Detection mechanism (for /setup) - Example usage --- @@ -381,48 +388,50 @@ For detailed information, see: ``` claude-code-kit/ +├── .claude-plugin/ +│ ├── plugin.json # Main plugin metadata +│ └── marketplace.json # Marketplace registry +├── commands/ +│ └── setup.md # /setup command for detection ├── cli/ -│ ├── core/ # Always installed +│ ├── core/ # Core infrastructure (legacy installer) │ │ ├── hooks/ # 6 hooks │ │ ├── agents/ # 6 agents │ │ ├── commands/ # 6 commands │ │ └── skills/ -│ │ └── skill-developer/ # Meta-skill -│ └── kits/ # Framework-specific (optional) +│ │ └── skill-developer/ +│ └── kits/ # Framework plugins │ ├── nextjs/ +│ │ ├── .claude-plugin/plugin.json +│ │ ├── kit.json # Detection logic +│ │ └── skills/ │ ├── react/ -│ ├── shadcn/ -│ ├── tailwindcss/ -│ ├── mui/ -│ ├── tanstack-router/ -│ ├── tanstack-query/ │ ├── express/ -│ ├── nodejs/ -│ └── prisma/ -├── claude-setup # Installation script +│ ├── prisma/ +│ └── ... (10 plugins) +├── claude-setup # Legacy installation script ├── package.json └── README.md ``` -**Template vs Installation:** -- `cli/` directory = **Template** (what gets copied) -- User's `.claude/` = **Installation** (what they get) +**Two installation paths:** +- **Plugin system:** `/plugin marketplace add` → `/plugin install` +- **Legacy:** `npx github:blencorp/claude-code-kit` (copies to `.claude/`) --- ## Updates -Re-run the installer to update or add kits: +**Plugin system:** Plugins update automatically when you reinstall them: +```bash +/plugin install nextjs # Reinstalls with latest version +``` +**Legacy installer:** Re-run to update: ```bash 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 - --- ## License @@ -449,7 +458,7 @@ This project was inspired by [claude-code-infrastructure-showcase](https://githu ## Need Help? -- **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](#contributing-kits) section above +- **Plugin installation:** Make sure you've added the marketplace first with `/plugin marketplace add` +- **Framework not detected by /setup:** Check the `detect.command` in the kit.json file +- **Skill not activating:** Ensure the SKILL.md description includes relevant keywords +- **Contributing:** See [Contributing Plugins](#contributing-plugins) section above diff --git a/cli/core/skills/route-tester/SKILL.md b/cli/core/skills/route-tester/SKILL.md index e2e79bb..6e343f8 100644 --- a/cli/core/skills/route-tester/SKILL.md +++ b/cli/core/skills/route-tester/SKILL.md @@ -1,6 +1,5 @@ --- name: route-tester -displayName: API Route Testing description: Framework-agnostic HTTP API route testing patterns, authentication strategies, and integration testing best practices. Supports REST APIs with JWT cookie authentication and other common auth patterns. --- diff --git a/cli/kits/express/.claude-plugin/plugin.json b/cli/kits/express/.claude-plugin/plugin.json new file mode 100644 index 0000000..05a6915 --- /dev/null +++ b/cli/kits/express/.claude-plugin/plugin.json @@ -0,0 +1,9 @@ +{ + "name": "express", + "description": "Express.js patterns including routing, middleware, controllers, error handling, request validation, authentication middleware, and RESTful API design.", + "version": "1.0.0", + "author": { + "name": "blencorp", + "email": "support@blencorp.com" + } +} diff --git a/cli/kits/mui/.claude-plugin/plugin.json b/cli/kits/mui/.claude-plugin/plugin.json new file mode 100644 index 0000000..d1d289c --- /dev/null +++ b/cli/kits/mui/.claude-plugin/plugin.json @@ -0,0 +1,9 @@ +{ + "name": "mui", + "description": "Material-UI v7 component patterns including sx prop styling, theme customization, responsive design, and integration with React and TypeScript.", + "version": "1.0.0", + "author": { + "name": "blencorp", + "email": "support@blencorp.com" + } +} diff --git a/cli/kits/nextjs/.claude-plugin/plugin.json b/cli/kits/nextjs/.claude-plugin/plugin.json new file mode 100644 index 0000000..836e451 --- /dev/null +++ b/cli/kits/nextjs/.claude-plugin/plugin.json @@ -0,0 +1,9 @@ +{ + "name": "nextjs", + "description": "Next.js 15+ App Router patterns including Server Components, Client Components, layouts, route handlers, server actions, data fetching, streaming, metadata, loading states, and error boundaries.", + "version": "1.0.0", + "author": { + "name": "blencorp", + "email": "support@blencorp.com" + } +} diff --git a/cli/kits/nextjs/skills/nextjs/SKILL.md b/cli/kits/nextjs/skills/nextjs/SKILL.md index d546266..40aa23f 100644 --- a/cli/kits/nextjs/skills/nextjs/SKILL.md +++ b/cli/kits/nextjs/skills/nextjs/SKILL.md @@ -1,8 +1,6 @@ --- name: nextjs -displayName: Next.js description: Next.js 15+ App Router development patterns including Server Components, Client Components, data fetching, layouts, and server actions. Use when creating pages, routes, layouts, components, API route handlers, server actions, loading states, error boundaries, or working with Next.js navigation and metadata. -version: 1.0.0 --- # Next.js Development Guidelines diff --git a/cli/kits/nodejs/.claude-plugin/plugin.json b/cli/kits/nodejs/.claude-plugin/plugin.json new file mode 100644 index 0000000..3a86eb5 --- /dev/null +++ b/cli/kits/nodejs/.claude-plugin/plugin.json @@ -0,0 +1,9 @@ +{ + "name": "nodejs", + "description": "Node.js backend patterns with TypeScript including layered architecture (controllers, services, repositories), dependency injection, async patterns, streams, and error handling.", + "version": "1.0.0", + "author": { + "name": "blencorp", + "email": "support@blencorp.com" + } +} diff --git a/cli/kits/prisma/.claude-plugin/plugin.json b/cli/kits/prisma/.claude-plugin/plugin.json new file mode 100644 index 0000000..0a1b08b --- /dev/null +++ b/cli/kits/prisma/.claude-plugin/plugin.json @@ -0,0 +1,9 @@ +{ + "name": "prisma", + "description": "Prisma ORM patterns for type-safe database access including schema design, migrations, relations, queries, transactions, and integration with TypeScript.", + "version": "1.0.0", + "author": { + "name": "blencorp", + "email": "support@blencorp.com" + } +} diff --git a/cli/kits/react/.claude-plugin/plugin.json b/cli/kits/react/.claude-plugin/plugin.json new file mode 100644 index 0000000..533c67c --- /dev/null +++ b/cli/kits/react/.claude-plugin/plugin.json @@ -0,0 +1,9 @@ +{ + "name": "react", + "description": "React 18+ patterns including hooks (useState, useEffect, useContext, useReducer, useMemo, useCallback), Suspense, lazy loading, error boundaries, and TypeScript integration.", + "version": "1.0.0", + "author": { + "name": "blencorp", + "email": "support@blencorp.com" + } +} diff --git a/cli/kits/shadcn/.claude-plugin/plugin.json b/cli/kits/shadcn/.claude-plugin/plugin.json new file mode 100644 index 0000000..1345c6d --- /dev/null +++ b/cli/kits/shadcn/.claude-plugin/plugin.json @@ -0,0 +1,9 @@ +{ + "name": "shadcn", + "description": "shadcn/ui component library patterns including Radix UI primitives, component customization, theming, accessibility, and integration with Tailwind CSS.", + "version": "1.0.0", + "author": { + "name": "blencorp", + "email": "support@blencorp.com" + } +} diff --git a/cli/kits/shadcn/skills/shadcn/SKILL.md b/cli/kits/shadcn/skills/shadcn/SKILL.md index e866f8c..fc5f8f6 100644 --- a/cli/kits/shadcn/skills/shadcn/SKILL.md +++ b/cli/kits/shadcn/skills/shadcn/SKILL.md @@ -1,8 +1,6 @@ --- name: shadcn -displayName: shadcn/ui description: shadcn/ui component library patterns with Radix UI primitives and Tailwind CSS. Use when creating tables, forms, dialogs, cards, buttons, or any UI component using shadcn/ui, installing shadcn components, or styling with shadcn patterns. -version: 1.0.0 --- # shadcn/ui Development Guidelines diff --git a/cli/kits/tailwindcss/.claude-plugin/plugin.json b/cli/kits/tailwindcss/.claude-plugin/plugin.json new file mode 100644 index 0000000..cd09ce3 --- /dev/null +++ b/cli/kits/tailwindcss/.claude-plugin/plugin.json @@ -0,0 +1,9 @@ +{ + "name": "tailwindcss", + "description": "Tailwind CSS v4 utility-first patterns including responsive design, dark mode, custom themes, component extraction, and best practices for maintainable styles.", + "version": "1.0.0", + "author": { + "name": "blencorp", + "email": "support@blencorp.com" + } +} diff --git a/cli/kits/tailwindcss/skills/tailwindcss/SKILL.md b/cli/kits/tailwindcss/skills/tailwindcss/SKILL.md index fd80961..cd931af 100644 --- a/cli/kits/tailwindcss/skills/tailwindcss/SKILL.md +++ b/cli/kits/tailwindcss/skills/tailwindcss/SKILL.md @@ -1,8 +1,6 @@ --- name: tailwindcss -displayName: Tailwind CSS description: Tailwind CSS v4 utility-first styling patterns including responsive design, dark mode, and custom configuration. Use when styling with Tailwind, adding utility classes, configuring Tailwind, setting up dark mode, or customizing the theme. -version: 1.0.0 --- # Tailwind CSS v4 Development Guidelines diff --git a/cli/kits/tanstack-query/.claude-plugin/plugin.json b/cli/kits/tanstack-query/.claude-plugin/plugin.json new file mode 100644 index 0000000..3cd849e --- /dev/null +++ b/cli/kits/tanstack-query/.claude-plugin/plugin.json @@ -0,0 +1,9 @@ +{ + "name": "tanstack-query", + "description": "TanStack Query v5 data fetching patterns including useQuery, useMutation, useSuspenseQuery, query invalidation, optimistic updates, and infinite queries.", + "version": "1.0.0", + "author": { + "name": "blencorp", + "email": "support@blencorp.com" + } +} diff --git a/cli/kits/tanstack-router/.claude-plugin/plugin.json b/cli/kits/tanstack-router/.claude-plugin/plugin.json new file mode 100644 index 0000000..f7b73df --- /dev/null +++ b/cli/kits/tanstack-router/.claude-plugin/plugin.json @@ -0,0 +1,9 @@ +{ + "name": "tanstack-router", + "description": "TanStack Router patterns including file-based routing, type-safe navigation, route loaders, search params, and integration with TanStack Query.", + "version": "1.0.0", + "author": { + "name": "blencorp", + "email": "support@blencorp.com" + } +} diff --git a/commands/setup.md b/commands/setup.md new file mode 100644 index 0000000..205d5f4 --- /dev/null +++ b/commands/setup.md @@ -0,0 +1,85 @@ +--- +description: Detect project frameworks and install the appropriate plugins automatically +--- + +# Project Setup - Framework Detection & Installation + +Analyze this project to detect which frameworks and libraries are in use, then **install the appropriate plugins automatically**. + +## Detection Rules + +Run these checks to detect frameworks. For monorepos, check both root and workspace directories (apps/*, packages/*, services/*). + +### Frontend Frameworks + +**Next.js** (`nextjs` plugin) - Check for: +- `package.json` containing `"next"` dependency +- `next.config.js` or `next.config.mjs` or `next.config.ts` file + +**React** (`react` plugin) - Check for: +- `package.json` containing `"react"` dependency + +**TailwindCSS** (`tailwindcss` plugin) - Check for: +- `package.json` containing `"tailwindcss"` dependency +- `tailwind.config.js` or `tailwind.config.ts` file + +**shadcn/ui** (`shadcn` plugin) - Check for: +- `components.json` file (shadcn config) +- `package.json` containing `"@radix-ui"` dependencies + +**Material-UI** (`mui` plugin) - Check for: +- `package.json` containing `"@mui/material"` dependency + +**TanStack Router** (`tanstack-router` plugin) - Check for: +- `package.json` containing `"@tanstack/react-router"` dependency + +**TanStack Query** (`tanstack-query` plugin) - Check for: +- `package.json` containing `"@tanstack/react-query"` dependency + +### Backend Frameworks + +**Express** (`express` plugin) - Check for: +- `package.json` containing `"express"` dependency + +**Node.js** (`nodejs` plugin) - Check for: +- `package.json` with `"type": "module"` and a backend framework + +**Prisma** (`prisma` plugin) - Check for: +- `package.json` containing `"prisma"` or `"@prisma/client"` dependency +- `prisma/schema.prisma` file + +## Instructions + +1. Read the project's `package.json` file(s) to check dependencies +2. Look for framework-specific config files +3. For monorepos, check common workspace patterns (apps/*, packages/*, services/*) +4. Show the user what was detected +5. **Install all detected plugins using `/plugin install `** + +## Output Format + +After detection, show results and install: + +``` +## Detected Frameworks + +✓ Next.js (found "next" in package.json) +✓ React (found "react" in package.json) +✓ TailwindCSS (found tailwind.config.ts) +✓ Prisma (found prisma/schema.prisma) + +## Installing Plugins + +Installing: nextjs, react, tailwindcss, prisma +``` + +Then run: +``` +/plugin install nextjs react tailwindcss prisma +``` + +## Important + +- **Do the installation automatically** - don't just show recommendations +- If no frameworks are detected, inform the user and list available plugins +- For monorepos, detect across all workspaces and install all relevant plugins