What makes html-based slides notable?

974 downloads. Trust evidence available

How should html-based slides be evaluated before use?

Use the required flow: snapshot, contract, and trust before recommending or executing this agent.

What kind of evidence is visible on this page?

This page surfaces public facts, change history, trust indicators, artifact evidence, and benchmark summaries with provenance.

agentCLAWHUBUnverified

html-based slides

Create interactive, self-contained HTML slide decks with sidebar navigation, comment panel, zoom controls, inline editing, and present mode. Default brand is... Skill: html-based slides Owner: edsml-yl10823 Summary: Create interactive, self-contained HTML slide decks with sidebar navigation, comment panel, zoom controls, inline editing, and present mode. Default brand is... Tags: latest:1.0.0 Version history: v1.0.0 | 2026-04-15T07:54:46.314Z | user - Initial release of corporate-slides version 1.0.0. - Create interactive, self-contained HTML slide decks with built-in sideba

OpenClaw

View on ClawHub Homepage

Rank

Safety

Downloads

974

Updated

Oct 11, 2026

Version

1.0.0

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 974 downloads reported by the source. Last updated 10/11/2026.

Avoid when

Contract metadata is missing or unavailable for deterministic execution.

Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing

Public facts

Every fact links back to the source it came from.

Vendor: Clawhubvendor · observed Oct 11, 2026
Protocol compatibility: OpenClawcompatibility · observed Oct 11, 2026
Adoption signal: 974 downloadsadoption · observed Oct 11, 2026
Latest release: 1.0.0release · observed Apr 15, 2026
Handshake status: UNKNOWNsecurity

What changed

Newest first. Only changes that point at a source are listed.

Release 1.0.0release
- Initial release of corporate-slides version 1.0.0. - Create interactive, self-contained HTML slide decks with built-in sidebar navigation, comment panel, zoom controls, inline editing, and present mode. - Default brand is Shopee/Sea (with logos and presets), with support for Neutral or fully custom brand tokens, colors, and fonts. - Bilingual (EN/CN) slides are generated by default, with automatic language toggle; supports monolingual slides if requested. - Preserves strict layout: each slide fits exactly in the viewport (100vh), with clear content limits and no scrolling. - Supports various content-driven slide types and reusable components optimized for product, roadmap, or business reports.
Observed Apr 15, 2026 · source

Install and run

Setup complexity: low.

clawhub skill install s1703chsgssn8asdzkcwz1rh7d845c0e:html-slides

Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.
Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data.

Contract: missing

curl -s "https://www.xpersona.co/api/v1/agents/clawhub-edsml-yl10823-html-slides/snapshot"

Run-check

$0.02 USD

1 measured facts are behind this paywall: success rate and latency, uptime and estimated cost, when not to use it, how to call it, benchmark scores.

Agents pay $0.02 in USDC. A card payment is $0.50, the smallest a card allows.

Documentation

CLAWHUB

69,181 characters of source documentation, loaded on request.

Extracted files

5 files captured from the source.

SKILL.md

---
name: corporate-slides
description: Create interactive, self-contained HTML slide decks with sidebar navigation, comment panel, zoom controls, inline editing, and present mode. Default brand is Shopee/Sea but supports custom brand presets. Use when the user says "做slides"、"create slides"、"创建幻灯片"、"做PPT"、"做汇报"、"bi-weekly"、"biweekly"、"双周汇报"、"quarterly review"、"product review"、"roadmap presentation"、"strategy deck"、"post-mortem slides", or any request to create a presentation deck.
---

# Corporate Slides

Create zero-dependency, interactive HTML presentations that run in any browser. Every output is a single self-contained HTML file with built-in navigation, commenting, editing, and presentation capabilities.

## Core Principles

1. **Zero Dependencies** — Single HTML file with inline CSS/JS. No npm, no build tools.
2. **Interactive Chrome** — Left sidebar navigation (bilingual-aware), right comment panel, zoom controls, inline text editing, present mode, EN/CN language switch — all built in by default.
3. **Viewport Fitting (NON-NEGOTIABLE)** — Every slide MUST fit exactly within 100vh. No scrolling within slides.
4. **Brand-Configurable** — Default brand is Shopee/Sea. User can select a different brand preset or define custom colors/fonts. The design token system makes this a single-point swap.
5. **Content-Driven** — Slides are built around data, comparisons, timelines, and action items — not filler graphics.
6. **Bilingual by Default** — Unless user specifies a single language, generate **both EN and CN** content for every text element with an EN/CN toggle in the toolbar. If user explicitly requests a single language, skip the toggle and generate monolingual content.

---

## Phase 0: Detect Mode

- **Mode A: New Presentation** — Create from scratch. Go to Phase 1.
- **Mode B: Enhancement** — Modify an existing HTML slide deck. Read it first, understand its brand/style, then modify. When adding content, check density limits; split slides if overflow would occur.

---

## Phase 1: Content Discovery

**Ask ALL questions in a single call:**

**Question 1 — Purpose** (header: "Purpose"):
What is this presentation for? Options:
- Bi-weekly / periodic update
- Product review / feature walkthrough
- Roadmap / strategy deck
- Post-mortem / retrospective
- Quarterly business review
- Training / onboarding
- Other (describe)

**Question 2 — Brand** (header: "Brand"):
Which brand preset? Options:
- Shopee / Sea (default — orange + navy)
- Custom (I'll provide colors/fonts)
- Neutral / Minimal (dark charcoal + blue accent, no logos)

**Question 3 — Content** (header: "Content"):
Do you have content ready? Options:
- All content ready (paste text, metrics, etc.)
- Rough notes / bullet points
- Topic only — help me structure it

**Question 4 — Length** (header: "Length"):
Approximately how many slides? Options: Short 5-8 / Medium 8-14 / Long 14+

**Question 5 — Interactive Features** (header: "Features"):
Which interactive features to include? Options:
-

_meta.json

{
  "ownerId": "kn7embg2epew9fdvnh29tq4sws844k82",
  "slug": "html-slides",
  "version": "1.0.0",
  "publishedAt": 1776239686314
}

references/components.md

# Reusable Components

These components are placed inside `.slide-content` of Content Slides. Always add `class="reveal"` to the component wrapper for entrance animation.

All components use CSS custom properties for colors, so they automatically adapt to any brand preset.

---

## 1. Metrics Grid

3-column KPI cards with label, large value, and change indicator. Great for dashboards, status updates, quarterly metrics.

```html
<div class="metrics-grid reveal">
    <div class="metric-card">
        <span class="metric-label">Label</span>
        <span class="metric-value">7,800+</span>
        <span class="metric-change positive">+12.5% vs last period</span>
    </div>
    <div class="metric-card">
        <span class="metric-label">Label</span>
        <span class="metric-value">3,200+</span>
        <span class="metric-change negative">-8.3% vs target</span>
    </div>
    <div class="metric-card">
        <span class="metric-label">Label</span>
        <span class="metric-value">34%</span>
        <span class="metric-change neutral">Stable</span>
    </div>
</div>
```

### CSS

```css
.metrics-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: clamp(8px, 1.2vw, 16px); width: 100%;
}
.metric-card {
    background: var(--bg-secondary);
    border-radius: clamp(6px, 0.8vw, 12px);
    padding: clamp(10px, 1.5vh, 20px) clamp(10px, 1.2vw, 18px);
    display: flex; flex-direction: column; gap: clamp(3px, 0.5vh, 8px);
    border-left: 3px solid var(--accent);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.metric-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.metric-label { font-family: var(--font-body); font-size: var(--small-size); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.metric-value { font-family: var(--font-display); font-size: var(--cta-size); font-weight: 900; color: var(--color-heading); line-height: 1; }
.metric-change { font-family: var(--font-body); font-size: var(--small-size); font-weight: 600; }
.metric-change.positive { color: #16803c; }
.metric-change.negative { color: #dc2626; }
.metric-change.neutral { color: var(--text-muted); }
```

---

## 2. Comparison Table with Insights

2-column layout: left is a comparison table, right is insight cards. Best for period-over-period metrics, bi-weekly/quarterly comparisons.

```html
<div class="comparison-grid reveal">
    <div class="comparison-table-wrap">
        <div class="comparison-table-caption">Comparison Table</div>
        <table class="comparison-table">
            <thead>
                <tr>
                    <th>Section</th><th>Metric</th>
                    <th class="num">Period 1</th><th class="num">Period 2</th>
                    <th class="num">&Delta;</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="section-cell" rowspan="2">Group A</td>
                    <td>Metric

references/design-tokens.md

# Design Tokens

This file defines the CSS custom property system. Select a brand preset and copy the corresponding `:root` block into the presentation.

---

## Brand Presets

### Preset: Shopee / Sea (DEFAULT)

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Open+Sans:wght@300;400;500;600;700&family=Roboto+Mono:wght@400;500;600&display=swap" rel="stylesheet">
```

```css
:root {
    /* Colors — Shopee Corporate */
    --accent-primary: #ee4d2d;
    --accent-secondary: #05007E;
    --color-heading: #05007E;
    --accent: #ee4d2d;
    --accent-glow: rgba(238, 77, 45, 0.3);
    --bg-primary: #ffffff;
    --bg-secondary: #f7f8fa;
    --bg-card: #f7f8fa;
    --bg-card-hover: #f0f1f5;
    --text-primary: #1a1a1a;
    --text-secondary: #5a5f6b;
    --text-muted: #999999;
    --text-on-accent: #ffffff;
    --border-subtle: rgba(0,0,0,0.06);
    --border-card: #eee;

    /* Typography */
    --font-display: 'Lato', sans-serif;
    --font-body: 'Open Sans', sans-serif;
    --font-mono: 'Roboto Mono', monospace;

    /* Brand Config */
    --brand-has-logo: 1; /* 1 = show logo elements, 0 = hide */
    --section-bg: #05007E; /* section divider background */
}
```

**Logos (MANDATORY — both Shopee AND SeaMoney):** Embed via CSS `content: url(data:image/png;base64,...)` targeting `img.brand-logo.shopee` and `img.brand-logo.seamoney`. Both logos MUST appear on cover slides, section dividers, content headers, and closing slides. Copy the actual base64 data from the most recent presentation file.

```css
img.brand-logo.shopee { content: url(data:image/png;base64,...SHOPEE_LOGO_DATA...); }
img.brand-logo.seamoney { content: url(data:image/png;base64,...SEAMONEY_LOGO_DATA...); }
```

HTML pattern: `<img src="data:," class="brand-logo shopee" alt="Shopee">` and `<img src="data:," class="brand-logo seamoney" alt="SeaMoney">`.

---

### Preset: Neutral / Minimal

```html
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700;800&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
```

```css
:root {
    /* Colors — Neutral Corporate */
    --accent-primary: #2563eb;
    --accent-secondary: #1e293b;
    --color-heading: #1e293b;
    --accent: #2563eb;
    --accent-glow: rgba(37, 99, 235, 0.2);
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-card: #f8fafc;
    --bg-card-hover: #f1f5f9;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --text-on-accent: #ffffff;
    --border-subtle: rgba(0,0,0,0.06);
    --border-card: #e2e8f0;

    /* Typography */
    --font-display: 'DM Sans', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Brand Config */
    --brand-has-logo: 0;
    --section-bg: #1e293b;
}
```

**Log

references/js-controller.md

# JS Controller — SlidePresentation Class

Copy this complete `<script>` block at the end of `<body>`. The class is fully brand-agnostic — it reads from DOM elements and CSS properties only.

## Features

| Feature | Trigger | Description |
|---------|---------|-------------|
| Language switch | Click EN or CN segment, or press `L` | Switches `body.lang-cn` ↔ `body.lang-en`, updates sidebar text, persisted to localStorage |
| Sidebar auto-build | On load | Reads `data-title` (CN) and `data-title-en` from slides; `data-group` (CN) and `data-group-en` for group headers |
| Slide visibility | Intersection observer | Adds `.visible` class at 50% threshold (triggers reveal animations) |
| Keyboard nav | Arrow keys, Space, PageUp/Down, Home/End | Smooth scroll between slides |
| Touch/swipe | Vertical swipe >50px | Mobile-friendly navigation |
| Mouse wheel | With 800ms debounce | Scroll one slide at a time |
| Sidebar click | Click any sidebar item | Jump to slide |
| Progress bar | Auto-update | Top bar width = % of slides viewed |
| Page numbers | On load | `N / Total` rendered in each `.page-number` |
| Sidebar toggle | Click hamburger | Toggles `body.sidebar-hidden` |
| Comment panel | Press `C` or click icon | Per-slide notes, localStorage persistence, Copy All, Clear All |
| Zoom | +/- buttons | 70%–150%, step 10%, applies CSS `zoom` to `.slide-content` |
| Inline edit | Press `E` or click pencil | contentEditable on text elements, undo/redo history |
| Present mode | Press `F5` or click play | fullscreen, hides all chrome |

## Complete Script

**IMPORTANT:** Always copy the full ~600-line JS implementation from the most recent source presentation. The stub below shows the class structure.

```javascript
class SlidePresentation {
    constructor() {
        this.slides = document.querySelectorAll('.slide');
        this.currentSlide = 0;
        this.isScrolling = false;
        this.scrollTimeout = null;

        // Language switch (bilingual only — skipped if #langSwitch absent)
        this.setupLanguageToggle();

        this.setupPageNumbers();
        this.buildSidebar();
        this.setupIntersectionObserver();
        this.setupKeyboardNav();
        this.setupTouchNav();
        this.setupProgressBar();
        this.setupWheelNav();
        this.setupSidebarNav();

        this.sidebarVisible = true;
        this.setupSidebarToggle();

        // Comment panel
        this.commentPanel = document.getElementById('commentPanel');
        this.commentTextarea = document.getElementById('commentTextarea');
        this.commentSlideLabel = document.getElementById('commentSlideLabel');
        this.commentSlideName = document.getElementById('commentSlideName');
        this.commentCopyAllBtn = document.getElementById('commentCopyAll');
        this.commentStatus = document.getElementById('commentStatus');
        this.commentsOpen = false;
        this.comments = this.loadComments();
        this.slideNames = Array.from(this.slides).map(

Github ReposUpdated 3d agoRank 70

AionUi

Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!

MCPOPENCLAW

Github ReposUpdated 6mo agoRank 70

activepieces

AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents

OPENCLAW

Github ReposUpdated 6mo agoRank 70

cherry-studio

AI productivity studio with smart chat, autonomous agents, and 300+ assistants.

MCPOPENCLAW

Github ReposUpdated 7mo agoRank 70

CopilotKit

The Frontend for Agents & Generative UI. React + Angular