interactive-artifact
Installation
SKILL.md
Interactive Artifact
A single HTML file that opens in a browser. The viewer clicks, filters, or expands to explore — not just read.
Principles
- One view, detail on demand. Show the full picture. Clicking an element reveals detail in a collapsible sidebar — don't split information across pages or tabs.
- Maximize the content area. Fill the viewport (
height: 100vh, flex column). Navigation and detail are collapsible sidebars with width transitions, not fixed headers or overlays. Content area gets all remaining space. - Light mode default with toggle. Drive colors from CSS custom properties. Toggle
dark mode by adding
.darkto<html>. Include a ☀/🌙 button in the toolbar. - Static, no build step. CDN
<script>tags. One HTML file, no npm, no bundler. - Works on a phone. Responsive layout, touch pan/pinch-zoom, tap targets ≥ 44px.
resources/layout-and-theme.md has the concrete layout, theme, and mobile patterns
shared across all interaction patterns.