diff --git a/.claude/settings.json b/.claude/settings.json index be61ace..86aeec5 100644 --- a/.claude/settings.json +++ b/.claude/settings.json @@ -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 ", + "pr": "Generated with [Claude Code](https://claude.ai/code)" + }, + "spinnerTipsEnabled": true, + "respectGitignore": true, + "env": { + "CLAUDE_AUTOCOMPACT_PCT_OVERRIDE": "80" + }, "enableAllProjectMcpServers": true, "disableAllHooks": false, "hooks": { diff --git a/README.md b/README.md index 33c3148..0bd5380 100644 --- a/README.md +++ b/README.md @@ -23,13 +23,14 @@ practice makes claude perfect | Feature | Location | Description | |---------|----------|-------------| -| [**Commands**](https://code.claude.com/docs/en/skills) | `.claude/commands/.md` | [![Best Practice](!/tags/best-practice.svg)](best-practice/claude-commands.md) [![Implemented](!/tags/implemented.svg)](.claude/commands/) Entry-point prompts for workflows — invoke with `/command-name` | +| [**Commands**](https://code.claude.com/docs/en/skills) | `.claude/commands/.md` | [![Best Practice](!/tags/best-practice.svg)](best-practice/claude-commands.md) [![Implemented](!/tags/implemented.svg)](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/.md` | [![Best Practice](!/tags/best-practice.svg)](best-practice/claude-subagents.md) [![Implemented](!/tags/implemented.svg)](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//SKILL.md` | [![Best Practice](!/tags/best-practice.svg)](best-practice/claude-commands.md#skills-frontmatter-fields) [![Implemented](!/tags/implemented.svg)](.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/` | [![Implemented](!/tags/implemented.svg)](.claude/hooks/) Deterministic scripts that run outside the agentic loop on specific events | +| [**Skills**](https://code.claude.com/docs/en/skills) | `.claude/skills//SKILL.md` | [![Best Practice](!/tags/best-practice.svg)](best-practice/claude-commands.md#skills-frontmatter-fields) [![Implemented](!/tags/implemented.svg)](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/` | [![Best Practice](!/tags/best-practice.svg)](https://github.com/shanraisshan/claude-code-voice-hooks) [![Implemented](!/tags/implemented.svg)](.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` | [![Implemented](!/tags/implemented.svg)](.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](!/tags/best-practice.svg)](best-practice/claude-settings.md) [![Implemented](!/tags/implemented.svg)](.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](!/tags/best-practice.svg)](best-practice/claude-settings.md) [![Implemented](!/tags/implemented.svg)](.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` | [![Best Practice](!/tags/best-practice.svg)](https://github.com/shanraisshan/claude-code-status-line) [![Implemented](!/tags/implemented.svg)](.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//memory/` | [![Implemented](!/tags/implemented.svg)](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) | diff --git a/best-practice/claude-commands.md b/best-practice/claude-commands.md index 7453925..f1407c6 100644 --- a/best-practice/claude-commands.md +++ b/best-practice/claude-commands.md @@ -1,7 +1,7 @@ # Commands Best Practice ![Last Updated](https://img.shields.io/badge/Last_Updated-Mar_2%2C_2026-white?style=flat&labelColor=555)
-[![Implemented](https://img.shields.io/badge/Implemented-2ea44f?style=flat)](../.claude/commands/) +[![Implemented](https://img.shields.io/badge/Implemented-2ea44f?style=flat)](../implementation/claude-commands-implementation.md) Complete reference for Claude Code commands — command definitions, frontmatter fields, and all built-in slash commands. diff --git a/implementation/claude-commands-implementation.md b/implementation/claude-commands-implementation.md new file mode 100644 index 0000000..f395c7b --- /dev/null +++ b/implementation/claude-commands-implementation.md @@ -0,0 +1,77 @@ +# Commands Implementation + +![Last Updated](https://img.shields.io/badge/Last_Updated-Mar_02%2C_2026-white?style=flat&labelColor=555) + + + + + + +
← Back to Claude Code Best PracticeClaude
+ +--- + +Implemented + +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 +``` + +--- + +Orchestration Workflow + +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. + +

+ Command Skill Agent Architecture Flow +

+ +| 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) | diff --git a/implementation/claude-skills-implementation.md b/implementation/claude-skills-implementation.md new file mode 100644 index 0000000..23d4614 --- /dev/null +++ b/implementation/claude-skills-implementation.md @@ -0,0 +1,133 @@ +# Skills Implementation + +![Last Updated](https://img.shields.io/badge/Last_Updated-Mar_02%2C_2026-white?style=flat&labelColor=555) + + + + + + +
← Back to Claude Code Best PracticeClaude
+ +--- + +Implemented + +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 +--- +``` + +--- + +Orchestration Workflow + +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. + +

+ Command Skill Agent Architecture Flow +

+ +| 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) | diff --git a/implementation/claude-subagents-implementation.md b/implementation/claude-subagents-implementation.md index df94f9b..cb5fc2e 100644 --- a/implementation/claude-subagents-implementation.md +++ b/implementation/claude-subagents-implementation.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) |