Guide · Agent skill
How to use the Dubai Time SVG Creator agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The time-svg-creator skill is a small agent skill from the agent-teams example in the shanraisshan/claude-code-best-practice repository. It tells an agent to take a time, timezone and formatted time string supplied by a calling process, place them into a fixed SVG template for Dubai, UAE, and save the result. This guide explains what an agent skill is, how to install this one, how to trigger it, and where its limits are.
Dubai Time SVG Creatorshanraisshan/claude-code-best-practice · MIT Download the skill Quick start
- 1Download the ZIP. Get the time-svg-creator skill ZIP from the page where you found this guide.
- 2Unzip the folder. Extract the time-svg-creator folder so that SKILL.md sits inside it.
- 3Place the skill. Move the folder to ~/.claude/skills/ for personal use, or to .claude/skills/ in a project.
- 4Or upload in the Claude apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the ZIP.
- 5Provide the three fields. Make sure your caller supplies time, timezone and formatted values.
- 6Make a request. Ask the agent to create the Dubai time card using those values.
- 7Check the outputs. Open agent-teams/output/dubai-time.svg and agent-teams/output/output.md.
What is an agent skill and what does this one do?
An agent skill is a folder that holds a SKILL.md file. The SKILL.md file gives an AI agent a name, a description, the tools it may use, and step-by-step instructions for one kind of task. The agent reads the skill when the task matches its description.
The time-svg-creator skill is a narrow, template-driven task. It expects three fields from the calling context: time, timezone and formatted. It fills an SVG template with those values, writes the image to agent-teams/output/dubai-time.svg, and writes a markdown summary to agent-teams/output/output.md. Its allowed tools are Write and Read.
- Input: time, timezone and formatted values supplied by the caller
- Output: agent-teams/output/dubai-time.svg and agent-teams/output/output.md
- Layout: one fixed Dubai time card, 400 by 250 pixels
Install the time-svg-creator skill
Download the skill ZIP from the page where you found this guide and unzip it. For a personal setup, place the time-svg-creator folder in ~/.claude/skills/. To limit it to one project, place it in that project's .claude/skills/ folder.
In the Claude apps, you can instead upload the ZIP under Settings → Capabilities → Skills.
- Personal install: ~/.claude/skills/time-svg-creator/
- Project install: .claude/skills/time-svg-creator/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload the ZIP
Check what the skill needs before you use it
The skill needs an agent runtime that supports SKILL.md skills, with Write and Read file tools. It also needs a calling context that supplies the time, timezone and formatted fields. It does not run scripts and does not use the network.
The skill is built to run inside the agent-teams example. If your setup does not pass those three fields, the skill has nothing to format.
- Agent runtime with SKILL.md support and Write and Read tools
- A caller that provides time, timezone and formatted
- Runs scripts: no
- Uses network: no
Trigger the skill with a natural request
The skill loads when a request matches its description, which is about creating an SVG time card for Dubai. Ask in plain words and include the three values the skill expects. The examples file shows the input format used in the source.
Use the exact format from the examples file, with the values on separate lines.
- Create a Dubai time card SVG using time 14:30:45, timezone GST (UTC+4), formatted 2026-03-12 14:30:45 +04
- Make the Dubai time card from the values the agent team passed you and save the summary
time: 14:30:45
timezone: GST (UTC+4)
formatted: 2026-03-12 14:30:45 +04Read the output files
After the run, open agent-teams/output/dubai-time.svg in any browser or image viewer that reads SVG. The card shows a Dubai Time heading, the time you supplied, the timezone label, and Dubai, UAE. The markdown summary is written to agent-teams/output/output.md using the template in reference.md.
The skill uses the values exactly as given. If the time is wrong, check the caller, because the skill does not look up the time itself.
- Open agent-teams/output/dubai-time.svg to view the card
- Open agent-teams/output/output.md for the summary
Safety notes and tips
The skill writes files into agent-teams/output/. Existing files at those paths may be overwritten, so keep copies of anything you need. Because it runs no scripts and uses no network, the risk is limited to those file writes.
The skill is a teaching example. Read SKILL.md, reference.md and examples.md to see how a narrow task is structured, then adapt the pattern for your own skills.
- Expect overwrites at agent-teams/output/dubai-time.svg and output.md
- Do not expect it to fetch live time
- Use it as a model for writing your own SKILL.md
What people use it for
- Teaching how a SKILL.md file defines inputs, tools and output paths
- Demonstrating how an agent team passes data between agents and writes files
- Generating a simple fixed SVG graphic in a demo workflow
- Studying a template-based task that forbids recalculating values
Frequently asked questions
How do I install the time-svg-creator skill?
Download the skill ZIP from the page, unzip it, and place the time-svg-creator folder in ~/.claude/skills/ or in a project's .claude/skills/ folder. In the Claude apps, you can upload the ZIP under Settings → Capabilities → Skills.
What does the time-svg-creator skill need to run?
It needs an agent runtime that supports SKILL.md skills with Write and Read tools, and a caller that supplies time, timezone and formatted values. It does not run scripts and does not use the network.
Does the skill show the live current time?
No. The skill is told to use only the values it receives and never re-fetch or recalculate the time. If you need a live time, the caller must provide it.
Where does the skill save its output?
It writes the SVG to agent-teams/output/dubai-time.svg and a markdown summary to agent-teams/output/output.md.
Is the time-svg-creator skill free to use?
The skill is published under the MIT licence, as stated on this page. Check the licence file in the repository for the full terms.
Can I use this skill outside the agent-teams example?
It is not recommended. The skill expects the calling context to supply fields and writes to a fixed output folder, so it fits the agent-teams example best. For other uses, copy its structure into your own SKILL.md.
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 teams pass data, how a SKILL.md file structures a narrow task, or you need a simple generated Dubai time card for a demo. Pick something else if you need the live or accurate current time, a general SVG design tool, or a production dashboard.
Download the skill