YouTip LogoYouTip

Claude Code Devsetup

**Have you encountered these situations?** * Every time you open a new session, you have to explain your project's naming conventions to Claude again * Claude suddenly runs a dangerous command, like deleting files * You ask Claude to do a code review, but it puts the entire project into context, which is slow and expensive * You've carefully trained a set of Claude usage patterns, but new colleagues have no idea how to reuse them All these problems can be solved with a structure called **Agent Development Kit (ADK)**. Its core is 5 folders. Through these 5 folders, we can turn Claude Code into an automated development team with memory, rules, division of labor, and reproducibility. **Overall Structure:** Your Project/β”œβ”€β”€ CLAUDE.md/ ← Layer 1: Memoryβ”œβ”€β”€ skills/ ← Layer 2: Knowledgeβ”œβ”€β”€ hooks/ ← Layer 3: Guardrailsβ”œβ”€β”€ subagents/ ← Layer 4: Division of Labor└── plugins/ ← Layer 5: Replication !(https://example.com/wp-content/uploads/2026/05/1e881ccf-bece-46c8-bc5d-fc2e59d40a20.png) | Layer | Directory / File | Function | Core Significance | Analogy | | --- | --- | --- | --- | --- | | Layer 1 | `CLAUDE.md/` | Global rules and memory center for the agent | Defines AI behavior norms, project background, development constraints | AI Project Operation Manual | | | `architecture.rules` | Architecture rules definition | Specifies code structure, naming conventions, directory design | Technical Team Coding Standards | | | `global.md` | Global shared memory | Long-term rules that apply to all projects | AI's Long-term Memory | | | `project.md` | Current project-specific memory | Business background and special requirements of the current repository | Enhanced Project README | | Layer 2 | `skills/` | Skill module directory | Injects professional capabilities into AI | AI's Skill Library | | | `SKILL.md` | Skill description file | Tells AI when to invoke this skill | Skill Manual | | | `scripts/` | Skill scripts directory | Stores automation scripts and templates | Tool Box | | | `context.md` | Skill context | Provides background knowledge needed during skill execution | Professional Knowledge Base | | Layer 3 | `hooks/` | Hook system | Automatically inserts check logic before/after execution | Automated Security Audit | | | `PreToolUse.sh` | Pre-tool-use hook | Validates before executing commands | "Dangerous Operation Confirmator" | | | `PostToolUse.sh` | Post-tool-use hook | Auto-processes after execution completes | Auto-formatting, Notifications | | | `SessionStart.sh` | Session start hook | Initializes development environment | IDE Startup Script | | Layer 4 | `subagents/` | Sub-agent directory | Splits different specialized Agents | AI Team Collaboration System | | | `code-reviewer.md` | Code review Agent | Specifically responsible for code Review | Reviewer Engineer | | | `test-runner.md` | Test Agent | Automatically runs tests | QA Test Engineer | | | `explorer.md` | Exploration Agent | Analyzes codebase structure | Technical Researcher | | Layer 5 | `plugins/` | Plugin system | Modularizes and distributes capabilities | AI Application Marketplace | | | `manifest.json` | Plugin configuration list | Defines plugin metadata | npm package.json | | | `marketplace.url` | Plugin marketplace address | Plugin download and sharing entry | App Store | | | `team.install` | Team installation script | One-click sync team environment | DevOps Initialization Script | Each layer solves a specific problem. Let's break them down one by one. * * * ## Layer 1: `CLAUDE.md` β€” Give Claude Long-term Memory #### What is the problem? Claude has no cross-session memory. You tell it today to use PascalCase for component naming, but when you open a new session tomorrow, it forgets. #### Solution Place a `CLAUDE.md` file in your project and write everything you don't want to repeat. Every time a session starts, Claude automatically reads it. **Two files, two scopes:** | File Location | Scope | | --- | --- | | `~/.claude/CLAUDE.md` | Applies to **all projects** on your computer | | Project root `.claude/CLAUDE.md` | Applies to **only this repository** | **What to write? Think about what you most often repeat to Claude:** # Project: My E-commerce Platform## Tech Stack- Frontend: Next.js 14 (App Router)- Styling: Tailwind CSS- Database: PostgreSQL + Prisma## Naming Conventions- Component files: PascalCase, e.g., `UserCard.tsx`- Utility functions: camelCase, e.g., `formatPrice.ts`- API routes: kebab-case, e.g., `/api/user-profile`## Notes- Forbidden to use `any` type- All async functions must have try/catch- Must pass ESLint check before committing- Do not directly operate on `main` branch## Code Style- Indentation: 2 spaces- Quotes: single quotes- Prefer arrow functions **Effect:** You no longer need to paste a long background introduction at the beginning of every conversation. * * * ## Layer 2: `skills/` β€” Store Your Experience #### What is the problem? Every time you ask Claude to write a new component, it might do it differently each time β€” sometimes adding tests, sometimes not; sometimes with TypeScript types, sometimes without. #### Solution Write the standard approach as a skill file and put it in the `skills/` directory. Claude will **automatically match and invoke** the corresponding skill based on your task description. You don't need to enter any commands. **Directory Structure:** skills/β”œβ”€β”€ SKILL.md ← Skill Index (description + trigger conditions)β”œβ”€β”€ create-component.md ← Standard process for creating React componentsβ”œβ”€β”€ write-api.md ← Standard process for writing APIs└── fix-bug.md ← Standard process for debugging **What does a skill file look like?** --- name: create-react-component description: > When user says "create component", "new page", or "write a UI", automatically invoke this skill.---# Standard Process for Creating React Components## Steps1. Check if a component with the same name already exists under `src/components/`2. Create a new `.tsx` file using PascalCase naming3. Must define TypeScript interface, `any` is not allowed4. Synchronously create corresponding Storybook stories under `src/stories/`5. Create unit test files under `__tests__/`## Code Template \\`\\`\\`tsx interface Props { // Define props here}export const ComponentName: React.FC = ({ }) => { return
{/* Content */}
;}; \\`\\`\\` **Effect:** You say "help me create a user card component", and Claude automatically follows your team's standard process β€” tests, types, documentation, all included. > ? **Plain English Analogy:** It's like writing an "Operation Manual" for a new employee. They follow the manual and don't need you to watch over them every time. * * * ## Layer 3: `hooks/` β€” Set an Unbypassable Guardrail #### What is the problem? Sometimes AI performs operations you absolutely don't want β€” like directly deleting a database in production, or running an `rm -rf` command. Relying on prompts to tell it not to do this is unreliable. #### Solution Hooks are **Shell scripts that automatically run before and after every Claude tool call**. They are pure code logic with deterministic execution. AI cannot bypass them. **Three core files:** hooks/β”œβ”€β”€ PreToolUse.sh ← Runs BEFORE tool invocationβ”œβ”€β”€ PostToolUse.sh ← Runs AFTER tool invocation└── SessionStart.sh ← Runs when session STARTS **PreToolUse.sh Example β€” Intercepting dangerous commands:** #!/bin/bash# Check the command Claude is about to execute TOOL_INPUT="$2"# Forbidden: rm -rf /if echo "$TOOL_INPUT" | grep -qE "rm\\s+-rf\\s+/"; then echo "Blocked: Destructive delete command forbidden" >&2 exit 1fi# Forbidden: operating production database without confirmationif echo "$TOOL_INPUT" | grep -q "prod_db" && echo "$TOOL_INPUT" | grep -qE "DROP|DELETE"; then echo "Blocked: Destructive operations on production database require human confirmation" >&2 exit 1fiexit 0 **PostToolUse.sh Example β€” Auto-format after saving files:** #!/bin/bash# Every time Claude finishes writing a file, auto-run lint and formatting TOOL_NAME="$1" FILE_PATH="$2"if [ "$TOOL_NAME" = "write_file" ]; then case "$FILE_PATH" in *.ts|*.tsx|*.js|*.jsx) npx eslint --fix "$FILE_PATH" npx prettier --write "$FILE_PATH" echo "Auto-formatted: $FILE_PATH"
← Matplotlib Ref 2D PlotsAgent Architecture β†’