Skip to content
Get packs

Weather SVG Card Creator

Turns a given Dubai temperature into an SVG weather card and a markdown summary file

Source Download skill
Repository
shanraisshan/claude-code-best-practice
Stars
68,452
Licence
MIT
Files
3 files

What it does

Once installed, when the agent is given a temperature and unit for Dubai, it builds a small SVG image (a weather card) using a fixed template and saves it as weather.svg, then writes a short markdown summary file next to it. The skill does not look up weather itself; it uses the value it is handed. It is mainly a demo of a multi-step file-output workflow.

Great for

  • Developers exploring how agent skills read templates and write files
  • People who want a simple, fixed-format SVG weather card generated from a known temperature
  • Anyone studying the example skills in the claude-code-best-practice repository

Skip it if

  • Getting live or current weather: the skill explicitly does not fetch data, and it is hard-coded to Dubai, UAE (reason: it cannot answer other locations or real-time forecasts)
  • Production weather reporting or any use where accuracy of the temperature matters (reason: it trusts whatever value the caller supplies without checking it)
  • Projects where files must not be written into a folder named orchestration-workflow/ without review (reason: it overwrites weather.svg and output.md there)

Try asking

  • “Create a weather card for Dubai showing 38 degrees Celsius”
  • “Make an SVG weather summary for Dubai at 101 Fahrenheit and update the output markdown”
  • “Generate the Dubai weather SVG card from the temperature the orchestrator passed in”
Step-by-step guide: how to use Weather SVG Card CreatorInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the MIT licence and an attribution note.

    weather-svg-creator.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip weather-svg-creator.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip weather-svg-creator.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Provide both the numeric temperature and the unit (Celsius or Fahrenheit) so the card is labelled correctly
  • Check the generated weather.svg in a browser or image viewer, since SVG validity is only stated as a rule, not verified by any script
  • Treat it as a template to adapt: edit reference.md if you want a different location or layout

What's inside

  • examples.md
  • reference.md
  • SKILL.md

Redistributed unmodified from shanraisshan/claude-code-best-practice under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.