skill-haowjy-creative-writing-skills-interactive-artifact · by Install
$ agentstack add skill-haowjy-creative-writing-skills-interactive-artifact ✓ scanned · ✓ verified, works with Claude Code, Cursor, and more.
Security review
✓ PassedNo issues found. Passed automated security review. · v0.1.0 How review works →
- ✓ Prompt-injection patterns
- ✓ Secret / credential exfiltration
- ✓ Dangerous shell & filesystem operations
- ✓ Untrusted network calls
- ✓ Known-malicious package signatures
What it can access
- ✓ Network access No
- ✓ Filesystem access No
- ✓ Shell / process execution No
- ✓ Environment & secrets No
- ✓ Dynamic code execution No
From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.
Verified badge
Passed review? Show it. Paste this badge into your README, it links to the public security report.
Links to your public security report.[](https://agentstack.voostack.com/security/report/skill-haowjy-creative-writing-skills-interactive-artifact) Reliability & compatibility
Declared compatibility
Compatibility is declared by the source manifest. End-to-end runtime verification is coming, see below.
We're building live execution health for every listing: tool-call success rate, median latency, uptime, and last-checked timestamps, measured, not self-reported. It isn't live yet, so we don't show numbers we can't stand behind.
How agent discovery & health will work →About
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 .dark to ``. Include a ☀/🌙 button in the toolbar.
- Static, no build step. CDN `` 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.
Source & license
This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.
- Author: haowjy
- Source: haowjy/creative-writing-skills
- License: Apache-2.0
Install and usage instructions live in the source repository linked above.
Reviews
No reviews yet, be the first.
Write a review
Versions
- v0.1.0 Imported from the upstream source.