Claude Code Showcase

repository·main·Indexed 27 days ago

https://github.com/chriswiles/claude-code-showcase

A demonstration repository for configuring Claude Code for advanced project automation. It covers the implementation of custom skills via SKILL.md, specialized agents, custom slash commands, and automation hooks using settings.json. Additionally, it provides guidance on configuring Model Context Protocol (MCP) servers via .mcp.json, enabling Language Server Protocol (LSP) plugins for real-time code intelligence, and automating PR reviews using the anthropics/claude-code-action GitHub Action.

Tokens
4.3K
Snippets
11
Records
16
Agent score
41%

What's inside claude-code-showcase

  1. Set up PR Code Review with GitHub Actions

    main

    Automate pull request reviews by using the anthropics/claude-code-action@beta GitHub Action. The workflow can be triggered on PR events or when a user mentions @claude in an issue comment.

    Required Setup: You must add ANTHROPIC_API_KEY to your repository secrets: SettingsSecrets and variablesActionsNew repository secret.

    name: PR - Claude Code Review
    on:
      pull_request:
        types: [opened, synchronize, reopened]
      issue_comment:
        types: [created]
    
    jobs:
      review:
        if: |
          github.event_name == 'pull_request' ||
          (github.event_name == 'issue_comment' &&
           github.event.issue.pull_request &&
           contains(github.event.comment.body, '@claude'))
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v4
            with:
              fetch-depth: 0
    
          - uses: anthropics/claude-code-action@beta
            with:
              anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
              model: claude-opus-4-5-20251101
              prompt: |
                Review this PR using .claude/agents/code-reviewer.md standards.
                Run `git diff origin/main...HEAD` to see changes.
  2. Configure CLAUDE.md for Project Memory

    main

    Use CLAUDE.md to provide Claude with persistent project memory that loads automatically at the start of a session. This file should contain your project stack, architecture overview, key commands (test, build, lint, deploy), code style guidelines, and important directory structures.

    Precedence (highest to lowest):

    1. .claude/CLAUDE.md (Project-specific)
    2. ./CLAUDE.md (Project root)
    3. ~/.claude/CLAUDE.md (User-level/Global)
  3. Create Custom Slash Commands

    main

    Custom commands are invoked with /command-name and are stored in .claude/commands/{command-name}.md.

    Command Format

    ---
    description: Brief description shown in command list
    allowed-tools: Bash(git:*), Read, Grep
    ---
    
    # Command Instructions
    
    Your task is to: $ARGUMENTS
    
    ## Steps
    1. Step one

    Variables

    • $ARGUMENTS: All arguments as a single string.
    • $1, $2, $3: Individual positional arguments.

    Inline Bash

    You can include inline bash execution using !:

    • !git branch --show-current`
    • !git log --oneline -5`
    ---
    description: Brief description shown in command list
    allowed-tools: Bash(git:*), Read, Grep
    ---
    
    # Command Instructions
    
    Your task is to: $ARGUMENTS
    
    ## Steps
    1. Do this first
    2. Then do this
  4. Create Domain Knowledge Skills

    main

    Skills are markdown files located at .claude/skills/{skill-name}/SKILL.md that teach Claude project-specific patterns. Claude uses the description field to decide when to apply the skill.

    SKILL.md Format

    ---
    name: skill-name
    description: What this skill does and when to use it.
    allowed-tools: Read, Grep, Bash(npm:*)
    model: claude-sonnet-4-20250514
    ---
    
    # Skill Title
    
    ## When to Use
    - Trigger condition
    
    ## Core Patterns
    ```typescript
    // Example
    
    ### Frontmatter Fields
    - `name`: (Required) Lowercase, numbers, and hyphens only. Must match directory name.
    - `description`: (Required) Max 1024 chars. Used for semantic matching.
    - `allowed-tools`: (Optional) Comma-separated list of tools (e.g., `Read, Grep`).
    - `model`: (Optional) Specific model (e.g., `sonnet`, `opus`, `haiku`).
    

    name: skill-name description: What this skill does and when to use it. Include keywords users would mention. allowed-tools: Read, Grep, Glob model: claude-sonnet-4-20250514

    Skill Title

    When to Use

    • Trigger condition 1

    Core Patterns

    Pattern Name

    // Example code
  5. Enable LSP for Real-Time Code Intelligence

    main

    Language Server Protocol (LSP) provides Claude with real-time diagnostics, type information, code navigation, and completions. Enable it via plugins in .claude/settings.json.

    Available Plugins

    • typescript-lsp@claude-plugins-official: Requires npm install -g typescript-language-server typescript.
    • pyright-lsp@claude-plugins-official: Requires pip install pyright.
    • rust-lsp@claude-plugins-official: Requires rustup component add rust-analyzer.

    Enabling Plugins

    {
      "enabledPlugins": {
        "typescript-lsp@claude-plugins-official": true,
        "pyright-lsp@claude-plugins-official": true
      }
    }

    Custom LSP Configuration

    Create a .lsp.json file for advanced setups:

    {
      "typescript": {
        "command": "typescript-language-server",
        "args": ["--stdio"],
        "extensionToLanguage": {
          ".ts": "typescript",
          ".tsx": "typescriptreact"
        }
      }
    }

    Troubleshooting

    • Verify binary installation: which <binary-name>
    • Enable debug logging: claude --enable-lsp-logging
    • Check plugin status: claude /plugin
    {
      "enabledPlugins": {
        "typescript-lsp@claude-plugins-official": true,
        "pyright-lsp@claude-plugins-official": true
      }
    }
  6. Implement Skill Evaluation Hooks

    main

    The skill evaluation system uses the UserPromptSubmit hook to analyze prompts and suggest relevant domain knowledge (Skills).

    Setup Steps

    1. Copy hooks to your project: cp -r .claude/hooks/ your-project/.claude/hooks/
    2. Register the hook in .claude/settings.json:
    {
      "hooks": {
        "UserPromptSubmit": [
          {
            "hooks": [
              {
                "type": "command",
                "command": "\"$CLAUDE_PROJECT_DIR\".claude/hooks/skill-eval.sh",
                "timeout": 5
              }
            ]
          }
        ]
      }
    }
    1. Define triggers in .claude/hooks/skill-rules.json using keywords, keywordPatterns, pathPatterns, intentPatterns, or directoryMatch.

    Skill Rules Configuration Example

    {
      "testing-patterns": {
        "description": "Jest testing patterns and TDD workflow",
        "priority": 9,
        "triggers": {
          "keywords": ["test", "jest", "spec"],
          "pathPatterns": ["**/*.test.ts"]
        }
      }
    }
    {
      "hooks": {
        "UserPromptSubmit": [
          {
            "hooks": [
              {
                "type": "command",
                "command": "\"$CLAUDE_PROJECT_DIR\".claude/hooks/skill-eval.sh",
                "timeout": 5
              }
            ]
          }
        ]
      }
    }
  7. Best Practices for Claude Code Configuration

    main

    Follow these guidelines to optimize your Claude Code setup:

    1. Foundation: Start with a CLAUDE.md file containing your stack overview, key commands, critical rules, and directory structure.
    2. Incremental Growth: Build skills incrementally, starting with common patterns and adding more as pain points emerge.
    3. Automation: Use hooks for repetitive tasks like auto-formatting, running tests on file changes, or regenerating types.
    4. Complexity: Use Agents for complex workflows like code reviews, PR management, or debugging.
    5. Version Control: Commit all configuration files to version control. Do not commit the following:
      • settings.local.json (personal preferences)
      • CLAUDE.local.md (personal notes)
      • User-specific credentials
  8. Configure Scheduled Maintenance Workflows

    main

    You can automate periodic maintenance tasks using scheduled GitHub Action workflows. Common patterns include:

    • Code Quality: Weekly (Sunday) reviews of random directories to auto-fix issues.
    • Docs Sync: Monthly (1st) to ensure documentation aligns with code changes.
    • Dependency Audit: Biweekly (1st & 15th) for safe dependency updates with testing.
  9. Define Specialized Agents

    main

    Agents are specialized assistants with focused purposes and custom system prompts. They are stored in .claude/agents/{agent-name}.md.

    Agent Format

    ---
    name: agent-name
    description: When/why to use (max 1024 chars).
    model: sonnet
    ---
    
    # Agent System Prompt
    
    Your task is to...
    
    ## Checklist
    - [ ] Task 1

    Configuration Fields

    • name: (Required) Lowercase with hyphens.
    • description: (Required) Purpose and usage instructions.
    • model: (Optional) sonnet, opus, or haiku.
    • tools: (Optional) Comma-separated tool list.
    ---
    name: code-reviewer
    description: Reviews code for quality, security, and conventions. Use after writing or modifying code.
    model: opus
    ---
    
    # Agent System Prompt
    
    You are a senior code reviewer...
    
    ## Your Process
    1. Run `git diff` to see changes
    2. Apply review checklist
    3. Provide feedback
    
    ## Checklist
    - [ ] No TypeScript `any`
    - [ ] Error handling present
    - [ ] Tests included
  10. Quick Start: Set up Claude Code configuration

    main

    To configure Claude Code for your project, follow these steps to establish the necessary directory structure, project memory, and automation hooks.

    1. Initialize the configuration directory: Create the .claude directory and its subdirectories for agents, commands, hooks, and skills.

      mkdir -p .claude/{agents,commands,hooks,skills}
    2. Define Project Memory: Create a CLAUDE.md file in your project root to provide Claude with essential context like your tech stack, common commands, and directory structure.

    3. Configure Hooks: Create .claude/settings.json to define automation hooks (e.g., preventing edits on the main branch or auto-running tests).

    4. Create a Skill: Create a markdown file in .claude/skills/ (e.g., .claude/skills/testing-patterns/SKILL.md) to teach Claude specific domain knowledge or patterns.

    mkdir -p .claude/{agents,commands,hooks,skills}
  11. Create a Skill with SKILL.md

    main

    Skills are markdown files located in .claude/skills/ that provide Claude with domain-specific knowledge. Each skill must include a YAML frontmatter block with a name and a description. The description is critical as Claude uses it to determine when to activate the skill based on the user's prompt.

    Example structure: .claude/skills/testing-patterns/SKILL.md

    ---
    name: testing-patterns
    description: Jest testing patterns for this project. Use when writing tests, creating mocks, or following TDD workflow.
    ---
    
    # Testing Patterns
    
    ## Test Structure
    - Use `describe` blocks for grouping
    - Use `it` for individual tests
    - Follow AAA pattern: Arrange, Act, Assert
    
    ## Mocking
    - Use factory functions: `getMockUser(overrides)`
    - Mock external dependencies, not internal modules
  12. Configure hooks and environment in settings.json

    main

    The .claude/settings.json file manages hooks, environment variables, and permissions.

    Hook Events

    • PreToolUse: Fires before tool execution. Use this to block edits on sensitive branches or validate commands.
    • PostToolUse: Fires after a tool completes. Use this for auto-formatting, running tests, or linting.
    • UserPromptSubmit: Fires when a user submits a prompt. Use this to add context or suggest skills.
    • Stop: Fires when the agent finishes. Use this to decide if Claude should continue.

    Hook Response Format

    Hooks should return a JSON object with these keys:

    • block: (boolean) Block the action (PreToolUse only).
    • message: (string) Message to show the user.
    • feedback: (string) Non-blocking feedback.
    • suppressOutput: (boolean) Hide command output.
    • continue: (boolean) Whether to continue.
    {
      "block": true,
      "message": "Reason",
      "feedback": "Info",
      "suppressOutput": true,
      "continue": false
    }