Claude Code Infrastructure Showcase

The recommended way to integrate this infrastructure into your project is using the setup.ts wizard. It copies the .claude/ directory, detects your tech stack, configures your activation mode (Classic or AI-Enhanced), installs hook dependencies, and performs 8 health checks to verify the installation.

Requirements:

• Node.js 18+ (20+ recommended) and npm
• macOS, Linux, or WSL2 (hooks are bash scripts)
• jq (only if enabling optional Stop hooks)

To run non-interactively (e.g., in a script), add the --yes flag.

# 1. Clone this repo
git clone https://github.com/diet103/claude-code-infrastructure-showcase.git

# 2. Run the setup wizard, pointing to YOUR project
cd claude-code-infrastructure-showcase
npx tsx setup.ts ~/my-project

Agents

Agents are standalone and work immediately after copying.

1. Copy the agent file: cp showcase/.claude/agents/[agent-name].md $CLAUDE_PROJECT_DIR/.claude/agents/.
2. Check for hardcoded paths: Ensure the agent doesn't use absolute paths like ~/git/old-project/. Replace them with $CLAUDE_PROJECT_DIR or ..

Slash Commands

1. Copy the command file: cp showcase/.claude/commands/[command].md $CLAUDE_PROJECT_DIR/.claude/commands/.
2. Customize paths: If using dev-docs or dev-docs-update commands, update the path references (e.g., dev/active/) to your preferred documentation storage location.

The repository provides an optimized NeoVim configuration for Claude Code's prompt editing mode (Ctrl+G). It includes relative line numbers, word-boundary wrapping, and system clipboard integration. Keybindings include Space+w to save/submit and Space+q to cancel.

mkdir -p ~/.config/nvim
cp editor-config/init.lua ~/.config/nvim/init.lua
cp editor-config/vimrc ~/.vimrc
echo 'export EDITOR=nvim' >> ~/.bashrc && source ~/.bashrc

To add a backend skill (like backend-dev-guidelines), you must map it to your specific project structure.

1. Identify if the project is a monorepo or a single application.
2. Locate the backend code directory (e.g., src/, backend/, server/).
3. Verify the tech stack (e.g., Express.js).
4. Copy the skill directory to your project.
5. Update skill-rules.json with the correct pathPattern (e.g., "src/api/**/*.ts").

To optimize Claude Code's prompt editing mode (Ctrl+G or /vim), you can manually install the provided NeoVim configuration. This setup includes relative line numbers, word-boundary wrapping, and system clipboard integration.

1. Create the NeoVim config directory.
2. Copy the init.lua from this repository to your local config.
3. Set your $EDITOR environment variable to nvim.

# NeoVim (recommended)
mkdir -p ~/.config/nvim
cp editor-config/init.lua ~/.config/nvim/init.lua
echo 'export EDITOR=nvim' >> ~/.bashrc
source ~/.bashrc

Claude Code determines which editor to open for prompt editing (via Ctrl+G or /vim) by checking the $EDITOR environment variable.

To ensure Claude Code uses your optimized NeoVim or Vim configuration, you must export the EDITOR variable in your shell configuration (e.g., .bashrc or .zshrc).

Example for NeoVim: export EDITOR=nvim

If a skill's default tech stack (e.g., React + MUI v7) does not match your project (e.g., Vue + Vuetify), you should adapt it rather than using it as-is.

Adaptation Strategy:

1. Copy the existing skill as a new name (e.g., vue-dev-guidelines).
2. Replace framework-specific patterns (e.g., React.FC $\rightarrow$ defineComponent).
3. Replace component libraries (e.g., MUI $\rightarrow$ Vuetify).
4. Update skill-rules.json with the correct file extensions and triggers (e.g., .vue files).

The repository provides several specialized guides for integrating Claude Code infrastructure into your projects:

• Claude Integration Guide: For AI-assisted setup.
• Skills Documentation: Details on how to define and use Claude skills.
• Hooks Setup: Instructions for configuring hooks.
• Agents Guide: Guidance on working with agents.
• Dev Docs Pattern: Documentation on the development documentation pattern used in this project.

If you prefer manual installation, follow these phases:

Phase 1: Skill Activation

1. Copy all essential hooks (skill-activation-prompt, skill-verification-guard, skill-activation-tracker, post-tool-use-tracker) to your .claude/hooks/ directory.
2. Update your .claude/settings.json with the hook registrations.
3. Install hook dependencies: cd .claude/hooks && npm install.
4. Make shell scripts executable: chmod +x .claude/hooks/*.sh.

Phase 2: Add First Skill

1. Copy a skill directory from this repo to your .claude/skills/.
2. Create or update skill-rules.json.
3. Customize path patterns to match your project.

Phase 3: Enable AI (Optional)

1. Edit .claude/skills/skill-rules.json and set "skill_activation_mode" to "fallback".
2. Set your API key in your shell environment (e.g., export GEMINI_API_KEY=your-key in ~/.bashrc).
3. Restart Claude Code.

If NeoVim is not available, you can use the simpler Vim fallback configuration. This provides 4-space tabs, syntax highlighting, and cursor line highlighting.

1. Copy the vimrc from this repository to your home directory.
2. Set your $EDITOR environment variable to vim.

# Vim fallback (if NeoVim not available)
cp editor-config/vimrc ~/.vimrc
echo 'export EDITOR=vim' >> ~/.bashrc
source ~/.bashrc