AI-friendly HTML Documentation Readable For Humans

DragonWisdom helps you write documentation as minimal, semantic HTML: clear and token-efficient for AI agents, while being beautifully styled and fully functional for humans.

Turn a prompt

$dragonwisdom-html Recherche for a comparism of Opus 4.8 and ChatGPT 5.5. Focus on the main differences in benchmarks, costs and first reviews/feedback. Store the result as opus4-8-chatgpt-5-5.html

Into a HTML file

opus4-8-chatgpt-5-5.html

What You Are Looking At

This page is the live example. Its index.html is the source of this page and can be the source of your knowledge. It contains the documentation content and only the HTML needed for clear meaning.

dragonwisdom.css provides the visual design. dragonwisdom.js is optional and adds navigation, saving, Mermaid diagrams and sortable tables.

The built page can still be opened locally with file://, so it works as a static document.

How It Works

You provide the minimal semantic HTML. DragonWisdom takes care of the styling, readability, and optional interactive features.

flowchart LR
  subgraph agents[For AI agents]
    A[Minimal HTML]
  end
  subgraph humans[For humans]
    B[DragonWisdom CSS]
    C[Readable documentation]
    D[Optional DragonWisdom JS]
    E[Save, navigation, Mermaid, sortable tables]
  end
  A --> B
  B --> C
  A --> D
  D --> E
  style agents fill:#eff6ff,stroke:#60a5fa
  style humans fill:#f0fdf4,stroke:#4ade80

How to Use It

Choose the approach that best fits your use case: install the AI skill, start from an existing template, or write your own HTML from scratch.

AI Skill

Install the DragonWisdom HTML skill for AI agents with one command. The installer replaces an existing skill at $HOME/.agents/skills/dragonwisdom-html.

curl -o- https://dragonwisdom.de/install-skill.sh | bash

wget -qO- https://dragonwisdom.de/install-skill.sh | bash

Use the skill by starting your prompt with $dragonwisdom-html.

Use This Page as a Template

Press Ctrl+S, or use the JavaScript Version's Save this page button. Then edit the saved HTML file for your own documentation.

Or Use Other Templates

Minimal template for a simple page without navigation

Navigation template for a page with a main menu

Write Your Own HTML

You can create your own HTML documentation from scratch with the elements described in the documentation.

Add the CSS to your HTML:

<link rel="stylesheet" href="https://releases.dragonwisdom.de/v1.2/dragonwisdom.css">

Add the optional JavaScript when you want interactive navigation, saving, Mermaid rendering or sortable tables:

<script src="https://releases.dragonwisdom.de/v1.2/dragonwisdom.js"></script>

Why HTML Instead of Markdown?

Anthropic proposed moving away from Markdown files toward HTML files in order to provide more structured information in repositories.

Compare Both Variants Yourself

Long/many Markdown files Markdown variant

One structured HTML file HTML variant

HTML can be useful for documentation, but it must stay small and easy to write.

What HTML Adds

Semantic HTML improves how AI agents understand and process information.
More information can be presented in a visually structured, human-friendly way.
HTML enables features such as Mermaid diagrams, sortable tables and saveable pages.

What DragonWisdom Avoids

Verbose utility classes in every HTML element.
JavaScript as a hard requirement.
Layout wrappers that do not add meaning.

The Comparison

Tailwind CSS helps you create stunning websites, but using it directly comes at the cost of verbosity and complexity. DragonWisdom abstracts it into a streamlined approach: minimal, yet powerful.

Only Tailwind

<section class="mx-auto max-w-5xl rounded-md border border-slate-200 bg-white p-5 shadow-sm">
  <h2 class="mb-3 mt-0 text-2xl font-bold leading-tight text-slate-900">AI-friendly HTML documentation readable for humans</h2>
  <p class="my-4 text-base leading-6 text-slate-900">DragonWisdom helps you write documentation as minimal, semantic HTML: clear and token-efficient for AI agents, while being beautifully styled and fully functional for humans.</p>
  <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
    <p class="my-4 min-w-0 text-base leading-6 text-slate-900">Turn a prompt <img class="mt-2 block h-auto max-w-full rounded-md border border-slate-200" src="./img/prompt-research.png" alt="Prompt Research"></p>
    <p class="my-4 min-w-0 text-base leading-6 text-slate-900">Into a HTML file <img class="mt-2 block h-auto max-w-full rounded-md border border-slate-200" src="./img/html-research.png" alt="HTML Research"></p>
  </div>
</section>

With DragonWisdom

<section>
  <h2>AI-friendly HTML documentation readable for humans</h2>
  <p>DragonWisdom helps you write documentation as minimal, semantic HTML: clear and token-efficient for AI agents, while being beautifully styled and fully functional for humans.</p>
  <div class="split-2">
    <p>Turn a prompt <img src="./img/prompt-research.png" alt="Prompt Research"></p>
    <p>Into a HTML file <img src="./img/html-research.png" alt="HTML Research"></p>
  </div>
</section>

Headings

Headings give AI agents and human readers the same outline of the document.

First-level

Second-level

Third-level

Fourth-level

Fifth-level

Sixth-level

Body Text

A paragraph forms a simple text section.

Important text and bold text can be marked up differently.

Emphasized text and italic text show semantic and typographic italics.

Marked text, small text, code and HTML add short inline examples.

long-code-value-that-can-wrap-inside-the-word-when-the-line-is-too-narrow

<p>HTML code with syntax highlighting.</p>

Quote

Good markup starts with clear meaning.

DragonWisdom

Notes

Image

Images can explain a concept without changing the document structure.

Zoomable Image

Images with class="zoomable" can be enlarged in the JavaScript version.

Figure

Image with a short description.

References

Links keep supporting material close to the documentation without copying it into the page.

Internal link to the text section Relative link to the favicon External link External link in a new window Write an email Call a phone number

Buttons

Unordered List

Lists make key facts easy to scan and easy for agents to extract.

Unordered item
Another item
Final item

Ordered List

First step
Second step
Third step

Definitions

HTML: Structure and meaning
CSS: Presentation

Badges

Neutral
Info
Stable
Experiment
Deprecated

Two Split

Use split-2 when content should stay in two fixed grid tracks on larger displays.

Split layouts are useful when related content should stay in its own column.

Longer content remains inside the second grid column instead of flowing back into the first.

Three Split

Use split-3 when three content groups should sit next to each other on larger displays.

First column content can use the same simple paragraph markup as normal text.

Second column content keeps its own grid track.

Third column content also stays separate from the others.

Four Split

Use split-4 when four short content groups should form a compact grid on larger displays.

One

Two

Three

Four

Showcase

Use showcase when readers should see content rendered and as source markup at the same time.

Small Example

A showcase keeps the source HTML short and adds the two-column view with optional JavaScript.

Rendered content on the left.
Original markup as code on the right.

Tabs

Tabs keep related content areas close together. The source stays plain sections with headings, and JavaScript turns them into an accessible tab interface.

Markup

Use section class="tabs" with direct child sections. Each child section uses its heading as the tab label.

Fallback

Without JavaScript, all sections remain visible as normal document content.

Keyboard

With JavaScript, arrow keys, Home, End, Enter and Space follow the WAI-ARIA tabs pattern.

Table

Tables are useful when documentation needs comparison, status or structured feature data.

DragonWisdom feature overview
Feature	HTML	Requires JS	Use Case
Standard table	`table`	No	Feature lists and comparisons
Sortable table	`table class="sortable"`	Yes	Data that readers need to reorder
Status badge	`class="success"`	No	Visible state or severity

Sortable Table

Add CSS class sortable when a table should become interactive. The plain table still works without JavaScript.

Sortable table features
Capability	Enabled by	File	Stability
Table layout	table	src/table/index.css	Stable
Zebra rows	table	src/table/index.css	Stable
Sort arrows	sortable	src/table/sortable.css	Experimental

Mermaid Diagram

Diagrams show relationships that would be too slow to understand as text alone.

flowchart LR
  A[Knowledge] --> B[DragonWisdom]
  B --> C[AI-agent friendly HTML]
  B --> D[Human-friendly Design]
  B --> E[Human-friendly optional features]

Features

Feature toggles are body classes that enable optional JavaScript behavior without adding extra markup.

<body class="pageable saveable">

saveable: Injects the Save this page button into the navigation when JavaScript is loaded.
pageable: Injects the One-Page / Multi-Page navigation mode button when JavaScript is loaded. The JavaScript version starts in Multi-Page mode.

Without JavaScript, these classes have no interactive effect. Without saveable, no save button is injected. Without pageable, no page mode button is injected.