How do I install the Weather Svg Creator skill?

Run npx skillmds@latest add shanraisshan/weather-svg-creator in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Weather Svg Creator skill do?

Weather Svg Creator It is listed under Coding & Dev Tools, AI & ML on SkillMD.

Is Weather Svg Creator safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Weather Svg Creator?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Weather Svg Creator free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Weather Svg Creator?

shanraisshan (@shanraisshan) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Weather Svg Creator by shanraisshan

Name: Weather Svg Creator
Author: shanraisshan

File contents

Weather SVG Creator Skill

This skill creates an SVG weather card from provided temperature data.

Task

Create an SVG weather card displaying the temperature for a given city and write it to the output files.

Instructions

You will receive the temperature value, unit (Celsius or Fahrenheit), and city name from the calling context.

1. Create SVG Weather Card

Generate a clean SVG weather card with the following structure:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 200" width="400" height="200">
  <rect width="400" height="200" rx="12" fill="#1a1a2e"/>
  <text x="200" y="50" text-anchor="middle" fill="#e0e0e0" font-family="system-ui" font-size="16">[City Name]</text>
  <text x="200" y="110" text-anchor="middle" fill="white" font-family="system-ui" font-size="48" font-weight="bold">[value]°[C/F]</text>
  <text x="200" y="150" text-anchor="middle" fill="#888" font-family="system-ui" font-size="12">[Current date and time]</text>
  <text x="200" y="185" text-anchor="middle" fill="#555" font-family="system-ui" font-size="10">Weather data from Open-Meteo API</text>
</svg>

Replace [value], [C/F], [City Name] with actual values from the input.

2. Write Output Files

Write the SVG content to orchestration-workflow/weather.svg.

Also write a markdown summary to orchestration-workflow/output.md:

# Weather Report

![Weather Card](weather.svg)

**Location**: [City Name]
**Temperature**: [value]°[C/F]
**Fetched At**: [Current date and time in ISO 8601 format]

> Weather data provided by [Open-Meteo API](https://open-meteo.com/)

Create the orchestration-workflow/ directory if it does not exist
Overwrite any existing content

Expected Input

Temperature value, unit, and city from the calling agent:

Temperature: [X]°[C/F]
City: [City Name]
Unit: [Celsius/Fahrenheit]

Expected Output

Two files written:

orchestration-workflow/weather.svg — SVG weather card
orchestration-workflow/output.md — Markdown report embedding the SVG

Notes

Use the exact temperature value and unit provided — do not re-fetch or modify the data
Keep the SVG design minimal and clean
Include a timestamp so the report is traceable
Output files go in the orchestration-workflow/ directory

---name: weather-svg-creatordescription: Weather Svg Creator---# Weather SVG Creator SkillThis skill creates an SVG weather card from provided temperature data.## TaskCreate an SVG weather card displaying the temperature for a given city and write it to the output files.## InstructionsYou will receive the temperature value, unit (Celsius or Fahrenheit), and city name from the calling context.### 1. Create SVG Weather CardGenerate a clean SVG weather card with the following structure:```svg<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 200" width="400" height="200"> <rect width="400" height="200" rx="12" fill="#1a1a2e"/> <text x="200" y="50" text-anchor="middle" fill="#e0e0e0" font-family="system-ui" font-size="16">[City Name]</text> <text x="200" y="110" text-anchor="middle" fill="white" font-family="system-ui" font-size="48" font-weight="bold">[value]°[C/F]</text> <text x="200" y="150" text-anchor="middle" fill="#888" font-family="system-ui" font-size="12">[Current date and time]</text> <text x="200" y="185" text-anchor="middle" fill="#555" font-family="system-ui" font-size="10">Weather data from Open-Meteo API</text></svg>```Replace `[value]`, `[C/F]`, `[City Name]` with actual values from the input.### 2. Write Output FilesWrite the SVG content to `orchestration-workflow/weather.svg`.Also write a markdown summary to `orchestration-workflow/output.md`:```markdown# Weather Report![Weather Card](weather.svg)**Location**: [City Name]**Temperature**: [value]°[C/F]**Fetched At**: [Current date and time in ISO 8601 format]> Weather data provided by [Open-Meteo API](https://open-meteo.com/)```- Create the `orchestration-workflow/` directory if it does not exist- Overwrite any existing content## Expected InputTemperature value, unit, and city from the calling agent:```Temperature: [X]°[C/F]City: [City Name]Unit: [Celsius/Fahrenheit]```## Expected OutputTwo files written:- `orchestration-workflow/weather.svg` — SVG weather card- `orchestration-workflow/output.md` — Markdown report embedding the SVG## Notes- Use the exact temperature value and unit provided — do not re-fetch or modify the data- Keep the SVG design minimal and clean- Include a timestamp so the report is traceable- Output files go in the `orchestration-workflow/` directory

Frequently asked questions

Weather Svg Creator