CCJK Skills System: Extend Your AI Assistant's Capabilities

The Skills System is what transforms CCJK from a simple AI assistant into a powerful, customizable development platform. Skills are reusable prompt templates that encode best practices, enforce standards, and automate complex workflows.

Understanding Skills

What is a Skill?

A skill is a predefined prompt template that:

• Encapsulates domain expertise
• Provides consistent, repeatable results
• Can accept parameters for customization
• Integrates with your development workflow

Built-in Skills

CCJK comes with 22+ pre-built skills:

Skill	Command	Description
Code Review	/review	Comprehensive code review
Commit	/commit	Generate semantic commit messages
Test	/test	Generate unit tests
Document	/doc	Generate documentation
Refactor	/refactor	Suggest refactoring improvements
Security	/security	Security vulnerability scan
Performance	/perf	Performance analysis
Debug	/debug	Systematic debugging assistance

Using Built-in Skills

The /review Skill

Perform a thorough code review:

hljs bash
# Review staged changes
/review

# Review specific file
/review src/components/UserProfile.tsx

# Review with focus area
/review --focus security src/auth/

Output includes:

• Critical issues (must fix)
• Suggestions (should consider)
• Nitpicks (optional improvements)
• Positive observations

The /commit Skill

Generate meaningful commit messages:

hljs bash
# Auto-generate from staged changes
/commit

# With scope
/commit --scope auth

# Conventional commits format
/commit --conventional

Example output:

feat(auth): implement JWT refresh token rotation

- Add refresh token endpoint with secure rotation
- Implement token family tracking for reuse detection
- Add Redis storage for refresh token metadata
- Include comprehensive test coverage

BREAKING CHANGE: Refresh tokens now expire after single use

The /test Skill

Generate comprehensive tests:

hljs bash
# Generate tests for a file
/test src/utils/validation.ts

# Specify test framework
/test --framework vitest src/hooks/useAuth.ts

# Generate specific test types
/test --type integration src/api/users.ts

Creating Custom Skills

Skill File Structure

Skills are defined in YAML format in .claude/skills/:

hljs yaml
# .claude/skills/api-endpoint.yaml
name: api-endpoint
description: Generate a new REST API endpoint
version: 1.0.0
author: Your Name

# Parameters that users can provide
parameters:
  - name: resource
    description: The resource name (e.g., users, products)
    required: true
  - name: operations
    description: CRUD operations to include
    default: [create, read, update, delete]
  - name: auth
    description: Authentication requirement
    default: required

# The prompt template
prompt: |
  Create a REST API endpoint for the {{resource}} resource.

  Requirements:
  - Operations: {{operations}}
  - Authentication: {{auth}}
  - Follow RESTful conventions
  - Include input validation using Zod
  - Add proper error handling
  - Generate OpenAPI documentation
  - Include unit tests

  Use our existing patterns from src/api/ as reference.

Using Your Custom Skill

hljs bash
# Use the skill
/api-endpoint --resource products --auth optional

# Or interactively
/api-endpoint
> Resource name: products
> Operations: create, read, update
> Authentication: required

Advanced Skill Features

Conditional Logic

hljs yaml
prompt: |
  {{#if typescript}}
  Use TypeScript with strict mode enabled.
  {{else}}
  Use JavaScript with JSDoc type annotations.
  {{/if}}

  {{#each operations}}
  - Implement {{this}} operation
  {{/each}}

File Templates

hljs yaml
name: component
description: Generate a React component

templates:
  - path: "src/components/{{pascalCase name}}/index.tsx"
    content: |
      import React from 'react';
      import styles from './{{pascalCase name}}.module.css';

      interface {{pascalCase name}}Props {
        // Props here
      }

      export function {{pascalCase name}}({ }: {{pascalCase name}}Props) {
        return (
          <div className={styles.container}>
            {{pascalCase name}} Component
          </div>
        );
      }

  - path: "src/components/{{pascalCase name}}/{{pascalCase name}}.module.css"
    content: |
      .container {
        /* Styles here */
      }

  - path: "src/components/{{pascalCase name}}/{{pascalCase name}}.test.tsx"
    content: |
      import { render, screen } from '@testing-library/react';
      import { {{pascalCase name}} } from './index';

      describe('{{pascalCase name}}', () => {
        it('renders correctly', () => {
          render(<{{pascalCase name}} />);
          // Add assertions
        });
      });

Hooks and Lifecycle

hljs yaml
name: database-migration
description: Create and run database migration

hooks:
  before:
    - command: "npm run db:check"
      description: "Verify database connection"

  after:
    - command: "npm run db:migrate"
      description: "Run the migration"
      confirm: true
    - command: "npm run db:seed"
      description: "Seed test data"
      condition: "{{env}} === 'development'"

Skill Development Best Practices

1. Single Responsibility

Each skill should do one thing well:

hljs yaml
# ✅ Good: Focused skill
name: generate-dto
description: Generate a Data Transfer Object

# ❌ Bad: Too broad
name: generate-everything
description: Generate DTO, service, controller, and tests

2. Sensible Defaults

Provide defaults that work for most cases:

hljs yaml
parameters:
  - name: format
    description: Output format
    default: typescript  # Most common choice
    options: [typescript, javascript]

3. Clear Documentation

Include examples and explanations:

hljs yaml
name: api-client
description: |
  Generate a type-safe API client for a REST endpoint.

  Examples:
    /api-client --url https://api.example.com/users
    /api-client --swagger ./openapi.yaml

  The generated client includes:
  - Full TypeScript types
  - Error handling
  - Request/response interceptors
  - Automatic retry logic

4. Validation

Validate parameters before execution:

hljs yaml
parameters:
  - name: name
    required: true
    pattern: "^[a-zA-Z][a-zA-Z0-9]*$"
    error: "Name must start with a letter and contain only alphanumeric characters"

Sharing Skills

Publishing to CCJK Registry

hljs bash
# Login to registry
ccjk registry login

# Publish your skill
ccjk skill publish .claude/skills/my-skill.yaml

# Publish with specific version
ccjk skill publish --version 2.0.0 .claude/skills/my-skill.yaml

Installing Community Skills

hljs bash
# Search for skills
ccjk skill search "react component"

# Install a skill
ccjk skill install @community/react-component

# Install specific version
ccjk skill install @community/react-component@2.0.0

Skill Collections

Group related skills together:

hljs yaml
# .claude/skills/collection.yaml
name: react-toolkit
description: Complete React development toolkit
version: 1.0.0

skills:
  - ./component.yaml
  - ./hook.yaml
  - ./context.yaml
  - ./test.yaml

Real-World Skill Examples

Example 1: PR Description Generator

hljs yaml
name: pr-description
description: Generate a comprehensive PR description
version: 1.0.0

parameters:
  - name: base
    description: Base branch
    default: main

prompt: |
  Analyze the changes between {{base}} and the current branch.

  Generate a PR description with:

  ## Summary
  Brief overview of what this PR accomplishes

  ## Changes
  - Bullet points of specific changes

  ## Testing
  - How to test these changes
  - Any specific test cases added

  ## Screenshots
  (if applicable)

  ## Checklist
  - [ ] Tests pass
  - [ ] Documentation updated
  - [ ] No breaking changes (or documented)

  ## Related Issues
  Link any related issues

Example 2: Database Schema Generator

hljs yaml
name: db-schema
description: Generate database schema from description
version: 1.0.0

parameters:
  - name: database
    description: Database type
    default: postgresql
    options: [postgresql, mysql, sqlite]
  - name: orm
    description: ORM to use
    default: prisma
    options: [prisma, typeorm, drizzle]

prompt: |
  Create a {{database}} database schema using {{orm}}.

  Based on the user's description, generate:
  1. Schema definition file
  2. Migration file
  3. Seed data for development
  4. TypeScript types (if applicable)

  Follow these conventions:
  - Use UUID for primary keys
  - Include created_at and updated_at timestamps
  - Add appropriate indexes
  - Define foreign key relationships
  - Include soft delete where appropriate

Example 3: API Documentation

hljs yaml
name: api-docs
description: Generate OpenAPI documentation
version: 1.0.0

parameters:
  - name: format
    default: yaml
    options: [yaml, json]
  - name: version
    default: "3.0.0"

prompt: |
  Analyze the API routes in this project and generate
  OpenAPI {{version}} documentation in {{format}} format.

  Include:
  - All endpoints with methods
  - Request/response schemas
  - Authentication requirements
  - Example requests and responses
  - Error responses
  - Rate limiting information

  Follow OpenAPI best practices and include descriptions
  that are helpful for API consumers.

Debugging Skills

Verbose Mode

hljs bash
# See what the skill is doing
/my-skill --verbose

# Debug parameter resolution
/my-skill --debug-params

Testing Skills

hljs bash
# Dry run without executing
/my-skill --dry-run

# Test with sample inputs
ccjk skill test my-skill.yaml --input test-cases.json

Conclusion

The Skills System transforms CCJK into a platform that grows with your team. Start by mastering the built-in skills, then gradually create custom skills for your specific workflows.

Remember:

• Skills encode expertise and best practices
• Good skills are focused, documented, and validated
• Share skills to multiply their value across your team

Next Steps:

• Explore AI Agents for complex multi-step tasks
• Learn about Team Collaboration with shared configurations