Edit a single-file HTML presentation while keeping slide numbers, contents links, section dividers, and level indicators consistent. The skill explains how navigation and inherited section levels work, including what to update when slides move.
Knowledge about the presentation slide format, weight system, navigation, and section structure
Review the instructions the agent will receive before you install.
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.
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Automate website tasks with agent-browser, a command-line browser tool for AI agents. Fill forms, click controls, extract page text, capture screenshots, and test web apps, with support for saving and reusing login state.
Style slides in an existing HTML presentation using documented CSS classes and component patterns. The skill covers two-column comparisons, cards, warning boxes, and code coloring, along with rules for automatically displayed slide badges.
Fetch the current date and time in Dubai using a bash command. Return the time, the GST timezone label, and the complete dated output as separate fields for a consistently structured response.
Check the current date and time in Pakistan Standard Time, which is UTC+5. The skill uses a bash command and presents a concise line containing the date, a 24-hour time, and the PKT label.
Create a Dubai time card as an SVG image and a Markdown summary from supplied time values. It fills the included templates and saves both files in the designated output directory without fetching or recalculating the time.
Plan and edit a presentation explaining the progression from unstructured Claude Code use to configured engineering workflows. It provides a teaching sequence, proficiency levels, and a TodoApp example connecting project instructions, skills, agents, and automation.