From 21256d1605adfdb912fa0aff6f11fcad036d5200 Mon Sep 17 00:00:00 2001 From: Thariq Shihipar Date: Thu, 29 Jan 2026 00:27:35 -0800 Subject: [PATCH] Add artifact plugin MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 | 11 +++ plugins/artifact/.claude-plugin/plugin.json | 8 ++ plugins/artifact/README.md | 28 +++++++ plugins/artifact/skills/artifact/SKILL.md | 73 +++++++++++++++++++ .../skills/artifact/templates/concept-map.md | 73 +++++++++++++++++++ .../artifact/templates/data-explorer.md | 67 +++++++++++++++++ .../artifact/templates/design-playground.md | 67 +++++++++++++++++ .../skills/artifact/templates/writing-tool.md | 66 +++++++++++++++++ 8 files changed, 393 insertions(+) create mode 100644 plugins/artifact/.claude-plugin/plugin.json create mode 100644 plugins/artifact/README.md create mode 100644 plugins/artifact/skills/artifact/SKILL.md create mode 100644 plugins/artifact/skills/artifact/templates/concept-map.md create mode 100644 plugins/artifact/skills/artifact/templates/data-explorer.md create mode 100644 plugins/artifact/skills/artifact/templates/design-playground.md create mode 100644 plugins/artifact/skills/artifact/templates/writing-tool.md diff --git a/.claude-plugin/marketplace.json b/.claude-plugin/marketplace.json index d9742dc..29e587e 100644 --- a/.claude-plugin/marketplace.json +++ b/.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.", diff --git a/plugins/artifact/.claude-plugin/plugin.json b/plugins/artifact/.claude-plugin/plugin.json new file mode 100644 index 0000000..b554e47 --- /dev/null +++ b/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" + } +} diff --git a/plugins/artifact/README.md b/plugins/artifact/README.md new file mode 100644 index 0000000..6c5551a --- /dev/null +++ b/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. diff --git a/plugins/artifact/skills/artifact/SKILL.md b/plugins/artifact/skills/artifact/SKILL.md new file mode 100644 index 0000000..717183d --- /dev/null +++ b/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 diff --git a/plugins/artifact/skills/artifact/templates/concept-map.md b/plugins/artifact/skills/artifact/templates/concept-map.md new file mode 100644 index 0000000..a9b1e0d --- /dev/null +++ b/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 `` 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) diff --git a/plugins/artifact/skills/artifact/templates/data-explorer.md b/plugins/artifact/skills/artifact/templates/data-explorer.md new file mode 100644 index 0000000..b99d4ff --- /dev/null +++ b/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 `` 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, '$1') + .replace(/\b(users|orders|products)\b/g, '$1') + .replace(/'[^']*'/g, '$&'); +} +``` + +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) diff --git a/plugins/artifact/skills/artifact/templates/design-playground.md b/plugins/artifact/skills/artifact/templates/design-playground.md new file mode 100644 index 0000000..5c3c73b --- /dev/null +++ b/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) diff --git a/plugins/artifact/skills/artifact/templates/writing-tool.md b/plugins/artifact/skills/artifact/templates/writing-tool.md new file mode 100644 index 0000000..cc4f71e --- /dev/null +++ b/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)