Rename artifact plugin to playground

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

@@ -1,8 +0,0 @@
-{
-  "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

@@ -1,28 +0,0 @@
-# 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/playground/.claude-plugin/plugin.json

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

plugins/playground/README.md

@@ -0,0 +1,28 @@
+# Playground Plugin
+
+Creates interactive HTML playgrounds — self-contained single-file explorers that let users configure something visually through controls, see a live preview, and copy out a prompt.
+
+## What is a Playground?
+
+A playground 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 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 playground 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)
+- **document-critique** — Document review (suggestions with approve/reject/comment workflow)
+
+## Installation
+
+Add this plugin to your Claude Code configuration to enable the playground skill.

plugins/artifact/skills/artifact/SKILL.md → plugins/playground/skills/playground/SKILL.md

@@ -1,19 +1,19 @@
 ---
-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.
+name: playground
+description: Creates interactive HTML playgrounds — 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 a playground, explorer, or interactive tool for a topic.
 ---
 
-# Artifact Builder
+# Playground 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.
+A playground 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.
+When the user asks for an interactive 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
+1. **Identify the playground 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)
@@ -21,14 +21,14 @@ When the user asks for an interactive artifact, playground, explorer, or visual
    - `templates/document-critique.md` — Document review (suggestions with approve/reject/comment workflow)
    - `templates/diff-review.md` — Code review (git diffs, commits, PRs with line-by-line commenting)
    - `templates/code-map.md` — Codebase architecture (component relationships, data flow, layer diagrams)
-3. **Follow the template** to build the artifact. If the topic doesn't fit any template cleanly, use the one closest and adapt.
+3. **Follow the template** to build the playground. If the topic doesn't fit any template cleanly, use the one closest and adapt.
 4. **Open in browser.** After writing the HTML file, run `open <filename>.html` to launch it in the user's default browser.
 
-## Core requirements (every artifact)
+## Core requirements (every playground)
 
 - **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.
+- **Prompt output.** Natural language, not a value dump. Only mentions non-default choices. Includes enough context to act on without seeing the playground. 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.
@@ -72,5 +72,5 @@ function updatePrompt() {
 - 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
+- External dependencies → if CDN is down, playground is dead
+- Prompt lacks context → include enough that it's actionable without the playground

plugins/artifact/skills/artifact/templates/code-map.md → plugins/playground/skills/playground/templates/code-map.md

@@ -1,6 +1,6 @@
 # Code Map Template
 
-Use this template when the artifact is about visualizing codebase architecture: component relationships, data flow, layer diagrams, system architecture with interactive commenting for feedback.
+Use this template when the playground is about visualizing codebase architecture: component relationships, data flow, layer diagrams, system architecture with interactive commenting for feedback.
 
 ## Layout
 
@@ -20,7 +20,7 @@ Use this template when the artifact is about visualizing codebase architecture:
 +-------------------+----------------------------------+
 ```
 
-Code map artifacts use an SVG canvas for the architecture diagram. Users click components to add comments, which become part of the generated prompt. Layer and connection filters let users focus on specific parts of the system.
+Code map playgrounds use an SVG canvas for the architecture diagram. Users click components to add comments, which become part of the generated prompt. Layer and connection filters let users focus on specific parts of the system.
 
 ## Control types for code maps
 

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

@@ -1,6 +1,6 @@
 # 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.
+Use this template when the playground is about learning, exploration, or mapping relationships: concept maps, knowledge gap identification, scope mapping, task decomposition with dependencies.
 
 ## Layout
 
@@ -18,7 +18,7 @@ Use this template when the artifact is about learning, exploration, or mapping r
 +-------------------------+------------+
 ```
 
-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.
+Canvas-based playgrounds 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
 

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

@@ -1,6 +1,6 @@
 # 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.
+Use this template when the playground is about data queries, APIs, pipelines, or structured configuration: SQL builders, API designers, regex builders, pipeline visuals, cron schedules.
 
 ## Layout
 
@@ -47,7 +47,7 @@ function renderPreview() {
 }
 ```
 
-For pipeline-style artifacts, render a horizontal or vertical flow diagram using positioned divs with arrow connectors.
+For pipeline-style playgrounds, render a horizontal or vertical flow diagram using positioned divs with arrow connectors.
 
 ## Prompt output for data
 

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

@@ -1,6 +1,6 @@
 # Design Playground Template
 
-Use this template when the artifact is about visual design decisions: components, layouts, spacing, color, typography, animation, responsive behavior.
+Use this template when the playground is about visual design decisions: components, layouts, spacing, color, typography, animation, responsive behavior.
 
 ## Layout
 

plugins/artifact/skills/artifact/templates/diff-review.md → plugins/playground/skills/playground/templates/diff-review.md

@@ -1,6 +1,6 @@
 # Diff Review Template
 
-Use this template when the artifact is about reviewing code diffs: git commits, pull requests, code changes with interactive line-by-line commenting for feedback.
+Use this template when the playground is about reviewing code diffs: git commits, pull requests, code changes with interactive line-by-line commenting for feedback.
 
 ## Layout
 
@@ -19,7 +19,7 @@ Use this template when the artifact is about reviewing code diffs: git commits,
 +------------------------------------------------------+
 ```
 
-Diff review artifacts display git diffs with syntax highlighting. Users click lines to add comments, which become part of the generated prompt for code review feedback.
+Diff review playgrounds display git diffs with syntax highlighting. Users click lines to add comments, which become part of the generated prompt for code review feedback.
 
 ## Control types for diff review
 

plugins/artifact/skills/artifact/templates/document-critique.md → plugins/playground/skills/playground/templates/document-critique.md

@@ -1,6 +1,6 @@
 # Document Critique Template
 
-Use this template when the artifact helps review and critique documents: SKILL.md files, READMEs, specs, proposals, or any text that needs structured feedback with approve/reject/comment workflow.
+Use this template when the playground helps review and critique documents: SKILL.md files, READMEs, specs, proposals, or any text that needs structured feedback with approve/reject/comment workflow.
 
 ## Layout
 
@@ -153,7 +153,7 @@ function updatePrompt() {
 
 ## Pre-populating suggestions
 
-When building a critique artifact for a specific document:
+When building a critique playground for a specific document:
 
 1. Read the document content
 2. Analyze and generate suggestions with: