Every premium and members-only resource for $9.99/month, as a no-commitment subscription. See the plans

PalateKit

Sign in
Menu

Request a resource

Describe the resource you are missing in one sentence. We will email you when it is published.

0 / 280

A page, a video or an image online.

Unlock PalateKit

Unlock everything

Plan

Paying means accepting our terms of sale.

Secure payment by Stripe. Receipts and invoices sent by email.

Welcome back

Sign in to install, download or save this resource. A free account is enough for free resources.

Single-File HTML Artifact Gallery v1.0.0

Use this resource to present an idea, plan or report as a self-contained HTML page

New

  • 363 downloads
  • 204 likes
  • 166 saves

$4.99

Lifetime access to this resource, with its updates.

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install html-artifact-gallery

With no option, the skill goes to ~/.agents/skills/; add --agent claude-code (or codex, cursor…) to target an agent.

First time: connect the CLI with

npx --yes palatekit@latest login

The agent picks the gallery model closest to your need, reads it in full, then writes your deliverable in the same style with your content. You get an HTML page that opens in any browser, with no build step, and an export button for its state when needed.

Mostly picked by

Updated November 2, 2026

Sheet of editorial HTML pages: report, slide deck, diagram and triage board

Details

Works in
Install guides
Generates with
Your agent's model
Licence
Apache-2.0

Similar resources

View all

What you get

  • SKILL.md: catalogue, conventions and gotchas
  • resources/: twenty HTML examples (plans, reports, slide deck, SVG figures, interactive editors)
  • resources/index.html: gallery with thumbnails

Good fit for

  • You want a polished, readable client report or status update
  • You are preparing a slide deck or explainer without a presentation tool
  • You want a small interactive editor whose result can be exported

Not for

  • Documents reviewed line by line in a repository, where markdown is better
  • Full multi-page sites with a back office

Tags

  • html
  • report
  • slides
  • diagram
  • presentation

About

You say

"Make me a weekly status report as a single HTML page, in the gallery style."

Sheet of editorial HTML pages: report, slide deck, diagram and triage board

Skill published by sammcj under the Apache-2.0 license.

Show more

Prerequisites

You bring
The content or topic to present and Your brand guidelines if you have any

How to use it

  1. Install the skill with its resources/ folder
  2. Describe the deliverable and give your content
  3. Open the generated page in a browser and adjust

Content preview

Files

  • LICENSE11.1 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • resources/01-exploration-code-approaches.html14.6 KB
  • resources/02-exploration-visual-designs.html14.2 KB
  • resources/03-code-review-pr.html26.2 KB
  • resources/04-code-understanding.html18 KB
  • resources/05-design-system.html18.3 KB
  • resources/06-component-variants.html16.8 KB
  • resources/07-prototype-animation.html12.6 KB
  • resources/08-prototype-interaction.html10.9 KB
  • resources/09-slide-deck.html16.7 KB
  • resources/10-svg-illustrations.html18.4 KB
  • resources/11-status-report.html16.5 KB
  • resources/12-incident-report.html15.7 KB
  • resources/13-flowchart-diagram.html15.3 KB
  • resources/14-research-feature-explainer.html12.4 KB
  • resources/15-research-concept-explainer.html13.6 KB
  • resources/16-implementation-plan.html28.7 KB
  • resources/17-pr-writeup.html24.5 KB
  • resources/18-editor-triage-board.html18.7 KB
  • resources/19-editor-feature-flags.html19.1 KB
  • resources/20-editor-prompt-tuner.html21.4 KB
  • resources/index.html38.5 KB
  • SKILL.md5.8 KB

Origin and licence

Modified by PalateKit

Author
sammcj
Source
github.com/sammcj/agentic-coding/tree/3f58e2fcd85f52cc7ba7459016b8253686f20ae0/Skills/html-design-examples
Licence
Apache-2.0

Notice

Version modifiée de « html-design-examples » (sammcj, Apache-2.0) : traduction française et fiche par PalateKit.

User reviews

–

No ratings yet

Loading reviews…

Delete your review?

Your rating and comment will be removed from the page.

Frequently asked questions

Can the examples be used as they are?

They are style and structure references with a fictional brand. The agent adapts them to your content and brand.

Does it need a connection or tools?

No. The pages are self-contained with no external library. The skill mentions two neighbouring skills (html-slides, playground) that are optional.