Guide · Agent skill
How to use the Weather SVG Card Creator agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The weather-svg-creator skill is a small agent skill that makes an AI agent turn a temperature you supply into a fixed-format SVG weather card for Dubai, UAE, plus a short markdown summary file. It is written for people who want to see how an agent skill reads a template and writes files. After this guide you will know what the skill does and does not do, how to install it, how to trigger it, and what files it creates.
Weather SVG Card Creatorshanraisshan/claude-code-best-practice · MIT Download the skill Quick start
- 1Download the ZIP. Download the weather-svg-creator skill as a ZIP from the directory page.
- 2Unzip into a skills folder. Unzip it into ~/.claude/skills/ for personal use, or into .claude/skills/ in your project.
- 3Or upload in the Claude apps. Upload the ZIP under Settings → Capabilities → Skills if you use the Claude apps.
- 4Make sure file permissions are set. Allow the agent to read and write in the orchestration-workflow/ directory.
- 5Ask with a temperature and unit. Request a Dubai weather card and include the value and unit, such as 26.2°C.
- 6Check the two output files. Open orchestration-workflow/weather.svg and output.md to confirm the values are correct.
What the weather-svg-creator skill does
An agent skill is a folder containing a SKILL.md file with instructions that an agent such as Claude Code can load and follow. This skill tells the agent to take a temperature value and unit (Celsius or Fahrenheit) from the calling context, build an SVG image from a template, and save it.
The skill does not look up weather. It does not fetch data or check the number it is given. It uses the exact value it receives and is hard-coded to Dubai, UAE. Its main purpose is as a demo of a multi-step file-output workflow.
- Input: a temperature value and a unit from the calling context
- Output 1: orchestration-workflow/weather.svg, a 300 x 160 px card
- Output 2: orchestration-workflow/output.md, a markdown summary that embeds the SVG
Install the weather-svg-creator skill
Download the skill as a ZIP from the directory page. Then choose one of the two install routes below.
For a personal install, unzip the folder into ~/.claude/skills/. For a single project, unzip it into the project's .claude/skills/ folder. Either way, the skill folder should contain SKILL.md, reference.md and examples.md.
If you use the Claude apps instead, upload the ZIP under Settings → Capabilities → Skills.
- Personal: ~/.claude/skills/
- Project only: .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload the ZIP
Trigger the skill with a natural request
The skill's description is about creating a Dubai weather SVG card from a current temperature, so ask for that in plain terms and include the number and unit. The skill expects a temperature value and unit to be supplied, so the request must carry them.
Because the skill will not fetch the temperature, give the value yourself. A request that only asks for the weather in another city will not match what this skill does.
- "Make a weather SVG card for Dubai. Temperature: 26.2°C."
- "Create the Dubai weather card using 79.2°F, Fahrenheit."
- "Update the Dubai weather SVG with 30°C and write the summary."
Read the example input and output
The examples file shows a Celsius case. The input is a temperature of 26.2°C with the unit Celsius. The SVG places the unit label at the top, the value in large bold text, and Dubai, UAE at the bottom on a dark background.
The markdown summary lists the temperature, location, unit and embeds the card with an image link to weather.svg. Use these examples to check that your output matches the expected layout.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 160" width="300" height="160">Safety notes: files, scripts and network
The skill runs no scripts and uses no network access. Its only side effects are file writes. It writes into the orchestration-workflow/ directory and overwrites weather.svg and output.md there if they already exist.
Because the skill trusts the value it is given, check the temperature and unit before you rely on the output. Do not use the card for production weather reporting or anywhere the accuracy of the temperature matters. Review the target folder before running it in a project where those files must not be changed.
- Requires file read and write permission in orchestration-workflow/
- Runs scripts: no
- Uses network: no
- Overwrites weather.svg and output.md in that folder
Tips for getting reliable results
Give the value and unit explicitly in every request, using either Celsius or Fahrenheit. Keep the number in the format you want shown, such as 26.2 rather than a rounded guess.
Read reference.md if you want to see the exact SVG template, placeholders and design specs. Since the skill replaces placeholders such as the value and unit abbreviation, the template is the place to check how the card will look.
- State the unit in every request
- Check the output files after each run, since they are overwritten
- Use reference.md to confirm the template and placeholders
What people use it for
- Demonstrating how an agent skill reads a template and writes multiple output files
- Generating a fixed-format SVG card from a temperature you already know
- Studying the example skills in the claude-code-best-practice repository
- Producing a markdown summary that embeds an SVG image for a demo page
Frequently asked questions
How do I install the weather-svg-creator skill?
Download the skill ZIP from the directory page and unzip it into ~/.claude/skills/ for personal use or into .claude/skills/ in a project. In the Claude apps, you can instead upload the ZIP under Settings → Capabilities → Skills.
Is the weather-svg-creator skill free to use?
The skill is released under the MIT licence, as listed on its directory page. Check the licence file in the source repository for the full terms.
Does the skill fetch live weather for my city?
No. The skill does not fetch weather data. It is hard-coded to Dubai, UAE and uses the temperature and unit that the calling context provides.
What do I need to run it?
You need an agent that supports SKILL.md skills, such as Claude Code, read and write permission in the orchestration-workflow/ directory, and a calling context that supplies a temperature value and unit. The skill runs no scripts and uses no network.
Will it overwrite my files?
Yes, it writes weather.svg and output.md into orchestration-workflow/ and overwrites them if they exist. Back up or review that folder first if those files matter to your project.
How does it compare to a live weather skill?
This skill only formats a temperature you supply, so it cannot give current or forecast conditions. If you need live data for any location, look for a skill that is designed to retrieve weather, and use this one for fixed-format card output or as a file-workflow example.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are learning how agent skills read templates and write files, or if you want a simple fixed-format Dubai weather card from a temperature you already have. Pick something else if you need live or forecast weather, other locations, or any output where the accuracy of the temperature must be verified.
Download the skill