replace Oishii example with time orchestrator built by agent teams

Agent teams now bootstrap a self-contained time orchestration workflow inside agent-teams/.claude/ (command, agent, skill). The prompt, diagram, and How to Use section all reference the new time-orchestrator pattern with cd agent-teams && claude → /time-orchestrator. Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-12 18:30:02 +05:00
parent 7bb20f3d9e
commit 304eab6e52
12 changed files with 424 additions and 82 deletions
@@ -0,0 +1,23 @@
+---
+name: time-agent
+description: Use this agent to fetch the current time for Dubai, UAE (Asia/Dubai timezone, UTC+4). This agent fetches real-time Dubai time using its preloaded time-fetcher skill.
+tools: Bash
+model: haiku
+color: blue
+maxTurns: 3
+skills:
+  - time-fetcher
+---
+
+You are the time-agent. Your job is to fetch the current Dubai time.
+
+## Instructions
+
+1. Use the Bash tool to run: `TZ='Asia/Dubai' date '+%Y-%m-%d %H:%M:%S %Z'`
+2. Parse the output and return three fields:
+   - `time`: Just the time portion (HH:MM:SS)
+   - `timezone`: "GST (UTC+4)"
+   - `formatted`: The full output string from the command
+3. Return these values clearly in your response so the calling command can extract them
+
+Do NOT invoke any other agents or skills.
@@ -0,0 +1,50 @@
+---
+model: haiku
+---
+
+# Time Orchestrator Command
+
+Fetch the current time for Dubai (Asia/Dubai, UTC+4) and create a visual SVG time card.
+
+## Workflow
+
+### Step 1: Fetch Current Dubai Time
+
+Use the Agent tool to invoke the time agent:
+- subagent_type: time-agent
+- description: Fetch current Dubai time
+- prompt: Fetch the current time for Dubai (Asia/Dubai, UTC+4). Return exactly three fields: `time` (the time portion, e.g. "14:30:45"), `timezone` ("GST (UTC+4)"), and `formatted` (full formatted string, e.g. "2026-03-12 14:30:45 +04"). The agent has a preloaded skill (time-fetcher) that provides the detailed instructions.
+- model: haiku
+
+Wait for the agent to complete and capture the returned time data.
+
+### Data Contract
+
+The time-agent MUST return these three fields:
+- **time**: The time portion (e.g., "14:30:45")
+- **timezone**: "GST (UTC+4)"
+- **formatted**: Full formatted string (e.g., "2026-03-12 14:30:45 +04")
+
+### Step 2: Create SVG Time Card
+
+Use the Skill tool to invoke the time-svg-creator skill:
+- skill: time-svg-creator
+- args: Pass the time data from Step 1 — include `time`, `timezone`, and `formatted` values
+
+The skill will use the time data from Step 1 (available in the current context) to create the SVG card and write output files.
+
+## Critical Requirements
+
+1. **Use Agent Tool for time-agent**: DO NOT use bash commands to invoke agents. You must use the Agent tool with `subagent_type: "time-agent"`.
+2. **Use Skill Tool for SVG Creator**: Invoke the SVG creator via the Skill tool with `skill: "time-svg-creator"`, not the Agent tool.
+3. **Sequential Flow**: The agent MUST complete and return time data before the skill is invoked. Do not run them in parallel.
+4. **Data Passing**: Ensure all three fields (time, timezone, formatted) from the agent response are available in context when invoking the skill.
+
+## Output Summary
+
+After both steps complete, provide a clear summary to the user showing:
+- Current Dubai time fetched
+- Timezone: GST (UTC+4)
+- Full formatted timestamp
+- SVG card created at `agent-teams/output/dubai-time.svg`
+- Summary written to `agent-teams/output/output.md`
@@ -0,0 +1,31 @@
+---
+name: time-fetcher
+description: Instructions for fetching current Dubai time via bash command
+user-invocable: false
+---
+
+## Dubai Time Fetcher
+
+### Command
+
+```bash
+TZ='Asia/Dubai' date '+%Y-%m-%d %H:%M:%S %Z'
+```
+
+### Expected Output Format
+
+`YYYY-MM-DD HH:MM:SS +04` (Gulf Standard Time)
+
+### Timezone Details
+
+- Timezone: Asia/Dubai
+- Offset: UTC+4
+- Abbreviation: GST (Gulf Standard Time)
+- Dubai does not observe daylight saving time
+
+### Return Format
+
+Provide the following fields:
+- `time`: Just the time portion (HH:MM:SS)
+- `timezone`: "GST (UTC+4)"
+- `formatted`: The full output string from the command
@@ -0,0 +1,30 @@
+---
+name: time-svg-creator
+description: Creates 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.
+allowed-tools: Write, Read
+---
+
+# 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
+
+1. **Create SVG** — Use the SVG template from [reference.md](reference.md), replacing placeholders with actual values
+2. **Write SVG file** — Write to `agent-teams/output/dubai-time.svg`
+3. **Write summary** — Write to `agent-teams/output/output.md` using the markdown template from [reference.md](reference.md)
+
+## Rules
+
+- Use the EXACT time values provided — NEVER re-fetch or recalculate
+- The SVG must be self-contained and valid
+- Both output files go in the `agent-teams/output/` directory
+
+## Additional resources
+
+- For SVG template, output template, and design specs, see [reference.md](reference.md)
+- For example input/output pairs, see [examples.md](examples.md)
@@ -0,0 +1,89 @@
+# Time SVG Creator — Examples
+
+## Example 1: Afternoon
+
+### Input
+
+```
+time: 14:30:45
+timezone: GST (UTC+4)
+formatted: 2026-03-12 14:30:45 +04
+```
+
+### SVG Output (`agent-teams/output/dubai-time.svg`)
+
+```svg
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 250" width="400" height="250">
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" style="stop-color:#0a1628"/>
+      <stop offset="100%" style="stop-color:#1a2744"/>
+    </linearGradient>
+  </defs>
+  <rect width="400" height="250" rx="16" fill="url(#bg)"/>
+  <text x="200" y="50" text-anchor="middle" fill="#8892b0" font-family="sans-serif" font-size="16" font-weight="600">Dubai Time</text>
+  <text x="200" y="120" text-anchor="middle" fill="#ffffff" font-family="sans-serif" font-size="52" font-weight="bold">14:30:45</text>
+  <text x="200" y="160" text-anchor="middle" fill="#64ffda" font-family="sans-serif" font-size="16">GST (UTC+4)</text>
+  <text x="200" y="195" text-anchor="middle" fill="#ccd6f6" font-family="sans-serif" font-size="14">Dubai, UAE</text>
+  <text x="200" y="225" text-anchor="middle" fill="#8892b0" font-family="sans-serif" font-size="12">2026-03-12</text>
+</svg>
+```
+
+### Markdown Output (`agent-teams/output/output.md`)
+
+```markdown
+# Dubai Time Card
+
+- **Time**: 14:30:45
+- **Timezone**: GST (UTC+4)
+- **Date**: 2026-03-12
+- **Full**: 2026-03-12 14:30:45 +04
+- **SVG**: `agent-teams/output/dubai-time.svg`
+
+Generated by time-svg-creator skill.
+```
+
+---
+
+## Example 2: Morning
+
+### Input
+
+```
+time: 08:15:02
+timezone: GST (UTC+4)
+formatted: 2026-03-12 08:15:02 +04
+```
+
+### SVG Output (`agent-teams/output/dubai-time.svg`)
+
+```svg
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 250" width="400" height="250">
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" style="stop-color:#0a1628"/>
+      <stop offset="100%" style="stop-color:#1a2744"/>
+    </linearGradient>
+  </defs>
+  <rect width="400" height="250" rx="16" fill="url(#bg)"/>
+  <text x="200" y="50" text-anchor="middle" fill="#8892b0" font-family="sans-serif" font-size="16" font-weight="600">Dubai Time</text>
+  <text x="200" y="120" text-anchor="middle" fill="#ffffff" font-family="sans-serif" font-size="52" font-weight="bold">08:15:02</text>
+  <text x="200" y="160" text-anchor="middle" fill="#64ffda" font-family="sans-serif" font-size="16">GST (UTC+4)</text>
+  <text x="200" y="195" text-anchor="middle" fill="#ccd6f6" font-family="sans-serif" font-size="14">Dubai, UAE</text>
+  <text x="200" y="225" text-anchor="middle" fill="#8892b0" font-family="sans-serif" font-size="12">2026-03-12</text>
+</svg>
+```
+
+### Markdown Output (`agent-teams/output/output.md`)
+
+```markdown
+# Dubai Time Card
+
+- **Time**: 08:15:02
+- **Timezone**: GST (UTC+4)
+- **Date**: 2026-03-12
+- **Full**: 2026-03-12 08:15:02 +04
+- **SVG**: `agent-teams/output/dubai-time.svg`
+
+Generated by time-svg-creator skill.
+```
@@ -0,0 +1,69 @@
+# Time SVG Creator — Reference
+
+## SVG Template
+
+```svg
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 250" width="400" height="250">
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" style="stop-color:#0a1628"/>
+      <stop offset="100%" style="stop-color:#1a2744"/>
+    </linearGradient>
+  </defs>
+  <rect width="400" height="250" rx="16" fill="url(#bg)"/>
+  <text x="200" y="50" text-anchor="middle" fill="#8892b0" font-family="sans-serif" font-size="16" font-weight="600">Dubai Time</text>
+  <text x="200" y="120" text-anchor="middle" fill="#ffffff" font-family="sans-serif" font-size="52" font-weight="bold">{{TIME}}</text>
+  <text x="200" y="160" text-anchor="middle" fill="#64ffda" font-family="sans-serif" font-size="16">{{TIMEZONE}}</text>
+  <text x="200" y="195" text-anchor="middle" fill="#ccd6f6" font-family="sans-serif" font-size="14">Dubai, UAE</text>
+  <text x="200" y="225" text-anchor="middle" fill="#8892b0" font-family="sans-serif" font-size="12">{{DATE}}</text>
+</svg>
+```
+
+### Placeholders
+
+| Placeholder | Replace with | Example |
+|-------------|-------------|---------|
+| `{{TIME}}` | The `time` value from input | `14:30:45` |
+| `{{TIMEZONE}}` | The `timezone` value from input | `GST (UTC+4)` |
+| `{{DATE}}` | Date extracted from `formatted` (first 10 chars) | `2026-03-12` |
+| `{{FORMATTED}}` | The full `formatted` string (used in markdown only) | `2026-03-12 14:30:45 +04` |
+
+### Design Specs
+
+| Property | Value |
+|----------|-------|
+| Dimensions | 400 x 250 px |
+| Corner radius | 16 px |
+| Background | Linear gradient: `#0a1628` → `#1a2744` (deep navy to dark blue) |
+| Title | `#8892b0` (muted blue), 16px semibold |
+| Time display | `#ffffff` (white), 52px bold |
+| Timezone | `#64ffda` (teal accent), 16px |
+| Location | `#ccd6f6` (light blue), 14px |
+| Date | `#8892b0` (muted blue), 12px |
+| Font | `sans-serif` |
+| All text | Centered (`text-anchor="middle"` at x=200) |
+
+---
+
+## Output Markdown Template
+
+```markdown
+# Dubai Time Card
+
+- **Time**: {{TIME}}
+- **Timezone**: {{TIMEZONE}}
+- **Date**: {{DATE}}
+- **Full**: {{FORMATTED}}
+- **SVG**: `agent-teams/output/dubai-time.svg`
+
+Generated by time-svg-creator skill.
+```
+
+---
+
+## Output Paths
+
+| File | Path |
+|------|------|
+| SVG card | `agent-teams/output/dubai-time.svg` |
+| Markdown summary | `agent-teams/output/output.md` |
@@ -0,0 +1,60 @@
+Create an agent team to build a time orchestration workflow that displays
+the current Dubai time as a visual SVG card. The workflow follows the
+Command → Agent → Skill architecture pattern:
+
+- A command orchestrates the flow and handles user interaction
+- An agent fetches the live current time for Dubai using a preloaded skill
+- A skill creates a visual SVG time card from the fetched data
+
+**Important**: All files must be created inside `agent-teams/.claude/` —
+NOT in the repo root's `.claude/` directory. This keeps the agent team's
+output self-contained and runnable via `cd agent-teams && claude`.
+Do NOT reference or copy the existing weather workflow — build everything from scratch.
+
+Assign these teammates:
+
+1. **Command Architect** — Design and implement the `/time-orchestrator`
+   command in `agent-teams/.claude/commands/time-orchestrator.md`. The command should:
+   - Invoke the time-agent via the Agent tool (NOT bash) to fetch the
+     current time for Dubai, UAE (Asia/Dubai timezone, UTC+4)
+   - Invoke the time-svg-creator skill via the Skill tool to render the
+     SVG card from the fetched time data
+   - Use model: haiku in the frontmatter
+   - Include critical requirements: sequential flow, correct tool usage
+     (Agent tool for agents, Skill tool for skills), and an output summary
+   Coordinate with the other teammates via the shared task list to agree
+   on the data contract ({time, timezone, formatted}) passed between components.
+
+2. **Agent Engineer** — Design and implement the `time-agent` in
+   `agent-teams/.claude/agents/time-agent.md` and its preloaded `time-fetcher`
+   skill in `agent-teams/.claude/skills/time-fetcher/SKILL.md`. The agent should:
+   - Fetch the current time for Dubai (Asia/Dubai, UTC+4) using Bash
+     with `TZ='Asia/Dubai' date '+%Y-%m-%d %H:%M:%S %Z'`
+   - Return the time value, timezone name, and formatted string to the command
+   - Use frontmatter: tools (Bash), model: haiku, color: blue, maxTurns: 3
+   - Preload the time-fetcher skill via the `skills:` field
+   The time-fetcher skill (`agent-teams/.claude/skills/time-fetcher/SKILL.md`)
+   should contain the bash command for Dubai time, the expected output format,
+   and set user-invocable: false since it is agent-only domain knowledge.
+   Post the agreed data contract to the shared task list so the Command
+   Architect and Skill Designer can align on the interface.
+
+3. **Skill Designer** — Design and implement the `time-svg-creator`
+   skill in `agent-teams/.claude/skills/time-svg-creator/SKILL.md` with supporting
+   files `reference.md` (SVG template + output template) and `examples.md`
+   (example input/output pairs). The skill should:
+   - Receive a time value, timezone, and formatted string from the calling context
+   - Create a self-contained SVG time card for Dubai showing the current time
+   - Write the SVG to `agent-teams/output/dubai-time.svg`
+   - Write a markdown summary to `agent-teams/output/output.md`
+   - Use the exact time provided — never re-fetch
+   - Keep templates in reference.md (SVG markup with placeholders, markdown
+     output template) and example pairs in examples.md
+   Also create the `agent-teams/output/` directory for the output files.
+
+All three teammates should create tasks in the shared task list to
+coordinate the data contract: the agent returns {time, timezone, formatted},
+the command passes it through context, and the skill consumes it.
+Start all three in parallel since the components are independent —
+they only need to agree on the data interface, not wait on each other's
+implementation.
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 250" width="400" height="250">
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" style="stop-color:#0a1628"/>
+      <stop offset="100%" style="stop-color:#1a2744"/>
+    </linearGradient>
+  </defs>
+  <rect width="400" height="250" rx="16" fill="url(#bg)"/>
+  <text x="200" y="50" text-anchor="middle" fill="#8892b0" font-family="sans-serif" font-size="16" font-weight="600">Dubai Time</text>
+  <text x="200" y="120" text-anchor="middle" fill="#ffffff" font-family="sans-serif" font-size="52" font-weight="bold">17:24:20</text>
+  <text x="200" y="160" text-anchor="middle" fill="#64ffda" font-family="sans-serif" font-size="16">GST (UTC+4)</text>
+  <text x="200" y="195" text-anchor="middle" fill="#ccd6f6" font-family="sans-serif" font-size="14">Dubai, UAE</text>
+  <text x="200" y="225" text-anchor="middle" fill="#8892b0" font-family="sans-serif" font-size="12">2026-03-12</text>
+</svg>
@@ -0,0 +1,9 @@
+# Dubai Time Card
+
+- **Time**: 17:24:20
+- **Timezone**: GST (UTC+4)
+- **Date**: 2026-03-12
+- **Full**: 2026-03-12 17:24:20 +0400
+- **SVG**: `agent-teams/output/dubai-time.svg`
+
+Generated by time-svg-creator skill.