Kai Html Presentation logo

Kai Html Presentation

Community
cgallic
kai-html-presentation

Client-ready HTML presentation builder for Kai audit and report folders. Converts weekly audits, monthly audits, marketing reports, scorecards, findings, data-source notes, and action plans into a polished single-file HTML deck with sourced metrics, executive slides, speaker notes, and delivery-ready styling. Use when "HTML presentation", "HTML deck", "client-ready audit deck", "turn this audit into slides", "present the weekly audit", "present the monthly audit", or any request to deliver Kai reports as HTML slides.

Overview

Publishercgallic
Repositorykai-cmo-harness
Skill namekai-html-presentation
Stars
61
Forks
8
Bundled files
Instructions only
Links
  • Markdown instructions

    A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.

  • Works with any LLM

    AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.

  • Self-contained

    Everything the model needs lives in the instructions — no extra files to sync.

  • Open source

    Published by cgallic on GitHub. Read the source before you install it.

Installation

Install the Kai Html Presentation AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

1

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

  1. Open the app and go to Plugins → Skills.
  2. Choose "Install from GitHub".
  3. Paste the skill folder URL below and confirm.
    https://github.com/cgallic/kai-cmo-harness/tree/main/harness/skills-v2/kai-html-presentation
  4. Enable the skill in any chat where you want it available.
Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.
2

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills
git clone --depth 1 https://github.com/cgallic/kai-cmo-harness.git /tmp/kai-cmo-harness
mkdir -p .claude/skills
cp -r /tmp/kai-cmo-harness/harness/skills-v2/kai-html-presentation .claude/skills/kai-html-presentation
Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Kai Html Presentation in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Kai Html Presentation on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Kai Html Presentation is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

  • Loaded only when it is needed

    The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.

  • Switch models mid-chat

    Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

/kai-html-presentation — Client-Ready Audit Deck

Kai root note: knowledge/, harness/, and scripts/ paths in this skill live in the Kai install, not the user's project. Resolve them against the first ancestor directory of this SKILL.md that contains a knowledge/ folder (the Kai plugin root, ~/.claude/kai, or the kai-cmo-harness repo). MARKETING.md, memory/, and any output files live in the current project. If a referenced scripts/ command is not available in this install, say so, skip it, and continue with the file-based guidance — never fabricate its output.

Objective

A single-file HTML deck a client can be walked through, built entirely from an audit or report folder that already contains sourced findings and data gaps. Every number on a slide carries a source footer; missing data appears as a Data Gaps slide rather than as a blank.

This skill is for delivery, not analysis. It adds presentation, never findings.

Done when

Work type audit-report — floor E3/C4/O1 (harness/eco-floors.yaml). The deck is the client-facing form of an audit and inherits its floor.

  • E3 — a named human approved the exact deck file, and every quantitative claim on a slide resolves to a claim that already exists in the source artifacts with a source.
  • C4 — the Kai Data Provenance Rule holds: audit_provenance_lint.py passes on the source folder, the data mode is on the title slide, every number has a source footer, and _data-gaps.md is represented as a slide.
  • O1 — the actions slide names, per action, the metric it targets. A deck whose recommendations move nothing nameable is not finished.

Constraints

  • The source folder must already hold sourced findings and data gaps. Read _data-sources.md, _data-gaps.md, audit-data.json or kai-data.json, and the main report files before building. If there is no clear source folder, ask for the path. Accepted inputs: workspace/audits/weekly/<YYYY-MM-DD>/, workspace/audits/monthly/<YYYY-MM>/, workspace/marketing-audit/, or any SEO/CRO/report folder carrying _data-sources.md and _data-gaps.md.
  • Run the lint when the source folder is an audit:
    bash
    python scripts/quality_gates/audit_provenance_lint.py <source-folder> --audit-dir
  • No new quantitative claims. A number reaches a slide only if it exists in the source artifacts with a source. Every slide carrying a number carries a source footer. Missing data stays visible as a Data Gaps slide.
  • No placeholder text ships. The template's placeholders are all replaced with real sections from the source folder.
  • Build from the template. Start from assets/audit-deck-template.html in the kai-html-presentation skill directory and copy it to <source-folder>/html-presentation/index.html before replacing content.
  • Length: 8-14 slides for weekly audits, 10-18 for monthly audits.
  • Design: first slide identifies client, audit period, data mode, and retrieval date. Prefer dense, readable operator slides over marketing hero pages. Tables for scorecards, decisions, source inventory, and action plans. Short chart-like HTML blocks for trends only when the values are sourced. Text stays inside its containers at desktop and mobile widths. Restrained color — neutral background, dark text, one accent, status colors. No nested cards or decorative blobs. Key facts never live only inside images or screenshots.
  • Slide shape:
    html
    <section class="slide">
      <header>
        <p class="eyebrow">Audit period</p>
        <h2>Slide title</h2>
      </header>
      <div class="slide-body">
        <!-- source-backed content -->
      </div>
      <footer>Sources: ...</footer>
    </section>
    Use data-mode, source-tier, and retrieved-at labels where helpful.
  • Approval doctrine: the deck is a delivery artifact. Nothing here publishes, sends, or mutates a live channel.

Context

NeedLoad
Deck skeleton and stylingassets/audit-deck-template.html (in this skill's directory)
Source ledgers and collected numbers_data-sources.md, _data-gaps.md, audit-data.json / kai-data.json in the source folder
Provenance modes, source tiers, gap handlingharness/references/audit-data-provenance.md
Dashboard spec or data contract instead of slides/kai-data-dashboard

Required slide order — weekly audit: title and audit scope · executive snapshot · weekly scorecard · what changed this week · red and yellow flags · channel findings · conversion and lead capture · paid/content/SEO highlights when applicable · this week's actions · data sources and gaps.

Required slide order — monthly audit: title and audit scope · executive summary · 30-day scorecard · KPI trend summary · channel decisions · conversion and lead capture · search and AEO health · paid media and budget decision when applicable · lifecycle, retention, or reputation findings when applicable · strategic learning · next-month plan · data sources and gaps.

Output: <source-folder>/html-presentation/index.html, and optionally <source-folder>/html-presentation/notes.md for presenter notes that should not appear on client slides. Report the deck path in the final response.

Escalate when

  • The source folder has no _data-sources.md / _data-gaps.md, or its findings are unsourced — the deck would launder unsourced claims into a client-facing artifact.
  • The provenance lint fails and the fix would require inventing or re-deriving a number.
  • The client wants a number, trend, or comparison the source folder does not contain.
  • The source folder is internal_demo but the deck is headed to a real client.
  • The ask is analysis rather than delivery — route to the audit skill that owns the finding.

Frequently asked questions

What does the Kai Html Presentation AI skill do?

Client-ready HTML presentation builder for Kai audit and report folders. Converts weekly audits, monthly audits, marketing reports, scorecards, findings, data-source notes, and action plans into a polished single-file HTML deck with sourced metrics, executive slides, speaker notes, and delivery-ready styling. Use when "HTML presentation", "HTML deck", "client-ready audit deck", "turn this audit into slides", "present the weekly audit", "present the monthly audit", or any request to deliver Kai reports as HTML slides.

Why use Kai Html Presentation on TypingMind?

Because you install it once and use it with any model. Kai Html Presentation is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Kai Html Presentation in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/cgallic/kai-cmo-harness/tree/main/harness/skills-v2/kai-html-presentation. TypingMind reads its SKILL.md and installs it as a skill you can enable per chat.

Which AI models can use Kai Html Presentation?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Kai Html Presentation?

As many as you like. As long as a model supports skills, you can use Kai Html Presentation with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Kai Html Presentation AI skill free?

It is published on GitHub by cgallic. Check the repository for licensing terms. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

View all

Set up your own AI workspace now

Get notified about new features and future giveaways by subscribing to our newsletter 👇