haowjy/interactive-artifact
cw/skills/interactive-artifact/SKILL.md
Build a self-contained HTML file that makes structured information explorable through interaction — clicking, filtering, sorting, expanding. Default to Mermaid diagrams; choose a different interaction pattern when the data calls for it.
$ install --global
skillsauthnpx skillsauth add haowjy/creative-writing-skills interactive-artifactInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jun 30, 2026, 2:56 AM203.7s10 files scanned
SKILL.md
- name:
- interactive-artifact
- description:
- |
- disable-model-invocation:
- true
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.
Interaction patterns
Default to Mermaid diagrams when information has relationships or flow. Pick a different pattern when the data is better served by it:
| Pattern | When to use | Resource |
|---|---|---|
| Explorable diagram | Dependencies, flow, system maps | resources/explorable-diagram.md |
| Data table | Records with sortable/filterable columns | resources/data-table.md |
| Data chart | Quantities, trends, distributions | resources/data-chart.md |
| Timeline | Chronological events with detail | resources/timeline.md |
| Tree / TOC | Hierarchy navigation, document outline | resources/tree-and-toc.md |
| Card grid | Items with summary + expandable detail | resources/card-grid.md |
| Diff / comparison | Before/after, version diff | resources/diff-view.md |
For custom node rendering, drag, or live filtering on graphs beyond what Mermaid
offers, see resources/experimental-react-flow.md.
Related Skills
haowjy/zoom-out
tools
VerifiedTrustedCommunity
Use when orienting in an unfamiliar area — fans out exploration across structure, knowledge, and history, then synthesizes one orientation map.
298SKILL.mdUpdated Jul 5, 2026
haowjy/structured-artifact
development
VerifiedTrustedCommunity
Load when building a static HTML artifact — single page or multi-page site — to make structured information explorable through layout and navigation.
298SKILL.mdUpdated Jul 5, 2026
haowjy/reflect
testing
VerifiedTrustedCommunity
User-invoked pause before reporting to check intent vs literal completion, surface adjacent wins, and route knowledge capture.
298SKILL.mdUpdated Jul 5, 2026
haowjy/qi-layer
development
VerifiedTrustedCommunity
Use when exploring or changing the codebase: read AGENTS.md first, use .context/CONTEXT.md for detail, keep intent docs succinct.
298SKILL.mdUpdated Jul 5, 2026