/structured-artifact
Load when building a static HTML artifact — single page or multi-page site — to make structured information explorable through layout and navigation.
$ npx -y skills add haowjy/creative-writing-skills --skill structured-artifact --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/structured-artifact
Context preview
The summary Claude sees to decide when to auto-load this skill.
Load when building a static HTML artifact — single page or multi-page site — to make structured information explorable through layout and navigation.
SKILL.md
structured-artifact.SKILL.mdname: structured-artifact
description: |
Load when building a static HTML artifact — single page or multi-page site —
to make structured information explorable through layout and navigation.
disable-model-invocation: true
Structured Artifact
A structured artifact is plain HTML that opens from `file://` and works on a phone. Load `/information-hierarchy` first — it decides what each page shows and in what order; this skill builds it.
One page or several
Start from one `index.html`. Its first viewport carries the answer, and depth discloses in place — `<details>`, popovers, a collapsible detail panel. Grow into a folder (`index.html` + child pages + `shared.css`) when readers need whole pages per branch: the index becomes a map with links, and each child page stands alone with its own lede. `resources/multi-page-site.md` has the folder mechanics.
Build so it keeps working
Everything ships static — plain `<script>` tags, zero build step — so the artifact opens anywhere, years later, with nothing installed. CDN tags are the default; vendor the scripts into the folder when the artifact must work offline (`resources/layout-and-theme.md`). Resource snippets show the shape of each library's use, pinned only to a major version — before building, web-search the library's current version and syntax when anything looks dated, rather than trusting the snippet as frozen truth. Design for a narrow viewport and let wider layouts be enhancements; touch targets stay ≥ 44px and diagrams pan and pinch. Drive colors from CSS custom properties on `:root`, default light, with a ☀/🌙 toggle that adds `.dark` to `<html>` — readers get a readable page in daylight and a choice at night.
`resources/layout-and-theme.md` has the concrete layout, theme, and mobile patterns shared across everything below.
Verify the end state
Open the artifact in a browser before calling it done — a snippet that looked right in the editor still fails at runtime (a CDN URL 404s, a library changed its API, a diagram overflows). Check what a reader meets: the first viewport carries the answer, every page renders at ~375px width, the theme toggle flips both text and embedded content, links between pages resolve, and Mermaid diagrams render correctly.
Enrichments
Mix and match resources and patterns as needed, starting with the simplest pattern and adding complexity only when information hierarchy calls for it.
Load a resource when a beat calls for its pattern:
| Pattern | When a beat needs | Resource | |---|---|---| | Multi-page site | Index + child pages, nav, cross-links | `resources/multi-page-site.md` | | Mockup | Wireframe or annotated plan the reader must see | `resources/mockups.md` | | Diagram | Dependencies, flow, system maps | `resources/diagrams.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`.
Read more
name: structured-artifact description: | Load when building a static HTML artifact — single page or multi-page site — to make structured information explorable through layout and navigation. disable-model-invocation: true
Structured Artifact
A structured artifact is plain HTML that opens from `file://` and works on a phone. Load `/information-hierarchy` first — it decides what each page shows and in what order; this skill builds it.
One page or several
Start from one `index.html`. Its first viewport carries the answer, and depth discloses in place — `<details>`, popovers, a collapsible detail panel. Grow into a folder (`index.html` + child pages + `shared.css`) when readers need whole pages per branch: the index becomes a map with links, and each child page stands alone with its own lede. `resources/multi-page-site.md` has the folder mechanics.
Build so it keeps working
Everything ships static — plain `<script>` tags, zero build step — so the artifact opens anywhere, years later, with nothing installed. CDN tags are the default; vendor the scripts into the folder when the artifact must work offline (`resources/layout-and-theme.md`). Resource snippets show the shape of each library's use, pinned only to a major version — before building, web-search the library's current version and syntax when anything looks dated, rather than trusting the snippet as frozen truth. Design for a narrow viewport and let wider layouts be enhancements; touch targets stay ≥ 44px and diagrams pan and pinch. Drive colors from CSS custom properties on `:root`, default light, with a ☀/🌙 toggle that adds `.dark` to `<html>` — readers get a readable page in daylight and a choice at night.
`resources/layout-and-theme.md` has the concrete layout, theme, and mobile patterns shared across everything below.
Verify the end state
Open the artifact in a browser before calling it done — a snippet that looked right in the editor still fails at runtime (a CDN URL 404s, a library changed its API, a diagram overflows). Check what a reader meets: the first viewport carries the answer, every page renders at ~375px width, the theme toggle flips both text and embedded content, links between pages resolve, and Mermaid diagrams render correctly.
Enrichments
Mix and match resources and patterns as needed, starting with the simplest pattern and adding complexity only when information hierarchy calls for it.
Load a resource when a beat calls for its pattern:
| Pattern | When a beat needs | Resource | |---|---|---| | Multi-page site | Index + child pages, nav, cross-links | `resources/multi-page-site.md` | | Mockup | Wireframe or annotated plan the reader must see | `resources/mockups.md` | | Diagram | Dependencies, flow, system maps | `resources/diagrams.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`.
Write novels, short stories, and serial fiction with AI that maintains your voice, tracks your continuity, and gets better the more you use it.
Other skills on creative-writing-skills.
- /character-sim
Speak as a specified character from their current knowledge, voice, and emotional state. Use for skill-only workflows that need in-character conversation, voice discovery, or relationship pressure tests.
Open skill - /creative-research
Load when a story needs factual grounding the writer doesn't have: historical detail, cultural texture, domain accuracy, or how other authors handled similar material. Pass the question and story context; returns a sourced report the writer can draw from.
Open skill - /creative-writing-craft
Craft references for writing fiction well: prose, scenes, style, voice, and genre/page-level technique. Load when a writer, critic, or muse needs how-to-write guidance rather than a production mode.
Open skill - /creative-writing-modes
Creative-writing addendum to /llm-writing. Load when putting prose on the page: draft, revise, bridge, vary, or polish.
Open skill - /creative-writing-muse
Load when no subagents are available and one agent must plan, draft, critique, research, and capture memory by switching stances.
Open skill - /grill-with-docs
Use when challenging a plan — grills the author against documented decisions and sharpens terminology.
Open skill