### Node.js Kit Installation (CLI)

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/nodejs/README.md

These bash commands show how to install the Node.js kit. The first command performs an automatic setup for detected projects, while the second allows for explicit installation of the 'nodejs' kit.

```bash
npx claude-code-setup --yes
```

```bash
npx claude-code-setup --kit nodejs
```

--------------------------------

### Setup Bundle Analyzer for Next.js

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/nextjs/skills/nextjs/resources/performance.md

This section details the setup process for the `@next/bundle-analyzer` package in a Next.js project. It includes installation instructions, configuration in `next.config.js`, and how to trigger the analysis.

```bash
npm install @next/bundle-analyzer
```

```javascript
// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true'
});

module.exports = withBundleAnalyzer({
  // Your Next.js config
});
```

```bash
# Analyze bundle
ANALYZE=true npm run build
```

--------------------------------

### Create a Complete Material-UI Theme Example

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/mui/skills/mui/resources/theme-customization.md

Provides a comprehensive example of a Material-UI theme configuration, including palette, typography, shape, spacing, and component-specific overrides. This demonstrates how to define a full theme object using 'createTheme' from '@mui/material/styles'.

```typescript
import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    mode: 'light',
    primary: {
      main: '#2563eb',
      light: '#60a5fa',
      dark: '#1e40af',
      contrastText: '#ffffff'
    },
    secondary: {
      main: '#7c3aed',
      light: '#a78bfa',
      dark: '#5b21b6',
      contrastText: '#ffffff'
    },
    error: {
      main: '#dc2626'
    },
    warning: {
      main: '#f59e0b'
    },
    info: {
      main: '#0ea5e9'
    },
    success: {
      main: '#10b981'
    },
    background: {
      default: '#f8fafc',
      paper: '#ffffff'
    },
    text: {
      primary: '#0f172a',
      secondary: '#64748b'
    }
  },
  typography: {
    fontFamily: '"Inter", "Segoe UI", "Roboto", sans-serif',
    fontSize: 14,
    h1: {
      fontSize: '3rem',
      fontWeight: 700,
      lineHeight: 1.2
    },
    h2: {
      fontSize: '2.25rem',
      fontWeight: 700,
      lineHeight: 1.3
    },
    h3: {
      fontSize: '1.875rem',
      fontWeight: 600,
      lineHeight: 1.4
    },
    h4: {
      fontSize: '1.5rem',
      fontWeight: 600,
      lineHeight: 1.5
    },
    h5: {
      fontSize: '1.25rem',
      fontWeight: 600,
      lineHeight: 1.6
    },
    h6: {
      fontSize: '1rem',
      fontWeight: 600,
      lineHeight: 1.6
    },
    button: {
      textTransform: 'none',
      fontWeight: 600,
      fontSize: '0.875rem'
    }
  },
  shape: {
    borderRadius: 10
  },
  spacing: 8,
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          borderRadius: 8,
          padding: '10px 20px',
          fontWeight: 600,
          boxShadow: 'none',
          '&:hover': {
            boxShadow: 'none'
          }
        },
        contained: {
          '&:hover': {
            transform: 'translateY(-1px)',
            boxShadow: '0 4px 12px rgba(0,0,0,0.15)'
          }
        }
      },
      defaultProps: {
        disableElevation: true
      }
    },
    MuiCard: {
      styleOverrides: {
        root: {
          borderRadius: 12,
          boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
          '&:hover': {
            boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)'
          }
        }
      }
    },
    MuiTextField: {
      defaultProps: {
        variant: 'outlined'
      },
      styleOverrides: {
        root: {
          '& .MuiOutlinedInput-root': {
            borderRadius: 8,
            '&:hover .MuiOutlinedInput-notchedOutline': {
              borderColor: '#2563eb'
            }
          }
        }
      }
    },
    MuiChip: {
      styleOverrides: {
        root: {
          borderRadius: 6,
          fontWeight: 500,
          height: 28
        }
      }
    },
    MuiAppBar: {
      styleOverrides: {
        root: {
          boxShadow: '0 1px 3px rgba(0,0,0,0.12)'
        }
      }
    }
  }
});

export default theme;
```

--------------------------------

### Next.js ThemeProvider Setup with next-themes

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/shadcn/skills/shadcn/resources/theming.md

Demonstrates how to integrate the `next-themes` library into a Next.js application to manage theme switching. It shows the necessary provider setup in `app/providers.tsx` and layout configuration in `app/layout.tsx`.

```typescript
// app/providers.tsx
'use client';

import { ThemeProvider } from 'next-themes';

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
      {children}
    </ThemeProvider>
  );
}

```

```typescript
// app/layout.tsx
import { Providers } from './providers';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

```

--------------------------------

### Install Express.js Kit

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/express/README.md

Installs the Express.js kit using the Claude code setup CLI. It can be installed automatically if Express is detected in package.json or explicitly by listing the kit.

```bash
npx claude-code-setup --yes
```

```bash
npx claude-code-setup --kit express,nodejs,prisma
```

--------------------------------

### Test Database Setup and Teardown with Prisma in TypeScript

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/nodejs/skills/nodejs/resources/testing-guide.md

Illustrates how to set up and tear down a test database using PrismaClient in TypeScript. It includes dropping and creating a schema for isolation, running migrations, and disconnecting the client after tests.

```typescript
// test/setup.ts
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient({
  datasources: {
    db: {
      url: process.env.TEST_DATABASE_URL
    }
  }
});

export async function setupTestDatabase() {
  await prisma.$executeRawUnsafe('DROP SCHEMA IF EXISTS test CASCADE');
  await prisma.$executeRawUnsafe('CREATE SCHEMA test');
  // Run migrations
}

export async function teardownTestDatabase() {
  await prisma.$disconnect();
}
```

--------------------------------

### Auto-Installation Command (Bash)

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/prisma/README.md

Command to automatically install the Prisma kit and its dependencies if the project is auto-detected. This simplifies the setup process.

```bash
npx claude-code-setup --yes
```

--------------------------------

### Install React Kit via CLI

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/react/README.md

These commands demonstrate how to install the React kit using the `claude-code-setup` command-line interface. The `--yes` flag allows for automatic installation in detected projects, while specifying `--kit react` enables explicit installation.

```bash
npx claude-code-setup --yes
```

```bash
npx claude-code-setup --kit react
```

--------------------------------

### MUI Kit Installation (Bash)

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/mui/README.md

These bash commands show how to install the MUI Kit. The first command performs an automatic installation for detected projects, while the second allows for explicit installation of the MUI and React kits.

```bash
npx claude-code-setup --yes
```

```bash
npx claude-code-setup --kit mui,react
```

--------------------------------

### Test Kit Detection with Bash

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/README.md

This bash script demonstrates how to test if a specific framework kit, like 'myframework', is detected by the Claude setup. It involves navigating to a test project directory and running the setup script.

```bash
cd /path/to/test-project
../claude-code-infrastructure-showcase/claude-setup
# Should detect your framework if conditions match
```

--------------------------------

### New Kit Configuration (kit.json)

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/README.md

An example of a kit.json file for a custom framework named 'My Framework'. It includes basic metadata and a detection command to identify the presence of the framework, typically by checking the package.json file.

```json
{
  "name": "myframework",
  "displayName": "My Framework",
  "description": "Patterns for My Framework",
  "version": "1.0.0",
  "detect": {
    "command": "grep -q '"myframework"' package.json 2>/dev/null"
  }
}
```

--------------------------------

### Install shadcn/ui Kit (Bash)

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/shadcn/README.md

Installs the shadcn/ui kit. Use the `--yes` flag for auto-detected projects or specify the kit explicitly with `--kit shadcn`.

```bash
npx claude-code-setup --yes

```

```bash
npx claude-code-setup --kit shadcn

```

--------------------------------

### Framework Detection Commands (kit.json)

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/README.md

Examples of 'detect.command' entries within kit.json, illustrating how to use bash commands to identify different frameworks like React, Express, and Prisma, including conditions for multiple checks.

```json
// React detection
"command": "grep -q '"react"' package.json 2>/dev/null"
```

```json
// Express detection
"command": "grep -qE '"express"|"@types/express"' package.json 2>/dev/null"
```

```json
// Prisma detection
"command": "[ -f prisma/schema.prisma ]"
```

```json
// Multiple conditions
"command": "grep -q '"react"' package.json && [ -d src ]"
```

--------------------------------

### Install Next.js Kit via CLI

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/nextjs/README.md

These bash commands demonstrate how to install the Next.js kit using the claude-code-setup CLI. The first command installs automatically if the project is detected, while the second allows for explicit installation.

```bash
npx claude-code-setup --yes
```

```bash
npx claude-code-setup --kit nextjs
```

--------------------------------

### Prisma Client Dependency Example (JSON)

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/prisma/README.md

Example of how the Prisma client is included as a dependency in a project's package.json file. This is used for auto-detection of the Prisma kit.

```json
{
  "dependencies": {
    "@prisma/client": "^5.0.0"
  }
}
```

--------------------------------

### Install TanStack Router Kit

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/tanstack-router/README.md

These bash commands show how to install the TanStack Router kit. The first command uses auto-detection, while the second allows for explicit installation of the tanstack-router and react kits.

```bash
npx claude-code-setup --yes
```

```bash
npx claude-code-setup --kit tanstack-router,react
```

--------------------------------

### Example Specific Intent Pattern

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/core/skills/skill-developer/resources/TROUBLESHOOTING.md

Demonstrates a specific regex pattern used in `promptTriggers.intentPatterns` for skill activation. This example shows a pattern that might be too restrictive.

```json
"intentPatterns": [
  "(create|add).*?(database.*?table)"  // Too specific
]
```

--------------------------------

### Install Claude Code Kit (Bash)

Source: https://github.com/blencorp/claude-code-kit/blob/main/README.md

This command installs the complete Claude Code infrastructure using npx. It automatically detects your project's frameworks (like Next.js, React, Express, Prisma), prompts you to select desired kits, and configures automatic skill activation. The installation process is designed to be fast, completing in under 30 seconds.

```bash
npx github:blencorp/claude-code-kit
```

--------------------------------

### Explicit Installation Command (Bash)

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/prisma/README.md

Command to explicitly install the Prisma kit along with the Node.js kit. This allows for manual control over which kits are installed.

```bash
npx claude-code-setup --kit prisma,nodejs
```

--------------------------------

### Install Node.js Dependencies for Hooks

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/core/skills/skill-developer/resources/TROUBLESHOOTING.md

These bash commands navigate to the `.claude/hooks` directory and run `npm install` to install any necessary Node.js dependencies for the hooks. This is often required if the hooks rely on external npm packages.

```bash
cd .claude/hooks
npm install

```

--------------------------------

### Create Dynamic Styles Based on Props in MUI

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/mui/skills/mui/resources/styling-guide.md

Shows how to apply dynamic styles to MUI components based on component props. This example uses conditional logic within the `sx` prop to change `borderColor` and `bgcolor` based on the `isActive` and `priority` props.

```typescript
import { Paper } from '@mui/material';

interface CardProps {
  isActive: boolean;
  priority: 'low' | 'medium' | 'high';
}

function Card({ isActive, priority }: CardProps) {
  return (
    <Paper
      sx={{
        borderLeft: 4,
        borderColor: isActive ? 'success.main' : 'grey.300',
        bgcolor: priority === 'high' ? 'error.light' : 'background.paper',
        opacity: isActive ? 1 : 0.7
      }}
    />
  );
}
```

--------------------------------

### Kit Detection Examples in kit.json

Source: https://github.com/blencorp/claude-code-kit/blob/main/README.md

Provides examples of how to define detection logic within the `kit.json` file for identifying specific frameworks or configurations. These examples use common command-line tools like `grep` and `test` to check for files or directories.

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

```bash
# 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"
```

--------------------------------

### Install and Configure skill-activation-prompt Hook (Bash & JSON)

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/core/hooks/README.md

This snippet demonstrates how to install the skill-activation-prompt hook by copying the script, making it executable, installing its Node.js dependencies, and configuring it in settings.json. This hook is essential for auto-activating skills based on user prompts and file context.

```bash
cp skill-activation-prompt.sh your-project/.claude/hooks/
cp skill-activation-prompt.ts your-project/.claude/hooks/

chmod +x your-project/.claude/hooks/skill-activation-prompt.sh

cd your-project/.claude/hooks
npm install
```

```json
{
  "hooks": {
    "UserPromptSubmit": [
      {
        "hooks": [
          {
            "type": "command",
            "command": "$CLAUDE_PROJECT_DIR/.claude/hooks/skill-activation-prompt.sh"
          }
        ]
      }
    ]
  }
}
```

--------------------------------

### MUI Layout Components Examples

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/mui/skills/mui/SKILL.md

Provides examples of common MUI layout components: `Box` for generic containers, `Paper` for elevated surfaces, `Container` for centered content, and `Stack` for flex layouts with spacing.

```jsx
// Box - Generic container
<Box sx={{ p: 2, bgcolor: 'background.paper' }}>
  Content
</Box>

// Paper - Elevated surface
<Paper elevation={2} sx={{ p: 3 }}>
  Content
</Paper>

// Container - Centered content with max-width
<Container maxWidth="lg">
  Content
</Container>

// Stack - Flex container with spacing
<Stack spacing={2} direction="row">
  <Item />
  <Item />
</Stack>
```

--------------------------------

### Thin vs. Fat Controller Example (TypeScript)

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/nodejs/skills/nodejs/resources/architecture-patterns.md

Illustrates the 'Keep Controllers Thin' best practice in TypeScript. The 'Good' example delegates business logic to services, while the 'Bad' example includes excessive logic within the controller.

```typescript
// ✅ Good: Thin controller
async getUser(req: Request, res: Response) {
  const user = await this.userService.getById(req.params.id);
  res.json({ data: user });
}

// ❌ Bad: Fat controller with business logic
async getUser(req: Request, res: Response) {
  const user = await prisma.user.findUnique({ where: { id: req.params.id } });
  if (!user) throw new Error('Not found');
  if (user.status === 'banned') throw new Error('User banned');
  // ... more logic
  res.json({ data: user });
}
```

--------------------------------

### Usage Example: Skill Configuration

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/core/skills/skill-developer/resources/PATTERNS_LIBRARY.md

An example JSON structure demonstrating how to use the common patterns within a skill configuration for intent and file triggers.

```json
{
  "my-skill": {
    "promptTriggers": {
      "intentPatterns": [
        "(create|add|build).*?(component|UI|page)"
      ]
    },
    "fileTriggers": {
      "pathPatterns": [
        "frontend/src/**/*.tsx"
      ],
      "contentPatterns": [
        "export.*React\\.FC",
        "useState|useEffect"
      ]
    }
  }
}
```

--------------------------------

### Using Custom Brand Colors in Button Variants

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/shadcn/skills/shadcn/resources/theming.md

Shows an example of how to integrate custom brand colors into the variant configuration for buttons, likely within a Tailwind CSS setup. This enables easy application of brand styles.

```typescript
// Add to button variants
brand: "bg-brand text-brand-foreground hover:bg-brand/90"

```

--------------------------------

### Mock HTTP Requests with Vitest and Jest

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/nodejs/skills/nodejs/resources/testing-guide.md

Shows how to mock external HTTP requests using Vitest and Jest's mocking capabilities. This is useful for testing components that rely on third-party APIs or other services. The example mocks the `axios` library and sets up a mock response for a GET request.

```typescript
import { vi } from 'vitest';
import axios from 'axios';

vi.mock('axios');
const mockedAxios = axios as jest.Mocked<typeof axios>;

// In test
mockedAxios.get.mockResolvedValue({
  data: { message: 'Success' },
  status: 200
});
```

--------------------------------

### Install Hook Dependencies with npm

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/core/hooks/CONFIG.md

Installs the necessary Node.js dependencies for the hooks scripts. This command should be run from the `.claude/hooks` directory to ensure packages are installed in the correct location.

```bash
cd .claude/hooks
npm install
```

--------------------------------

### Initialize shadcn/ui Project

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/shadcn/skills/shadcn/SKILL.md

Initializes the shadcn/ui project in your workspace. This command sets up the necessary configuration and dependencies for using shadcn/ui components.

```bash
npx shadcn@latest init
```

--------------------------------

### Example Keyword Trigger Configuration

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/core/skills/skill-developer/resources/TROUBLESHOOTING.md

Illustrates how keywords are defined within `skill-rules.json` for skill activation. It shows a simple array of strings that the system will match against user prompts.

```json
"keywords": ["layout", "grid"]
```

--------------------------------

### Express.js Route Definition

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/express/README.md

Shows how to define API routes using Express.js Router. This example includes GET and POST endpoints for '/posts', with the POST endpoint utilizing validation.

```typescript
import { Router } from 'express';

const router = Router();

router.get('/posts', postController.getPosts.bind(postController));
router.post('/posts', validate(postSchema), postController.createPost.bind(postController));

export default router;
```

--------------------------------

### CSS Border Radius Customization

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/shadcn/skills/shadcn/resources/theming.md

Demonstrates how to adjust the global border radius using CSS variables. Examples include setting a default, more rounded, less rounded, and square border radius.

```css
:root {
  --radius: 0.5rem; /* Default */
}

/* More rounded */
:root {
  --radius: 0.75rem;
}

/* Less rounded */
:root {
  --radius: 0.25rem;
}

/* Square */
:root {
  --radius: 0;
}
```

--------------------------------

### Example Session State - Skills Used

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/core/skills/skill-developer/resources/TROUBLESHOOTING.md

Illustrates the structure of a session state file, specifically showing the `skills_used` array. If a skill is listed here, it won't be triggered again in the same session.

```json
{
  "skills_used": ["database-verification"],
  "files_verified": []
}
```

--------------------------------

### OKLCH Color Syntax Explanation

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/shadcn/skills/shadcn/resources/theming.md

Explains the syntax and parameters for the OKLCH color format used in CSS variables. It details the Lightness (L), Chroma (C), and Hue (H) components with examples.

```css
--color: oklch(L C H);

/* L (Lightness): 0 to 1 (0 = black, 1 = white) */
/* C (Chroma): 0 to ~0.4 (0 = gray, higher = more vivid) */
/* H (Hue): 0 to 360 degrees (color wheel angle) */

/* Examples: */
--white: oklch(1 0 0);           /* Pure white */
--black: oklch(0 0 0);           /* Pure black */
--blue: oklch(0.598 0.15 264);   /* Vivid blue */
--red: oklch(0.602 0.22 29);     /* Vivid red */
```

--------------------------------

### Configure Error Threshold in Bash

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/core/hooks/CONFIG.md

Adjusts the error threshold in `stop-build-check-enhanced.sh` to change when the auto-error-resolver agent is recommended. The example shows how to increase the minimum number of errors required to trigger the recommendation.

```bash
# Default is 5 errors - change to your preference
if [[ $total_errors -ge 10 ]]; then  # Now requires 10+ errors
    # Recommend agent
fi
```

--------------------------------

### Implement Responsive Styles with sx Prop in MUI

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/mui/skills/mui/resources/styling-guide.md

Illustrates how to create responsive styles using the `sx` prop in MUI. This allows components to adapt their appearance based on screen size by providing different values for various breakpoints (e.g., `xs`, `sm`, `md`).

```typescript
import { Box } from '@mui/material';

<Box
  sx={{
    display: { xs: 'block', md: 'flex' },
    flexDirection: { xs: 'column', md: 'row' },
    gap: { xs: 1, sm: 2, md: 3 },
    p: { xs: 2, sm: 3, md: 4 }
  }}
/>
```

--------------------------------

### TanStack Router Dependency Check

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/tanstack-router/README.md

This JSON snippet demonstrates how to check for the TanStack Router dependency in a project's package.json file. It's a common pattern to ensure the library is installed before proceeding with setup or configuration.

```json
{
  "dependencies": {
    "@tanstack/react-router": "^1.0.0"
  }
}
```

--------------------------------

### Override Component Styles and Defaults in MUI Theme

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/mui/skills/mui/resources/styling-guide.md

Demonstrates how to customize the default appearance and behavior of MUI components by overriding their styles and default props within the theme configuration. This example shows overrides for `MuiButton` and `MuiCard`.

```typescript
import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          borderRadius: 8,
          textTransform: 'none',
          fontWeight: 600
        },
        containedPrimary: {
          boxShadow: 'none',
          '&:hover': {
            boxShadow: 'none'
          }
        }
      },
      defaultProps: {
        disableRipple: true
      }
    },
    MuiCard: {
      styleOverrides: {
        root: {
          borderRadius: 12,
          boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
        }
      }
    }
  }
});
```

--------------------------------

### AppBar and Toolbar in TypeScript

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/mui/skills/mui/resources/component-library.md

Example of creating an application header using AppBar and Toolbar components. Includes navigation icons, title, and action buttons.

```typescript
<AppBar position="static">
  <Toolbar>
    <IconButton edge="start" color="inherit">
      <MenuIcon />
    </IconButton>
    <Typography variant="h6" sx={{ flexGrow: 1 }}>
      App Title
    </Typography>
    <IconButton color="inherit">
      <AccountCircle />
    </IconButton>
  </Toolbar>
</AppBar>
```

--------------------------------

### Middleware for Rewriting URLs (TypeScript)

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/nextjs/skills/nextjs/resources/routing.md

Shows how to use Next.js middleware to rewrite URLs internally. This example rewrites requests starting with '/blog' to '/posts' by replacing the prefix in the URL path using `NextResponse.rewrite()`.

```typescript
export function middleware(request: NextRequest) {
  // Rewrite /blog/* to /posts/*
  if (request.nextUrl.pathname.startsWith('/blog')) {
    return NextResponse.rewrite(
      new URL(request.nextUrl.pathname.replace('/blog', '/posts'), request.url)
    );
  }

  return NextResponse.next();
}
```

--------------------------------

### TypeScript Button Component Variants

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/shadcn/skills/shadcn/resources/theming.md

Customizes a button component using `cva` by defining new variants and sizes. Includes an example of adding a 'gradient' variant and an 'xs' size, leveraging OKLCH color definitions.

```typescript
// components/ui/button.tsx
const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium...",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        // Add custom variant with OKLCH
        gradient: "bg-gradient-to-r from-blue-500 to-purple-600 text-white hover:from-blue-600 hover:to-purple-700",
        brand: "bg-brand text-brand-foreground hover:bg-brand/90",
      },
      size: {
        default: "h-10 px-4 py-2",
        // Add custom size
        xs: "h-7 px-2 text-xs",
      }
    }
  }
);
```

--------------------------------

### Basic MUI Component Example (TypeScript)

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/mui/skills/mui/SKILL.md

Demonstrates the basic structure of an MUI component using `Box`, `Typography`, `Button`, and `Paper`. It shows how to define and apply styles using the `sx` prop for layout and typography.

```typescript
import { Box, Typography, Button, Paper } from '@mui/material';
import type { SxProps, Theme } from '@mui/material';

const styles: Record<string, SxProps<Theme>> = {
  container: {
    p: 2,
    display: 'flex',
    flexDirection: 'column',
    gap: 2,
  },
  header: {
    mb: 3,
    fontSize: '1.5rem',
    fontWeight: 600,
  },
};

function MyComponent() {
  return (
    <Paper sx={styles.container}>
      <Typography sx={styles.header}>
        Title
      </Typography>
      <Button variant="contained">
        Action
      </Button>
    </Paper>
  );
}
```

--------------------------------

### Check User Session in Server Actions (TypeScript)

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/nextjs/skills/nextjs/resources/server-actions.md

This server action checks for an active user session before proceeding with post creation. If no session is found, it redirects the user to the login page. It requires authentication setup from '@/lib/auth'.

```typescript
'use server';

import { auth } from '@/lib/auth';
import { redirect } from 'next/navigation';
import { revalidatePath } from 'next/cache';

// Assuming 'db' is an initialized database client
// const db = require('@/lib/db');

export async function createPost(formData: FormData) {
  const session = await auth();

  if (!session?.user) {
    redirect('/login');
  }

  const post = await db.post.create({
    data: {
      title: formData.get('title') as string,
      content: formData.get('content') as string,
      authorId: session.user.id
    }
  });

  revalidatePath('/posts');
  return { success: true, postId: post.id };
}
```

--------------------------------

### Common Pattern: Flexbox Layout with MUI Box

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/mui/skills/mui/resources/styling-guide.md

Demonstrates a common pattern for creating flexbox layouts using the MUI `Box` component and its `sx` prop. This example sets up a horizontal flex container with centered items and space between them.

```typescript
import { Box } from '@mui/material';

<Box
  sx={{
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    gap: 2
  }}
/>
```

--------------------------------

### Set Global Environment Variables

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/core/hooks/CONFIG.md

Defines environment variables that persist across shell sessions. Examples include disabling error handling reminders or specifying a custom project directory for Claude Code.

```bash
# Disable error handling reminders
export SKIP_ERROR_REMINDER=1

# Custom project directory (if not using default)
export CLAUDE_PROJECT_DIR=/path/to/your/project
```

--------------------------------

### Set up Material-UI ThemeProvider in React Application

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/mui/skills/mui/resources/theme-customization.md

Demonstrates how to wrap your React application with the 'ThemeProvider' from Material-UI to make the theme available globally. It also includes 'CssBaseline' for consistent styling and assumes a 'theme' object is imported from a separate file.

```typescript
// src/theme.ts - Export your theme
export { default as theme } from './theme';

// src/main.tsx or src/index.tsx
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import theme from './theme';

root.render(
  <StrictMode>
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <App />
    </ThemeProvider>
  </StrictMode>
);
```

--------------------------------

### Install Claude Code Kit with Options

Source: https://context7.com/blencorp/claude-code-kit/llms.txt

These commands install the Claude Code Kit using npx. Options include interactive mode for framework detection and kit selection, auto-installation, forcing overwrites, enabling debug output, and displaying help information.

```bash
npx github:blencorp/claude-code-kit

npx github:blencorp/claude-code-kit --yes

npx github:blencorp/claude-code-kit --force

npx github:blencorp/claude-code-kit --debug

npx github:blencorp/claude-code-kit --help
```

--------------------------------

### Customize Prettier Config Search in Bash

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/core/hooks/CONFIG.md

Updates the `get_prettier_config()` function in `stop-prettier-formatter.sh` to include custom locations for Prettier configuration files. This allows for more flexible Prettier setup across different project structures.

```bash
# Add custom config locations
if [[ -f "$project_root/config/.prettierrc" ]]; then
    echo "$project_root/config/.prettierrc"
    return
fi
```

--------------------------------

### Common Pattern: Gradient Background with MUI

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/mui/skills/mui/resources/styling-guide.md

Shows how to create a gradient background for a component using the `sx` prop in MUI. This example uses a linear gradient with colors defined from the theme's palette, providing a visually appealing background.

```typescript
import { Box } from '@mui/material';

<Box
  sx={{
    background: (theme) =>
      `linear-gradient(45deg, ${theme.palette.primary.main} 30%, ${theme.palette.secondary.main} 90%)`,
    color: 'white'
  }}
/>
```

--------------------------------

### Form Example with Validation (TypeScript)

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/mui/skills/mui/resources/component-library.md

A complete form example using Box, Stack, TextField, FormControl, Select, MenuItem, FormControlLabel, Checkbox, Button, and InputLabel for user input and validation. It includes submission and cancellation handlers.

```typescript
<Box component="form" onSubmit={handleSubmit} sx={{ maxWidth: 600 }}>
  <Stack spacing={3}>
    <TextField
      label="Full Name"
      required
      fullWidth
      error={!!errors.name}
      helperText={errors.name}
    />

    <TextField
      label="Email"
      type="email"
      required
      fullWidth
      error={!!errors.email}
      helperText={errors.email}
    />

    <FormControl fullWidth>
      <InputLabel>Role</InputLabel>
      <Select label="Role" value={role} onChange={(e) => setRole(e.target.value)}>
        <MenuItem value="user">User</MenuItem>
        <MenuItem value="admin">Admin</MenuItem>
      </Select>
    </FormControl>

    <FormControlLabel
      control={<Checkbox checked={agreed} onChange={(e) => setAgreed(e.target.checked)} />}
      label="I agree to the terms and conditions"
    />

    <Stack direction="row" spacing={2} justifyContent="flex-end">
      <Button variant="outlined" onClick={handleCancel}>
        Cancel
      </Button>
      <Button type="submit" variant="contained" disabled={!agreed}>
        Submit
      </Button>
    </Stack>
  </Stack>
</Box>
```

--------------------------------

### Minimal Skill Activation Hook Configuration (JSON)

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/core/hooks/CONFIG.md

This JSON configuration enables a specific shell script hook for skill activation when a user submits a prompt. It's a basic setup for triggering custom logic.

```json
{
  "hooks": {
    "UserPromptSubmit": [
      {
        "hooks": [
          {
            "type": "command",
            "command": "$CLAUDE_PROJECT_DIR/.claude/hooks/skill-activation-prompt.sh"
          }
        ]
      }
    ]
  }
}
```

--------------------------------

### Bash Detection Command Examples for Frameworks

Source: https://context7.com/blencorp/claude-code-kit/llms.txt

Provides various bash commands to detect framework presence based on package.json dependencies, configuration file existence, directory structure, multiple conditions, lock files, or file content patterns.

```bash
# Detect from package.json dependency
grep -qE '"react"|"@react"' package.json 2>/dev/null

# Detect from configuration file existence
test -f next.config.js || test -f next.config.mjs

# Detect from directory structure
test -d prisma && test -f prisma/schema.prisma

# Detect from multiple conditions (AND)
grep -q '"express"' package.json && test -d src/routes

# Detect from lock file for package manager
test -f pnpm-lock.yaml || test -f package-lock.json

# Detect from file content pattern
grep -q 'createFileRoute' src/**/*.tsx 2>/dev/null

```

--------------------------------

### Route Preloading with TanStack Router

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/tanstack-router/skills/tanstack-router/resources/routing-guide.md

Explains and provides an example of route preloading in TanStack Router. This technique allows fetching route data in advance, typically on hover or before navigation, to improve perceived performance and reduce loading times.

```typescript
import { useRouter } from '@tanstack/react-router';

function PostLink({ postId }: { postId: string }) {
  const router = useRouter();

  const handleMouseEnter = () => {
    // Preload route data on hover
    router.preloadRoute({
      to: '/posts/$postId',
      params: { postId }
    });
  };

  return (
    <Link
      to="/posts/$postId"
      params={{ postId }}
      onMouseEnter={handleMouseEnter}
    >
      View Post
    </Link>
  );
}
```

--------------------------------

### MUI Grid System Examples

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/mui/skills/mui/SKILL.md

Illustrates the usage of MUI's `Grid` component for creating responsive layouts based on a 12-column system. Examples include a basic two-column layout and a responsive card layout.

```jsx
import { Grid } from '@mui/material';

// 12-column grid
<Grid container spacing={2}>
  <Grid item xs={12} md={6}>
    Left half
  </Grid>
  <Grid item xs={12} md={6}>
    Right half
  </Grid>
</Grid>

// Responsive grid
<Grid container spacing={3}>
  <Grid item xs={12} sm={6} md={4} lg={3}>
    Card
  </Grid>
  {/* Repeat for more cards */}
</Grid>
```

--------------------------------

### Mock Prisma Client with Vitest

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/nodejs/skills/nodejs/resources/testing-guide.md

Demonstrates how to mock the Prisma client using Vitest's `vi.fn()` for testing purposes. This allows for isolated testing of components that interact with the database without needing a live database connection. It mocks common user-related Prisma operations.

```typescript
import { vi } from 'vitest';
import { PrismaClient } from '@prisma/client';

// Create mock Prisma client
const mockPrisma = {
  user: {
    findUnique: vi.fn(),
    findMany: vi.fn(),
    create: vi.fn(),
    update: vi.fn(),
    delete: vi.fn(),
  },
  $transaction: vi.fn(),
} as unknown as PrismaClient;

// Use in tests
mockPrisma.user.findUnique.mockResolvedValue({
  id: '1',
  email: 'test@example.com',
  name: 'Test User'
});
```

--------------------------------

### Role-Based Authorization in Server Actions (TypeScript)

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/nextjs/skills/nextjs/resources/server-actions.md

Implements role-based access control within a server action to restrict post deletion. It checks if the current user is the author of the post or an administrator before allowing the deletion. Requires authentication setup from '@/lib/auth'.

```typescript
'use server';

import { auth } from '@/lib/auth';
import { revalidatePath } from 'next/cache';

// Assuming 'db' is an initialized database client
// const db = require('@/lib/db');

export async function deletePost(postId: string) {
  const session = await auth();

  if (!session?.user) {
    throw new Error('Not authenticated');
  }

  const post = await db.post.findUnique({
    where: { id: postId }
  });

  if (post.authorId !== session.user.id && session.user.role !== 'ADMIN') {
    throw new Error('Not authorized');
  }

  await db.post.delete({
    where: { id: postId }
  });

  revalidatePath('/posts');
}
```

--------------------------------

### SKILL.md Frontmatter Example

Source: https://github.com/blencorp/claude-code-kit/blob/main/README.md

Demonstrates the YAML frontmatter structure for a `SKILL.md` file, including metadata like name, display name, description, and version. This format is used for defining Claude skills and their associated metadata.

```markdown
---
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)
```

--------------------------------

### AAA Pattern for Test Structure in TypeScript

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/nodejs/skills/nodejs/resources/testing-guide.md

Illustrates the Arrange, Act, Assert (AAA) pattern for structuring tests in TypeScript. This pattern promotes clear and readable tests by separating the setup (Arrange), execution (Act), and verification (Assert) phases.

```typescript
it('should create user', async () => {
  // Arrange
  const userData = { email: 'test@example.com', name: 'Test' };

  // Act
  const result = await userService.create(userData);

  // Assert
  expect(result.email).toBe(userData.email);
});
```

--------------------------------

### Descriptive Test Naming Convention in TypeScript

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/nodejs/skills/nodejs/resources/testing-guide.md

Highlights the importance of descriptive test naming in TypeScript. It provides examples of good, clear test names versus vague ones, emphasizing that test names should clearly indicate the scenario being tested.

```typescript
// ✅ Good: Descriptive test names
it('should return 404 when user does not exist', async () => {});

// ❌ Bad: Vague test names
it('handles errors', async () => {});
```

--------------------------------

### Create Basic Route with Loader - TypeScript

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/tanstack-router/skills/tanstack-router/SKILL.md

Demonstrates creating a basic route '/posts' using TanStack Router's `createFileRoute`. It includes a loader function to fetch all posts from an API and a component to display them. This is useful for setting up simple data-driven routes.

```typescript
// routes/posts/index.tsx
import { createFileRoute } from '@tanstack/react-router';
import { postsApi } from '~/features/posts/api/postsApi';

export const Route = createFileRoute('/posts')({
  loader: async () => {
    const posts = await postsApi.getAll();
    return { posts };
  },
  component: PostsPage,
});

function PostsPage() {
  const { posts } = Route.useLoaderData();

  return (
    <div>
      <h1>Posts</h1>
      {posts.map(post => (
        <PostCard key={post.id} post={post} />
      ))}
    </div>
  );
}

```

--------------------------------

### Running Test Coverage with npm

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/nodejs/skills/nodejs/resources/testing-guide.md

Provides the command to run test coverage for the project using npm scripts. This is typically configured in the 'package.json' file.

```bash
npm run test:coverage
```

--------------------------------

### Custom Error Types for Server Actions (TypeScript)

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/nextjs/skills/nextjs/resources/server-actions.md

Defines custom error classes (PostNotFoundError, UnauthorizedError) for specific error conditions in server actions. This allows for more granular error handling and clearer communication of issues to the client. It requires authentication setup from '@/lib/auth'.

```typescript
class PostNotFoundError extends Error {
  constructor(postId: string) {
    super(`Post ${postId} not found`);
    this.name = 'PostNotFoundError';
  }
}

class UnauthorizedError extends Error {
  constructor() {
    super('You are not authorized to perform this action');
    this.name = 'UnauthorizedError';
  }
}

// Assuming 'db' is an initialized database client and 'auth' is imported from '@/lib/auth'
// const db = require('@/lib/db');
// const { auth } = require('@/lib/auth');

export async function updatePost(postId: string, data: PostUpdate) {
  const session = await auth();
  if (!session) throw new UnauthorizedError();

  const post = await db.post.findUnique({ where: { id: postId } });
  if (!post) throw new PostNotFoundError(postId);

  if (post.authorId !== session.user.id) {
    throw new UnauthorizedError();
  }

  return await db.post.update({
    where: { id: postId },
    data
  });
}
```

--------------------------------

### Test Data Factory using Faker in TypeScript

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/nodejs/skills/nodejs/resources/testing-guide.md

Provides a TypeScript example of a test data factory using the '@faker-js/faker' library. This factory function generates realistic mock user data, allowing for easy creation of test objects with optional overrides for specific properties.

```typescript
// test/factories/user.factory.ts
import { faker } from '@faker-js/faker';

export const createUserData = (overrides?: Partial<User>) => ({
  email: faker.internet.email(),
  name: faker.person.fullName(),
  password: faker.internet.password(),
  ...overrides
});

// Usage in tests
const userData = createUserData({ email: 'specific@example.com' });
```

--------------------------------

### New Skill Markdown File (SKILL.md)

Source: https://github.com/blencorp/claude-code-kit/blob/main/cli/kits/README.md

This is an example of a SKILL.md file, which serves as the main skill file for a custom kit. It uses Markdown format and includes frontmatter with metadata like name, displayName, and description, followed by content detailing development guidelines for the framework.

```markdown
---
name: myframework
displayName: My Framework
description: Development guidelines for My Framework
---

# My Framework Development Guidelines

## Core Concepts

[Your framework's key concepts...]

## Common Patterns

[Your framework's patterns...]


```