mirror of
https://github.com/anthropics/claude-plugins-official.git
synced 2026-01-30 04:22:03 +00:00
21256d1605
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)
29 lines
1.2 KiB
Markdown
29 lines
1.2 KiB
Markdown
# 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.
|