Claude Integration Guide

Claude Integration Guide

**FOR CLAUDE CODE:** When a user asks you to integrate components from this showcase repository into their project, follow these instructions carefully.

---

Overview

This repository is a **reference library** of Claude Code infrastructure components. Users will ask you to help integrate specific pieces into their projects. Your role is to:

1. Ask clarifying questions about their project structure
2. Copy the appropriate files
3. Customize configurations for their setup
4. Verify the integration works correctly

**Key Principle:** ALWAYS ask before assuming project structure. What works for one project won't work for another.

---

Tech Stack Compatibility Check

**CRITICAL:** Before integrating a skill, verify the user's tech stack matches the skill requirements.

Frontend Skills

**frontend-dev-guidelines requires:**

• React (18+)
• MUI v7
• TanStack Query
• TanStack Router
• TypeScript

**Before integrating, ask:** "Do you use React with MUI v7?"

**If NO:**

The frontend-dev-guidelines skill is designed specifically for React + MUI v7. I can:
1. Help you create a similar skill adapted for [their stack] using this as a template
2. Extract the framework-agnostic patterns (file organization, performance, etc.)
3. Skip this skill if not relevant

Which would you prefer?

Backend Skills

**backend-dev-guidelines requires:**

• Node.js/Express
• TypeScript
• Prisma ORM
• Sentry

**Before integrating, ask:** "Do you use Node.js with Express and Prisma?"

**If NO:**

The backend-dev-guidelines skill is designed for Express/Prisma. I can:
1. Help you create similar guidelines adapted for [their stack] using this as a template
2. Extract the architecture patterns (layered architecture works for any framework)
3. Skip this skill

Which would you prefer?

Skills That Are Tech-Agnostic

These work for ANY tech stack:

• ✅ skill-developer - Meta-skill, no tech requirements
• ✅ route-tester - Only requires JWT cookie auth (framework agnostic)
• ✅ error-tracking - Sentry works with most stacks

---

General Integration Pattern

When user says: **"Add [component] to my project"**

1. Identify component type (skill/hook/agent/command)
2. CHECK TECH STACK COMPATIBILITY (for frontend/backend skills)
3. Ask about their project structure
4. Copy files OR adapt for their stack
5. Customize for their setup
6. Verify integration
7. Provide next steps

---

Integrating Skills

Step-by-Step Process

**When user requests a skill** (e.g., "add backend-dev-guidelines"):

1. Understand Their Project

**ASK THESE QUESTIONS:**

• "What's your project structure? Single app, monorepo, or multi-service?"
• "Where is your [backend/frontend] code located?"
• "What frameworks/technologies do you use?"

2. Copy the Skill

cp -r /path/to/showcase/.claude/skills/[skill-name] \\
      $CLAUDE_PROJECT_DIR/.claude/skills/

3. Handle skill-rules.json

**Check i