Add artifact plugin

Adds a skill for creating interactive HTML artifacts — self-contained
single-file explorers with visual controls, live preview, and prompt
output with copy button.

Includes templates for:
- Design playgrounds (components, layouts, spacing, color, typography)
- Data explorers (SQL, APIs, pipelines, regex)
- Concept maps (learning, exploration, relationships)
- Writing tools (tone, structure, audience)

.claude-plugin/marketplace.json

@@ -361,6 +361,17 @@
       "category": "development",
       "homepage": "https://github.com/anthropics/claude-plugins-public/tree/main/plugins/frontend-design"
     },
+    {
+      "name": "artifact",
+      "description": "Creates interactive HTML artifacts — self-contained single-file explorers with visual controls, live preview, and prompt output with copy button. Includes templates for design playgrounds, data explorers, concept maps, and writing tools.",
+      "author": {
+        "name": "Anthropic",
+        "email": "support@anthropic.com"
+      },
+      "source": "./plugins/artifact",
+      "category": "development",
+      "homepage": "https://github.com/anthropics/claude-plugins-official/tree/main/plugins/artifact"
+    },
     {
       "name": "ralph-loop",
       "description": "Interactive self-referential AI loops for iterative development, implementing the Ralph Wiggum technique. Claude works on the same task repeatedly, seeing its previous work, until completion.",

plugins/artifact/.claude-plugin/plugin.json

@@ -0,0 +1,8 @@
+{
+  "name": "artifact",
+  "description": "Creates interactive HTML artifacts — self-contained single-file explorers with visual controls, live preview, and prompt output with copy button",
+  "author": {
+    "name": "Anthropic",
+    "email": "support@anthropic.com"
+  }
+}

plugins/artifact/README.md

@@ -0,0 +1,28 @@
+# Artifact Plugin
+
+Creates interactive HTML artifacts — self-contained single-file explorers that let users configure something visually through controls, see a live preview, and copy out a prompt.
+
+## What is an Artifact?
+
+An artifact is a self-contained HTML file with:
+- Interactive controls on one side
+- A live preview on the other
+- A prompt output at the bottom with a copy button
+
+The user adjusts controls, explores visually, then copies the generated prompt back into Claude.
+
+## When to Use
+
+Use this plugin when the user asks for an interactive artifact, playground, explorer, or visual tool for a topic — especially when the input space is large, visual, or structural and hard to express as plain text.
+
+## Templates
+
+The skill includes templates for common artifact types:
+- **design-playground** — Visual design decisions (components, layouts, spacing, color, typography)
+- **data-explorer** — Data and query building (SQL, APIs, pipelines, regex)
+- **concept-map** — Learning and exploration (concept maps, knowledge gaps, scope mapping)
+- **writing-tool** — Writing and content (tone, document structure, audience)
+
+## Installation
+
+Add this plugin to your Claude Code configuration to enable the artifact skill.

plugins/artifact/skills/artifact/SKILL.md

@@ -0,0 +1,73 @@
+---
+name: artifact
+description: Creates interactive HTML artifacts — self-contained single-file explorers that let users configure something visually through controls, see a live preview, and copy out a prompt. Use when the user asks to make an artifact, playground, explorer, or interactive tool for a topic.
+---
+
+# Artifact Builder
+
+An artifact is a self-contained HTML file with interactive controls on one side, a live preview on the other, and a prompt output at the bottom with a copy button. The user adjusts controls, explores visually, then copies the generated prompt back into Claude.
+
+## When to use this skill
+
+When the user asks for an interactive artifact, playground, explorer, or visual tool for a topic — especially when the input space is large, visual, or structural and hard to express as plain text.
+
+## How to use this skill
+
+1. **Identify the artifact type** from the user's request
+2. **Load the matching template** from `templates/`:
+   - `templates/design-playground.md` — Visual design decisions (components, layouts, spacing, color, typography)
+   - `templates/data-explorer.md` — Data and query building (SQL, APIs, pipelines, regex)
+   - `templates/concept-map.md` — Learning and exploration (concept maps, knowledge gaps, scope mapping)
+   - `templates/writing-tool.md` — Writing and content (tone, document structure, audience)
+3. **Follow the template** to build the artifact. If the topic doesn't fit any template cleanly, use the one closest and adapt.
+
+## Core requirements (every artifact)
+
+- **Single HTML file.** Inline all CSS and JS. No external dependencies.
+- **Live preview.** Updates instantly on every control change. No "Apply" button.
+- **Prompt output.** Natural language, not a value dump. Only mentions non-default choices. Includes enough context to act on without seeing the artifact. Updates live.
+- **Copy button.** Clipboard copy with brief "Copied!" feedback.
+- **Sensible defaults + presets.** Looks good on first load. Include 3-5 named presets that snap all controls to a cohesive combination.
+- **Dark theme.** System font for UI, monospace for code/values. Minimal chrome.
+
+## State management pattern
+
+Keep a single state object. Every control writes to it, every render reads from it.
+
+```javascript
+const state = { /* all configurable values */ };
+
+function updateAll() {
+  renderPreview(); // update the visual
+  updatePrompt();  // rebuild the prompt text
+}
+// Every control calls updateAll() on change
+```
+
+## Prompt output pattern
+
+```javascript
+function updatePrompt() {
+  const parts = [];
+
+  // Only mention non-default values
+  if (state.borderRadius !== DEFAULTS.borderRadius) {
+    parts.push(`border-radius of ${state.borderRadius}px`);
+  }
+
+  // Use qualitative language alongside numbers
+  if (state.shadowBlur > 16) parts.push('a pronounced shadow');
+  else if (state.shadowBlur > 0) parts.push('a subtle shadow');
+
+  prompt.textContent = `Update the card to use ${parts.join(', ')}.`;
+}
+```
+
+## Common mistakes to avoid
+
+- Prompt output is just a value dump → write it as a natural instruction
+- Too many controls at once → group by concern, hide advanced in a collapsible section
+- Preview doesn't update instantly → every control change must trigger immediate re-render
+- No defaults or presets → starts empty or broken on load
+- External dependencies → if CDN is down, artifact is dead
+- Prompt lacks context → include enough that it's actionable without the artifact

plugins/artifact/skills/artifact/templates/concept-map.md

@@ -0,0 +1,73 @@
+# Concept Map Template
+
+Use this template when the artifact is about learning, exploration, or mapping relationships: concept maps, knowledge gap identification, scope mapping, task decomposition with dependencies.
+
+## Layout
+
+```
++--------------------------------------+
+|  Canvas (draggable nodes, edges)     |
+|  with tooltip on hover               |
++-------------------------+------------+
+|                         |            |
+|  Sidebar:               | Prompt     |
+|  • Knowledge levels     | output     |
+|  • Connection types     |            |
+|  • Node list            | [Copy]     |
+|  • Actions              |            |
++-------------------------+------------+
+```
+
+Canvas-based artifacts differ from the two-panel split. The interactive visual IS the control — users drag nodes and draw connections rather than adjusting sliders. The sidebar supplements with toggles and list controls.
+
+## Control types for concept maps
+
+| Decision | Control | Example |
+|---|---|---|
+| Knowledge level per node | Click-to-cycle button in sidebar list | Know → Fuzzy → Unknown |
+| Connection type | Selector before drawing | calls, depends on, contains, reads from |
+| Node arrangement | Drag on canvas | spatial layout reflects mental model |
+| Which nodes to include | Toggle or checkbox per node | hide/show concepts |
+| Actions | Buttons | Auto-layout (force-directed), clear edges, reset |
+
+## Canvas rendering
+
+Use a `<canvas>` element with manual draw calls. Key patterns:
+
+- **Hit testing:** Check mouse position against node bounding circles on mousedown/mousemove
+- **Drag:** On mousedown on a node, track offset and update position on mousemove
+- **Edge drawing:** Click node A, then click node B. Draw arrow between them with the selected relationship type
+- **Tooltips:** On hover, position a div absolutely over the canvas with description text
+- **Force-directed auto-layout:** Simple spring simulation — repulsion between all pairs, attraction along edges, iterate 100-200 times with damping
+
+```javascript
+function draw() {
+  ctx.clearRect(0, 0, W, H);
+  edges.forEach(e => drawEdge(e));  // edges first, under nodes
+  nodes.forEach(n => drawNode(n));  // nodes on top
+}
+```
+
+## Prompt output for concept maps
+
+The prompt should be a targeted learning request shaped by the user's knowledge markings:
+
+> "I'm learning [CODEBASE/DOMAIN]. I already understand: [know nodes]. I'm fuzzy on: [fuzzy nodes]. I have no idea about: [unknown nodes]. Here are the relationships I want to understand: [edge list in natural language]. Please explain the fuzzy and unknown concepts, focusing on these relationships. Build on what I already know. Use concrete code references."
+
+Only include edges the user drew. Only mention concepts they marked as fuzzy or unknown in the explanation request.
+
+## Pre-populating with real data
+
+For codebases or domains, pre-populate with:
+- **Nodes:** 15-20 key concepts with real file paths and short descriptions
+- **Edges:** 20-30 pre-drawn relationships based on actual architecture
+- **Knowledge:** Default all to "Fuzzy" so the user adjusts from there
+- **Presets:** "Zoom out" (hide internal nodes, show only top-level), "Focus on [layer]" (highlight nodes in one area)
+
+## Example topics
+
+- Codebase architecture map (modules, data flow, state management)
+- Framework learning (how React hooks connect, Next.js data fetching layers)
+- System design (services, databases, queues, caches and how they relate)
+- Task decomposition (goals → sub-tasks with dependency arrows, knowledge tags)
+- API surface map (endpoints grouped by resource, shared middleware, auth layers)

plugins/artifact/skills/artifact/templates/data-explorer.md

@@ -0,0 +1,67 @@
+# Data Explorer Template
+
+Use this template when the artifact is about data queries, APIs, pipelines, or structured configuration: SQL builders, API designers, regex builders, pipeline visuals, cron schedules.
+
+## Layout
+
+```
++-------------------+----------------------+
+|                   |                      |
+|  Controls         |  Formatted output    |
+|  grouped by:      |  (syntax-highlighted |
+|  • Source/tables  |   code, or a         |
+|  • Columns/fields |   visual diagram)    |
+|  • Filters        |                      |
+|  • Grouping       |                      |
+|  • Ordering       |                      |
+|  • Limits         |                      |
+|                   +----------------------+
+|                   |  Prompt output       |
+|                   |  [ Copy Prompt ]     |
++-------------------+----------------------+
+```
+
+## Control types by decision
+
+| Decision | Control | Example |
+|---|---|---|
+| Select from available items | Clickable cards/chips | table names, columns, HTTP methods |
+| Add filter/condition rows | Add button → row of dropdowns + input | WHERE column op value |
+| Join type or aggregation | Dropdown per row | INNER/LEFT/RIGHT, COUNT/SUM/AVG |
+| Limit/offset | Slider | result count 1–500 |
+| Ordering | Dropdown + ASC/DESC toggle | order by column |
+| On/off features | Toggle | show descriptions, include header |
+
+## Preview rendering
+
+Render syntax-highlighted output using `<span>` tags with color classes:
+
+```javascript
+function renderPreview() {
+  const el = document.getElementById('preview');
+  // Color-code by token type
+  el.innerHTML = sql
+    .replace(/\b(SELECT|FROM|WHERE|JOIN|ON|GROUP BY|ORDER BY|LIMIT)\b/g, '<span class="kw">$1</span>')
+    .replace(/\b(users|orders|products)\b/g, '<span class="tbl">$1</span>')
+    .replace(/'[^']*'/g, '<span class="str">$&</span>');
+}
+```
+
+For pipeline-style artifacts, render a horizontal or vertical flow diagram using positioned divs with arrow connectors.
+
+## Prompt output for data
+
+Frame it as a specification of what to build, not the raw query itself:
+
+> "Write a SQL query that joins orders to users on user_id, filters for orders after 2024-01-01 with total > $50, groups by user, and returns the top 10 users by order count."
+
+Include the schema context (table names, column types) so the prompt is self-contained.
+
+## Example topics
+
+- SQL query builder (tables, joins, filters, group by, order by, limit)
+- API endpoint designer (routes, methods, request/response field builder)
+- Data transformation pipeline (source → filter → map → aggregate → output)
+- Regex builder (sample strings, match groups, live highlight)
+- Cron schedule builder (visual timeline, interval, day toggles)
+- GraphQL query builder (type selection, field picker, nested resolvers)

plugins/artifact/skills/artifact/templates/design-playground.md

@@ -0,0 +1,67 @@
+# Design Playground Template
+
+Use this template when the artifact is about visual design decisions: components, layouts, spacing, color, typography, animation, responsive behavior.
+
+## Layout
+
+```
++-------------------+----------------------+
+|                   |                      |
+|  Controls         |  Live component/     |
+|  grouped by:      |  layout preview      |
+|  • Spacing        |  (renders in a       |
+|  • Color          |   mock page or       |
+|  • Typography     |   isolated card)     |
+|  • Shadow/Border  |                      |
+|  • Interaction    |                      |
+|                   +----------------------+
+|                   |  Prompt output       |
+|                   |  [ Copy Prompt ]     |
++-------------------+----------------------+
+```
+
+## Control types by decision
+
+| Decision | Control | Example |
+|---|---|---|
+| Sizes, spacing, radius | Slider | border-radius 0–24px |
+| On/off features | Toggle | show border, hover effect |
+| Choosing from a set | Dropdown | font-family, easing curve |
+| Colors | Hue + saturation + lightness sliders | shadow color, accent |
+| Layout structure | Clickable cards | sidebar-left / top-nav / no-nav |
+| Responsive behavior | Viewport-width slider | watch grid reflow at breakpoints |
+
+## Preview rendering
+
+Apply state values directly to a preview element's inline styles:
+
+```javascript
+function renderPreview() {
+  const el = document.getElementById('preview');
+  el.style.borderRadius = state.radius + 'px';
+  el.style.padding = state.padding + 'px';
+  el.style.boxShadow = state.shadow
+    ? `0 ${state.shadowY}px ${state.shadowBlur}px rgba(0,0,0,${state.shadowOpacity})`
+    : 'none';
+}
+```
+
+Show the preview on both light and dark backgrounds if relevant. Include a context toggle.
+
+## Prompt output for design
+
+Frame it as a direction to a developer, not a spec sheet:
+
+> "Update the card to feel soft and elevated: 12px border-radius, 24px horizontal padding, a medium box-shadow (0 4px 12px rgba(0,0,0,0.1)). On hover, lift it with translateY(-1px) and deepen the shadow slightly."
+
+If the user is working in Tailwind, suggest Tailwind classes. If raw CSS, use CSS properties.
+
+## Example topics
+
+- Button style explorer (radius, padding, weight, hover/active states)
+- Card component (shadow depth, radius, content layout, image)
+- Layout builder (sidebar width, content max-width, header height, grid)
+- Typography scale (base size, ratio, line heights across h1-body-caption)
+- Color palette generator (primary hue, derive secondary/accent/surface)
+- Dashboard density (airy → compact slider that scales everything proportionally)
+- Modal/dialog (width, overlay opacity, entry animation, corner radius)

plugins/artifact/skills/artifact/templates/writing-tool.md

@@ -0,0 +1,66 @@
+# Writing Tool Template
+
+Use this template when the artifact helps shape writing: tone calibration, document structure planning, audience profiling, content briefs.
+
+## Layout
+
+```
++-------------------+----------------------+
+|                   |                      |
+|  Controls         |  Live text preview   |
+|  grouped by:      |  (sample paragraph   |
+|  • Tone           |   re-rendered with   |
+|  • Audience       |   current settings,  |
+|  • Structure      |   or outline skeleton)|
+|  • Constraints    |                      |
+|                   +----------------------+
+|                   |  Prompt output       |
+|                   |  [ Copy Prompt ]     |
++-------------------+----------------------+
+```
+
+## Control types by decision
+
+| Decision | Control | Example |
+|---|---|---|
+| Tone axes | Slider pairs | formal↔casual, concise↔detailed, technical↔accessible |
+| Audience expertise | Slider | beginner → expert |
+| Audience role | Dropdown or chips | engineer, manager, exec, customer |
+| Document sections | Drag-and-drop list | reorder outline items |
+| Section depth | Per-item dropdown | brief / detailed / skip |
+| Word/length constraints | Slider | target length 500–5000 words |
+
+## Preview rendering
+
+For tone tools, show a fixed sample paragraph and re-render it with exaggerated characteristics matching the sliders. This gives the user a feel for what "formal + concise" vs "casual + detailed" actually reads like.
+
+```javascript
+const SAMPLES = {
+  formalConcise: "The system processes requests asynchronously via a distributed queue.",
+  formalDetailed: "The system architecture relies on an asynchronous message queue to process incoming requests, ...",
+  casualConcise: "It fires off requests in the background using a queue.",
+  casualDetailed: "So basically, when a request comes in, it doesn't block — ...",
+};
+
+function renderPreview() {
+  // Pick closest sample based on slider positions
+  const key = closestSampleKey(state.formality, state.conciseness);
+  document.getElementById('preview').textContent = SAMPLES[key];
+}
+```
+
+For structure tools, render the outline as an indented list with section labels and depth tags.
+
+## Prompt output for writing
+
+Frame it as a writing direction with audience and style constraints:
+
+> "Write a technical blog post about [TOPIC]. Target audience: mid-level engineers who know React but haven't used concurrent features. Tone: conversational but precise. Structure: intro (brief), problem statement (detailed), solution walkthrough with code examples (detailed), trade-offs (brief). Around 2000 words."
+
+## Example topics
+
+- Tone mixer (formal/casual × concise/detailed × technical/accessible — live sample)
+- Document structure planner (outline builder with section types and depth)
+- Audience profiler (expertise level, role, prior knowledge → writing prompt prefix)
+- Content brief builder (topic + audience + structure + constraints → full writing prompt)
+- Email drafting helper (recipient type, urgency, action needed → email prompt)