diff --git a/.claude/skills/weather-svg-creator/SKILL.md b/.claude/skills/weather-svg-creator/SKILL.md index de7d4f3..7b0acdf 100644 --- a/.claude/skills/weather-svg-creator/SKILL.md +++ b/.claude/skills/weather-svg-creator/SKILL.md @@ -5,66 +5,25 @@ description: Creates an SVG weather card showing the current temperature for Dub # 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 -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 -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: - -```svg - - - Unit: [Celsius/Fahrenheit] - [value]°[C/F] - Dubai, UAE - -``` - -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 +- Use the exact temperature value and unit provided — do not re-fetch or modify +- The SVG must be self-contained and valid - 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) diff --git a/.claude/skills/weather-svg-creator/examples.md b/.claude/skills/weather-svg-creator/examples.md new file mode 100644 index 0000000..8ce7141 --- /dev/null +++ b/.claude/skills/weather-svg-creator/examples.md @@ -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 + + + Unit: Celsius + 26.2°C + Dubai, UAE + +``` + +### 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 + + + Unit: Fahrenheit + 79.2°F + Dubai, UAE + +``` + +### Markdown Output (`orchestration-workflow/output.md`) + +```markdown +# Weather Result + +## Temperature +79.2°F + +## Location +Dubai, UAE + +## Unit +Fahrenheit + +## SVG Card +![Weather Card](weather.svg) +``` diff --git a/.claude/skills/weather-svg-creator/reference.md b/.claude/skills/weather-svg-creator/reference.md new file mode 100644 index 0000000..738d4b4 --- /dev/null +++ b/.claude/skills/weather-svg-creator/reference.md @@ -0,0 +1,62 @@ +# Weather SVG Creator — Reference + +## SVG Template + +```svg + + + Unit: [Celsius/Fahrenheit] + [value]°[C/F] + Dubai, UAE + +``` + +### 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` |