Time Svg Creator

This is a narrowly scoped skill that generates an SVG time card for Dubai and writes it to a specific output directory along with a markdown summary. You'd use this as part of a larger agent workflow where you need visual time displays, probably for dashboards or reports. The skill is deliberately constrained: it accepts pre-calculated time values and explicitly forbids recalculating them, which makes sense for consistency in multi-step pipelines but means it's not standalone. The implementation references templates from separate docs for the SVG and markdown format. It's the kind of specialized task that makes sense when you're building composite agent behaviors and need reliable, repeatable output formatting.

GitHub stars: 57.4K
last updated: Jun 11, 2026

View on GitHub

Install

$ npx -y skills add shanraisshan/claude-code-best-practice --skill time-svg-creator --agent claude-code

Installs into .claude/skills of the current project.

Files

Time SVG Creator Skill

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

Task

You will receive three fields from the calling context: time, timezone, and formatted. Create an SVG time 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 — Write to agent-teams/output/dubai-time.svg
Write summary — Write to agent-teams/output/output.md using the markdown template from reference.md