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
설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
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.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.