{"id":"24017e53-968a-4fb2-93ab-501593e5d04f","entityType":"agent","slug":"clawhub-tavis1536-art-presentation-by-html","name":"presentation-by-html","canonicalUrl":"https://www.xpersona.co/agent/clawhub-tavis1536-art-presentation-by-html","canonicalPath":"/agent/clawhub-tavis1536-art-presentation-by-html","generatedAt":"2026-10-12T22:19:56.560Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-11T23:53:00.375Z","emptyReason":null},"description":"Use when the user needs to create a technical sharing, presentation, or talk material. Triggered by requests like \"prepare a sharing\", \"make slides\", \"build... Skill: presentation-by-html Owner: tavis1536-art Summary: Use when the user needs to create a technical sharing, presentation, or talk material. Triggered by requests like \"prepare a sharing\", \"make slides\", \"build... Tags: latest:1.0.1 Version history: v1.0.1 | 2026-05-17T12:14:56.800Z | user - Skill renamed from presentation-builder to presentation-by-html - No changes to logic or file content, only metadata (name)","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 973 downloads reported by the source. Last updated 10/11/2026.","installCommand":"clawhub skill install s1702whte77jjzn337ad6rjwan83nanw:presentation-by-html","sourceUrl":"https://clawhub.ai/tavis1536-art/presentation-by-html","homepage":"https://clawhub.ai/tavis1536-art/skills/presentation-by-html","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/tavis1536-art/presentation-by-html","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/tavis1536-art/skills/presentation-by-html","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":60,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"Use when the user needs to create a technical sharing, presentation, or talk material. Triggered by requests like \"prepare a sharing\", \"make slides\", \"build... "},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-11T23:53:00.375Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T23:53:00.375Z","emptyReason":null},"stars":null,"forks":null,"downloads":973,"likes":null,"task":null,"library":null,"packageName":null,"latestVersion":"1.0.1","tractionLabel":"973 downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T23:53:00.362Z","emptyReason":null},"lastUpdatedAt":"2026-10-11T23:53:00.375Z","lastCrawledAt":"2026-10-11T23:53:00.362Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-12T23:53:00.362Z","lastVerifiedAt":null,"highlights":[{"version":"1.0.1","createdAt":"2026-05-17T12:14:56.800Z","changelog":"- Skill renamed from `presentation-builder` to `presentation-by-html` - No changes to logic or file content, only metadata (name) updated - Functionality, usage principles, and workflow remain unchanged","fileCount":3,"zipByteSize":4694},{"version":"1.0.0","createdAt":"2026-05-17T12:10:13.581Z","changelog":"Initial release with a robust, structured approach for building technical presentation materials: - Two-phase workflow: brainstorm (clarify audience, goals, content) then build HTML slides - Requires a detailed narrative framework before slide code is generated - Enforces interactive, detail-on-demand slide components (tab cards, expandable areas, vertical tab-detail panels) - Provides a consistent design system (cards, tags, grids, architecture diagrams, comparison layouts, timelines) - Separates content (HTML), styles (CSS), and interactions (JS) for maintainability - Focuses on clarity, interactivity, and one key idea per slide—avoiding static text walls and clichés","fileCount":2,"zipByteSize":3641}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s1702whte77jjzn337ad6rjwan83nanw:presentation-by-html","setupComplexity":"low","setupSteps":["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":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-tavis1536-art-presentation-by-html/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-tavis1536-art-presentation-by-html/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-tavis1536-art-presentation-by-html/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-tavis1536-art-presentation-by-html/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-tavis1536-art-presentation-by-html/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-tavis1536-art-presentation-by-html/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-12T22:19:56.559Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-tavis1536-art-presentation-by-html/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-tavis1536-art-presentation-by-html/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-tavis1536-art-presentation-by-html/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-tavis1536-art-presentation-by-html/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"high","updatedAt":"2026-10-11T23:53:00.375Z","emptyReason":null},"readme":"Skill: presentation-by-html\n\nOwner: tavis1536-art\n\nSummary: Use when the user needs to create a technical sharing, presentation, or talk material. Triggered by requests like \"prepare a sharing\", \"make slides\", \"build...\n\nTags: latest:1.0.1\n\nVersion history:\n\nv1.0.1 | 2026-05-17T12:14:56.800Z | user\n\n- Skill renamed from `presentation-builder` to `presentation-by-html`\n- No changes to logic or file content, only metadata (name) updated\n- Functionality, usage principles, and workflow remain unchanged\n\nv1.0.0 | 2026-05-17T12:10:13.581Z | user\n\nInitial release with a robust, structured approach for building technical presentation materials:\n\n- Two-phase workflow: brainstorm (clarify audience, goals, content) then build HTML slides\n- Requires a detailed narrative framework before slide code is generated\n- Enforces interactive, detail-on-demand slide components (tab cards, expandable areas, vertical tab-detail panels)\n- Provides a consistent design system (cards, tags, grids, architecture diagrams, comparison layouts, timelines)\n- Separates content (HTML), styles (CSS), and interactions (JS) for maintainability\n- Focuses on clarity, interactivity, and one key idea per slide—avoiding static text walls and clichés\n\nArchive index:\n\nArchive v1.0.1: 3 files, 4694 bytes\n\nFiles: skill-card.md (1873b), SKILL.md (6707b), _meta.json (139b)\n\nFile v1.0.1:SKILL.md\n\n---\nname: presentation-by-html\ndescription: Use when the user needs to create a technical sharing, presentation, or talk material. Triggered by requests like \"prepare a sharing\", \"make slides\", \"build a presentation\", or any scenario requiring structured visual storytelling for an audience.\n---\n\n# Presentation Builder\n\n## Overview\n\nBuild presentation materials as HTML through a two-phase process: **brainstorm first, build second**. Never produce slides before the narrative structure is solid.\n\n## Phase 1: Brainstorm\n\nConduct a structured dialogue before writing any code.\n\n### Required Questions\n\n**Audience & Format:**\n\n- Who is the audience? Technical depth? Prior knowledge?\n- Duration? Format constraints?\n\n**Content Core:**\n\n- What problem does this solve? What was the status quo before?\n- What is the core capability / contribution?\n- Current status (shipped / MVP / in-progress)?\n- Demos, data, or real cases available?\n\n**Narrative Intent:**\n\n- What should the audience take away?\n- Pitfalls, \"aha moments\", counter-intuitive insights?\n\n### Structuring Principles\n\n- **Effect before mechanism**: Show what it does before explaining how\n- **Pitfalls are gold**: Real failures resonate more than polished success. Structure each as: phenomenon -> cause -> solution -> generalizable insight\n- **Avoid cliché openings**: Prefer tension, paradox, or direct demo over \"imagine it's 3am...\"\n- **Time-box sections**: Allocate minutes explicitly. Core insights deserve >40% of time\n- **One takeaway per slide**: Two ideas = two slides\n\n### Iterate Until Stable\n\nContinue dialogue until:\n\n- Framework covers all sections with time estimates\n- Narrative arc is clear (hook -> problem -> solution -> lessons -> future)\n- User confirms \"framework OK\"\n\n## Phase 2: Build HTML\n\n### File Structure\n\nSeparate concerns into three files for maintainability:\n\n```\nproject/\n  presentation.html    # Semantic structure only, no inline styles except layout-specific\n  css/style.css        # All visual styling, animations, component patterns\n  js/deck.js           # Navigation, interactions, TOC, expandable logic\n  images/              # Screenshots, avatars, demo videos\n```\n\n### Interaction Patterns (Critical)\n\nThe presentation is NOT a static slide deck. It uses **interactive detail-on-demand** patterns:\n\n**1. Tab Cards** — Clickable cards that switch a shared detail area below\n\n```html\n<div class=\"grid-3\">\n  <div class=\"card tab-card active\" data-tab=\"topic-a\">Summary A</div>\n  <div class=\"card tab-card\" data-tab=\"topic-b\">Summary B</div>\n</div>\n<div class=\"tab-detail-area\">\n  <div class=\"tab-detail active\" data-tab=\"topic-a\">...full detail...</div>\n  <div class=\"tab-detail\" data-tab=\"topic-b\">...full detail...</div>\n</div>\n```\n\nUse when: Multiple sub-topics exist under one slide, each with rich detail.\n\n**2. Expandable Details** — Cards that expand to reveal deeper content\n\n```html\n<div class=\"card expandable\" data-expand-target=\"detail-id\">Summary</div>\n<div class=\"expand-content-full\" id=\"detail-id\">\n  <div class=\"expand-inner\">...detailed content...</div>\n</div>\n```\n\nUse when: A slide has layered information — show summary by default, expand for evidence/examples. Supports `data-default-open` attribute.\n\n**3. Left-Tab + Right-Detail Panel** — Vertical tab list with adjacent detail pane\n\nUse when: Each tab has substantial content (code blocks, diagrams) that benefits from full-width display. Example: security isolation details.\n\n### Visual Design System\n\n| Component | CSS Class | Usage |\n| --- | --- | --- |\n| Cards | `.card .card-accent .card-{color}` | Discrete points, categorized items |\n| Tags | `.tag .tag-{color}` | Labels, keywords, status badges |\n| Grids | `.grid-2` `.grid-3` | Parallel comparisons |\n| Quote | `.quote` | Key insights, memorable one-liners |\n| Architecture boxes | `.arch-box .arch-box.primary` | System diagrams |\n| Code blocks | `<pre>` with `.comment .keyword .string .func .op` spans | Syntax-highlighted dark code |\n| Comparison | `.compare-box .compare-before .compare-after` | Before/after with positioned labels |\n| Timeline | `.timeline .timeline-item` | Sequential events with time markers |\n| Pitfall insight | `.pitfall-step .pitfall-insight` | Highlighted takeaway badges |\n| Big numbers | `.big-number` | Metrics with placeholder `__` for pending data |\n\n### Color System (Semantic)\n\n```css\n--primary: #1a73e8;       /* neutral/default/architecture */\n--accent: #ea4335;        /* problem/danger/before */\n--accent-green: #34a853;  /* solution/success/after */\n--accent-yellow: #fbbc04; /* caution/intermediate */\n--accent-purple: #9334e6; /* advanced/depth/evaluator */\n```\n\n### Animation Patterns\n\n- **Fade-in with stagger**: `.fade-in .fade-in-d1` through `.fade-in-d6` for progressive reveal\n- **Step-by-step flow**: `.anim-step` + `.anim-flow` container, revealed sequentially by JS\n- **Flow diagram**: `.flow-node` + `.flow-connector` revealed node-by-node with delays\n- **Tab transitions**: CSS `@keyframes tabFadeIn` for smooth panel switching\n\n### Slide Types\n\n1. **Title slide** (`.slide-title`): Gradient background, white text\n2. **Section divider** (`.slide-section`): Large faded number + heading\n3. **Content slide**: h2/h3 + interactive components\n4. **Architecture slide**: CSS flex/grid layouts with `.arch-box` nodes\n5. **Comparison slide**: `.compare-before` / `.compare-after` side-by-side\n6. **Data slide**: `.big-number` with `__` placeholders for pending metrics\n7. **Q&A slide**: Minimal title-slide style\n\n### JS Engine Responsibilities\n\n```\ndeck.js handles:\n- Slide navigation (keyboard ←→/Space/PgUp/PgDn, touch swipe, ESC for TOC)\n- Progress bar + counter update\n- Tab card switching (click → toggle active class on cards and detail panels)\n- Expandable toggle (click → open/close with accordion behavior)\n- Security panel switching\n- Animated flow triggering (reset + staggered reveal on slide enter)\n- Default-open restoration on slide enter\n- Expand state cleanup on slide leave\n```\n\n### Content Density Rules\n\n- Body text: 16-22px; never smaller than 13px even in expand-inner\n- Cards: max 3-4 per slide in top-level grid\n- Detail areas can be denser (tables, code, smaller font) since they're opt-in\n- One core idea per slide at the summary level; detail areas can go deeper\n- Use `data-title` on section/key slides for TOC generation\n- Lazy-load heavy media (video onclick pattern)\n\n### Things to Avoid\n\n- External CDN links (must work offline/intranet)\n- Single-file HTML over 500 lines (split CSS/JS)\n- Static walls of text (use expandable/tab patterns for density)\n- Inline styles for reusable patterns (extract to CSS classes)\n- Images for diagrams (use CSS flex/grid compositions)\n\nFile v1.0.1:_meta.json\n\n{\n  \"ownerId\": \"kn7600g7r6dctdpay0sjp1fayh82m9rg\",\n  \"slug\": \"presentation-by-html\",\n  \"version\": \"1.0.1\",\n  \"publishedAt\": 1779020096800\n}\n\nFile v1.0.1:skill-card.md\n\n## Description:\n\nUse when the user needs to create a technical sharing, presentation, or talk material.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[tavis1536-art](https://clawhub.ai/user/tavis1536-art)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers, technical teams, and presenters use this skill to plan narrative structure and generate interactive HTML presentation materials. It guides audience discovery, slide flow, and creation of offline-friendly HTML, CSS, and JavaScript deck files.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: The skill may write presentation files into a project workspace.\n\nMitigation: Review the destination paths and generated HTML, CSS, JavaScript, and asset files before accepting or publishing them.\n\nRisk: Broad trigger wording may activate the skill for general talk, sharing, or presentation requests.\n\nMitigation: Confirm the user wants an HTML slide deck workflow before applying the full presentation-building process.\n\n## Reference(s):\n\n- [ClawHub skill page](https://clawhub.ai/tavis1536-art/skills/presentation-by-html)\n- [Publisher profile](https://clawhub.ai/user/tavis1536-art)\n\n## Skill Output:\n\n**Output Type(s):** [Markdown, Code, Files, Guidance]\n\n**Output Format:** [Markdown guidance with generated HTML, CSS, and JavaScript files]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [May create presentation.html, css/style.css, js/deck.js, and supporting image assets when building a deck.]\n\n## Skill Version(s):\n\n1.0.1 (source: server release metadata)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.\n\nArchive v1.0.0: 2 files, 3641 bytes\n\nFiles: SKILL.md (6707b), _meta.json (139b)\n\nFile v1.0.0:SKILL.md\n\n---\nname: presentation-builder\ndescription: Use when the user needs to create a technical sharing, presentation, or talk material. Triggered by requests like \"prepare a sharing\", \"make slides\", \"build a presentation\", or any scenario requiring structured visual storytelling for an audience.\n---\n\n# Presentation Builder\n\n## Overview\n\nBuild presentation materials as HTML through a two-phase process: **brainstorm first, build second**. Never produce slides before the narrative structure is solid.\n\n## Phase 1: Brainstorm\n\nConduct a structured dialogue before writing any code.\n\n### Required Questions\n\n**Audience & Format:**\n\n- Who is the audience? Technical depth? Prior knowledge?\n- Duration? Format constraints?\n\n**Content Core:**\n\n- What problem does this solve? What was the status quo before?\n- What is the core capability / contribution?\n- Current status (shipped / MVP / in-progress)?\n- Demos, data, or real cases available?\n\n**Narrative Intent:**\n\n- What should the audience take away?\n- Pitfalls, \"aha moments\", counter-intuitive insights?\n\n### Structuring Principles\n\n- **Effect before mechanism**: Show what it does before explaining how\n- **Pitfalls are gold**: Real failures resonate more than polished success. Structure each as: phenomenon -> cause -> solution -> generalizable insight\n- **Avoid cliché openings**: Prefer tension, paradox, or direct demo over \"imagine it's 3am...\"\n- **Time-box sections**: Allocate minutes explicitly. Core insights deserve >40% of time\n- **One takeaway per slide**: Two ideas = two slides\n\n### Iterate Until Stable\n\nContinue dialogue until:\n\n- Framework covers all sections with time estimates\n- Narrative arc is clear (hook -> problem -> solution -> lessons -> future)\n- User confirms \"framework OK\"\n\n## Phase 2: Build HTML\n\n### File Structure\n\nSeparate concerns into three files for maintainability:\n\n```\nproject/\n  presentation.html    # Semantic structure only, no inline styles except layout-specific\n  css/style.css        # All visual styling, animations, component patterns\n  js/deck.js           # Navigation, interactions, TOC, expandable logic\n  images/              # Screenshots, avatars, demo videos\n```\n\n### Interaction Patterns (Critical)\n\nThe presentation is NOT a static slide deck. It uses **interactive detail-on-demand** patterns:\n\n**1. Tab Cards** — Clickable cards that switch a shared detail area below\n\n```html\n<div class=\"grid-3\">\n  <div class=\"card tab-card active\" data-tab=\"topic-a\">Summary A</div>\n  <div class=\"card tab-card\" data-tab=\"topic-b\">Summary B</div>\n</div>\n<div class=\"tab-detail-area\">\n  <div class=\"tab-detail active\" data-tab=\"topic-a\">...full detail...</div>\n  <div class=\"tab-detail\" data-tab=\"topic-b\">...full detail...</div>\n</div>\n```\n\nUse when: Multiple sub-topics exist under one slide, each with rich detail.\n\n**2. Expandable Details** — Cards that expand to reveal deeper content\n\n```html\n<div class=\"card expandable\" data-expand-target=\"detail-id\">Summary</div>\n<div class=\"expand-content-full\" id=\"detail-id\">\n  <div class=\"expand-inner\">...detailed content...</div>\n</div>\n```\n\nUse when: A slide has layered information — show summary by default, expand for evidence/examples. Supports `data-default-open` attribute.\n\n**3. Left-Tab + Right-Detail Panel** — Vertical tab list with adjacent detail pane\n\nUse when: Each tab has substantial content (code blocks, diagrams) that benefits from full-width display. Example: security isolation details.\n\n### Visual Design System\n\n| Component | CSS Class | Usage |\n| --- | --- | --- |\n| Cards | `.card .card-accent .card-{color}` | Discrete points, categorized items |\n| Tags | `.tag .tag-{color}` | Labels, keywords, status badges |\n| Grids | `.grid-2` `.grid-3` | Parallel comparisons |\n| Quote | `.quote` | Key insights, memorable one-liners |\n| Architecture boxes | `.arch-box .arch-box.primary` | System diagrams |\n| Code blocks | `<pre>` with `.comment .keyword .string .func .op` spans | Syntax-highlighted dark code |\n| Comparison | `.compare-box .compare-before .compare-after` | Before/after with positioned labels |\n| Timeline | `.timeline .timeline-item` | Sequential events with time markers |\n| Pitfall insight | `.pitfall-step .pitfall-insight` | Highlighted takeaway badges |\n| Big numbers | `.big-number` | Metrics with placeholder `__` for pending data |\n\n### Color System (Semantic)\n\n```css\n--primary: #1a73e8;       /* neutral/default/architecture */\n--accent: #ea4335;        /* problem/danger/before */\n--accent-green: #34a853;  /* solution/success/after */\n--accent-yellow: #fbbc04; /* caution/intermediate */\n--accent-purple: #9334e6; /* advanced/depth/evaluator */\n```\n\n### Animation Patterns\n\n- **Fade-in with stagger**: `.fade-in .fade-in-d1` through `.fade-in-d6` for progressive reveal\n- **Step-by-step flow**: `.anim-step` + `.anim-flow` container, revealed sequentially by JS\n- **Flow diagram**: `.flow-node` + `.flow-connector` revealed node-by-node with delays\n- **Tab transitions**: CSS `@keyframes tabFadeIn` for smooth panel switching\n\n### Slide Types\n\n1. **Title slide** (`.slide-title`): Gradient background, white text\n2. **Section divider** (`.slide-section`): Large faded number + heading\n3. **Content slide**: h2/h3 + interactive components\n4. **Architecture slide**: CSS flex/grid layouts with `.arch-box` nodes\n5. **Comparison slide**: `.compare-before` / `.compare-after` side-by-side\n6. **Data slide**: `.big-number` with `__` placeholders for pending metrics\n7. **Q&A slide**: Minimal title-slide style\n\n### JS Engine Responsibilities\n\n```\ndeck.js handles:\n- Slide navigation (keyboard ←→/Space/PgUp/PgDn, touch swipe, ESC for TOC)\n- Progress bar + counter update\n- Tab card switching (click → toggle active class on cards and detail panels)\n- Expandable toggle (click → open/close with accordion behavior)\n- Security panel switching\n- Animated flow triggering (reset + staggered reveal on slide enter)\n- Default-open restoration on slide enter\n- Expand state cleanup on slide leave\n```\n\n### Content Density Rules\n\n- Body text: 16-22px; never smaller than 13px even in expand-inner\n- Cards: max 3-4 per slide in top-level grid\n- Detail areas can be denser (tables, code, smaller font) since they're opt-in\n- One core idea per slide at the summary level; detail areas can go deeper\n- Use `data-title` on section/key slides for TOC generation\n- Lazy-load heavy media (video onclick pattern)\n\n### Things to Avoid\n\n- External CDN links (must work offline/intranet)\n- Single-file HTML over 500 lines (split CSS/JS)\n- Static walls of text (use expandable/tab patterns for density)\n- Inline styles for reusable patterns (extract to CSS classes)\n- Images for diagrams (use CSS flex/grid compositions)\n\nFile v1.0.0:_meta.json\n\n{\n  \"ownerId\": \"kn7600g7r6dctdpay0sjp1fayh82m9rg\",\n  \"slug\": \"presentation-by-html\",\n  \"version\": \"1.0.0\",\n  \"publishedAt\": 1779019813581\n}","readmeExcerpt":"Skill: presentation-by-html Owner: tavis1536-art Summary: Use when the user needs to create a technical sharing, presentation, or talk material. Triggered by requests like \"prepare a sharing\", \"make slides\", \"build... Tags: latest:1.0.1 Version history: v1.0.1 | 2026-05-17T12:14:56.800Z | user - Skill renamed from presentation-builder to presentation-by-html - No changes to logic or file content, only metadata (name)","codeSnippets":[],"executableExamples":[{"language":"text","snippet":"project/\n  presentation.html    # Semantic structure only, no inline styles except layout-specific\n  css/style.css        # All visual styling, animations, component patterns\n  js/deck.js           # Navigation, interactions, TOC, expandable logic\n  images/              # Screenshots, avatars, demo videos"},{"language":"html","snippet":"<div class=\"grid-3\">\n  <div class=\"card tab-card active\" data-tab=\"topic-a\">Summary A</div>\n  <div class=\"card tab-card\" data-tab=\"topic-b\">Summary B</div>\n</div>\n<div class=\"tab-detail-area\">\n  <div class=\"tab-detail active\" data-tab=\"topic-a\">...full detail...</div>\n  <div class=\"tab-detail\" data-tab=\"topic-b\">...full detail...</div>\n</div>"},{"language":"html","snippet":"<div class=\"card expandable\" data-expand-target=\"detail-id\">Summary</div>\n<div class=\"expand-content-full\" id=\"detail-id\">\n  <div class=\"expand-inner\">...detailed content...</div>\n</div>"},{"language":"css","snippet":"--primary: #1a73e8;       /* neutral/default/architecture */\n--accent: #ea4335;        /* problem/danger/before */\n--accent-green: #34a853;  /* solution/success/after */\n--accent-yellow: #fbbc04; /* caution/intermediate */\n--accent-purple: #9334e6; /* advanced/depth/evaluator */"},{"language":"text","snippet":"deck.js handles:\n- Slide navigation (keyboard ←→/Space/PgUp/PgDn, touch swipe, ESC for TOC)\n- Progress bar + counter update\n- Tab card switching (click → toggle active class on cards and detail panels)\n- Expandable toggle (click → open/close with accordion behavior)\n- Security panel switching\n- Animated flow triggering (reset + staggered reveal on slide enter)\n- Default-open restoration on slide enter\n- Expand state cleanup on slide leave"},{"language":"text","snippet":"project/\n  presentation.html    # Semantic structure only, no inline styles except layout-specific\n  css/style.css        # All visual styling, animations, component patterns\n  js/deck.js           # Navigation, interactions, TOC, expandable logic\n  images/              # Screenshots, avatars, demo videos"}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: presentation-by-html\ndescription: Use when the user needs to create a technical sharing, presentation, or talk material. Triggered by requests like \"prepare a sharing\", \"make slides\", \"build a presentation\", or any scenario requiring structured visual storytelling for an audience.\n---\n\n# Presentation Builder\n\n## Overview\n\nBuild presentation materials as HTML through a two-phase process: **brainstorm first, build second**. Never produce slides before the narrative structure is solid.\n\n## Phase 1: Brainstorm\n\nConduct a structured dialogue before writing any code.\n\n### Required Questions\n\n**Audience & Format:**\n\n- Who is the audience? Technical depth? Prior knowledge?\n- Duration? Format constraints?\n\n**Content Core:**\n\n- What problem does this solve? What was the status quo before?\n- What is the core capability / contribution?\n- Current status (shipped / MVP / in-progress)?\n- Demos, data, or real cases available?\n\n**Narrative Intent:**\n\n- What should the audience take away?\n- Pitfalls, \"aha moments\", counter-intuitive insights?\n\n### Structuring Principles\n\n- **Effect before mechanism**: Show what it does before explaining how\n- **Pitfalls are gold**: Real failures resonate more than polished success. Structure each as: phenomenon -> cause -> solution -> generalizable insight\n- **Avoid cliché openings**: Prefer tension, paradox, or direct demo over \"imagine it's 3am...\"\n- **Time-box sections**: Allocate minutes explicitly. Core insights deserve >40% of time\n- **One takeaway per slide**: Two ideas = two slides\n\n### Iterate Until Stable\n\nContinue dialogue until:\n\n- Framework covers all sections with time estimates\n- Narrative arc is clear (hook -> problem -> solution -> lessons -> future)\n- User confirms \"framework OK\"\n\n## Phase 2: Build HTML\n\n### File Structure\n\nSeparate concerns into three files for maintainability:\n\n```\nproject/\n  presentation.html    # Semantic structure only, no inline styles except layout-specific\n  css/style.css        # All visual styling, animations, component patterns\n  js/deck.js           # Navigation, interactions, TOC, expandable logic\n  images/              # Screenshots, avatars, demo videos\n```\n\n### Interaction Patterns (Critical)\n\nThe presentation is NOT a static slide deck. It uses **interactive detail-on-demand** patterns:\n\n**1. Tab Cards** — Clickable cards that switch a shared detail area below\n\n```html\n<div class=\"grid-3\">\n  <div class=\"card tab-card active\" data-tab=\"topic-a\">Summary A</div>\n  <div class=\"card tab-card\" data-tab=\"topic-b\">Summary B</div>\n</div>\n<div class=\"tab-detail-area\">\n  <div class=\"tab-detail active\" data-tab=\"topic-a\">...full detail...</div>\n  <div class=\"tab-detail\" data-tab=\"topic-b\">...full detail...</div>\n</div>\n```\n\nUse when: Multiple sub-topics exist under one slide, each with rich detail.\n\n**2. Expandable Details** — Cards that expand to reveal deeper content\n\n```html\n<div class=\"card expandable\" data-expand-target=\"detail-id\">Summary</div>\n<div class=\"expand-content-full"},{"path":"_meta.json","content":"{\n  \"ownerId\": \"kn7600g7r6dctdpay0sjp1fayh82m9rg\",\n  \"slug\": \"presentation-by-html\",\n  \"version\": \"1.0.1\",\n  \"publishedAt\": 1779020096800\n}"},{"path":"skill-card.md","content":"## Description:\n\nUse when the user needs to create a technical sharing, presentation, or talk material.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[tavis1536-art](https://clawhub.ai/user/tavis1536-art)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers, technical teams, and presenters use this skill to plan narrative structure and generate interactive HTML presentation materials. It guides audience discovery, slide flow, and creation of offline-friendly HTML, CSS, and JavaScript deck files.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: The skill may write presentation files into a project workspace.\n\nMitigation: Review the destination paths and generated HTML, CSS, JavaScript, and asset files before accepting or publishing them.\n\nRisk: Broad trigger wording may activate the skill for general talk, sharing, or presentation requests.\n\nMitigation: Confirm the user wants an HTML slide deck workflow before applying the full presentation-building process.\n\n## Reference(s):\n\n- [ClawHub skill page](https://clawhub.ai/tavis1536-art/skills/presentation-by-html)\n- [Publisher profile](https://clawhub.ai/user/tavis1536-art)\n\n## Skill Output:\n\n**Output Type(s):** [Markdown, Code, Files, Guidance]\n\n**Output Format:** [Markdown guidance with generated HTML, CSS, and JavaScript files]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [May create presentation.html, css/style.css, js/deck.js, and supporting image assets when building a deck.]\n\n## Skill Version(s):\n\n1.0.1 (source: server release metadata)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment."}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":"Use when the user needs to create a technical sharing, presentation, or talk material. Triggered by requests like \"prepare a sharing\", \"make slides\", \"build... Skill: presentation-by-html Owner: tavis1536-art Summary: Use when the user needs to create a technical sharing, presentation, or talk material. Triggered by requests like \"prepare a sharing\", \"make slides\", \"build... Tags: latest:1.0.1 Version history: v1.0.1 | 2026-05-17T12:14:56.800Z | user - Skill renamed from presentation-builder to presentation-by-html - No changes to logic or file content, only metadata (name)","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":1045,"uniquenessScore":56,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-11T23:53:00.375Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-10-11T23:53:00.375Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-10-12T22:19:56.560Z","emptyReason":null},"items":[{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"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!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-10-09T19:11:12.944Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"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","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/clawhub","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}