Manim Video Production
browser-use/video-use
Produces math and technical explainer videos with Manim Community Edition: concept animations, equation derivations, algorithm walkthroughs and data stories.
Draws an SVG weather card for Dubai from a temperature and unit passed in by the caller, then writes it with a markdown summary into the orchestration-workflow folder.
Install Weather SVG Card Creator
$ npx skills add shanraisshan/claude-code-best-practice --skill weather-svg-creator -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install shanraisshan/claude-code-best-practice weather-svg-creator --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/shanraisshan/claude-code-best-practice.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/weather-svg-creator .claude/skills/weather-svg-creator && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "weather-svg-creator" agent skill from https://github.com/shanraisshan/claude-code-best-practice/tree/main/.claude/skills/weather-svg-creator into .claude/skills/weather-svg-creator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "weather-svg-creator", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/shanraisshan/claude-code-best-practice/tree/main/.claude/skills/weather-svg-creatorType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add shanraisshan/claude-code-best-practice --skill weather-svg-creator -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install shanraisshan/claude-code-best-practice weather-svg-creator --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/shanraisshan/claude-code-best-practice.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/weather-svg-creator .agents/skills/weather-svg-creator && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "weather-svg-creator" agent skill from https://github.com/shanraisshan/claude-code-best-practice/tree/main/.claude/skills/weather-svg-creator into .agents/skills/weather-svg-creator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "weather-svg-creator", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add shanraisshan/claude-code-best-practice --skill weather-svg-creator -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install shanraisshan/claude-code-best-practice weather-svg-creator --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/shanraisshan/claude-code-best-practice.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/weather-svg-creator .cursor/skills/weather-svg-creator && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "weather-svg-creator" agent skill from https://github.com/shanraisshan/claude-code-best-practice/tree/main/.claude/skills/weather-svg-creator into .cursor/skills/weather-svg-creator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "weather-svg-creator", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/shanraisshan/claude-code-best-practice.git --path .claude/skills/weather-svg-creator--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add shanraisshan/claude-code-best-practice --skill weather-svg-creator -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install shanraisshan/claude-code-best-practice weather-svg-creator --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/shanraisshan/claude-code-best-practice.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/weather-svg-creator .gemini/skills/weather-svg-creator && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "weather-svg-creator" agent skill from https://github.com/shanraisshan/claude-code-best-practice/tree/main/.claude/skills/weather-svg-creator into .gemini/skills/weather-svg-creator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "weather-svg-creator", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install shanraisshan/claude-code-best-practice weather-svg-creatorInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add shanraisshan/claude-code-best-practice --skill weather-svg-creator -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/shanraisshan/claude-code-best-practice.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/weather-svg-creator .github/skills/weather-svg-creator && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "weather-svg-creator" agent skill from https://github.com/shanraisshan/claude-code-best-practice/tree/main/.claude/skills/weather-svg-creator into .github/skills/weather-svg-creator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "weather-svg-creator", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add shanraisshan/claude-code-best-practice --skill weather-svg-creator -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install shanraisshan/claude-code-best-practice weather-svg-creator --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/shanraisshan/claude-code-best-practice.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/weather-svg-creator .opencode/skills/weather-svg-creator && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "weather-svg-creator" agent skill from https://github.com/shanraisshan/claude-code-best-practice/tree/main/.claude/skills/weather-svg-creator into .opencode/skills/weather-svg-creator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "weather-svg-creator", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
weather-svg-creator- GitHub stars
- 67k
- Token cost
- ~310 tokens
- SKILL.md length
- 133 words
- Files
- 3
- Skills in repo
- 8
- Repo updated
- First seen
- Licence
- MIT
At a glance
Draws an SVG weather card for Dubai from a temperature and unit passed in by the caller, then writes it with a markdown summary into the orchestration-workflow folder.
- Works in 3 steps: Create SVG — Use the SVG template from… → Write SVG file — Read then write to… → Write summary — Read then write to…
- Rendering a weather card from a temperature another step already fetched
- SKILL.md covers Task, Instructions, Rules and Additional resources
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
The skill receives a temperature value and a unit, Celsius or Fahrenheit, from the calling context. It fills in the SVG template from `reference.md`, writes the result to `orchestration-workflow/weather.svg`, and writes a markdown summary to `orchestration-workflow/output.md` using the template in the same reference file. An examples file shows input and output pairs.
Rules keep it narrow: the exact value and unit supplied must be used without re-fetching or changing them, the SVG has to be self-contained and valid, and both files go in the `orchestration-workflow` directory. It does not look up the weather itself.
When your agent uses it
- Rendering a weather card from a temperature another step already fetched
- Producing a simple SVG and matching markdown summary as part of a multi-step workflow
Example prompts
- “Make the weather card for Dubai at 38 degrees Celsius.”
- “Create the SVG and output.md for a temperature of 100 Fahrenheit.”
Workflow steps
3 steps, taken from the first numbered list in SKILL.md.
- Create SVG — Use the SVG template from reference.md, replacing placeholders with actual values
- Write SVG file — Read then write to orchestration-workflow/weather.svg
- Write summary — Read then write to orchestration-workflow/output.md using the markdown template from reference.md
What it can do on your machine
Read from SKILL.md and the folder at commit 8a831a0. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Weather SVG Card Creator loads about 310 tokens when it runs. Until then it costs about 47 tokens; SKILL.md has 133 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from shanraisshan/claude-code-best-practice at commit 8a831a0, republished under its MIT licence (© shanraisshan). 133 words, ~310 tokens.
Download SKILL.mdSave it as
.claude/skills/weather-svg-creator/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.- name
- weather-svg-creator
- description
- 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.
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
- Create SVG — Use the SVG template from reference.md, replacing placeholders with actual values
- Write SVG file — Read then write to
orchestration-workflow/weather.svg - Write summary — Read then write to
orchestration-workflow/output.mdusing 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
© shanraisshan, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 2 other files in .claude/skills/weather-svg-creator of shanraisshan/claude-code-best-practice.
- SKILL.md
- examples.md
- reference.md
Open the folder on GitHubat commit 8a831a0
Compare with similar skills
Weather SVG Card Creator next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Weather SVG Card Creator this skillshanraisshan/claude-code-best-practice | 67k | — | ~310 | Automated safety check: Pass | MIT | |
| Manim Video Productionbrowser-use/video-use | 29k | 6 repos | ~3k | Automated safety check: Pass | MIT | |
| Algorithmic Art with p5.jsanthropics/skills | 180k | 38 repos | ~4.9k | Automated safety check: Pass | Apache-2.0 | |
| Canvas Designanthropics/skills | 180k | 52 repos | ~3k | Automated safety check: Pass | Apache-2.0 | |
| Brand and Design Toolkitnextlevelbuilder/ui-ux-pro-max-skill | 135k | 1 repos | ~3.5k | Automated safety check: Pass | MIT | |
| HyperFrames Animationheygen-com/hyperframes | 60k | 3 repos | ~2.1k | Automated safety check: Pass | Apache-2.0 |
Similar skills
- Official
Algorithmic Art with p5.js
anthropics/skills
Creates original generative art in two steps: a written algorithmic philosophy, then a p5.js sketch with seeded randomness and an interactive viewer for exploring parameters.
- Official
Canvas Design
anthropics/skills
Creates original posters and static art as PNG or PDF by first writing a short design philosophy, then expressing it visually on a canvas.
Brand and Design Toolkit
nextlevelbuilder/ui-ux-pro-max-skill
Bundles design tasks behind one skill: brand identity, tokens, UI styling, logos, corporate identity mockups, slides, banners, icons and social images.
HyperFrames Animation
heygen-com/hyperframes
Collects motion rules, scene blueprints, transitions and runtime adapters for HyperFrames video compositions, with GSAP as the default animation runtime.
- Official
Slack GIF Creator
anthropics/skills
Provides Slack size and frame limits, Python animation helpers and validators for building animated GIFs sized for emoji and messages.
More from shanraisshan/claude-code-best-practice
All 8 skills in this repoPakistan Time Display
shanraisshan/claude-code-best-practice
Display the current time in Pakistan Standard Time (PKT, UTC+5). Use when the user asks for the current time, Pakistan time, or PKT.
HTML Presentation Structure Guide
shanraisshan/claude-code-best-practice
Documents how a single-file HTML slide deck is built: slide markup, the four-level journey bar, navigation and the renumbering rules after edits.
Presentation Styling Reference
shanraisshan/claude-code-best-practice
Reference for the CSS classes, HTML slide patterns and code-block highlighting spans used in a project's presentation/index.html slide deck.
Vibe to Agentic Engineering Framework
shanraisshan/claude-code-best-practice
Explains the conceptual model behind a presentation on moving from unstructured vibe coding to fully configured agentic engineering, including its 4-level scoring system and slide conventions.
Dubai Weather Fetcher
shanraisshan/claude-code-best-practice
Reads the current temperature in Dubai from the Open-Meteo API with a single web fetch and returns it in Celsius or Fahrenheit.
Dubai Time Fetcher
shanraisshan/claude-code-best-practice
Instructions for fetching current Dubai time via bash command
Related
Categories
Questions about Weather SVG Card Creator
What does Weather SVG Card Creator do?
Draws an SVG weather card for Dubai from a temperature and unit passed in by the caller, then writes it with a markdown summary into the orchestration-workflow folder. The skill receives a temperature value and a unit, Celsius or Fahrenheit, from the calling context.md` using the template in the same reference file.
When should I use Weather SVG Card Creator?
Weather SVG Card Creator fits situations like: rendering a weather card from a temperature another step already fetched; producing a simple SVG and matching markdown summary as part of a multi-step workflow.
How do I install Weather SVG Card Creator in Claude Code?
Run `npx skills add shanraisshan/claude-code-best-practice --skill weather-svg-creator -a claude-code`. Or copy the skill folder (.claude/skills/weather-svg-creator in shanraisshan/claude-code-best-practice) into .claude/skills/weather-svg-creator in your project. Claude Code loads it when a task matches its description.
How do I install Weather SVG Card Creator in Codex?
Run `npx skills add shanraisshan/claude-code-best-practice --skill weather-svg-creator -a codex`. Or copy the skill folder (.claude/skills/weather-svg-creator in shanraisshan/claude-code-best-practice) into .agents/skills/weather-svg-creator in your project. Codex loads it when a task matches its description.
Can I use Weather SVG Card Creator in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add shanraisshan/claude-code-best-practice --skill weather-svg-creator -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/weather-svg-creator, .gemini/skills/weather-svg-creator, .github/skills/weather-svg-creator and .opencode/skills/weather-svg-creator in your project.
What does Weather SVG Card Creator need to run?
SKILL.md names no scripts, command-line tools or credentials: Weather SVG Card Creator is instructions for the agent only.
Does Weather SVG Card Creator access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Weather SVG Card Creator safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Weather SVG Card Creator use?
Weather SVG Card Creator is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Weather SVG Card Creator use?
About 310 tokens (SKILL.md is roughly 1.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Weather SVG Card Creator?
Skills that share tags, products or a category with Weather SVG Card Creator: Manim Video Production (browser-use/video-use, 29k stars), Algorithmic Art with p5.js (anthropics/skills, 180k stars), Canvas Design (anthropics/skills, 180k stars) and Brand and Design Toolkit (nextlevelbuilder/ui-ux-pro-max-skill, 135k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Weather SVG Card Creator?
shanraisshan (a GitHub user) maintains it in shanraisshan/claude-code-best-practice, which has 67,364 GitHub stars. The repository holds 8 skills in this directory. The repository was last updated on October 11, 2026.
Source: shanraisshan/claude-code-best-practice on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.