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

refactor weather-svg-creator skill to use reference files per official best practice

Browse Source 
Split monolithic SKILL.md into three files: concise SKILL.md with overview
and navigation, reference.md with SVG template and design specs, and
examples.md with Celsius/Fahrenheit input/output pairs. Follows the
progressive disclosure pattern from Claude Code docs.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Shayan Rais
2026-03-12 16:07:35 +05:00
parent 798c2aac2b
commit e0508e3362
3 changed files with 154 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.claude/skills/weather-svg-creator/SKILL.md
+13 -54
View File
@@ -5,66 +5,25 @@ description: Creates an SVG weather card showing the current temperature for Dub
# Weather SVG Creator Skill # Weather SVG Creator Skill
This skill creates a visual SVG weather card and writes the output files. Creates a visual SVG weather card for Dubai, UAE and writes the output files.
## Task ## Task
Create an SVG weather card displaying the temperature for Dubai, UAE, and write it along with a summary to output files. You will receive a temperature value and unit (Celsius or Fahrenheit) from the calling context. Create an SVG weather card and write both the SVG and a markdown summary.
## Instructions ## Instructions
You will receive the temperature value and unit (Celsius or Fahrenheit) from the calling context. 1. **Create SVG** — Use the SVG template from [reference.md](reference.md), replacing placeholders with actual values
2. **Write SVG file** — Read then write to `orchestration-workflow/weather.svg`
3. **Write summary** — Read then write to `orchestration-workflow/output.md` using the markdown template from [reference.md](reference.md)
### 1. Create SVG Weather Card ## Rules
Generate a clean SVG weather card with the following structure: - Use the exact temperature value and unit provided — do not re-fetch or modify
- The SVG must be self-contained and valid
```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 160" width="300" height="160">
<rect width="300" height="160" rx="12" fill="#1a1a2e"/>
<text x="150" y="45" text-anchor="middle" fill="#8892b0" font-family="system-ui" font-size="14">Unit: [Celsius/Fahrenheit]</text>
<text x="150" y="100" text-anchor="middle" fill="#ccd6f6" font-family="system-ui" font-size="42" font-weight="bold">[value]°[C/F]</text>
<text x="150" y="140" text-anchor="middle" fill="#64ffda" font-family="system-ui" font-size="16">Dubai, UAE</text>
</svg>
```
Replace `[Celsius/Fahrenheit]`, `[value]`, and `[C/F]` with actual values.
### 2. Write SVG File
First, read the existing `orchestration-workflow/weather.svg` file (if it exists). Then write the SVG content to `orchestration-workflow/weather.svg`.
### 3. Write Output Summary
First, read the existing `orchestration-workflow/output.md` file (if it exists). Then write to `orchestration-workflow/output.md`:
```markdown
# Weather Result
## Temperature
[value]°[C/F]
## Location
Dubai, UAE
## Unit
[Celsius/Fahrenheit]
## SVG Card
![Weather Card](weather.svg)
```
## Expected Input
Temperature value and unit from the weather-agent:
```
Temperature: [X]°[C/F]
Unit: [Celsius/Fahrenheit]
```
## Notes
- Use the exact temperature value and unit provided - do not re-fetch or modify
- The SVG should be a self-contained, valid SVG file
- Keep the design minimal and clean
- Both output files go in the `orchestration-workflow/` directory - Both output files go in the `orchestration-workflow/` directory
## Additional resources
- For SVG template, output template, and design specs, see [reference.md](reference.md)
- For example input/output pairs, see [examples.md](examples.md)
.claude/skills/weather-svg-creator/examples.md
+79
View File
@@ -0,0 +1,79 @@
# Weather SVG Creator — Examples
## Example 1: Celsius
### Input
```
Temperature: 26.2°C
Unit: Celsius
```
### SVG Output (`orchestration-workflow/weather.svg`)
```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 160" width="300" height="160">
<rect width="300" height="160" rx="12" fill="#1a1a2e"/>
<text x="150" y="45" text-anchor="middle" fill="#8892b0" font-family="system-ui" font-size="14">Unit: Celsius</text>
<text x="150" y="100" text-anchor="middle" fill="#ccd6f6" font-family="system-ui" font-size="42" font-weight="bold">26.2°C</text>
<text x="150" y="140" text-anchor="middle" fill="#64ffda" font-family="system-ui" font-size="16">Dubai, UAE</text>
</svg>
```
### Markdown Output (`orchestration-workflow/output.md`)
```markdown
# Weather Result
## Temperature
26.2°C
## Location
Dubai, UAE
## Unit
Celsius
## SVG Card
![Weather Card](weather.svg)
```
---
## Example 2: Fahrenheit
### Input
```
Temperature: 79.2°F
Unit: Fahrenheit
```
### SVG Output (`orchestration-workflow/weather.svg`)
```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 160" width="300" height="160">
<rect width="300" height="160" rx="12" fill="#1a1a2e"/>
<text x="150" y="45" text-anchor="middle" fill="#8892b0" font-family="system-ui" font-size="14">Unit: Fahrenheit</text>
<text x="150" y="100" text-anchor="middle" fill="#ccd6f6" font-family="system-ui" font-size="42" font-weight="bold">79.2°F</text>
<text x="150" y="140" text-anchor="middle" fill="#64ffda" font-family="system-ui" font-size="16">Dubai, UAE</text>
</svg>
```
### Markdown Output (`orchestration-workflow/output.md`)
```markdown
# Weather Result
## Temperature
79.2°F
## Location
Dubai, UAE
## Unit
Fahrenheit
## SVG Card
![Weather Card](weather.svg)
```
.claude/skills/weather-svg-creator/reference.md
+62
View File
@@ -0,0 +1,62 @@
# Weather SVG Creator — Reference
## SVG Template
```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 160" width="300" height="160">
<rect width="300" height="160" rx="12" fill="#1a1a2e"/>
<text x="150" y="45" text-anchor="middle" fill="#8892b0" font-family="system-ui" font-size="14">Unit: [Celsius/Fahrenheit]</text>
<text x="150" y="100" text-anchor="middle" fill="#ccd6f6" font-family="system-ui" font-size="42" font-weight="bold">[value]°[C/F]</text>
<text x="150" y="140" text-anchor="middle" fill="#64ffda" font-family="system-ui" font-size="16">Dubai, UAE</text>
</svg>
```
### Placeholders
| Placeholder | Replace with | Example |
|-------------|-------------|---------|
| `[Celsius/Fahrenheit]` | Full unit name from input | `Celsius` |
| `[value]` | Numeric temperature from input | `26.2` |
| `[C/F]` | Unit abbreviation | `C` or `F` |
### Design Specs
| Property | Value |
|----------|-------|
| Dimensions | 300 x 160 px |
| Corner radius | 12 px |
| Background | `#1a1a2e` (dark navy) |
| Unit label | `#8892b0` (muted blue), 14px |
| Temperature | `#ccd6f6` (light blue), 42px bold |
| Location | `#64ffda` (teal accent), 16px |
| Font | `system-ui` |
| All text | Centered (`text-anchor="middle"` at x=150) |
---
## Output Markdown Template
```markdown
# Weather Result
## Temperature
[value]°[C/F]
## Location
Dubai, UAE
## Unit
[Celsius/Fahrenheit]
## SVG Card
![Weather Card](weather.svg)
```
---
## Output Paths
| File | Path |
|------|------|
| SVG card | `orchestration-workflow/weather.svg` |
| Markdown summary | `orchestration-workflow/output.md` |