with one click
presentation-styling
Knowledge about CSS classes, component patterns, and syntax highlighting in the presentation
Knowledge about CSS classes, component patterns, and syntax highlighting in the presentation
Instructions for fetching current weather temperature data for Dubai, UAE from Open-Meteo API
Instructions for fetching current Dubai time via bash command
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.
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.
Display the current time in Pakistan Standard Time (PKT, UTC+5). Use when the user asks for the current time, Pakistan time, or PKT.
Knowledge about the presentation slide format, weight system, navigation, and section structure
| name | presentation-styling |
| description | Knowledge about CSS classes, component patterns, and syntax highlighting in the presentation |
CSS classes and HTML patterns used in presentation/index.html.
.two-col — 2-column grid layout with 24px gap.info-grid — 2-column grid for info cards.col-card — Card inside a column (add .good for green border, .bad for red border).info-card — Card in an info grid.trigger-box — Gray box with dark left border (for key concepts, prerequisites).how-to-trigger — Green box with green border (for "Try This" actions).warning-box — Orange box with warning border (for important warnings).code-block — Dark code display block with monospace font.use-cases — Container for icon+text list items.use-case-item — Individual item with icon and text.feature-list — Simple bordered list.matcher-tag — Gray inline pill tag.weight-badge — Green pill badge (auto-injected by JS for weighted slides)Inside .code-block, use these spans for syntax coloring:
<div class="code-block">
<span class="comment"># This is a comment</span>
<span class="key">field_name</span>: <span class="string">value</span>
<span class="cmd">></span> command to run
</div>
.comment — Green (#6a9955) for comments.key — Blue (#9cdcfe) for property names/keys.string — Orange (#ce9178) for string values.cmd — Yellow (#dcdcaa) for commands/prompts<div class="slide" data-slide="N" data-weight="5">
<h1>Title</h1>
<div class="two-col">
<div class="col-card bad">
<h4>Before (Vibe Coding)</h4>
<!-- bad example -->
</div>
<div class="col-card good">
<h4>After (Agentic)</h4>
<!-- good example -->
</div>
</div>
</div>
Do not hardcode <span class="weight-badge"> in slide HTML. The presentation JavaScript injects and removes weight badges automatically.
<div class="slide" data-slide="N">
<h1>Title</h1>
<div class="trigger-box">
<h4>Key Concept</h4>
<p>Description</p>
</div>
<div class="code-block"><span class="comment"># Example</span>
<span class="key">field</span>: <span class="string">value</span></div>
</div>
<div class="use-cases">
<div class="use-case-item">
<span class="use-case-icon">EMOJI</span>
<div class="use-case-text">
<strong>Title</strong>
<span>Description text</span>
</div>
</div>
</div>
.journey-bar — Fixed bar below progress bar.journey-bar.hidden — Hidden on title slideh1 elements of weighted slides