Creating custom Skills

# Project Skills (shared with the team via git)
.claude/
  commands/
    review-pr.md         # -> /project:review-pr
    deploy-staging.md    # -> /project:deploy-staging
    create-component.md  # -> /project:create-component
    db-migration.md      # -> /project:db-migration

# Personal Skills (available in all your projects)
~/.claude/
  commands/
    tdd-guide.md         # -> /user:tdd-guide
    brainstorm.md        # -> /user:brainstorm
    quick-review.md      # -> /user:quick-review

# Create the commands folder if it doesn't exist
mkdir -p .claude/commands

# Create the Skill file
touch .claude/commands/create-component.md

# Create a React Component

You are a frontend expert in React/TypeScript. You create accessible,
performant UI components that conform to project conventions.

## Project context

- React 18+ with strict TypeScript (no `any`)
- Tailwind CSS for styles
- Vitest + Testing Library for tests
- Functional components with hooks only
- Named exports (no default export)
- One component per file, 200-400 lines max

## Instructions

Create the component described by the user following these steps:

1. **Analysis**: Understand the need expressed in $ARGUMENTS
2. **Interface**: Define props with a TypeScript interface
   - All props `readonly`
   - Optional props with sensible default values
   - JSDoc on non-obvious props
3. **Component**: Implement with best practices
   - ARIA attributes for accessibility
   - Focus management if interactive
   - Dark mode support via Tailwind classes
   - Responsive (mobile-first)
4. **Tests**: Write tests with Testing Library
   - Default render test
   - Test each variant
   - Test user interactions
   - Test accessibility (ARIA roles)
5. **Export**: Update the barrel file if needed

## Output format

Produce the following files:
- `src/components/ComponentName.tsx`
- `src/components/__tests__/ComponentName.test.tsx`

## Example

For the command: `/project:create-component Badge - status badge
with variants success, warning, error`

You'll create a Badge component with:
- 3 color variants (success=green, warning=orange, error=red)
- Sizes sm/md/lg
- Support for text and an optional icon
- Complete tests

# Launch Claude Code
claude

# Invoke the Skill
/project:create-component Alert - dismissible alert component with variants info, success, warning, error

# Create an API Endpoint

You are a backend expert in Node.js/TypeScript. You create RESTful API
endpoints that conform to project conventions.

## Architecture

The project follows the Repository pattern:
- `src/routes/` - Route definitions (Express/Fastify)
- `src/controllers/` - Control logic and validation
- `src/services/` - Business logic
- `src/repositories/` - Data access
- `src/schemas/` - Validation schemas (Zod)

## API Conventions

- Response format: `{ success, data, error, meta }`
- Input validation with Zod
- Centralized error handling
- Rate limiting on all endpoints
- Parameterized queries (never string concatenation)

## Instructions

For $ARGUMENTS, create:

1. The Zod validation schema (`src/schemas/`)
2. The repository with CRUD operations (`src/repositories/`)
3. The service with business logic (`src/services/`)
4. The controller with validation and error handling (`src/controllers/`)
5. The route with appropriate middleware (`src/routes/`)
6. Unit tests for each layer

## Security

- NEVER hardcode secrets in the code
- Always validate user inputs
- Use parameterized queries
- Verify authentication and authorization

# Deployment Checklist

You are a senior DevOps engineer. You guide the developer through
the production deployment checklist.

## Pre-deployment verifications

Check each item and report the status:

### Code
- [ ] All tests pass (`npm test`)
- [ ] Linting is clean (`npm run lint`)
- [ ] Production build succeeds (`npm run build`)
- [ ] No remaining `console.log` or `debugger`
- [ ] No unresolved critical TODOs

### Security
- [ ] No secrets in source code
- [ ] Dependencies have no critical CVEs (`npm audit`)
- [ ] Security headers are configured
- [ ] CORS is properly restricted

### Database
- [ ] Migrations are up to date
- [ ] Migrations are reversible (rollback possible)
- [ ] Necessary indexes are created

### Infrastructure
- [ ] Environment variables are configured
- [ ] Monitoring is in place
- [ ] Alerts are configured
- [ ] Rollback plan is documented

## Instructions

1. Execute each automatable check
2. For each item, indicate: PASS, FAIL, or SKIP (with reason)
3. Block deployment if a CRITICAL item is FAIL
4. Produce a final report with the GO / NO-GO decision

# Smart Review

## Operating mode

Analyze the diff provided in $ARGUMENTS.

If the diff contains only test files:
- Do a review focused on test quality
- Check edge case coverage
- Ignore production code style rules

If the diff contains database migration files:
- Check that the migration is reversible
- Check indexes and constraints
- Alert on any data loss risk

If the diff contains configuration files (env, yaml, json):
- Check that no secret is exposed
- Compare with example files (.env.example)
- Check consistency across environments

Otherwise:
- Do a standard complete review

# Component Migration

## Steps

### Step 1: Audit
- List all uses of the component in the project
- Identify the props used and their variants
- CHECKPOINT: show the list and wait for confirmation before continuing

### Step 2: New component
- Create the new component with the same props
- Add tests for the new component
- CHECKPOINT: tests must pass before the next step

### Step 3: Progressive migration
- Replace imports one by one
- After each replacement, verify the build passes
- CHECKPOINT: all files migrated, all tests green

### Step 4: Cleanup
- Delete the old component
- Update the barrel file
- Verify no references to the old component remain

# Complete Feature

For the feature described in $ARGUMENTS:

1. Use /project:plan to create the implementation plan
2. For each task in the plan, use /user:tdd-guide to implement it
3. Once everything is implemented, use /user:code-reviewer to verify
4. Fix issues identified by the reviewer
5. Use /project:deploy-checklist to validate deployment

/project:create-component Button primary with icon and loading state
#                        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
#                        All of this becomes $ARGUMENTS

Create the component described by the user: $ARGUMENTS

## Context

- Current environment: use available env variables
- If NODE_ENV is "production", apply strict constraints
- If CI is "true", format output as JSON for the pipeline

# Create a component for $PROJECT_TYPE

If the project uses React (detected via package.json):
- Functional component with hooks
- Tests with Testing Library

If the project uses Vue (detected via package.json):
- SFC component with Composition API
- Tests with Vue Test Utils

If the project uses Svelte (detected via package.json):
- .svelte component
- Tests with Svelte Testing Library

# Project Skills are in the repo
git add .claude/commands/create-component.md
git commit -m "feat: add create-component skill with accessibility checks"

feat: add deploy-checklist skill          # new skill
fix: fix tdd-guide missing edge cases     # correction
refactor: simplify code-reviewer criteria # improvement
docs: update create-api skill examples    # documentation

.claude/
  commands/
    # Development workflow
    create-component.md    # Create a UI component
    create-api.md          # Create an API endpoint
    create-migration.md    # Create a DB migration

    # Quality
    review-pr.md           # Standardized PR review
    security-audit.md      # Security audit
    perf-check.md          # Performance check

    # Operations
    deploy-staging.md      # Deploy to staging
    deploy-prod.md         # Deploy to production
    rollback.md            # Rollback procedure

    # Documentation
    write-adr.md           # Write an ADR (Architecture Decision Record)
    update-api-docs.md     # Update API docs