claude-code-best-practice/implementation/claude-skills-implementation.md

Skills Implementation

← Back to Claude Code Best Practice

---

Two skills are implemented in this repo as part of the Command → Agent → Skill architecture pattern, demonstrating two distinct skill invocation patterns: agent skills (preloaded) and skills (invoked directly).

---

Weather SVG Creator (Skill)

File: .claude/skills/weather-svg-creator/SKILL.md

---
name: weather-svg-creator
description: Creates an SVG weather card showing the current temperature for
  Dubai. Writes the SVG to orchestration-workflow/weather.svg and updates
  orchestration-workflow/output.md.
---

# Weather SVG Creator Skill

This skill creates a visual SVG weather card and writes the output files.

## Task
Create an SVG weather card displaying the temperature for Dubai, UAE,
and write it along with a summary to output files.

## Instructions
You will receive the temperature value and unit (Celsius or Fahrenheit)
from the calling context.

### 1. Create SVG Weather Card
Generate a clean SVG weather card...

### 2. Write SVG File
Write the SVG content to `orchestration-workflow/weather.svg`.

### 3. Write Output Summary
Write to `orchestration-workflow/output.md`...

...

This is a skill — invoked directly by the command via the Skill tool. It receives the temperature data from the conversation context and creates the SVG weather card and output summary.

---

Weather Fetcher (Agent Skill)

File: .claude/skills/weather-fetcher/SKILL.md

---
name: weather-fetcher
description: Instructions for fetching current weather temperature data
  for Dubai, UAE from wttr.in API
user-invocable: false
---

# Weather Fetcher Skill

This skill provides instructions for fetching current weather data.

## Task
Fetch the current temperature for Dubai, UAE in the requested unit
(Celsius or Fahrenheit).

## Instructions
1. Fetch Weather Data: Use the WebFetch tool to get current weather data
   - URL: https://wttr.in/Dubai?format=j1
2. Extract Temperature: From the JSON response, extract temp_C or temp_F
3. Return Result: Return the temperature value and unit clearly.

...

This is an agent skill — preloaded into the weather-agent at startup via the skills: frontmatter field. It is not invoked directly; instead, it serves as domain knowledge injected into the agent's context. Note user-invocable: false which hides it from the / command menu.

---

Two Skill Patterns

Pattern	Invocation	Example	Key Difference
Skill	Skill(skill: "name")	weather-svg-creator	Invoked directly via Skill tool
Agent Skill	Preloaded via skills: field	weather-fetcher	Injected into agent context at startup

---

How to Use

Skill — invoke directly via slash command:

$ claude
> /weather-svg-creator

Agent Skill — not directly invocable (user-invocable: false). Preloaded into the agent via skills: frontmatter:

# In .claude/agents/weather-agent.md
---
skills:
  - weather-fetcher
---

---

The skills are the final components in the Command → Agent → Skill orchestration pattern. The weather-fetcher is preloaded into the weather-agent as domain knowledge for API interaction, while the weather-svg-creator is invoked directly by the command to transform the fetched data into visual output.

Component	Role	This Repo
Command	Entry point, user interaction	/weather-orchestrator
Agent	Fetches data with preloaded skill (agent skill)	weather-agent with weather-fetcher
Skill	Creates output independently (skill)	weather-svg-creator