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
安装前可以查看交给 AI 代理的指令内容。
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.
还没有评价。欢迎分享你的使用感受。
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
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.
中文简介正在准备中。当前显示英语简介。