Mmcp.market

weather-svg-creator skill

by shanraisshan·shanraisshan/claude-code-best-practice·66k stars·MIT

Creates an SVG weather card showing the current temperature for Dubai. Writes the SVG to orchestration-workflow/weather.svg and updates orchestration-workflow/output.md.

A100/100content scan

Is the weather-svg-creator skill safe?

Clean: nothing in its files matched our rules. We read 3 files in the folder on 2026-09-28.

No findings.

Install the weather-svg-creator skill

A skill is a folder. Copy it into your agent's skills folder and the agent loads it when the task matches its description. 

git clone --depth 1 https://github.com/shanraisshan/claude-code-best-practice.git /tmp/claude-code-best-practice
mkdir -p ~/.claude/skills
cp -r /tmp/claude-code-best-practice/.claude/skills/weather-svg-creator ~/.claude/skills/weather-svg-creator
available in every project

In the Claude apps, zip the folder and upload it from the Skills settings. The folder on GitHub

The instructions your agent would load

SKILL.md as published, without the frontmatter. Read it on GitHub

Weather SVG Creator Skill

Creates a visual SVG weather card for Dubai, UAE and writes the output files.

Task

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

  1. Create SVG — Use the SVG template from 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

Rules

  • 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
  • For example input/output pairs, see examples.md

More skills from shanraisshan/claude-code-best-practice

  • Aagent-browserBrowser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction.
  • Apresentation-structureKnowledge about the presentation slide format, weight system, navigation, and section structure
  • Apresentation-stylingKnowledge about CSS classes, component patterns, and syntax highlighting in the presentation
  • Atime-fetcherInstructions for fetching current Dubai time via bash command
  • Atime-skillDisplay the current time in Pakistan Standard Time (PKT, UTC+5). Use when the user asks for the current time, Pakistan time, or PKT.
  • Atime-svg-creatorCreates an SVG time card showing the current time for Dubai. Writes the SVG to agent-teams/output/dubai-time.svg and updates agent-teams/output/output.md.
  • Avibe-to-agentic-frameworkThe conceptual framework behind the presentation — what "Vibe Coding to Agentic Engineering" means, why the journey is structured the way it is, and how every slide fits the narrative arc
  • Aweather-fetcherInstructions for fetching current weather temperature data for Dubai, UAE from Open-Meteo API

All agent skills → · MCP servers