gilles/claude-code-best-practice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[how to use][how to implement]

Browse Source
This commit is contained in:
Shayan Rais
2026-03-02 14:25:26 +05:00
parent 182ca334f0
commit 91c3c149c4
9 changed files with 102 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
!/command-skill-agent-flow.svg
+1 -1
View File
@@ -28,7 +28,7 @@
<text x="470" y="125" text-anchor="middle" fill="#666" font-family="system-ui" font-size="11">Task</text>
<!-- Agent Box -->
<rect x="513" y="72" width="240" height="126" rx="8" fill="#50B87D" stroke="#3DA066" stroke-width="2.5"/>
<rect x="513" y="72" width="240" height="126" rx="8" fill="#2BA5A5" stroke="#1E8F8F" stroke-width="2.5"/>
<text x="633" y="100" text-anchor="middle" fill="white" font-family="system-ui" font-size="16" font-weight="bold">Agent</text>
<text x="633" y="118" text-anchor="middle" fill="white" font-family="system-ui" font-size="12" opacity="0.85">agents/weather-agent</text>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

!/tags/how-to-implement.svg
+17
View File
@@ -0,0 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="20" role="img" aria-label="How to Implement">
<title>How to Implement</title>
<linearGradient id="s" x2="0" y2="100%">
<stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
<stop offset="1" stop-opacity=".1"/>
</linearGradient>
<clipPath id="r">
<rect width="120" height="20" rx="3" fill="#fff"/>
</clipPath>
<g clip-path="url(#r)">
<rect width="120" height="20" fill="#2ea44f"/>
<rect width="120" height="20" fill="url(#s)"/>
</g>
<g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="11">
<text x="60" y="14">How to Implement</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 730 B

!/tags/how-to-use.svg
+17
View File
@@ -0,0 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="20" role="img" aria-label="How to Use">
<title>How to Use</title>
<linearGradient id="s" x2="0" y2="100%">
<stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
<stop offset="1" stop-opacity=".1"/>
</linearGradient>
<clipPath id="r">
<rect width="72" height="20" rx="3" fill="#fff"/>
</clipPath>
<g clip-path="url(#r)">
<rect width="72" height="20" fill="#2ea44f"/>
<rect width="72" height="20" fill="url(#s)"/>
</g>
<g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="11">
<text x="36" y="14">How to Use</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 708 B

.claude/agents/weather-agent.md
+26 -5
View File
@@ -1,14 +1,35 @@
---
name: weather-agent
description: Use this agent PROACTIVELY when you need to fetch weather data for
Dubai, UAE. This agent fetches real-time temperature from wttr.in API
using its preloaded weather-fetcher skill.
tools: WebFetch, Read
description: Use this agent PROACTIVELY when you need to fetch weather data for Dubai, UAE. This agent fetches real-time temperature from wttr.in API using its preloaded weather-fetcher skill.
tools: WebFetch, Read, Write, Edit
model: sonnet
color: green
color: teal
maxTurns: 5
permissionMode: acceptEdits
memory: project
skills:
- weather-fetcher
hooks:
PreToolUse:
- matcher: ".*"
hooks:
- type: command
command: python3 ${CLAUDE_PROJECT_DIR}/.claude/hooks/scripts/hooks.py --agent=voice-hook-agent
timeout: 5000
async: true
PostToolUse:
- matcher: ".*"
hooks:
- type: command
command: python3 ${CLAUDE_PROJECT_DIR}/.claude/hooks/scripts/hooks.py --agent=voice-hook-agent
timeout: 5000
async: true
PostToolUseFailure:
- hooks:
- type: command
command: python3 ${CLAUDE_PROJECT_DIR}/.claude/hooks/scripts/hooks.py --agent=voice-hook-agent
timeout: 5000
async: true
---
# Weather Agent
README.md
+14 -26
View File
@@ -36,10 +36,9 @@ practice makes claude perfect
| [**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) |
| [**CLI Startup Flags**](https://code.claude.com/docs/en/cli-reference) | `claude [flags]` | [![Best Practice](!/tags/best-practice.svg)](best-practice/claude-cli-startup-flags.md) Command-line flags, subcommands, and environment variables for launching Claude Code |
| **AI Terms** | | [![Best Practice](!/tags/best-practice.svg)](https://github.com/shanraisshan/claude-code-codex-cursor-gemini/blob/main/reports/ai-terms.md) Agentic Engineering · Context Engineering · Vibe Coding |
| [**Best Practices**](https://code.claude.com/docs/en/best-practices) | | Official best practices · [Extend Claude Code](https://code.claude.com/docs/en/features-overview) |
> **Note:** Custom slash commands have been merged into skills. Files in `.claude/commands/` still work, but skills (`.claude/skills/`) are recommended as they support additional features like supporting files, invocation control, and subagent execution.
<a id="orchestration-workflow"></a>
## <a href="orchestration-workflow/orchestration-workflow.md"><img src="!/tags/orchestration-workflow-hd.svg" alt="Orchestration Workflow"></a>
@@ -58,6 +57,19 @@ Workflow orchestration using the **Command → Agent → Skill** pattern.
See [orchestration-workflow](orchestration-workflow/orchestration-workflow.md) for implementation details.
## DEVELOPMENT WORKFLOW
- [RPI](workflow/rpi/rpi-workflow.md) [![Implemented](!/tags/implemented.svg)](workflow/rpi/rpi-workflow.md)
- [Boris Feb26 workflow](https://x.com/bcherny/status/2017742741636321619)
- [Ralph plugin with sandbox](https://www.youtube.com/watch?v=eAtvoGlpeRU)
- [Human Layer RPI - Research Plan Implement](https://github.com/humanlayer/advanced-context-engineering-for-coding-agents/blob/main/ace-fca.md)
- [AgentOs - 2026 its overkill (Brian Casel)](https://www.youtube.com/watch?v=0hdFJA-ho3c)
- [Github Speckit](https://github.com/github/spec-kit)
- [GSD - Get Shit Done](https://github.com/glittercowboy/get-shit-done)
- [OpenSpec OPSX](https://github.com/Fission-AI/OpenSpec/blob/main/docs/opsx.md)
- [Superpower](https://github.com/obra/superpowers)
- [Andrej Karpathy Workflow](https://github.com/forrestchang/andrej-karpathy-skills)
- [Creator of Clawd Bot Workflow](https://www.youtube.com/watch?v=8lF7HmQ_RgY)
## MY EXPERIENCE
■ **Workflows**
@@ -95,21 +107,6 @@ See [orchestration-workflow](orchestration-workflow/orchestration-workflow.md) f
- [Humanlayer - Writing a good Claude.md](https://www.humanlayer.dev/blog/writing-a-good-claude-md)
- [Claude.md for larger monorepos - Boris Cherny on X](https://github.com/shanraisshan/claude-code-best-practice/blob/main/reports/claude-md-for-larger-mono-repos.md)
## WORKFLOWS
- [RPI](workflow/rpi/rpi-workflow.md)
- [Boris Feb26 workflow](https://x.com/bcherny/status/2017742741636321619)
- [Ralph plugin with sandbox](https://www.youtube.com/watch?v=eAtvoGlpeRU)
- [Human Layer RPI - Research Plan Implement](https://github.com/humanlayer/advanced-context-engineering-for-coding-agents/blob/main/ace-fca.md)
- [AgentOs - 2026 its overkill (Brian Casel)](https://www.youtube.com/watch?v=0hdFJA-ho3c)
- [Github Speckit](https://github.com/github/spec-kit)
- [GSD - Get Shit Done](https://github.com/glittercowboy/get-shit-done)
- [OpenSpec OPSX](https://github.com/Fission-AI/OpenSpec/blob/main/docs/opsx.md)
- [Superpower](https://github.com/obra/superpowers)
- [Andrej Karpathy Workflow](https://github.com/forrestchang/andrej-karpathy-skills)
- [Creator of Clawd Bot Workflow](https://www.youtube.com/watch?v=8lF7HmQ_RgY)
## CLAUDE CODE FEATURES INSPIRATION
@@ -117,15 +114,6 @@ See [orchestration-workflow](orchestration-workflow/orchestration-workflow.md) f
- [Claude Code Tasks - inspired by beats](https://www.reddit.com/r/ClaudeAI/comments/1qkjznp/anthropic_replaced_claude_codes_old_todos_with/) [Inspiration](https://github.com/steveyegge/beads)
- [Ralph Plugin](https://x.com/GeoffreyHuntley/status/2015031262692753449)
## AI TERMS
| | | | | |
|---|---|---|---|---|
| Agentic Engineering | AI Slop | Context Bloat | Context Engineering | Context Rot |
| Dumb Zone | Hallucination | Scaffolding | Orchestration | Vibe Coding |
[**See Complete List →**](https://github.com/shanraisshan/claude-code-codex-cursor-gemini/blob/main/reports/ai-terms.md)
## REPORTS
| Report | Description |
best-practice/claude-subagents.md
+1 -1
View File
@@ -161,7 +161,7 @@ Custom agents defined in `.claude/agents/` for this project:
| Agent | Model | Color | Tools | Skills | Memory |
|-------|-------|-------|-------|--------|--------|
| [`presentation-curator`](../.claude/agents/presentation-curator.md) | sonnet | magenta | Read, Write, Edit, Grep, Glob | presentation/vibe-to-agentic-framework, presentation/presentation-structure, presentation/presentation-styling | — |
| [`weather-agent`](../.claude/agents/weather-agent.md) | sonnet | green | WebFetch, Read | weather-fetcher | project |
| [`weather-agent`](../.claude/agents/weather-agent.md) | sonnet | teal | WebFetch, Read, Write, Edit | weather-fetcher | project |
| [`workflow-claude-subagents-agent`](../.claude/agents/workflows/best-practice/workflow-claude-subagents-agent.md) | opus | blue | All (inherited) | — | — |
---
implementation/claude-commands-implementation.md
+7 -1
View File
@@ -53,7 +53,7 @@ The command orchestrates the entire workflow: it asks the user for their tempera
---
## How to Use
## ![How to Use](../!/tags/how-to-use.svg)
```bash
$ claude
@@ -62,6 +62,12 @@ $ claude
---
## ![How to Implement](../!/tags/how-to-implement.svg)
Ask Claude to create one for you — it will generate the markdown file with YAML frontmatter and body in `.claude/commands/<name>.md`
---
<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.
implementation/claude-skills-implementation.md
+6 -20
View File
@@ -99,7 +99,7 @@ This is an **agent skill** — preloaded into the `weather-agent` at startup via
---
## How to Use
## ![How to Use](../!/tags/how-to-use.svg)
**Skill** — invoke directly via slash command:
```bash
@@ -107,27 +107,13 @@ $ 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>
## ![How to Implement](../!/tags/how-to-implement.svg)
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.
Ask Claude to create one for you — it will generate the markdown file with YAML frontmatter and body in `.claude/skills/my-skill/SKILL.md`
<p align="center">
<img src="../!/command-skill-agent-flow.svg" alt="Command Skill Agent Architecture Flow" width="100%">
</p>
# My Skill
| 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) |
Instructions for what the skill does.
```
implementation/claude-subagents-implementation.md
+13 -1
View File
@@ -58,7 +58,7 @@ The agent has one preloaded skill (`weather-fetcher`) that provides instructions
---
## How to Use
## ![How to Use](../!/tags/how-to-use.svg)
```bash
$ claude
@@ -67,6 +67,18 @@ $ claude
---
## ![How to Implement](../!/tags/how-to-implement.svg)
You can create an agent using the `/agents` command,
```bash
$ claude
> /agents
```
or ask Claude to create one for you — it will generate the markdown file with YAML frontmatter and body in `.claude/agents/<name>.md`
---
<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 agent is the **Agent** in the Command → Agent → Skill orchestration pattern. It receives the workflow from the `/weather-orchestrator` command and fetches temperature using its preloaded skill (`weather-fetcher`). The command then invokes the standalone `weather-svg-creator` skill to create the visual output.