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.
Knowledge about CSS classes, component patterns, and syntax highlighting in the presentation
Review the instructions the agent will receive before you install.
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 slidesNo 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.
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.
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.