Compare commits

..

1 Commits

Author SHA1 Message Date
Thariq Shihipar
60c1d6f8ee Add instruction to open artifact in browser after creation 2026-01-29 12:41:31 -08:00
28 changed files with 202 additions and 538 deletions

View File

@@ -362,15 +362,15 @@
"homepage": "https://github.com/anthropics/claude-plugins-public/tree/main/plugins/frontend-design"
},
{
"name": "playground",
"description": "Creates interactive HTML playgrounds — 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 document critique.",
"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/playground",
"source": "./plugins/artifact",
"category": "development",
"homepage": "https://github.com/anthropics/claude-plugins-official/tree/main/plugins/playground"
"homepage": "https://github.com/anthropics/claude-plugins-official/tree/main/plugins/artifact"
},
{
"name": "ralph-loop",
@@ -629,26 +629,6 @@
"url": "https://github.com/coderabbitai/claude-plugin.git"
},
"homepage": "https://github.com/coderabbitai/claude-plugin.git"
},
{
"name": "sonatype-guide",
"description": "Sonatype Guide MCP server for software supply chain intelligence and dependency security. Analyze dependencies for vulnerabilities, get secure version recommendations, and check component quality metrics.",
"category": "security",
"source": {
"source": "url",
"url": "https://github.com/sonatype/sonatype-guide-claude-plugin.git"
},
"homepage": "https://github.com/sonatype/sonatype-guide-claude-plugin.git"
},
{
"name": "firecrawl",
"description": "Web scraping and crawling powered by Firecrawl. Turn any website into clean, LLM-ready markdown or structured data. Scrape single pages, crawl entire sites, search the web, and extract structured information. Includes an AI agent for autonomous multi-source data gathering - just describe what you need and it finds, navigates, and extracts automatically.",
"category": "development",
"source": {
"source": "url",
"url": "https://github.com/firecrawl/firecrawl-claude-plugin.git"
},
"homepage": "https://github.com/firecrawl/firecrawl-claude-plugin.git"
}
]
}

View File

@@ -1,273 +0,0 @@
#!/usr/bin/env bun
/**
* Validates YAML frontmatter in agent, skill, and command .md files.
*
* Usage:
* bun validate-frontmatter.ts # scan current directory
* bun validate-frontmatter.ts /path/to/dir # scan specific directory
* bun validate-frontmatter.ts file1.md file2.md # validate specific files
*/
import { parse as parseYaml } from "yaml";
import { readdir, readFile } from "fs/promises";
import { basename, join, relative, resolve } from "path";
// Characters that require quoting in YAML values when unquoted:
// {} [] flow indicators, * anchor/alias, & anchor, # comment,
// ! tag, | > block scalars, % directive, @ ` reserved
const YAML_SPECIAL_CHARS = /[{}[\]*&#!|>%@`]/;
const FRONTMATTER_REGEX = /^---\s*\n([\s\S]*?)---\s*\n?/;
/**
* Pre-process frontmatter text to quote values containing special YAML
* characters. This allows glob patterns like **\/*.{ts,tsx} to parse.
*/
function quoteSpecialValues(text: string): string {
const lines = text.split("\n");
const result: string[] = [];
for (const line of lines) {
const match = line.match(/^([a-zA-Z_-]+):\s+(.+)$/);
if (match) {
const [, key, value] = match;
if (!key || !value) {
result.push(line);
continue;
}
// Skip already-quoted values
if (
(value.startsWith('"') && value.endsWith('"')) ||
(value.startsWith("'") && value.endsWith("'"))
) {
result.push(line);
continue;
}
if (YAML_SPECIAL_CHARS.test(value)) {
const escaped = value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
result.push(`${key}: "${escaped}"`);
continue;
}
}
result.push(line);
}
return result.join("\n");
}
interface ParseResult {
frontmatter: Record<string, unknown>;
content: string;
error?: string;
}
function parseFrontmatter(markdown: string): ParseResult {
const match = markdown.match(FRONTMATTER_REGEX);
if (!match) {
return {
frontmatter: {},
content: markdown,
error: "No frontmatter found",
};
}
const frontmatterText = quoteSpecialValues(match[1] || "");
const content = markdown.slice(match[0].length);
try {
const parsed = parseYaml(frontmatterText);
if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
return { frontmatter: parsed as Record<string, unknown>, content };
}
return {
frontmatter: {},
content,
error: `YAML parsed but result is not an object (got ${typeof parsed}${Array.isArray(parsed) ? " array" : ""})`,
};
} catch (err) {
return {
frontmatter: {},
content,
error: `YAML parse failed: ${err instanceof Error ? err.message : err}`,
};
}
}
// --- Validation ---
type FileType = "agent" | "skill" | "command";
interface ValidationIssue {
level: "error" | "warning";
message: string;
}
function validateAgent(
frontmatter: Record<string, unknown>
): ValidationIssue[] {
const issues: ValidationIssue[] = [];
if (!frontmatter["name"] || typeof frontmatter["name"] !== "string") {
issues.push({ level: "error", message: 'Missing required "name" field' });
}
if (
!frontmatter["description"] ||
typeof frontmatter["description"] !== "string"
) {
issues.push({
level: "error",
message: 'Missing required "description" field',
});
}
return issues;
}
function validateSkill(
frontmatter: Record<string, unknown>
): ValidationIssue[] {
const issues: ValidationIssue[] = [];
if (!frontmatter["description"] && !frontmatter["when_to_use"]) {
issues.push({
level: "error",
message: 'Missing required "description" field',
});
}
return issues;
}
function validateCommand(
frontmatter: Record<string, unknown>
): ValidationIssue[] {
const issues: ValidationIssue[] = [];
if (
!frontmatter["description"] ||
typeof frontmatter["description"] !== "string"
) {
issues.push({
level: "error",
message: 'Missing required "description" field',
});
}
return issues;
}
// --- File type detection ---
function detectFileType(filePath: string): FileType | null {
if (filePath.includes("/agents/")) return "agent";
if (filePath.includes("/skills/") && basename(filePath) === "SKILL.md")
return "skill";
if (filePath.includes("/commands/")) return "command";
return null;
}
// --- File discovery ---
async function findMdFiles(
baseDir: string
): Promise<{ path: string; type: FileType }[]> {
const results: { path: string; type: FileType }[] = [];
async function walk(dir: string) {
const entries = await readdir(dir, { withFileTypes: true });
for (const entry of entries) {
const fullPath = join(dir, entry.name);
if (entry.isDirectory()) {
await walk(fullPath);
} else if (entry.name.endsWith(".md")) {
const type = detectFileType(fullPath);
if (type) {
results.push({ path: fullPath, type });
}
}
}
}
await walk(baseDir);
return results;
}
// --- Main ---
async function main() {
const args = process.argv.slice(2);
let files: { path: string; type: FileType }[];
let baseDir: string;
if (args.length > 0 && args.every((a) => a.endsWith(".md"))) {
baseDir = process.cwd();
files = [];
for (const arg of args) {
const fullPath = resolve(arg);
const type = detectFileType(fullPath);
if (type) {
files.push({ path: fullPath, type });
}
}
} else {
baseDir = args[0] || process.cwd();
files = await findMdFiles(baseDir);
}
let totalErrors = 0;
let totalWarnings = 0;
console.log(`Validating ${files.length} frontmatter files...\n`);
for (const { path: filePath, type } of files) {
const rel = relative(baseDir, filePath);
const content = await readFile(filePath, "utf-8");
const result = parseFrontmatter(content);
const issues: ValidationIssue[] = [];
if (result.error) {
issues.push({ level: "error", message: result.error });
}
if (!result.error) {
switch (type) {
case "agent":
issues.push(...validateAgent(result.frontmatter));
break;
case "skill":
issues.push(...validateSkill(result.frontmatter));
break;
case "command":
issues.push(...validateCommand(result.frontmatter));
break;
}
}
if (issues.length > 0) {
console.log(`${rel} (${type})`);
for (const issue of issues) {
const prefix = issue.level === "error" ? " ERROR" : " WARN ";
console.log(`${prefix}: ${issue.message}`);
if (issue.level === "error") totalErrors++;
else totalWarnings++;
}
console.log();
}
}
console.log("---");
console.log(
`Validated ${files.length} files: ${totalErrors} errors, ${totalWarnings} warnings`
);
if (totalErrors > 0) {
process.exit(1);
}
}
main().catch((err) => {
console.error("Fatal error:", err);
process.exit(2);
});

View File

@@ -1,34 +0,0 @@
name: Validate Frontmatter
on:
pull_request:
paths:
- '**/agents/*.md'
- '**/skills/*/SKILL.md'
- '**/commands/*.md'
jobs:
validate:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: oven-sh/setup-bun@v2
- name: Install dependencies
run: cd .github/scripts && bun install yaml
- name: Get changed frontmatter files
id: changed
run: |
FILES=$(gh pr diff ${{ github.event.pull_request.number }} --name-only | grep -E '(agents/.*\.md|skills/.*/SKILL\.md|commands/.*\.md)$' || true)
echo "files<<EOF" >> "$GITHUB_OUTPUT"
echo "$FILES" >> "$GITHUB_OUTPUT"
echo "EOF" >> "$GITHUB_OUTPUT"
env:
GH_TOKEN: ${{ github.token }}
- name: Validate frontmatter
if: steps.changed.outputs.files != ''
run: |
echo "${{ steps.changed.outputs.files }}" | xargs bun .github/scripts/validate-frontmatter.ts

View File

@@ -1,10 +1,6 @@
{
"slack": {
"type": "http",
"url": "https://mcp.slack.com/mcp",
"oauth": {
"clientId": "1601185624273.8899143856786",
"callbackPort": 3118
}
"type": "sse",
"url": "https://mcp.slack.com/sse"
}
}

View File

@@ -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"
}
}

View File

@@ -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.

View File

@@ -1,19 +1,19 @@
---
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.
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.
---
# Playground Builder
# Artifact Builder
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.
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 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 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 playground type** from the user's request
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)
@@ -21,14 +21,14 @@ When the user asks for an interactive playground, explorer, or visual tool for a
- `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 playground. If the topic doesn't fit any template cleanly, use the one closest and adapt.
3. **Follow the template** to build the artifact. 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 playground)
## 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 playground. Updates live.
- **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.
@@ -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, playground is dead
- Prompt lacks context → include enough that it's actionable without the playground
- External dependencies → if CDN is down, artifact is dead
- Prompt lacks context → include enough that it's actionable without the artifact

View File

@@ -1,6 +1,6 @@
# Code Map Template
Use this template when the playground is about visualizing codebase architecture: component relationships, data flow, layer diagrams, system architecture with interactive commenting for feedback.
Use this template when the artifact 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 playground is about visualizing codebase architecture
+-------------------+----------------------------------+
```
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.
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.
## Control types for code maps

View File

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

View File

@@ -1,6 +1,6 @@
# Data Explorer Template
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.
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
@@ -47,7 +47,7 @@ function renderPreview() {
}
```
For pipeline-style playgrounds, render a horizontal or vertical flow diagram using positioned divs with arrow connectors.
For pipeline-style artifacts, render a horizontal or vertical flow diagram using positioned divs with arrow connectors.
## Prompt output for data

View File

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

View File

@@ -1,6 +1,6 @@
# Diff Review Template
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.
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.
## Layout
@@ -19,7 +19,7 @@ Use this template when the playground is about reviewing code diffs: git commits
+------------------------------------------------------+
```
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.
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.
## Control types for diff review

View File

@@ -1,6 +1,6 @@
# Document Critique Template
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.
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.
## Layout
@@ -153,7 +153,7 @@ function updatePrompt() {
## Pre-populating suggestions
When building a critique playground for a specific document:
When building a critique artifact for a specific document:
1. Read the document content
2. Analyze and generate suggestions with:

View File

@@ -1,5 +1,5 @@
---
name: writing-hookify-rules
name: Writing Hookify Rules
description: This skill should be used when the user asks to "create a hookify rule", "write a hook rule", "configure hookify", "add a hookify rule", or needs guidance on hookify rule syntax and patterns.
version: 0.1.0
---

View File

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

View File

@@ -1,28 +0,0 @@
# 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.

View File

@@ -6,13 +6,13 @@ A comprehensive toolkit for developing Claude Code plugins with expert guidance
The plugin-dev toolkit provides seven specialized skills to help you build high-quality Claude Code plugins:
1. **hook-development** - Advanced hooks API and event-driven automation
2. **mcp-integration** - Model Context Protocol server integration
3. **plugin-structure** - Plugin organization and manifest configuration
4. **plugin-settings** - Configuration patterns using .claude/plugin-name.local.md files
5. **command-development** - Creating slash commands with frontmatter and arguments
6. **agent-development** - Creating autonomous agents with AI-assisted generation
7. **skill-development** - Creating skills with progressive disclosure and strong triggers
1. **Hook Development** - Advanced hooks API and event-driven automation
2. **MCP Integration** - Model Context Protocol server integration
3. **Plugin Structure** - Plugin organization and manifest configuration
4. **Plugin Settings** - Configuration patterns using .claude/plugin-name.local.md files
5. **Command Development** - Creating slash commands with frontmatter and arguments
6. **Agent Development** - Creating autonomous agents with AI-assisted generation
7. **Skill Development** - Creating skills with progressive disclosure and strong triggers
Each skill follows best practices with progressive disclosure: lean core documentation, detailed references, working examples, and utility scripts.
@@ -53,7 +53,7 @@ Use this workflow for structured, high-quality plugin development from concept t
## Skills
### 1. hook-development
### 1. Hook Development
**Trigger phrases:** "create a hook", "add a PreToolUse hook", "validate tool use", "implement prompt-based hooks", "${CLAUDE_PLUGIN_ROOT}", "block dangerous commands"
@@ -73,7 +73,7 @@ Use this workflow for structured, high-quality plugin development from concept t
**Use when:** Creating event-driven automation, validating operations, or enforcing policies in your plugin.
### 2. mcp-integration
### 2. MCP Integration
**Trigger phrases:** "add MCP server", "integrate MCP", "configure .mcp.json", "Model Context Protocol", "stdio/SSE/HTTP server", "connect external service"
@@ -92,7 +92,7 @@ Use this workflow for structured, high-quality plugin development from concept t
**Use when:** Integrating external services, APIs, databases, or tools into your plugin.
### 3. plugin-structure
### 3. Plugin Structure
**Trigger phrases:** "plugin structure", "plugin.json manifest", "auto-discovery", "component organization", "plugin directory layout"
@@ -111,7 +111,7 @@ Use this workflow for structured, high-quality plugin development from concept t
**Use when:** Starting a new plugin, organizing components, or configuring the plugin manifest.
### 4. plugin-settings
### 4. Plugin Settings
**Trigger phrases:** "plugin settings", "store plugin configuration", ".local.md files", "plugin state files", "read YAML frontmatter", "per-project plugin settings"
@@ -132,7 +132,7 @@ Use this workflow for structured, high-quality plugin development from concept t
**Use when:** Making plugins configurable, storing per-project state, or implementing user preferences.
### 5. command-development
### 5. Command Development
**Trigger phrases:** "create a slash command", "add a command", "command frontmatter", "define command arguments", "organize commands"
@@ -151,7 +151,7 @@ Use this workflow for structured, high-quality plugin development from concept t
**Use when:** Creating slash commands, defining command arguments, or organizing plugin commands.
### 6. agent-development
### 6. Agent Development
**Trigger phrases:** "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "autonomous agent"
@@ -172,7 +172,7 @@ Use this workflow for structured, high-quality plugin development from concept t
**Use when:** Creating autonomous agents, defining agent behavior, or implementing AI-assisted agent generation.
### 7. skill-development
### 7. Skill Development
**Trigger phrases:** "create a skill", "add a skill to plugin", "write a new skill", "improve skill description", "organize skill content"
@@ -286,11 +286,11 @@ The hook-development skill includes production-ready utilities:
### Working Examples
Every skill provides working examples:
- **hook-development**: 3 complete hook scripts (bash, write validation, context loading)
- **mcp-integration**: 3 server configurations (stdio, SSE, HTTP)
- **plugin-structure**: 3 plugin layouts (minimal, standard, advanced)
- **plugin-settings**: 3 examples (read-settings hook, create-settings command, templates)
- **command-development**: 10 complete command examples (review, test, deploy, docs, etc.)
- **Hook Development**: 3 complete hook scripts (bash, write validation, context loading)
- **MCP Integration**: 3 server configurations (stdio, SSE, HTTP)
- **Plugin Structure**: 3 plugin layouts (minimal, standard, advanced)
- **Plugin Settings**: 3 examples (read-settings hook, create-settings command, templates)
- **Command Development**: 10 complete command examples (review, test, deploy, docs, etc.)
## Documentation Standards

View File

@@ -1,34 +1,34 @@
---
name: agent-creator
description: |
Use this agent when the user asks to "create an agent", "generate an agent", "build a new agent", "make me an agent that...", or describes agent functionality they need. Trigger when user wants to create autonomous agents for plugins. Examples:
description: Use this agent when the user asks to "create an agent", "generate an agent", "build a new agent", "make me an agent that...", or describes agent functionality they need. Trigger when user wants to create autonomous agents for plugins. Examples:
<example>
Context: User wants to create a code review agent
user: "Create an agent that reviews code for quality issues"
assistant: "I'll use the agent-creator agent to generate the agent configuration."
<commentary>
User requesting new agent creation, trigger agent-creator to generate it.
</commentary>
</example>
<example>
Context: User wants to create a code review agent
user: "Create an agent that reviews code for quality issues"
assistant: "I'll use the agent-creator agent to generate the agent configuration."
<commentary>
User requesting new agent creation, trigger agent-creator to generate it.
</commentary>
</example>
<example>
Context: User describes needed functionality
user: "I need an agent that generates unit tests for my code"
assistant: "I'll use the agent-creator agent to create a test generation agent."
<commentary>
User describes agent need, trigger agent-creator to build it.
</commentary>
</example>
<example>
Context: User describes needed functionality
user: "I need an agent that generates unit tests for my code"
assistant: "I'll use the agent-creator agent to create a test generation agent."
<commentary>
User describes agent need, trigger agent-creator to build it.
</commentary>
</example>
<example>
Context: User wants to add agent to plugin
user: "Add an agent to my plugin that validates configurations"
assistant: "I'll use the agent-creator agent to generate a configuration validator agent."
<commentary>
Plugin development with agent addition, trigger agent-creator.
</commentary>
</example>
<example>
Context: User wants to add agent to plugin
user: "Add an agent to my plugin that validates configurations"
assistant: "I'll use the agent-creator agent to generate a configuration validator agent."
<commentary>
Plugin development with agent addition, trigger agent-creator.
</commentary>
</example>
model: sonnet
color: magenta
tools: ["Write", "Read"]

View File

@@ -1,36 +1,36 @@
---
name: plugin-validator
description: |
Use this agent when the user asks to "validate my plugin", "check plugin structure", "verify plugin is correct", "validate plugin.json", "check plugin files", or mentions plugin validation. Also trigger proactively after user creates or modifies plugin components. Examples:
description: Use this agent when the user asks to "validate my plugin", "check plugin structure", "verify plugin is correct", "validate plugin.json", "check plugin files", or mentions plugin validation. Also trigger proactively after user creates or modifies plugin components. Examples:
<example>
Context: User finished creating a new plugin
user: "I've created my first plugin with commands and hooks"
assistant: "Great! Let me validate the plugin structure."
<commentary>
Plugin created, proactively validate to catch issues early.
</commentary>
assistant: "I'll use the plugin-validator agent to check the plugin."
</example>
<example>
Context: User finished creating a new plugin
user: "I've created my first plugin with commands and hooks"
assistant: "Great! Let me validate the plugin structure."
<commentary>
Plugin created, proactively validate to catch issues early.
</commentary>
assistant: "I'll use the plugin-validator agent to check the plugin."
</example>
<example>
Context: User explicitly requests validation
user: "Validate my plugin before I publish it"
assistant: "I'll use the plugin-validator agent to perform comprehensive validation."
<commentary>
Explicit validation request triggers the agent.
</commentary>
</example>
<example>
Context: User explicitly requests validation
user: "Validate my plugin before I publish it"
assistant: "I'll use the plugin-validator agent to perform comprehensive validation."
<commentary>
Explicit validation request triggers the agent.
</commentary>
</example>
<example>
Context: User modified plugin.json
user: "I've updated the plugin manifest"
assistant: "Let me validate the changes."
<commentary>
Manifest modified, validate to ensure correctness.
</commentary>
assistant: "I'll use the plugin-validator agent to check the manifest."
</example>
<example>
Context: User modified plugin.json
user: "I've updated the plugin manifest"
assistant: "Let me validate the changes."
<commentary>
Manifest modified, validate to ensure correctness.
</commentary>
assistant: "I'll use the plugin-validator agent to check the manifest."
</example>
model: inherit
color: yellow
tools: ["Read", "Grep", "Glob", "Bash"]

View File

@@ -1,35 +1,35 @@
---
name: skill-reviewer
description: |
Use this agent when the user has created or modified a skill and needs quality review, asks to "review my skill", "check skill quality", "improve skill description", or wants to ensure skill follows best practices. Trigger proactively after skill creation. Examples:
description: Use this agent when the user has created or modified a skill and needs quality review, asks to "review my skill", "check skill quality", "improve skill description", or wants to ensure skill follows best practices. Trigger proactively after skill creation. Examples:
<example>
Context: User just created a new skill
user: "I've created a PDF processing skill"
assistant: "Great! Let me review the skill quality."
<commentary>
Skill created, proactively trigger skill-reviewer to ensure it follows best practices.
</commentary>
assistant: "I'll use the skill-reviewer agent to review the skill."
</example>
<example>
Context: User just created a new skill
user: "I've created a PDF processing skill"
assistant: "Great! Let me review the skill quality."
<commentary>
Skill created, proactively trigger skill-reviewer to ensure it follows best practices.
</commentary>
assistant: "I'll use the skill-reviewer agent to review the skill."
</example>
<example>
Context: User requests skill review
user: "Review my skill and tell me how to improve it"
assistant: "I'll use the skill-reviewer agent to analyze the skill quality."
<commentary>
Explicit skill review request triggers the agent.
</commentary>
</example>
<example>
Context: User requests skill review
user: "Review my skill and tell me how to improve it"
assistant: "I'll use the skill-reviewer agent to analyze the skill quality."
<commentary>
Explicit skill review request triggers the agent.
</commentary>
</example>
<example>
Context: User modified skill description
user: "I updated the skill description, does it look good?"
assistant: "I'll use the skill-reviewer agent to review the changes."
<commentary>
Skill description modified, review for triggering effectiveness.
</commentary>
</example>
<example>
Context: User modified skill description
user: "I updated the skill description, does it look good?"
assistant: "I'll use the skill-reviewer agent to review the changes."
<commentary>
Skill description modified, review for triggering effectiveness.
</commentary>
</example>
model: inherit
color: cyan
tools: ["Read", "Grep", "Glob"]

View File

@@ -1,5 +1,5 @@
---
name: agent-development
name: Agent Development
description: This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
version: 0.1.0
---

View File

@@ -1,5 +1,5 @@
---
name: command-development
name: Command Development
description: This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
version: 0.2.0
---

View File

@@ -1,5 +1,5 @@
---
name: hook-development
name: Hook Development
description: This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.
version: 0.1.0
---

View File

@@ -1,5 +1,5 @@
---
name: mcp-integration
name: MCP Integration
description: This skill should be used when the user asks to "add MCP server", "integrate MCP", "configure MCP in plugin", "use .mcp.json", "set up Model Context Protocol", "connect external service", mentions "${CLAUDE_PLUGIN_ROOT} with MCP", or discusses MCP server types (SSE, stdio, HTTP, WebSocket). Provides comprehensive guidance for integrating Model Context Protocol servers into Claude Code plugins for external tool and service integration.
version: 0.1.0
---

View File

@@ -1,5 +1,5 @@
---
name: plugin-settings
name: Plugin Settings
description: This skill should be used when the user asks about "plugin settings", "store plugin configuration", "user-configurable plugin", ".local.md files", "plugin state files", "read YAML frontmatter", "per-project plugin settings", or wants to make plugin behavior configurable. Documents the .claude/plugin-name.local.md pattern for storing plugin-specific configuration with YAML frontmatter and markdown content.
version: 0.1.0
---

View File

@@ -1,5 +1,5 @@
---
name: plugin-structure
name: Plugin Structure
description: This skill should be used when the user asks to "create a plugin", "scaffold a plugin", "understand plugin structure", "organize plugin components", "set up plugin.json", "use ${CLAUDE_PLUGIN_ROOT}", "add commands/agents/skills/hooks", "configure auto-discovery", or needs guidance on plugin directory layout, manifest configuration, component organization, file naming conventions, or Claude Code plugin architecture best practices.
version: 0.1.0
---

View File

@@ -1,5 +1,5 @@
---
name: skill-development
name: Skill Development
description: This skill should be used when the user wants to "create a skill", "add a skill to plugin", "write a new skill", "improve skill description", "organize skill content", or needs guidance on skill structure, progressive disclosure, or skill development best practices for Claude Code plugins.
version: 0.1.0
---

View File

@@ -1,42 +1,37 @@
---
name: code-simplifier
description: |
Use this agent when code has been written or modified and needs to be simplified for clarity, consistency, and maintainability while preserving all functionality. This agent should be triggered automatically after completing a coding task or writing a logical chunk of code. It simplifies code by following project best practices while retaining all functionality. The agent focuses only on recently modified code unless instructed otherwise.
description: Use this agent when code has been written or modified and needs to be simplified for clarity, consistency, and maintainability while preserving all functionality. This agent should be triggered automatically after completing a coding task or writing a logical chunk of code. It simplifies code by following project best practices while retaining all functionality. The agent focuses only on recently modified code unless instructed otherwise.\n\nExamples:\n\n<example>
Context: The assistant has just implemented a new feature that adds user authentication to an API endpoint.
user: "Please add authentication to the /api/users endpoint"
assistant: "I've implemented the authentication for the /api/users endpoint. Here's the code:"
<function call omitted for brevity>
<commentary>
Since a logical chunk of code has been written (authentication feature), use the Task tool to launch the code-simplifier agent to improve the code's clarity and maintainability while preserving functionality.
</commentary>
assistant: "Now let me use the code-simplifier agent to refine this implementation for better clarity and maintainability"
</example>
Examples:
<example>
Context: The assistant has just fixed a bug by adding several conditional checks.
user: "Fix the null pointer exception in the data processor"
assistant: "I've added the necessary null checks to prevent the exception:"
<function call omitted for brevity>
<commentary>
After modifying code to fix a bug, use the code-simplifier agent to ensure the fix follows best practices and maintains code quality.
</commentary>
assistant: "Let me refine this bug fix using the code-simplifier agent to ensure it follows our best practices"
</example>
<example>
Context: The assistant has just implemented a new feature that adds user authentication to an API endpoint.
user: "Please add authentication to the /api/users endpoint"
assistant: "I've implemented the authentication for the /api/users endpoint. Here's the code:"
<function call omitted for brevity>
<commentary>
Since a logical chunk of code has been written (authentication feature), use the Task tool to launch the code-simplifier agent to improve the code's clarity and maintainability while preserving functionality.
</commentary>
assistant: "Now let me use the code-simplifier agent to refine this implementation for better clarity and maintainability"
</example>
<example>
Context: The assistant has just fixed a bug by adding several conditional checks.
user: "Fix the null pointer exception in the data processor"
assistant: "I've added the necessary null checks to prevent the exception:"
<function call omitted for brevity>
<commentary>
After modifying code to fix a bug, use the code-simplifier agent to ensure the fix follows best practices and maintains code quality.
</commentary>
assistant: "Let me refine this bug fix using the code-simplifier agent to ensure it follows our best practices"
</example>
<example>
Context: The assistant has just refactored a function to improve performance.
user: "Optimize the data sorting algorithm for better performance"
assistant: "I've optimized the sorting algorithm. Here's the updated implementation:"
<function call omitted for brevity>
<commentary>
After completing a performance optimization task, use the code-simplifier agent to ensure the optimized code is also clear and maintainable.
</commentary>
assistant: "Now I'll use the code-simplifier agent to ensure the optimized code is also clear and follows our coding standards"
</example>
<example>
Context: The assistant has just refactored a function to improve performance.
user: "Optimize the data sorting algorithm for better performance"
assistant: "I've optimized the sorting algorithm. Here's the updated implementation:"
<function call omitted for brevity>
<commentary>
After completing a performance optimization task, use the code-simplifier agent to ensure the optimized code is also clear and maintainable.
</commentary>
assistant: "Now I'll use the code-simplifier agent to ensure the optimized code is also clear and follows our coding standards"
</example>
model: opus
---