artifact-css · v0.1 · open source · MIT

Stop shipping markdown.
Ship artifacts.

Eleven agent skills wire real HTML artifacts into any agent — status reports, plans, slide decks, clickable flows, interactive editors. Each output: one self-contained .html. A real document. Not a wall of markdown.

See the componentsGet the CSS
$npx skills add olakunlevpn/olakunlevpn-artifact-skills -g

Markdown · default

artifact · structured

Week 19 · revenue

42
PRs shipped
8
P0 open
Shipped. Threaded comments rolled to 100% Friday.
Mon · Schema migrated

Same content. Left rendered as a markdown fallback. Right rendered with artifact-css.

03 · Pattern catalog

Eleven archetypes. All shipped.

Each card opens a live, single-file demo. Open the source — every artifact is one self-contained .html.

01shipped

Foundation

artifact-css

Tokens, components, and the page skeleton every artifact starts from.

open demo
02shipped · 3 templates

Reports

artifact-report

Status updates, post-mortems, incident timelines, PR writeups.

428123
open demo
03shipped · 3 templates

Plans & comparisons

artifact-plan

Implementation plans with milestones. Side-by-side comparisons. Roadmaps.

open demo
04shipped

Code review

artifact-review

Annotated diffs with margin comments, severity chips, hunk anchors.

open demo
05shipped · jQuery UI

Explainers

artifact-explainer

Concept primers with collapsible sections, tabbed code, glossary tooltips.

open demo
06shipped · 3 templates · jQuery UI

Editors

artifact-editor

Triage boards, feature-flag panels, prompt tuners. Drag, slide, export.

open demo
07shipped

Slide decks

artifact-deck

Arrow-key slide decks. Hash-routed. Presentation-ready.

open demo
08shipped

Clickable flows

artifact-flow

Multi-screen prototypes with hotspot routing.

open demo
09shipped · 3 templates

Diagrams

artifact-diagram

Flowcharts, module maps, SVG figure sheets. Inline SVG only.

open demo
10shipped · 2 templates

Design systems

artifact-design

Living design system pages. Component variants. Render-next-to-source.

open demo
11shipped · jQuery UI

Sandboxes

artifact-sandbox

Tunable animation playgrounds. Live CSS spec output.

open demo

04 · Install

Three paths.

Pick the one that matches the shape of what you're building. All three play well together.

path ACDN

Link the CSS into any HTML file

Self-hosted from this site, 7-day immutable edge cache, CORS-enabled.

<link rel="stylesheet"
      href="https://artifact-skills.netlify.app/artifact.css">
path Bskills.sh

Install the skills into any agent

Single command. Symlinks into Claude Code, Cursor, Codex, and 50+ other agent runtimes.

npx skills add olakunlevpn/olakunlevpn-artifact-skills -g --all
path Ctemplate

Curl a starter template

Download one template HTML file directly. Replace {{PLACEHOLDER}} tokens, save, ship.

curl -O https://artifact-skills.netlify.app/templates/artifact-report/status-report.html