readme updated
This commit is contained in:
Shayan Rais
@@ -64,6 +64,20 @@
|
||||
|
||||
"plansDirectory": "./reports",
|
||||
"outputStyle": "Explanatory",
|
||||
"statusLine": {
|
||||
"type": "command",
|
||||
"command": "echo 'this is a status line'",
|
||||
"padding": 0
|
||||
},
|
||||
"attribution": {
|
||||
"commit": "Co-Authored-By: Claude <noreply@anthropic.com>",
|
||||
"pr": "Generated with [Claude Code](https://claude.ai/code)"
|
||||
},
|
||||
"spinnerTipsEnabled": true,
|
||||
"respectGitignore": true,
|
||||
"env": {
|
||||
"CLAUDE_AUTOCOMPACT_PCT_OVERRIDE": "80"
|
||||
},
|
||||
"enableAllProjectMcpServers": true,
|
||||
"disableAllHooks": false,
|
||||
"hooks": {
|
||||
|
||||
@@ -23,13 +23,14 @@ practice makes claude perfect
|
||||
|
||||
| Feature | Location | Description |
|
||||
|---------|----------|-------------|
|
||||
| [**Commands**](https://code.claude.com/docs/en/skills) | `.claude/commands/<name>.md` | [](best-practice/claude-commands.md) [](.claude/commands/) Entry-point prompts for workflows — invoke with `/command-name` |
|
||||
| [**Commands**](https://code.claude.com/docs/en/skills) | `.claude/commands/<name>.md` | [](best-practice/claude-commands.md) [](implementation/claude-commands-implementation.md) Entry-point prompts for workflows — invoke with `/command-name` |
|
||||
| [**Sub-Agents**](https://code.claude.com/docs/en/sub-agents) | `.claude/agents/<name>.md` | [](best-practice/claude-subagents.md) [](implementation/claude-subagents-implementation.md) Custom agents with their own name, color, tools, permissions, and model · [Agent Teams](https://code.claude.com/docs/en/agent-teams) |
|
||||
| [**Skills**](https://code.claude.com/docs/en/skills) | `.claude/skills/<name>/SKILL.md` | [](best-practice/claude-commands.md#skills-frontmatter-fields) [](.claude/skills/) Reusable knowledge, workflows, and slash commands — load on-demand or invoke with `/skill-name` |
|
||||
| [**Hooks**](https://code.claude.com/docs/en/hooks) | `.claude/hooks/` | [](.claude/hooks/) Deterministic scripts that run outside the agentic loop on specific events |
|
||||
| [**Skills**](https://code.claude.com/docs/en/skills) | `.claude/skills/<name>/SKILL.md` | [](best-practice/claude-commands.md#skills-frontmatter-fields) [](implementation/claude-skills-implementation.md) Reusable knowledge, workflows, and slash commands — load on-demand or invoke with `/skill-name` |
|
||||
| [**Hooks**](https://code.claude.com/docs/en/hooks) | `.claude/hooks/` | [](https://github.com/shanraisshan/claude-code-voice-hooks) [](.claude/hooks/) Deterministic scripts that run outside the agentic loop on specific events |
|
||||
| [**MCP Servers**](https://code.claude.com/docs/en/mcp) | `.claude/settings.json`, `.mcp.json` | [](.mcp.json) Model Context Protocol connections to external tools, databases, and APIs |
|
||||
| [**Plugins**](https://code.claude.com/docs/en/plugins) | distributable packages | Bundles of skills, subagents, hooks, and MCP servers · [Marketplaces](https://code.claude.com/docs/en/discover-plugins) |
|
||||
| [**Settings**](https://code.claude.com/docs/en/settings) | `.claude/settings.json` | [](best-practice/claude-settings.md) [](.claude/settings.json) Hierarchical configuration system · [Permissions](https://code.claude.com/docs/en/permissions) · [Model Config](https://code.claude.com/docs/en/model-config) · [Output Styles](https://code.claude.com/docs/en/output-styles) · [Sandboxing](https://code.claude.com/docs/en/sandboxing) · [Keybindings](https://code.claude.com/docs/en/keybindings) · [Status Line](https://code.claude.com/docs/en/statusline) · [Fast Mode](https://code.claude.com/docs/en/fast-mode) |
|
||||
| [**Settings**](https://code.claude.com/docs/en/settings) | `.claude/settings.json` | [](best-practice/claude-settings.md) [](.claude/settings.json) Hierarchical configuration system · [Permissions](https://code.claude.com/docs/en/permissions) · [Model Config](https://code.claude.com/docs/en/model-config) · [Output Styles](https://code.claude.com/docs/en/output-styles) · [Sandboxing](https://code.claude.com/docs/en/sandboxing) · [Keybindings](https://code.claude.com/docs/en/keybindings) · [Fast Mode](https://code.claude.com/docs/en/fast-mode) |
|
||||
| [**Status Line**](https://code.claude.com/docs/en/statusline) | `.claude/settings.json` | [](https://github.com/shanraisshan/claude-code-status-line) [](.claude/settings.json) Customizable status bar showing context usage, model, cost, and session info |
|
||||
| [**Memory**](https://code.claude.com/docs/en/memory) | `CLAUDE.md`, `~/.claude/projects/<project>/memory/` | [](CLAUDE.md) Persistent context via CLAUDE.md files and `@path` imports · [Auto Memory](https://code.claude.com/docs/en/memory) · [Rules](https://code.claude.com/docs/en/memory#organize-rules-with-clauderules) |
|
||||
| [**Checkpointing**](https://code.claude.com/docs/en/checkpointing) | automatic (git-based) | Automatic tracking of file edits with rewind (`Esc Esc` or `/rewind`) and targeted summarization |
|
||||
| [**Remote Control**](https://code.claude.com/docs/en/remote-control) | CLI / claude.ai | Continue local sessions from any device — phone, tablet, or browser · [Headless Mode](https://code.claude.com/docs/en/headless) |
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
# Commands Best Practice
|
||||
|
||||
<br>
|
||||
[](../.claude/commands/)
|
||||
[](../implementation/claude-commands-implementation.md)
|
||||
|
||||
Complete reference for Claude Code commands — command definitions, frontmatter fields, and all built-in slash commands.
|
||||
|
||||
|
||||
@@ -0,0 +1,77 @@
|
||||
# Commands Implementation
|
||||
|
||||
|
||||
|
||||
<table width="100%">
|
||||
<tr>
|
||||
<td><a href="../">← Back to Claude Code Best Practice</a></td>
|
||||
<td align="right"><img src="../!/claude-jumping.svg" alt="Claude" width="60" /></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
---
|
||||
|
||||
<a href="#weather-orchestrator"><img src="../!/tags/implemented-hd.svg" alt="Implemented"></a>
|
||||
|
||||
The weather orchestrator command is implemented in this repo as the entry point of the **Command → Agent → Skill** architecture pattern, demonstrating how commands orchestrate multi-step workflows.
|
||||
|
||||
---
|
||||
|
||||
## Weather Orchestrator
|
||||
|
||||
**File**: [`.claude/commands/weather-orchestrator.md`](../.claude/commands/weather-orchestrator.md)
|
||||
|
||||
```yaml
|
||||
---
|
||||
description: Fetch weather data for Dubai and create an SVG weather card
|
||||
model: haiku
|
||||
---
|
||||
|
||||
# Weather Orchestrator Command
|
||||
|
||||
Fetch the current temperature for Dubai, UAE and create a visual SVG weather card.
|
||||
|
||||
## Workflow
|
||||
|
||||
### Step 1: Ask User Preference
|
||||
Use the AskUserQuestion tool to ask the user whether they want the temperature
|
||||
in Celsius or Fahrenheit.
|
||||
|
||||
### Step 2: Fetch Weather Data
|
||||
Use the Task tool to invoke the weather agent:
|
||||
- subagent_type: weather-agent
|
||||
- prompt: Fetch the current temperature for Dubai, UAE in [unit]...
|
||||
|
||||
### Step 3: Create SVG Weather Card
|
||||
Use the Skill tool to invoke the weather-svg-creator skill:
|
||||
- skill: weather-svg-creator
|
||||
|
||||
...
|
||||
```
|
||||
|
||||
The command orchestrates the entire workflow: it asks the user for their temperature unit preference, invokes the `weather-agent` via the Task tool, and then invokes the `weather-svg-creator` skill via the Skill tool.
|
||||
|
||||
---
|
||||
|
||||
## How to Use
|
||||
|
||||
```bash
|
||||
$ claude
|
||||
> /weather-orchestrator
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
<a href="https://github.com/shanraisshan/claude-code-best-practice#orchestration-workflow"><img src="../!/tags/orchestration-workflow-hd.svg" alt="Orchestration Workflow"></a>
|
||||
|
||||
The weather orchestrator is the **Command** in the Command → Agent → Skill orchestration pattern. It serves as the entry point — handling user interaction (temperature unit preference), delegating data fetching to the `weather-agent`, and invoking the `weather-svg-creator` skill for visual output.
|
||||
|
||||
<p align="center">
|
||||
<img src="../!/command-skill-agent-flow.svg" alt="Command Skill Agent Architecture Flow" width="100%">
|
||||
</p>
|
||||
|
||||
| Component | Role | This Repo |
|
||||
|-----------|------|-----------|
|
||||
| **Command** | Entry point, user interaction | [`/weather-orchestrator`](../.claude/commands/weather-orchestrator.md) |
|
||||
| **Agent** | Fetches data with preloaded skill (agent skill) | [`weather-agent`](../.claude/agents/weather-agent.md) with [`weather-fetcher`](../.claude/skills/weather-fetcher/SKILL.md) |
|
||||
| **Skill** | Creates output independently (skill) | [`weather-svg-creator`](../.claude/skills/weather-svg-creator/SKILL.md) |
|
||||
@@ -0,0 +1,133 @@
|
||||
# Skills Implementation
|
||||
|
||||
|
||||
|
||||
<table width="100%">
|
||||
<tr>
|
||||
<td><a href="../">← Back to Claude Code Best Practice</a></td>
|
||||
<td align="right"><img src="../!/claude-jumping.svg" alt="Claude" width="60" /></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
---
|
||||
|
||||
<a href="#weather-svg-creator"><img src="../!/tags/implemented-hd.svg" alt="Implemented"></a>
|
||||
|
||||
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`](../.claude/skills/weather-svg-creator/SKILL.md)
|
||||
|
||||
```yaml
|
||||
---
|
||||
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`](../.claude/skills/weather-fetcher/SKILL.md)
|
||||
|
||||
```yaml
|
||||
---
|
||||
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:
|
||||
```bash
|
||||
$ claude
|
||||
> /weather-svg-creator
|
||||
```
|
||||
|
||||
**Agent Skill** — not directly invocable (`user-invocable: false`). Preloaded into the agent via `skills:` frontmatter:
|
||||
```yaml
|
||||
# In .claude/agents/weather-agent.md
|
||||
---
|
||||
skills:
|
||||
- weather-fetcher
|
||||
---
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
<a href="https://github.com/shanraisshan/claude-code-best-practice#orchestration-workflow"><img src="../!/tags/orchestration-workflow-hd.svg" alt="Orchestration Workflow"></a>
|
||||
|
||||
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.
|
||||
|
||||
<p align="center">
|
||||
<img src="../!/command-skill-agent-flow.svg" alt="Command Skill Agent Architecture Flow" width="100%">
|
||||
</p>
|
||||
|
||||
| Component | Role | This Repo |
|
||||
|-----------|------|-----------|
|
||||
| **Command** | Entry point, user interaction | [`/weather-orchestrator`](../.claude/commands/weather-orchestrator.md) |
|
||||
| **Agent** | Fetches data with preloaded skill (agent skill) | [`weather-agent`](../.claude/agents/weather-agent.md) with [`weather-fetcher`](../.claude/skills/weather-fetcher/SKILL.md) |
|
||||
| **Skill** | Creates output independently (skill) | [`weather-svg-creator`](../.claude/skills/weather-svg-creator/SKILL.md) |
|
||||
@@ -77,6 +77,6 @@ The weather agent is the **Agent** in the Command → Agent → Skill orchestrat
|
||||
|
||||
| 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` |
|
||||
| **Command** | Entry point, user interaction | [`/weather-orchestrator`](../.claude/commands/weather-orchestrator.md) |
|
||||
| **Agent** | Fetches data with preloaded skill (agent skill) | [`weather-agent`](../.claude/agents/weather-agent.md) with [`weather-fetcher`](../.claude/skills/weather-fetcher/SKILL.md) |
|
||||
| **Skill** | Creates output independently (skill) | [`weather-svg-creator`](../.claude/skills/weather-svg-creator/SKILL.md) |
|
||||
|
||||
Reference in New Issue
Block a user