Menu
Knowledge about the presentation slide format, weight system, navigation, and section structure
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
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.
The conceptual framework behind the presentation — what "Vibe Coding to Agentic Engineering" means, why the journey is structured the way it is, and how every slide fits the narrative arc
| name | presentation-structure |
| description | Knowledge about the presentation slide format, weight system, navigation, and section structure |
Knowledge about how the presentation at presentation/index.html is structured.
presentation/index.html — a single-file HTML presentation with inline CSS and JS.
Each slide is a div with data-slide (sequential number) and optional data-level (journey level at transition points):
<!-- Regular slide — inherits level from previous data-level slide -->
<div class="slide" data-slide="12">
<h1>Slide Title</h1>
<!-- content -->
</div>
<!-- Level transition slide — sets new level for this slide and all following -->
<div class="slide section-slide" data-slide="10" data-level="low">
<h1>Section Name</h1>
<p class="section-desc">Level: Low — description of this section</p>
</div>
<!-- Title slide (centered) -->
<div class="slide title-slide" data-slide="1">
<h1>Presentation Title</h1>
<p class="subtitle">Subtitle text</p>
</div>
The presentation uses a 4-level system instead of cumulative percentages:
data-level attribute on key transition slides (section dividers)data-level slide inherit that level until the next transitiondata-level (slides 2–9) show an empty bar (no level yet set).level-badge is JS-injected on the <h1> of slides that carry data-level — do NOT hardcode in HTML| Section | Slide Range | data-level | Bar Height |
|---|---|---|---|
| Part 0: Introduction | Slides 1-4 | (none) | hidden / empty |
| Part 1: Prerequisites | Slides 5-9 | (none) | empty |
| Part 2: Better Prompting | Slides 10-17 | low | 25% |
| Part 3: Project Memory | Slides 18-24 | medium | 50% |
| Part 4: Structured Workflows | Slides 25-28 | (inherits medium) | 50% |
| Part 5: Domain Knowledge | Slides 29-33 | high | 75% |
| Part 6: Agentic Engineering | Slides 34-46 | high | 75% |
| Appendix | Slides 47+ | (inherits high) | 75% |
goToSlide(n) — used in TOC links, must match actual data-slide numberstotalSlides is auto-computed from DOM (document.querySelectorAll('[data-slide]').length)current / total at bottom-leftAfter adding, removing, or reordering slides:
data-slide attributes sequentially starting from 1goToSlide() calls in the TOC/Journey Map slidetotalSlides auto-computes — no manual update neededSection dividers use the section-slide class. Level-transition section dividers carry data-level and show the level name in the description:
<div class="slide section-slide" data-slide="10" data-level="low">
<p class="section-number">Part 2</p>
<h1>Better Prompting</h1>
<p class="section-desc">Level: Low — effective prompting for real results.</p>
</div>
The JS will inject a .level-badge (e.g., "→ Low") into the <h1> at runtime when the level transitions — do not add these manually in HTML.