From a5b4d0839993845963544f349e2ddb78b7784fb2 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 28 Nov 2025 17:24:05 +0000 Subject: [PATCH 1/4] feat: migrate to official Claude Code plugin format - Add .claude-plugin/plugin.json for marketplace compatibility - Add marketplace.json to register all 10 framework plugins - Add plugin.json to each framework kit (nextjs, react, express, etc.) - Create /setup command for framework detection and plugin recommendations - Update README with plugin-based installation instructions This aligns the kit with Anthropic's official plugin system, enabling: - /plugin marketplace add blencorp/claude-code-kit - /plugin install nextjs react prisma - /setup for automatic framework detection The legacy claude-setup installer remains for backward compatibility. --- .claude-plugin/marketplace.json | 17 ++ .claude-plugin/plugin.json | 9 + README.md | 280 +++++++++--------- cli/kits/express/.claude-plugin/plugin.json | 8 + cli/kits/mui/.claude-plugin/plugin.json | 8 + cli/kits/nextjs/.claude-plugin/plugin.json | 8 + cli/kits/nodejs/.claude-plugin/plugin.json | 8 + cli/kits/prisma/.claude-plugin/plugin.json | 8 + cli/kits/react/.claude-plugin/plugin.json | 8 + cli/kits/shadcn/.claude-plugin/plugin.json | 8 + .../tailwindcss/.claude-plugin/plugin.json | 8 + .../tanstack-query/.claude-plugin/plugin.json | 8 + .../.claude-plugin/plugin.json | 8 + commands/setup.md | 100 +++++++ 14 files changed, 353 insertions(+), 133 deletions(-) create mode 100644 .claude-plugin/marketplace.json create mode 100644 .claude-plugin/plugin.json create mode 100644 cli/kits/express/.claude-plugin/plugin.json create mode 100644 cli/kits/mui/.claude-plugin/plugin.json create mode 100644 cli/kits/nextjs/.claude-plugin/plugin.json create mode 100644 cli/kits/nodejs/.claude-plugin/plugin.json create mode 100644 cli/kits/prisma/.claude-plugin/plugin.json create mode 100644 cli/kits/react/.claude-plugin/plugin.json create mode 100644 cli/kits/shadcn/.claude-plugin/plugin.json create mode 100644 cli/kits/tailwindcss/.claude-plugin/plugin.json create mode 100644 cli/kits/tanstack-query/.claude-plugin/plugin.json create mode 100644 cli/kits/tanstack-router/.claude-plugin/plugin.json create mode 100644 commands/setup.md diff --git a/.claude-plugin/marketplace.json b/.claude-plugin/marketplace.json new file mode 100644 index 0000000..fd95e09 --- /dev/null +++ b/.claude-plugin/marketplace.json @@ -0,0 +1,17 @@ +{ + "name": "claude-code-kit", + "description": "A curated collection of framework-specific plugins for Claude Code with automatic detection", + "version": "1.0.0", + "plugins": [ + "nextjs", + "react", + "express", + "nodejs", + "prisma", + "tailwindcss", + "shadcn", + "mui", + "tanstack-query", + "tanstack-router" + ] +} diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json new file mode 100644 index 0000000..08e7abc --- /dev/null +++ b/.claude-plugin/plugin.json @@ -0,0 +1,9 @@ +{ + "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" + }, + "repository": "https://github.com/blencorp/claude-code-kit" +} diff --git a/README.md b/README.md index 3c5366a..d2251d0 100644 --- a/README.md +++ b/README.md @@ -4,42 +4,79 @@ # 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, run: +/plugin marketplace add blencorp/claude-code-kit + +# Install the kit to get the /setup command +/plugin install claude-code-kit + +# Auto-detect your frameworks and get install recommendations +/setup ``` **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 +1. `/setup` detects your frameworks (Next.js, React, Express, Prisma, etc.) +2. Shows which plugins match your project +3. Provides the install command for detected plugins +4. Skills automatically activate based on conversation context -**Result:** Skills automatically activate when you need them based on your prompts, file edits, and technology usage. +**Example output from `/setup`:** +``` +Detected frameworks in your project: + ✓ Next.js 15 (found in package.json) + ✓ React 18 (found in package.json) + ✓ Prisma (found prisma/schema.prisma) + ✓ TailwindCSS (found tailwind.config.ts) + +To install these plugins: + /plugin install nextjs react prisma tailwindcss +``` --- -## What's a Kit? +## Alternative: Legacy Installation -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 +For environments without plugin support, use the bash installer: -When installed, kits make Claude Code an expert in your stack. +```bash +npx github:blencorp/claude-code-kit +``` + +This copies hooks, agents, commands, and skills directly to `.claude/`. --- -## Available Kits +## What's a Plugin? -### Frontend Kits +A **plugin** is a framework-specific package following the official Claude Code plugin format: + +``` +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 Plugins + +### Frontend Plugins | Kit | Description | Documentation | |-----|-------------|---------------| @@ -51,7 +88,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 +96,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 +146,22 @@ Slash commands for common workflows: ## How It Works -### Auto-Activation System - -Skills automatically activate based on: +### Native Skill Activation -1. **Prompt Keywords** - - Example: "create a table component" → shadcn skill activates - - Example: "query the database" → Prisma skill activates +Claude Code natively loads skills based on their SKILL.md description. When you install a plugin: -2. **Intent Patterns** (Regex) - - Example: "add.*authentication" → relevant auth patterns activate - - Example: "optimize.*component" → React performance 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 -3. **File Path Triggers** - - Editing `app/**/*.tsx` → Next.js skill activates - - Editing `prisma/schema.prisma` → Prisma 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 -4. **Content Patterns** - - File contains `useQuery(` → TanStack Query skill activates - - File contains `createFileRoute` → TanStack Router skill activates +### Legacy Auto-Activation (Optional) -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 +265,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 +354,37 @@ For detailed information, see: - [API Reference](resources/api-reference.md) ``` -### skill-rules-fragment.json Format - -```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" - ] - } - } -} -``` +**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. -### 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 +393,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 +463,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/kits/express/.claude-plugin/plugin.json b/cli/kits/express/.claude-plugin/plugin.json new file mode 100644 index 0000000..b2d030c --- /dev/null +++ b/cli/kits/express/.claude-plugin/plugin.json @@ -0,0 +1,8 @@ +{ + "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" + } +} diff --git a/cli/kits/mui/.claude-plugin/plugin.json b/cli/kits/mui/.claude-plugin/plugin.json new file mode 100644 index 0000000..2824fb1 --- /dev/null +++ b/cli/kits/mui/.claude-plugin/plugin.json @@ -0,0 +1,8 @@ +{ + "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" + } +} diff --git a/cli/kits/nextjs/.claude-plugin/plugin.json b/cli/kits/nextjs/.claude-plugin/plugin.json new file mode 100644 index 0000000..540012d --- /dev/null +++ b/cli/kits/nextjs/.claude-plugin/plugin.json @@ -0,0 +1,8 @@ +{ + "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" + } +} diff --git a/cli/kits/nodejs/.claude-plugin/plugin.json b/cli/kits/nodejs/.claude-plugin/plugin.json new file mode 100644 index 0000000..70a07df --- /dev/null +++ b/cli/kits/nodejs/.claude-plugin/plugin.json @@ -0,0 +1,8 @@ +{ + "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" + } +} diff --git a/cli/kits/prisma/.claude-plugin/plugin.json b/cli/kits/prisma/.claude-plugin/plugin.json new file mode 100644 index 0000000..a894bb1 --- /dev/null +++ b/cli/kits/prisma/.claude-plugin/plugin.json @@ -0,0 +1,8 @@ +{ + "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" + } +} diff --git a/cli/kits/react/.claude-plugin/plugin.json b/cli/kits/react/.claude-plugin/plugin.json new file mode 100644 index 0000000..74f6dc3 --- /dev/null +++ b/cli/kits/react/.claude-plugin/plugin.json @@ -0,0 +1,8 @@ +{ + "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" + } +} diff --git a/cli/kits/shadcn/.claude-plugin/plugin.json b/cli/kits/shadcn/.claude-plugin/plugin.json new file mode 100644 index 0000000..7faa147 --- /dev/null +++ b/cli/kits/shadcn/.claude-plugin/plugin.json @@ -0,0 +1,8 @@ +{ + "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" + } +} diff --git a/cli/kits/tailwindcss/.claude-plugin/plugin.json b/cli/kits/tailwindcss/.claude-plugin/plugin.json new file mode 100644 index 0000000..4d6ec66 --- /dev/null +++ b/cli/kits/tailwindcss/.claude-plugin/plugin.json @@ -0,0 +1,8 @@ +{ + "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" + } +} 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..0401f7e --- /dev/null +++ b/cli/kits/tanstack-query/.claude-plugin/plugin.json @@ -0,0 +1,8 @@ +{ + "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" + } +} 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..8a4ef93 --- /dev/null +++ b/cli/kits/tanstack-router/.claude-plugin/plugin.json @@ -0,0 +1,8 @@ +{ + "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" + } +} diff --git a/commands/setup.md b/commands/setup.md new file mode 100644 index 0000000..cf383d9 --- /dev/null +++ b/commands/setup.md @@ -0,0 +1,100 @@ +--- +description: Detect project frameworks and recommend plugins to install +--- + +# Project Setup - Framework Detection + +Analyze this project to detect which frameworks and libraries are in use, then recommend the appropriate Claude Code Kit plugins to install. + +## Detection Rules + +Run these checks to detect frameworks. For monorepos, check both root and workspace directories (apps/*, packages/*, services/*). + +### Frontend Frameworks + +**Next.js** - Check for: +- `package.json` containing `"next"` dependency +- `next.config.js` or `next.config.mjs` or `next.config.ts` file +- `app/` directory with `layout.tsx` or `page.tsx` + +**React** - Check for: +- `package.json` containing `"react"` dependency +- `.tsx` or `.jsx` files with React imports + +**TailwindCSS** - Check for: +- `package.json` containing `"tailwindcss"` dependency +- `tailwind.config.js` or `tailwind.config.ts` file + +**shadcn/ui** - Check for: +- `components.json` file (shadcn config) +- `package.json` containing `"@radix-ui"` dependencies + +**Material-UI** - Check for: +- `package.json` containing `"@mui/material"` dependency + +**TanStack Router** - Check for: +- `package.json` containing `"@tanstack/react-router"` dependency + +**TanStack Query** - Check for: +- `package.json` containing `"@tanstack/react-query"` dependency + +### Backend Frameworks + +**Express** - Check for: +- `package.json` containing `"express"` dependency + +**Node.js** (general patterns) - Check for: +- `package.json` exists +- Server-side TypeScript/JavaScript files + +**Prisma** - Check for: +- `package.json` containing `"prisma"` or `"@prisma/client"` dependency +- `prisma/schema.prisma` file + +## Output Format + +After detection, output results in this format: + +``` +## Detected Frameworks + +✓ Next.js 15 (found in package.json) +✓ React 18 (found in package.json) +✓ TailwindCSS (found tailwind.config.ts) +✓ Prisma (found prisma/schema.prisma) + +## Recommended Plugins + +To install these plugins from the claude-code-kit marketplace: + +1. First, add the marketplace (if not already added): + /plugin marketplace add blencorp/claude-code-kit + +2. Then install the detected plugins: + /plugin install nextjs react tailwindcss prisma + +## Available Plugins + +The claude-code-kit marketplace includes: + +| Plugin | Description | +|--------|-------------| +| nextjs | Next.js 15+ App Router patterns | +| react | React 18+ hooks and component patterns | +| express | Express.js routing and middleware | +| nodejs | Node.js service layer patterns | +| prisma | Prisma ORM and database patterns | +| tailwindcss | Tailwind CSS v4 utility patterns | +| shadcn | shadcn/ui component library | +| mui | Material-UI v7 components | +| tanstack-query | TanStack Query data fetching | +| tanstack-router | TanStack Router file-based routing | +``` + +## 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/*) +4. Output the detected frameworks and installation commands +5. Be helpful - explain what each plugin provides From 0792cc5f4c7e4181672ac979994ffc9471c1f240 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 28 Nov 2025 19:15:25 +0000 Subject: [PATCH 2/4] fix: make /setup install plugins automatically instead of just recommending The /setup command now detects frameworks AND installs the appropriate plugins in one step, rather than requiring users to manually run /plugin install after seeing recommendations. --- README.md | 35 +++++++++---------- commands/setup.md | 85 +++++++++++++++++++---------------------------- 2 files changed, 50 insertions(+), 70 deletions(-) diff --git a/README.md b/README.md index d2251d0..89d8c80 100644 --- a/README.md +++ b/README.md @@ -11,34 +11,29 @@ Get expert-level Claude Code assistance for your tech stack in seconds. ## Quick Start (Plugin Installation) ```bash -# In Claude Code, run: +# In Claude Code, add the marketplace and run setup: /plugin marketplace add blencorp/claude-code-kit - -# Install the kit to get the /setup command -/plugin install claude-code-kit - -# Auto-detect your frameworks and get install recommendations /setup ``` -**What happens:** -1. `/setup` detects your frameworks (Next.js, React, Express, Prisma, etc.) -2. Shows which plugins match your project -3. Provides the install command for detected plugins -4. Skills automatically activate based on conversation context +**That's it.** `/setup` detects your frameworks and installs the appropriate plugins automatically. -**Example output from `/setup`:** +**Example:** ``` -Detected frameworks in your project: - ✓ Next.js 15 (found in package.json) - ✓ React 18 (found in package.json) - ✓ Prisma (found prisma/schema.prisma) - ✓ TailwindCSS (found tailwind.config.ts) - -To install these plugins: - /plugin install nextjs react prisma tailwindcss +## 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. + --- ## Alternative: Legacy Installation diff --git a/commands/setup.md b/commands/setup.md index cf383d9..205d5f4 100644 --- a/commands/setup.md +++ b/commands/setup.md @@ -1,10 +1,10 @@ --- -description: Detect project frameworks and recommend plugins to install +description: Detect project frameworks and install the appropriate plugins automatically --- -# Project Setup - Framework Detection +# Project Setup - Framework Detection & Installation -Analyze this project to detect which frameworks and libraries are in use, then recommend the appropriate Claude Code Kit plugins to install. +Analyze this project to detect which frameworks and libraries are in use, then **install the appropriate plugins automatically**. ## Detection Rules @@ -12,89 +12,74 @@ Run these checks to detect frameworks. For monorepos, check both root and worksp ### Frontend Frameworks -**Next.js** - Check for: +**Next.js** (`nextjs` plugin) - Check for: - `package.json` containing `"next"` dependency - `next.config.js` or `next.config.mjs` or `next.config.ts` file -- `app/` directory with `layout.tsx` or `page.tsx` -**React** - Check for: +**React** (`react` plugin) - Check for: - `package.json` containing `"react"` dependency -- `.tsx` or `.jsx` files with React imports -**TailwindCSS** - Check for: +**TailwindCSS** (`tailwindcss` plugin) - Check for: - `package.json` containing `"tailwindcss"` dependency - `tailwind.config.js` or `tailwind.config.ts` file -**shadcn/ui** - Check for: +**shadcn/ui** (`shadcn` plugin) - Check for: - `components.json` file (shadcn config) - `package.json` containing `"@radix-ui"` dependencies -**Material-UI** - Check for: +**Material-UI** (`mui` plugin) - Check for: - `package.json` containing `"@mui/material"` dependency -**TanStack Router** - Check for: +**TanStack Router** (`tanstack-router` plugin) - Check for: - `package.json` containing `"@tanstack/react-router"` dependency -**TanStack Query** - Check for: +**TanStack Query** (`tanstack-query` plugin) - Check for: - `package.json` containing `"@tanstack/react-query"` dependency ### Backend Frameworks -**Express** - Check for: +**Express** (`express` plugin) - Check for: - `package.json` containing `"express"` dependency -**Node.js** (general patterns) - Check for: -- `package.json` exists -- Server-side TypeScript/JavaScript files +**Node.js** (`nodejs` plugin) - Check for: +- `package.json` with `"type": "module"` and a backend framework -**Prisma** - Check for: +**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, output results in this format: +After detection, show results and install: ``` ## Detected Frameworks -✓ Next.js 15 (found in package.json) -✓ React 18 (found in package.json) +✓ Next.js (found "next" in package.json) +✓ React (found "react" in package.json) ✓ TailwindCSS (found tailwind.config.ts) ✓ Prisma (found prisma/schema.prisma) -## Recommended Plugins - -To install these plugins from the claude-code-kit marketplace: - -1. First, add the marketplace (if not already added): - /plugin marketplace add blencorp/claude-code-kit +## Installing Plugins -2. Then install the detected plugins: - /plugin install nextjs react tailwindcss prisma - -## Available Plugins - -The claude-code-kit marketplace includes: +Installing: nextjs, react, tailwindcss, prisma +``` -| Plugin | Description | -|--------|-------------| -| nextjs | Next.js 15+ App Router patterns | -| react | React 18+ hooks and component patterns | -| express | Express.js routing and middleware | -| nodejs | Node.js service layer patterns | -| prisma | Prisma ORM and database patterns | -| tailwindcss | Tailwind CSS v4 utility patterns | -| shadcn | shadcn/ui component library | -| mui | Material-UI v7 components | -| tanstack-query | TanStack Query data fetching | -| tanstack-router | TanStack Router file-based routing | +Then run: +``` +/plugin install nextjs react tailwindcss prisma ``` -## Instructions +## Important -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/*) -4. Output the detected frameworks and installation commands -5. Be helpful - explain what each plugin provides +- **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 From a81655f77a006740f98a9262961078f355651b7e Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 28 Nov 2025 19:23:35 +0000 Subject: [PATCH 3/4] fix: align marketplace.json with official Anthropic schema - Add $schema reference to marketplace.json - Add owner field with name and email - Convert plugins array to proper objects with source, category, description - Add email to all plugin.json author fields Now fully compliant with https://anthropic.com/claude-code/marketplace.schema.json --- .claude-plugin/marketplace.json | 87 ++++++++++++++++--- .claude-plugin/plugin.json | 3 +- cli/kits/express/.claude-plugin/plugin.json | 3 +- cli/kits/mui/.claude-plugin/plugin.json | 3 +- cli/kits/nextjs/.claude-plugin/plugin.json | 3 +- cli/kits/nodejs/.claude-plugin/plugin.json | 3 +- cli/kits/prisma/.claude-plugin/plugin.json | 3 +- cli/kits/react/.claude-plugin/plugin.json | 3 +- cli/kits/shadcn/.claude-plugin/plugin.json | 3 +- .../tailwindcss/.claude-plugin/plugin.json | 3 +- .../tanstack-query/.claude-plugin/plugin.json | 3 +- .../.claude-plugin/plugin.json | 3 +- 12 files changed, 98 insertions(+), 22 deletions(-) diff --git a/.claude-plugin/marketplace.json b/.claude-plugin/marketplace.json index fd95e09..16302b6 100644 --- a/.claude-plugin/marketplace.json +++ b/.claude-plugin/marketplace.json @@ -1,17 +1,82 @@ { + "$schema": "https://anthropic.com/claude-code/marketplace.schema.json", "name": "claude-code-kit", - "description": "A curated collection of framework-specific plugins for Claude Code with automatic detection", "version": "1.0.0", + "description": "Framework-specific plugins for Claude Code with automatic detection and installation", + "owner": { + "name": "blencorp", + "email": "support@blencorp.com" + }, "plugins": [ - "nextjs", - "react", - "express", - "nodejs", - "prisma", - "tailwindcss", - "shadcn", - "mui", - "tanstack-query", - "tanstack-router" + { + "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 index 08e7abc..f8d710f 100644 --- a/.claude-plugin/plugin.json +++ b/.claude-plugin/plugin.json @@ -3,7 +3,8 @@ "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" + "name": "blencorp", + "email": "support@blencorp.com" }, "repository": "https://github.com/blencorp/claude-code-kit" } diff --git a/cli/kits/express/.claude-plugin/plugin.json b/cli/kits/express/.claude-plugin/plugin.json index b2d030c..05a6915 100644 --- a/cli/kits/express/.claude-plugin/plugin.json +++ b/cli/kits/express/.claude-plugin/plugin.json @@ -3,6 +3,7 @@ "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" + "name": "blencorp", + "email": "support@blencorp.com" } } diff --git a/cli/kits/mui/.claude-plugin/plugin.json b/cli/kits/mui/.claude-plugin/plugin.json index 2824fb1..d1d289c 100644 --- a/cli/kits/mui/.claude-plugin/plugin.json +++ b/cli/kits/mui/.claude-plugin/plugin.json @@ -3,6 +3,7 @@ "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" + "name": "blencorp", + "email": "support@blencorp.com" } } diff --git a/cli/kits/nextjs/.claude-plugin/plugin.json b/cli/kits/nextjs/.claude-plugin/plugin.json index 540012d..836e451 100644 --- a/cli/kits/nextjs/.claude-plugin/plugin.json +++ b/cli/kits/nextjs/.claude-plugin/plugin.json @@ -3,6 +3,7 @@ "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" + "name": "blencorp", + "email": "support@blencorp.com" } } diff --git a/cli/kits/nodejs/.claude-plugin/plugin.json b/cli/kits/nodejs/.claude-plugin/plugin.json index 70a07df..3a86eb5 100644 --- a/cli/kits/nodejs/.claude-plugin/plugin.json +++ b/cli/kits/nodejs/.claude-plugin/plugin.json @@ -3,6 +3,7 @@ "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" + "name": "blencorp", + "email": "support@blencorp.com" } } diff --git a/cli/kits/prisma/.claude-plugin/plugin.json b/cli/kits/prisma/.claude-plugin/plugin.json index a894bb1..0a1b08b 100644 --- a/cli/kits/prisma/.claude-plugin/plugin.json +++ b/cli/kits/prisma/.claude-plugin/plugin.json @@ -3,6 +3,7 @@ "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" + "name": "blencorp", + "email": "support@blencorp.com" } } diff --git a/cli/kits/react/.claude-plugin/plugin.json b/cli/kits/react/.claude-plugin/plugin.json index 74f6dc3..533c67c 100644 --- a/cli/kits/react/.claude-plugin/plugin.json +++ b/cli/kits/react/.claude-plugin/plugin.json @@ -3,6 +3,7 @@ "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" + "name": "blencorp", + "email": "support@blencorp.com" } } diff --git a/cli/kits/shadcn/.claude-plugin/plugin.json b/cli/kits/shadcn/.claude-plugin/plugin.json index 7faa147..1345c6d 100644 --- a/cli/kits/shadcn/.claude-plugin/plugin.json +++ b/cli/kits/shadcn/.claude-plugin/plugin.json @@ -3,6 +3,7 @@ "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" + "name": "blencorp", + "email": "support@blencorp.com" } } diff --git a/cli/kits/tailwindcss/.claude-plugin/plugin.json b/cli/kits/tailwindcss/.claude-plugin/plugin.json index 4d6ec66..cd09ce3 100644 --- a/cli/kits/tailwindcss/.claude-plugin/plugin.json +++ b/cli/kits/tailwindcss/.claude-plugin/plugin.json @@ -3,6 +3,7 @@ "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" + "name": "blencorp", + "email": "support@blencorp.com" } } diff --git a/cli/kits/tanstack-query/.claude-plugin/plugin.json b/cli/kits/tanstack-query/.claude-plugin/plugin.json index 0401f7e..3cd849e 100644 --- a/cli/kits/tanstack-query/.claude-plugin/plugin.json +++ b/cli/kits/tanstack-query/.claude-plugin/plugin.json @@ -3,6 +3,7 @@ "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" + "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 index 8a4ef93..f7b73df 100644 --- a/cli/kits/tanstack-router/.claude-plugin/plugin.json +++ b/cli/kits/tanstack-router/.claude-plugin/plugin.json @@ -3,6 +3,7 @@ "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" + "name": "blencorp", + "email": "support@blencorp.com" } } From e214e63473719a360156955281ccb3d24adaa6c8 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 28 Nov 2025 19:30:34 +0000 Subject: [PATCH 4/4] fix: remove non-standard SKILL.md frontmatter fields Remove displayName and version from SKILL.md frontmatter to match official Anthropic skills spec which only requires: - name (lowercase, hyphens) - description Fixed files: - cli/kits/nextjs/skills/nextjs/SKILL.md - cli/kits/shadcn/skills/shadcn/SKILL.md - cli/kits/tailwindcss/skills/tailwindcss/SKILL.md - cli/core/skills/route-tester/SKILL.md Verified against: https://github.com/anthropics/skills --- cli/core/skills/route-tester/SKILL.md | 1 - cli/kits/nextjs/skills/nextjs/SKILL.md | 2 -- cli/kits/shadcn/skills/shadcn/SKILL.md | 2 -- cli/kits/tailwindcss/skills/tailwindcss/SKILL.md | 2 -- 4 files changed, 7 deletions(-) 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/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/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/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