Week 3: Learn - Claude Code Study

LESSONS

Skills Basics

SKILL.md structure and slash commands

Not Started

What are Skills?

Skills teach Claude how to perform specific tasks. They can be automatically discovered based on context or invoked directly with slash commands like /skill-name.

SKILL.md Structure

Skills are defined as SKILL.md files with YAML frontmatter:

.claude/skills/my-skill/SKILL.md

---
name: my-skill
description: What this skill does (used by Claude for discovery)
allowed-tools: [Bash, Read, Write]  # optional
model: sonnet                        # optional
user-invocable: true                 # enables /skill-name
---

# Skill Instructions
Explain how Claude should perform this task.

## How it works
1. First step...
2. Second step...
3. Output results...

Built-in Slash Commands

/commit

Auto-generate commit message from staged changes and commit.

/review-pr

Review a pull request and provide feedback.

/init

Initialize CLAUDE.md with project context.

/compact

Summarize conversation to save context window.

Custom Skills Creation

Create your own skills and skill discovery

Not Started

Creating a Custom Skill

Example: Create a skill for writing survey documents.

.claude/skills/survey-writer/SKILL.md

---
name: survey-writer
description: Write academic survey documents from paper summaries
allowed-tools: [Read, Write, WebFetch]
user-invocable: true
---

# Survey Writer Skill

You are an expert at writing academic survey documents.

## Process
1. Read the provided paper summaries
2. Identify common themes and categorize papers
3. Write an introduction explaining the research area
4. Create sections for each category
5. Write a conclusion with insights and future directions

## Output Format
- Use markdown format
- Include proper citations
- Create a clear table of contents

Skill Locations & Priority

1. Project: .claude/skills/<name>/SKILL.md (highest priority)
2. User: ~/.claude/skills/<name>/SKILL.md
3. Global: Skills from installed plugins

Skill Discovery

Claude automatically discovers skills based on the description field. When you ask Claude to do something matching a skill's description, it will use that skill.

Example

# If you have a skill with description: "Write academic survey documents"
# Claude will automatically use it when you say:

User: "Write a survey document from these paper summaries"
# Claude: [Uses survey-writer skill automatically]

# Or invoke directly:
User: "/survey-writer"

Claude와 대화로 Skill 만들기

파일을 직접 작성할 필요 없이 Claude에게 "이런 skill을 만들어줘"라고 요청하면 됩니다. Claude가 적절한 frontmatter와 instructions를 갖춘 SKILL.md를 생성합니다.

대화로 Skill 생성 예시

User: "코드 리뷰 skill을 만들어줘.
       보안, 스타일, 버그를 체크하고
       Critical/Warning/Suggestion으로 분류해줘"

Claude: [.claude/skills/code-reviewer/SKILL.md 생성]

Skill Creator Skill

대화형 skill 생성을 더 체계적으로 하려면 skill-creator를 사용하세요:

Skill Creator 사용

User: "/skill-creator"
Claude: "어떤 skill을 만들고 싶으신가요?
         skill의 목적과 필요한 도구를 알려주세요."

# Claude가 대화를 통해:
# - name, description 정의
# - 필요한 tools 선택
# - user-invocable 여부 결정
# - 완성된 SKILL.md 생성

Step-by-Step Creation Walkthrough

Follow these steps to create a skill from scratch:

1. Create the directory: mkdir -p .claude/skills/my-skill
2. Write SKILL.md with frontmatter + instructions (see examples above)
3. Test it — invoke with /my-skill or ask Claude naturally (auto-discovery via description)

$ARGUMENTS Substitution

Use $ARGUMENTS in your SKILL.md to capture whatever the user types after the slash command:

.claude/skills/review-file/SKILL.md

---
name: review-file
user-invocable: true
---

Review the file: $ARGUMENTS

Check for:
- Security issues
- Code style violations
- Potential bugs

Usage: /review-file src/main.py

Claude receives the instruction with $ARGUMENTS replaced by src/main.py

Supporting Files

Skills can include additional files alongside SKILL.md — templates, examples, or reference data that the skill instructions can reference:

Skill with Supporting Files

.claude/skills/my-skill/
├── SKILL.md           # Main skill instructions
├── template.md        # Referenced by SKILL.md
└── examples/
    ├── good.py        # Example of good output
    └── bad.py         # Example of what to avoid

Key Frontmatter Fields

Field	Description
`name`	Skill identifier (used for `/name` invocation)
`description`	Used by Claude for auto-discovery when matching user requests
`user-invocable`	Enables `/skill-name` slash command
`allowed-tools`	Restrict which tools the skill can access
`model`	Override model (opus / sonnet / haiku)
`context`	Set to `fork` for separate context window

Subagents & Task Tool

Specialized agents for parallel and delegated work

Not Started

What are Subagents?

Subagents are specialized Claude instances spawned via the Task tool. Each subagent runs independently with its own context and tools, allowing Claude to tackle multiple parts of a problem in parallel.

Why Use Subagents?

Instead of doing everything sequentially, Claude can delegate focused tasks to specialized agents. This enables parallel work, keeps context organized, and improves results for complex multi-step tasks.

Subagent Types

Explore

Codebase search and file discovery. Uses Glob, Grep, Read tools to find patterns and answer structural questions.

Bash

Command execution specialist. Git operations, running tests, package management, build scripts.

Plan

Architecture design and implementation planning. Identifies files to change, considers trade-offs, creates action plans.

General-Purpose

Complex multi-step tasks. Research, code generation, analysis -- uses all available tools.

Task Tool Usage

The Task tool is how Claude spawns subagents. You specify the agent type and a prompt describing the work:

Task Tool Example

# Claude spawns a subagent using the Task tool
Task tool:
  subagent_type: "Explore"
  prompt: "Find all API endpoint definitions in the codebase.
           Search for patterns like router.get, app.post,
           @app.route, etc. Return a list of endpoints
           with their file locations."

# The subagent works independently and returns results

When to Use Subagents

1. Parallel exploration - Search multiple parts of a codebase simultaneously
2. Documentation lookup - Research while continuing main work
3. Review and verification - Have a separate agent check your work
4. Repetitive analysis - Apply the same analysis across many files

Claude와 대화로 Agent 만들기

Agent도 직접 파일을 작성할 필요 없이 Claude에게 요청하면 됩니다. "디버깅 전문 agent를 만들어줘"라고 하면 Claude가 적절한 tools와 model을 선택해서 생성합니다.

대화로 Agent 생성 예시

User: "디버깅 전문 agent를 만들어줘.
       에러를 받으면 root cause 분석하고
       수정안을 제시하는 agent"

Claude: [.claude/agents/debugger.md 생성]
        - model: opus (복잡한 분석에 적합)
        - tools: [Read, Edit, Bash, Grep, Glob]
        - 상세한 디버깅 프로세스 포함

Creating Custom Agents

Beyond built-in agent types, you can define your own specialized agents in .claude/agents/:

.claude/agents/debugger.md

---
name: debugger
description: Debug errors and test failures
model: opus
tools: [Read, Edit, Bash, Grep, Glob]
---

You are an expert debugger. When given an error:

1. Reproduce the issue
2. Identify the root cause using stack traces
3. Search for related code patterns
4. Propose and implement a fix
5. Verify the fix resolves the issue

Agent Frontmatter Fields

Field	Description
`name`	Agent identifier (used as `subagent_type`)
`description`	When to use this agent (for auto-selection)
`model`	opus / sonnet / haiku
`tools`	List of available tools for this agent
`permissionMode`	`bypassPermissions` or `default`

Using Custom Agents

Invoking a Custom Agent

# Reference your custom agent by name in the Task tool:
Task tool:
  subagent_type: "debugger"
  prompt: "The test in tests/api.test.js is failing
           with a TypeError. Investigate and fix it."

# List all available agents (built-in + custom):
/agents

Parallel Development

Multiple agents working simultaneously, MVP development, background agents

Not Started

Parallel Subagents

Send multiple Task tool calls in a single message to run subagents simultaneously. This dramatically speeds up complex tasks like MVP development, codebase analysis, and multi-file operations.

Launching Multiple Agents

Parallel Subagent Example

# Send multiple Task tool calls in a single message
User: "Analyze this React app - check components,
       find unused imports, and list all API calls"

# Claude spawns 3 agents simultaneously:
Agent 1 (Explore): Search for component definitions
Agent 2 (Explore): Find unused imports with grep
Agent 3 (Explore): Locate all fetch/axios calls

# All 3 run in parallel, results combined

MVP Development with Parallel Roles

For MVP development, assign each subagent a different role: one plans architecture, another implements backend, another creates frontend, and another writes tests.

MVP Development with Parallel Tasks

# Multiple Task tool calls sent in a single message:

# Task 1: Architect
Task tool:
  subagent_type: "Plan"
  prompt: "Design the architecture for a todo-app MVP.
           Define folder structure, data models, and API routes."

# Task 2: Backend Developer
Task tool:
  subagent_type: "general-purpose"
  prompt: "Implement the Express.js backend with REST API
           for CRUD operations on todos."

# Task 3: Frontend Developer
Task tool:
  subagent_type: "general-purpose"
  prompt: "Create a React frontend with components for
           listing, adding, and completing todos."

# Task 4: QA Engineer
Task tool:
  subagent_type: "general-purpose"
  prompt: "Write Jest tests for the API endpoints
           and React component unit tests."

Background Agents

For long-running tasks, use run_in_background: true to continue working while the agent runs:

run_in_background

# For long-running tasks, use background execution
Task tool:
  subagent_type: "general-purpose"
  run_in_background: true
  prompt: "Run the full test suite and report failures"

# Continue working while the agent runs
# Results available when the agent completes

Best Practices

1. Give clear, focused prompts - Each subagent should have one goal and expected output format.
2. Specify constraints - Tell agents if they should be read-only vs write, and provide relevant file paths.
3. Use the right agent type - Explore for search, Bash for commands, Plan for architecture, GP for complex tasks.
4. Use model hints - Set model: haiku for simple subagents to save cost.

Skills in Practice

Real-world skill examples and best practices

Not Started

Real-World Skills

Skills are most powerful when they encode your team's best practices and automate repetitive workflows.

Real-World: Remotion (Video Creation via React)

Remotion publishes official Claude Code skills that teach Claude how to generate React-based video components following Remotion best practices:

Installing Remotion Skills

# Install community skills with npx skills add
npx skills add remotion-dev/skills

# This installs the remotion-best-practices skill into your project
# Claude can now generate React video components following Remotion patterns

What it does: Installs a remotion-best-practices skill so Claude understands Remotion's component patterns, animation APIs, and video rendering pipeline.

Remotion AI Skills Documentation

Real-World: DSLab Research Toolkit

Our own lab's skill and agent collection demonstrates multi-agent workflows for research and code quality:

iterative-code-review

3-agent loop: task-planner-analyzer plans changes, modular-code-architect implements, code-reviewer validates. Repeats until quality passes.

debugger agent

Root cause analysis specialist. Reads errors, searches code patterns, proposes and verifies fixes automatically.

code-reviewer agent

Structured feedback with 3 severity levels: Critical (must fix), Warning (should fix), Suggestion (nice to have).

academic-writing-assistant

Helps write research papers following academic writing standards with proper structure and citations.

DSLab Skills Collection on GitHub

Resource Links

Official Skills Docs

code.claude.com/docs/en/skills

Official Subagents Docs

code.claude.com/docs/en/sub-agents

DSLab Skills Collection

github.com/iamseungpil/claude-for-dslab

Remotion Skills

remotion.dev/docs/ai/skills

Skill Design Patterns

5 proven patterns for building effective skills

Not Started

Choosing Your Approach

There are two ways to start building a skill: Problem-first (identify a workflow pain point, then design the skill) vs Tool-first (explore available MCP tools, then find useful combinations). Problem-first is recommended for most teams.

Pattern 1: Sequential Workflow Orchestration

Chain multiple steps in a fixed order. Each step's output feeds the next.

SKILL.md — sequential pipeline

# Sequential Workflow: Code Review Pipeline

## Steps (execute in order)
1. Run linter on changed files  → collect warnings
2. Run tests                    → collect failures
3. Analyze code complexity      → flag hotspots
4. Generate review summary      → combine all results

## Rules
- Stop pipeline if step 2 has critical failures
- Pass each step's output as context to the next

Pattern 2: Multi-MCP Coordination

Combine tools from multiple MCP servers to accomplish a single task.

SKILL.md — multi-MCP

# Multi-MCP: Research Assistant

## MCP Servers Used
- semantic-scholar  → search papers
- filesystem         → save results
- slack              → post summary

## Workflow
1. Query Semantic Scholar for recent papers on topic
2. Filter by citation count > 10
3. Write markdown summary to ./output/
4. Post digest to #research Slack channel

Pattern 3: Iterative Refinement

Repeat a step until a quality threshold is met (or a max iteration count).

SKILL.md — iterative refinement

# Iterative Refinement: Doc Writer

## Process
1. Generate initial draft
2. Self-review against checklist:
   - Accuracy, clarity, completeness
3. If score < 8/10 → revise and go to step 2
4. Max 3 iterations, then output best version

## Checklist
- [ ] All parameters documented
- [ ] Examples included
- [ ] No jargon without definition

Pattern 4: Context-aware Tool Selection

Choose different tools or paths based on the input context.

SKILL.md — context-aware

# Context-aware: Smart Formatter

## Decision Logic
- If input is .py  → use Black formatter
- If input is .ts  → use Prettier
- If input is .md  → use markdownlint
- If input is .json → validate schema + format

## Fallback
- Unknown file type → report unsupported, list available types

Pattern 5: Domain-specific Intelligence

Embed expert knowledge and heuristics directly in the skill instructions.

SKILL.md — domain expert

# Domain Expert: Security Auditor

## Embedded Knowledge
- OWASP Top 10 checklist (2025 edition)
- Common CVE patterns for Node.js apps
- Company-specific auth requirements

## Process
1. Scan codebase for vulnerability patterns
2. Cross-reference with internal security policy
3. Output: severity-ranked findings with fix suggestions

## Key Heuristic
- Any user input reaching SQL/shell without sanitization = CRITICAL

When to Use Each Pattern

Sequential — deterministic multi-step tasks (CI, deploy, onboarding)

Multi-MCP — tasks spanning multiple services (research, reporting)

Iterative — quality-sensitive outputs (writing, code gen)

Context-aware — input varies widely (file types, languages)

Domain-specific — deep expertise required (security, compliance)

TERMINOLOGY

Skills

Instructions that teach Claude specific tasks. Defined in SKILL.md files with frontmatter for metadata. Invoked with /skill-name or discovered automatically.

SKILL.md

The file that defines a skill. Contains YAML frontmatter (name, description, allowed-tools, model) followed by markdown instructions for Claude to follow.

Slash Commands

Commands starting with / that invoke specific functionality. Built-in commands include /commit, /init, /compact. Custom skills can also be invoked this way.

Skill Discovery

Claude automatically finds and uses relevant skills based on their descriptions. When a request matches a skill's description, Claude applies that skill without explicit invocation.

allowed-tools

A SKILL.md frontmatter field that restricts which tools the skill can use. Example: allowed-tools: [Read, Glob] prevents writing files.

Subagent

An independent Claude instance spawned via the Task tool for parallel work. Types include Explore, Bash, Plan, and General-Purpose, each optimized for different tasks.

Task Tool

The tool used to create subagents with specific types and prompts. Multiple Task tool calls can be sent in a single message for parallel execution.

Background Agent

A subagent launched with run_in_background: true that runs independently. You can continue working while it processes. Results are available when the agent completes.

Progressive Disclosure

A 3-stage skill loading strategy: Stage 1 loads a short summary, Stage 2 loads full instructions on invocation, Stage 3 loads external resources on demand. Reduces context window usage while keeping skills discoverable.

Skill Patterns

Five proven design patterns for building effective skills: Sequential Workflow Orchestration (ordered multi-step), Multi-MCP Coordination (cross-service), Iterative Refinement (quality loop), Context-aware Tool Selection (conditional paths), Domain-specific Intelligence (embedded expertise).

Custom Agent

A markdown file in .claude/agents/ that defines a specialized subagent with its own name, model, tools, and instructions. Referenced via subagent_type in the Task tool.

$ARGUMENTS

A variable in SKILL.md that captures whatever text the user types after the slash command. For example, /review-file src/main.py substitutes src/main.py into the $ARGUMENTS placeholder.

Supporting Files

Additional files alongside SKILL.md (templates, examples, reference data) that the skill instructions can reference. Stored in the same skill directory, e.g., .claude/skills/my-skill/template.md.

KNOWLEDGE CHECK

Quiz: Skills & Subagents

Question 1/12

Ready for the Challenge?

Apply Skills, Subagents, and parallel development patterns in a real project.

Start Challenge

LESSONS

Skills Basics

SKILL.md Structure

Built-in Slash Commands

/commit

/review-pr

/init

/compact

Custom Skills Creation

Creating a Custom Skill

Skill Locations & Priority

Skill Discovery

Skill Creator Skill

Step-by-Step Creation Walkthrough

$ARGUMENTS Substitution

Supporting Files

Key Frontmatter Fields

Subagents & Task Tool

Why Use Subagents?

Subagent Types

Explore

Bash

Plan

General-Purpose

Task Tool Usage

When to Use Subagents

Creating Custom Agents

Agent Frontmatter Fields

Using Custom Agents

Parallel Development

Launching Multiple Agents

MVP Development with Parallel Roles

Background Agents

Best Practices

Skills in Practice

Real-World: Remotion (Video Creation via React)

Real-World: DSLab Research Toolkit

iterative-code-review

debugger agent

code-reviewer agent

academic-writing-assistant

Resource Links

Official Skills Docs

Official Subagents Docs

DSLab Skills Collection

Remotion Skills

Skill Design Patterns

Pattern 1: Sequential Workflow Orchestration

Pattern 2: Multi-MCP Coordination

Pattern 3: Iterative Refinement

Pattern 4: Context-aware Tool Selection

Pattern 5: Domain-specific Intelligence

TERMINOLOGY

KNOWLEDGE CHECK

Quiz: Skills & Subagents

Quiz Complete!

Ready for the Challenge?