Beautiful HTML Templates
Template selection, content adaptation and consistent extensions
Give a coding assistant a finished HTML slide system: compare covers using your own content, choose a direction, and adapt the complete deck.
Open the author imageForest surfaces, a large pink serif title and mono chrome create a quiet editorial direction.
View the author galleryOriginal template screenshots linked in the author’s README, retaining demo copy and placeholders. These are not decks generated by this site. Screenshot counters may predate the current index: Neo-Grid Bold shows 12 while the index records 13. Compare your own title before choosing.
Working environment
- Coding assistants with local file access
- Browser-based HTML presentations
- GitHub stars
- 4,897
- Checked
- Categories
- Documents & Slides
See your own title in the design first.
Make the visual decision with three real covers, then spend the remaining effort on the complete story, data and assets. If the template is already chosen, go directly to adaptation, extension or localization.
Pick a task and get started
Obtain the whole repository, then give the assistant one task and your material. The first selection task pauses for cover comparison; later tasks assume a template has already been chosen.
Start with an outline, choose a visual direction, and produce an eight-slide deck.
Add the template library to your workspace
Obtain the complete repository as described in the README, make it available to the assistant, and read AGENTS.md. Work with template files; there is no SKILL.md to install. Adapting an existing template needs no new-template maintenance script.
Read the author’s setup guideGive your AI this first task
These editorial task examples follow the author’s workflow. Replace bracketed material and paths. Previews, data reconciliation and font checks must actually be performed; instructions are not evidence of completed validation.
Use beautiful-html-templates to make an eight-slide HTML presentation. Inputs: [real title, subtitle, author and date], [outline and evidence files], [available images]. Output: [new directory]. If the repository is absent, obtain a complete copy of https://github.com/zarazhangrui/beautiful-html-templates. Keep the original templates unchanged. Read the workflow in the root AGENTS.md. Confirm the occasion, audience and desired mood. The author explicitly asks for occasion and mood before choosing; wait for my answer. Then read index.json and select three distinct candidates using mood, tone and best_for, checking formality, density and scheme. Do not filter mechanically by industry. Read each shortlisted template’s template.html, template.json and design.md. Populate its first slide with my actual title, author and date. Give each preview its own directory and retain its own scripts and assets so identically named deck-stage.js files cannot overwrite one another. Make cover previews only, inspect them in a browser for fonts, long titles, assets and fit, then provide three paths and short explanations. Wait for my selection. Copy the complete selected template directory into the output location. Organize my material into cover, agenda, main conclusion, evidence, data or example, actions, evaluation measures and closing. Use a data slide only when the material supports it; invent no numbers. Preserve that template’s typefaces, palette, decoration, page structure and navigation. Edit or split long content; explain any necessary change in slide count. Extend missing layouts within this one design system. Replace body text, sample numbers, names, years, attributions, footers, monograms, image placeholders and hardcoded page numbers. Update navigation labels and counts. For charts, also reconcile scale, units, bar heights and sources. Preserve relative asset paths and include LICENSE plus required asset notices. Inspect every slide at the presentation size and in a smaller window for clipping, font fallback, navigation, images and links. Record actual findings. Deliver the whole directory, absolute entry HTML path, selection rationale and unresolved issues. An HTML file opening successfully does not establish offline readiness; list remaining remote fonts or images.
Check what you receive
- Three cover previews using the real title, followed by an explicit selection.
- A complete HTML presentation directory, entry path and actual slide-by-slide checks.
More about this skill
Zara Zhang’s Beautiful HTML Templates currently indexes 34 templates containing 358 demo slides. Each has HTML, metadata and design notes; some also carry their own navigation script. A coding assistant reads these files, chooses a suitable system and adapts the content. The library is useful when you have an outline and want a coherent visual starting point.
Selection is a visible part of the author’s workflow. Ask about occasion and mood, shortlist three directions, and put the real title, author and date into each cover. Mood, tone, formality and density guide the choice; industry examples are only suggestions. Build the full presentation after the user chooses, when changing direction is still inexpensive.
The adaptation rules separate content from visual identity. Replace text, figures, names, images and page numbers while retaining one template’s type, palette, decoration and navigation. Missing comparisons or timelines may be designed within that system. Charts, Chinese typesetting and offline use still require specific work; the template does not resolve those details automatically.
Sources and verification
Sources checked
Checked the pinned manual, index totals, three template metadata files, and Editorial Forest’s HTML, design notes and relevant navigation/print implementation. We did not run all 34 templates.