skill CX Codex

structured-artifact — Claude Code skill: HTML artifacts

Q: How do I install structured-artifact in Claude?

Run `npx skills add haowjy/creative-writing-skills --skill structured-artifact -a claude-code`. The skill file then sits at `~/.claude/skills/structured-artifact/SKILL.md`.

Q: What does the skill need to work?

It depends on the `/information-hierarchy` skill and loads it if it isn't already active. During the build it reads `resources/delivery.md`, `resources/diagrams.md` and `resources/images-and-mockups.md`.

A skill for building structured HTML artifacts: the agent decides how to present the content first, then picks the tools.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓

npx skills add haowjy/creative-writing-skills --skill structured-artifact -a claude-code

Open on GitHub

What structured-artifact does

The skill loads when the agent is about to build an HTML artifact that explains or presents something. It settles the presentation before touching implementation. Text, visuals and interaction each get used where they actually help the reader, not as decoration.

It leans on the /information-hierarchy skill: if that one isn't loaded yet, structured-artifact pulls it in and follows it. During the build the agent reads supporting resources — resources/delivery.md for the delivery itself, resources/diagrams.md when relationships or flows need showing, and resources/images-and-mockups.md when images are embedded, annotated or compared.

One thing to watch: without /information-hierarchy loaded the skill has nothing to stand on, so check that both are installed in the project rather than just structured-artifact.

What it helps with

build an HTML page that explains a topic instead of restating it
show relationships as a diagram rather than a wall of prose
embed a screenshot or mockup and annotate it in place
choose between text, visuals and interaction before writing markup
lay out material in layers so the reader moves from overview to detail

Example prompts for the agent

build an HTML artifact that explains how this pipeline works
make a page with a data flow diagram and explanations
embed the mockup screenshot and label what changes on it

How to install structured-artifact

1Skills CLI (Vercel)

npx skills add haowjy/creative-writing-skills --skill structured-artifact -a claude-code

2Manually: put the files in place

~/.claude/skills/structured-artifact/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/structured-artifact/

1Skills CLI (Vercel)

npx skills add haowjy/creative-writing-skills --skill structured-artifact -a codex

2Manually: put the files in place

.agents/skills/structured-artifact/SKILL.md

For all projects use ~/.agents/skills/

1Skills CLI (Vercel)

npx skills add haowjy/creative-writing-skills --skill structured-artifact -a cursor

2Manually: put the files in place

.cursor/skills/structured-artifact/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install haowjy/creative-writing-skills structured-artifact

2Manually: put the files in place

.github/skills/structured-artifact/SKILL.md

1Skills CLI (Vercel)

npx skills add haowjy/creative-writing-skills --skill structured-artifact -a gemini-cli

2Platform CLI

gemini skills install https://github.com/haowjy/creative-writing-skills --path cw/skills/structured-artifact

Manually: put the files in place

.devin/skills/structured-artifact/SKILL.md

The legacy .windsurf/skills/ path still works

Skills CLI (Vercel)

npx skills add haowjy/creative-writing-skills --skill structured-artifact -a opencode

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about structured-artifact

How do I install structured-artifact in Claude?

Run npx skills add haowjy/creative-writing-skills --skill structured-artifact -a claude-code. The skill file then sits at ~/.claude/skills/structured-artifact/SKILL.md.

What does structured-artifact do?

It guides the agent through building a structured HTML artifact for explaining and presenting information: presentation decisions come first, implementation tools after.

What does the skill need to work?

It depends on the /information-hierarchy skill and loads it if it isn't already active. During the build it reads resources/delivery.md, resources/diagrams.md and resources/images-and-mockups.md.

Source text

SKILL.md · Apache-2.0

---
name: structured-artifact
description: |
  Load when creating structured HTML artifacts to explain and present information.
---

# Structured Artifact

Create structured artifacts for explaining and presenting information.

Load `/information-hierarchy` if it isn't already loaded, and follow it. Use
text, visuals, and interaction where each helps the reader understand. Decide
how to present the content before choosing implementation tools.

Read [delivery](resources/delivery.md) when building the artifact. Read
[diagrams](resources/diagrams.md) when showing relationships or flows, and
[images and mockups](resources/images-and-mockups.md) when embedding,
annotating, or comparing them.

Similar skills

Everything for Writing and docs →

cmux-artifact manaflow-ai Builds a durable HTML page from real logs, screenshots and timings, then opens it in a cmux workspace pane next to your terminal. CX Codex +1 660installs web-artifacts-builder nexu-io Builds HTML artifacts for claude.ai with React and Tailwind — Anthropic's reference workflow for embeddable interfaces. CX Codex +1 2,800installs pr-artifact-explorer official David Pine A GitHub Copilot plugin for moving through pull requests and opening GitHub Actions artifacts: test results, static sites, terminal recordings, source files. ★ 40,418repo stars design-artifact plannotator Directs AI coding assistants to design clean HTML deliverables with thoughtful type and tokens instead of generic machine aesthetics. CX Codex +1 1,700installs html plannotator A skill that makes the agent build one self-contained HTML file with styles and scripts inlined: a report, landing page, deck or calculator. It also knows which sibling skill should take the job instead. CX Codex +1 3,900installs system-atlas inkboard Builds an interactive isometric architecture map and a matching SYSTEM.md twin from one data file, keeping design reviews and question tracking in sync. CX Codex +1 505installs

From the same set22

grill-with-docs Challenges project plans through sequential questioning, verifies terminology against project docs, and records decisions on the fly. CX Codex +1 514installs creative-writing-muse A skill for a single agent that switches stances on its own: plans, drafts, critiques and remembers. Useful when no subagents are around. CX Codex +1 494installs creative-research This skill gathers grounded material for a story question: history, culture, daily detail, how a trade actually works. You get back a sourced report. CX Codex +1 487installs information-hierarchy A skill for large human-facing output: reports, docs, multi-section explanations. The answer comes first, depth sits behind it. CX Codex +1 399installs zoom-out Explores an unfamiliar area from several angles at once, then folds the findings into a single orientation map. CX Codex +1 386installs qi-layer A skill that sets the rules for writing and maintaining AGENTS.md and .context/CONTEXT.md so intent docs stay short and load-bearing. CX Codex +1 385installs knowledge-layers A skill that decides which layer holds a piece of knowledge: AGENTS.md, .context/, KB, docs/ or a work directory. Useful when the agent keeps looking in the wrong place. CX Codex +1 384installs md-validation Validates relative links between pages and Mermaid diagrams before you ship. Useful for multi-page artifacts and knowledge bases. CX Codex +1 383installs