mirror of
https://github.com/anthropics/claude-plugins-official.git
synced 2026-01-30 04:22:03 +00:00
Compare commits
23 Commits
claude/sup
...
thariq/add
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
60c1d6f8ee | ||
|
|
54402a7c90 | ||
|
|
09e3d78e31 | ||
|
|
b7d10513cd | ||
|
|
21256d1605 | ||
|
|
d49ad35586 | ||
|
|
2765dd65c9 | ||
|
|
e30768372b | ||
|
|
146d4788ff | ||
|
|
2c255a1bf3 | ||
|
|
6efe83162f | ||
|
|
3c1e3212f6 | ||
|
|
7d5dcb6765 | ||
|
|
a86e34672c | ||
|
|
9627620588 | ||
|
|
ee2f726626 | ||
|
|
f70b65538d | ||
|
|
f1be96f0fb | ||
|
|
48c6726985 | ||
|
|
ceb9b72b4c | ||
|
|
113b335d11 | ||
|
|
2fee5cd9bf | ||
|
|
b97f6eadd9 |
@@ -167,6 +167,29 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "kotlin-lsp",
|
||||
"description": "Kotlin language server for code intelligence",
|
||||
"version": "1.0.0",
|
||||
"author": {
|
||||
"name": "Anthropic",
|
||||
"email": "support@anthropic.com"
|
||||
},
|
||||
"source": "./plugins/kotlin-lsp",
|
||||
"category": "development",
|
||||
"strict": false,
|
||||
"lspServers": {
|
||||
"kotlin-lsp": {
|
||||
"command": "kotlin-lsp",
|
||||
"args": ["--stdio"],
|
||||
"extensionToLanguage": {
|
||||
".kt": "kotlin",
|
||||
".kts": "kotlin"
|
||||
},
|
||||
"startupTimeout" : 120000
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "csharp-lsp",
|
||||
"description": "C# language server for code intelligence",
|
||||
@@ -294,6 +317,17 @@
|
||||
"category": "productivity",
|
||||
"homepage": "https://github.com/anthropics/claude-plugins-public/tree/main/plugins/code-review"
|
||||
},
|
||||
{
|
||||
"name": "code-simplifier",
|
||||
"description": "Agent that simplifies and refines code for clarity, consistency, and maintainability while preserving functionality. Focuses on recently modified code.",
|
||||
"author": {
|
||||
"name": "Anthropic",
|
||||
"email": "support@anthropic.com"
|
||||
},
|
||||
"source": "./plugins/code-simplifier",
|
||||
"category": "productivity",
|
||||
"homepage": "https://github.com/anthropics/claude-plugins-official/tree/main/plugins/code-simplifier"
|
||||
},
|
||||
{
|
||||
"name": "explanatory-output-style",
|
||||
"description": "Adds educational insights about implementation choices and codebase patterns (mimics the deprecated Explanatory output style)",
|
||||
@@ -327,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.",
|
||||
@@ -360,6 +405,28 @@
|
||||
"category": "development",
|
||||
"homepage": "https://github.com/anthropics/claude-plugins-public/tree/main/plugins/plugin-dev"
|
||||
},
|
||||
{
|
||||
"name": "claude-code-setup",
|
||||
"description": "Analyze codebases and recommend tailored Claude Code automations such as hooks, skills, MCP servers, and subagents.",
|
||||
"author": {
|
||||
"name": "Anthropic",
|
||||
"email": "support@anthropic.com"
|
||||
},
|
||||
"source": "./plugins/claude-code-setup",
|
||||
"category": "productivity",
|
||||
"homepage": "https://github.com/anthropics/claude-plugins-official/tree/main/plugins/claude-code-setup"
|
||||
},
|
||||
{
|
||||
"name": "claude-md-management",
|
||||
"description": "Tools to maintain and improve CLAUDE.md files - audit quality, capture session learnings, and keep project memory current.",
|
||||
"author": {
|
||||
"name": "Anthropic",
|
||||
"email": "support@anthropic.com"
|
||||
},
|
||||
"source": "./plugins/claude-md-management",
|
||||
"category": "productivity",
|
||||
"homepage": "https://github.com/anthropics/claude-plugins-official/tree/main/plugins/claude-md-management"
|
||||
},
|
||||
{
|
||||
"name": "greptile",
|
||||
"description": "AI-powered codebase search and understanding. Query your repositories using natural language to find relevant code, understand dependencies, and get contextual answers about your codebase architecture.",
|
||||
@@ -513,6 +580,26 @@
|
||||
},
|
||||
"homepage": "https://github.com/pinecone-io/pinecone-claude-code-plugin"
|
||||
},
|
||||
{
|
||||
"name": "huggingface-skills",
|
||||
"description": "Build, train, evaluate, and use open source AI models, datasets, and spaces.",
|
||||
"category": "development",
|
||||
"source": {
|
||||
"source": "url",
|
||||
"url": "https://github.com/huggingface/skills.git"
|
||||
},
|
||||
"homepage": "https://github.com/huggingface/skills.git"
|
||||
},
|
||||
{
|
||||
"name": "circleback",
|
||||
"description": "Circleback conversational context integration. Search and access meetings, emails, calendar events, and more.",
|
||||
"category": "productivity",
|
||||
"source": {
|
||||
"source": "url",
|
||||
"url": "https://github.com/circlebackai/claude-code-plugin.git"
|
||||
},
|
||||
"homepage": "https://github.com/circlebackai/claude-code-plugin.git"
|
||||
},
|
||||
{
|
||||
"name": "superpowers",
|
||||
"description": "Superpowers teaches Claude brainstorming, subagent driven development with built in code review, systematic debugging, and red/green TDD. Additionally, it teaches Claude how to author and test new skills.",
|
||||
@@ -521,7 +608,27 @@
|
||||
"source": "url",
|
||||
"url": "https://github.com/obra/superpowers.git"
|
||||
},
|
||||
"homepage": "https://github.com/obra/superpowers"
|
||||
"homepage": "https://github.com/obra/superpowers.git"
|
||||
},
|
||||
{
|
||||
"name": "posthog",
|
||||
"description": "Connect Claude Code to your PostHog analytics platform. Query insights, manage feature flags, run A/B experiments, track errors, and analyze LLM costs all through natural language. The plugin provides 10 slash commands for common workflows and full access to PostHog's MCP tools. Ask questions like \"What are my top errors?\" or \"Create a feature flag for 50% of users\" and Claude handles the API calls. Supports OAuth authentication, EU and US cloud regions, and self-hosted instances.",
|
||||
"category": "monitoring",
|
||||
"source": {
|
||||
"source": "url",
|
||||
"url": "https://github.com/PostHog/posthog-for-claude.git"
|
||||
},
|
||||
"homepage": "https://github.com/PostHog/posthog-for-claude.git"
|
||||
},
|
||||
{
|
||||
"name": "coderabbit",
|
||||
"description": "Your code review partner. CodeRabbit provides external validation using a specialized AI architecture and 40+ integrated static analyzers—offering a different perspective that catches bugs, security vulnerabilities, logic errors, and edge cases. Context-aware analysis via AST parsing and codegraph relationships. Automatically incorporates CLAUDE.md and project coding guidelines into reviews. Useful after writing or modifying code, before commits, when implementing complex or security-sensitive logic, or when a second opinion would increase confidence in the changes. Returns specific findings with suggested fixes that can be applied immediately. Free to use.",
|
||||
"category": "productivity",
|
||||
"source": {
|
||||
"source": "url",
|
||||
"url": "https://github.com/coderabbitai/claude-plugin.git"
|
||||
},
|
||||
"homepage": "https://github.com/coderabbitai/claude-plugin.git"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
50
.github/workflows/close-external-prs.yml
vendored
50
.github/workflows/close-external-prs.yml
vendored
@@ -13,35 +13,35 @@ jobs:
|
||||
if: vars.DISABLE_EXTERNAL_PR_CHECK != 'true'
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Check if author is org member
|
||||
- name: Check if author has write access
|
||||
uses: actions/github-script@v7
|
||||
with:
|
||||
script: |
|
||||
const org = 'anthropics';
|
||||
const author = context.payload.pull_request.user.login;
|
||||
|
||||
try {
|
||||
await github.rest.orgs.checkMembershipForUser({
|
||||
org: org,
|
||||
username: author
|
||||
});
|
||||
console.log(`${author} is an org member, allowing PR`);
|
||||
} catch (e) {
|
||||
if (e.status === 404) {
|
||||
await github.rest.issues.createComment({
|
||||
owner: context.repo.owner,
|
||||
repo: context.repo.repo,
|
||||
issue_number: context.payload.pull_request.number,
|
||||
body: `Thanks for your interest! This repo only accepts contributions from Anthropic team members. If you'd like to submit a plugin to the marketplace, please submit your plugin [here](https://docs.google.com/forms/d/e/1FAIpQLSdeFthxvjOXUjxg1i3KrOOkEPDJtn71XC-KjmQlxNP63xYydg/viewform).`
|
||||
});
|
||||
const { data } = await github.rest.repos.getCollaboratorPermissionLevel({
|
||||
owner: context.repo.owner,
|
||||
repo: context.repo.repo,
|
||||
username: author
|
||||
});
|
||||
|
||||
await github.rest.pulls.update({
|
||||
owner: context.repo.owner,
|
||||
repo: context.repo.repo,
|
||||
pull_number: context.payload.pull_request.number,
|
||||
state: 'closed'
|
||||
});
|
||||
|
||||
console.log(`Closed PR from external contributor: ${author}`);
|
||||
}
|
||||
if (['admin', 'write'].includes(data.permission)) {
|
||||
console.log(`${author} has ${data.permission} access, allowing PR`);
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(`${author} has ${data.permission} access, closing PR`);
|
||||
|
||||
await github.rest.issues.createComment({
|
||||
owner: context.repo.owner,
|
||||
repo: context.repo.repo,
|
||||
issue_number: context.payload.pull_request.number,
|
||||
body: `Thanks for your interest! This repo only accepts contributions from Anthropic team members. If you'd like to submit a plugin to the marketplace, please submit your plugin [here](https://docs.google.com/forms/d/e/1FAIpQLSdeFthxvjOXUjxg1i3KrOOkEPDJtn71XC-KjmQlxNP63xYydg/viewform).`
|
||||
});
|
||||
|
||||
await github.rest.pulls.update({
|
||||
owner: context.repo.owner,
|
||||
repo: context.repo.repo,
|
||||
pull_number: context.payload.pull_request.number,
|
||||
state: 'closed'
|
||||
});
|
||||
|
||||
@@ -25,7 +25,7 @@ Internal plugins are developed by Anthropic team members. See `/plugins/example-
|
||||
|
||||
### External Plugins
|
||||
|
||||
Third-party partners can submit plugins for inclusion in the marketplace. External plugins must meet quality and security standards for approval.
|
||||
Third-party partners can submit plugins for inclusion in the marketplace. External plugins must meet quality and security standards for approval. To submit a new plugin, use the [plugin directory submission form](https://clau.de/plugin-directory-submission).
|
||||
|
||||
## Plugin Structure
|
||||
|
||||
|
||||
8
plugins/artifact/.claude-plugin/plugin.json
Normal file
8
plugins/artifact/.claude-plugin/plugin.json
Normal 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"
|
||||
}
|
||||
}
|
||||
28
plugins/artifact/README.md
Normal file
28
plugins/artifact/README.md
Normal 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.
|
||||
76
plugins/artifact/skills/artifact/SKILL.md
Normal file
76
plugins/artifact/skills/artifact/SKILL.md
Normal file
@@ -0,0 +1,76 @@
|
||||
---
|
||||
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/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.
|
||||
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)
|
||||
|
||||
- **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
|
||||
158
plugins/artifact/skills/artifact/templates/code-map.md
Normal file
158
plugins/artifact/skills/artifact/templates/code-map.md
Normal file
@@ -0,0 +1,158 @@
|
||||
# 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.
|
||||
|
||||
## Layout
|
||||
|
||||
```
|
||||
+-------------------+----------------------------------+
|
||||
| | |
|
||||
| Controls: | SVG Canvas |
|
||||
| • View presets | (nodes + connections) |
|
||||
| • Layer toggles | with zoom controls |
|
||||
| • Connection | |
|
||||
| type filters | Legend (bottom-left) |
|
||||
| | |
|
||||
| Comments (n): +----------------------------------+
|
||||
| • List of user | Prompt output |
|
||||
| comments with | [ Copy Prompt ] |
|
||||
| delete buttons | |
|
||||
+-------------------+----------------------------------+
|
||||
```
|
||||
|
||||
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
|
||||
|
||||
| Decision | Control | Example |
|
||||
|---|---|---|
|
||||
| System view | Preset buttons | Full System, Chat Flow, Data Flow, Agent System |
|
||||
| Visible layers | Checkboxes | Client, Server, SDK, Data, External |
|
||||
| Connection types | Checkboxes with color indicators | Data Flow (blue), Tool Calls (green), Events (red) |
|
||||
| Component feedback | Click-to-comment modal | Opens modal with textarea for feedback |
|
||||
| Zoom level | +/−/reset buttons | Scale SVG for detail |
|
||||
|
||||
## Canvas rendering
|
||||
|
||||
Use an `<svg>` element with dynamically generated nodes and paths. Key patterns:
|
||||
|
||||
- **Nodes:** Rounded rectangles with title and subtitle (file path)
|
||||
- **Connections:** Curved paths (bezier) with arrow markers, styled by type
|
||||
- **Layer organization:** Group nodes by Y-position bands (e.g., y: 30-80 = Client, y: 130-180 = Server)
|
||||
- **Click-to-comment:** Click node → open modal → save comment → node gets visual indicator
|
||||
- **Filtering:** Toggle visibility of nodes by layer, connections by type
|
||||
|
||||
```javascript
|
||||
const nodes = [
|
||||
{ id: 'api-client', label: 'API Client', subtitle: 'src/api/client.ts',
|
||||
x: 100, y: 50, w: 140, h: 45, layer: 'client', color: '#dbeafe' },
|
||||
// ...
|
||||
];
|
||||
|
||||
const connections = [
|
||||
{ from: 'api-client', to: 'server', type: 'data-flow', label: 'HTTP' },
|
||||
{ from: 'server', to: 'db', type: 'data-flow' },
|
||||
// ...
|
||||
];
|
||||
|
||||
function renderDiagram() {
|
||||
const visibleNodes = nodes.filter(n => state.layers[n.layer]);
|
||||
// Draw connections first (under nodes), then nodes
|
||||
connections.forEach(c => drawConnection(c));
|
||||
visibleNodes.forEach(n => drawNode(n));
|
||||
}
|
||||
```
|
||||
|
||||
## Connection types and styling
|
||||
|
||||
Define 3-5 connection types with distinct visual styles:
|
||||
|
||||
| Type | Color | Style | Use for |
|
||||
|---|---|---|---|
|
||||
| `data-flow` | Blue (#3b82f6) | Solid line | Request/response, data passing |
|
||||
| `tool-call` | Green (#10b981) | Dashed (6,3) | Function calls, API invocations |
|
||||
| `event` | Red (#ef4444) | Short dash (4,4) | Async events, pub/sub |
|
||||
| `skill-invoke` | Orange (#f97316) | Long dash (8,4) | Plugin/skill activation |
|
||||
| `dependency` | Gray (#6b7280) | Dotted | Import/require relationships |
|
||||
|
||||
Use SVG markers for arrowheads:
|
||||
|
||||
```html
|
||||
<marker id="arrowhead-blue" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
|
||||
<polygon points="0 0, 8 3, 0 6" fill="#3b82f6"/>
|
||||
</marker>
|
||||
```
|
||||
|
||||
## Comment system
|
||||
|
||||
The key differentiator for code maps is click-to-comment functionality:
|
||||
|
||||
1. **Click node** → Open modal with component name, file path, textarea
|
||||
2. **Save comment** → Add to comments list, mark node with visual indicator (colored border)
|
||||
3. **View comments** → Sidebar list with component name, comment preview, delete button
|
||||
4. **Delete comment** → Remove from list, update node visual, regenerate prompt
|
||||
|
||||
Comments should include the component context:
|
||||
|
||||
```javascript
|
||||
state.comments.push({
|
||||
id: Date.now(),
|
||||
target: node.id,
|
||||
targetLabel: node.label,
|
||||
targetFile: node.subtitle,
|
||||
text: userInput
|
||||
});
|
||||
```
|
||||
|
||||
## Prompt output for code maps
|
||||
|
||||
The prompt combines system context with user comments:
|
||||
|
||||
```
|
||||
This is the [PROJECT NAME] architecture, focusing on the [visible layers].
|
||||
|
||||
Feedback on specific components:
|
||||
|
||||
**API Client** (src/api/client.ts):
|
||||
I want to add retry logic with exponential backoff here.
|
||||
|
||||
**Database Manager** (src/db/manager.ts):
|
||||
Can we add connection pooling? Current implementation creates new connections per request.
|
||||
|
||||
**Auth Middleware** (src/middleware/auth.ts):
|
||||
This should validate JWT tokens and extract user context.
|
||||
```
|
||||
|
||||
Only include comments the user added. Mention which layers are visible if not showing the full system.
|
||||
|
||||
## Pre-populating with real data
|
||||
|
||||
For a specific codebase, pre-populate with:
|
||||
|
||||
- **Nodes:** 15-25 key components with real file paths
|
||||
- **Connections:** 20-40 relationships based on actual imports/calls
|
||||
- **Layers:** Logical groupings (UI, API, Business Logic, Data, External)
|
||||
- **Presets:** "Full System", "Frontend Only", "Backend Only", "Data Flow"
|
||||
|
||||
Organize nodes in horizontal bands by layer, with consistent spacing.
|
||||
|
||||
## Layer color palette (light theme)
|
||||
|
||||
| Layer | Node fill | Description |
|
||||
|---|---|---|
|
||||
| Client/UI | #dbeafe (blue-100) | React components, hooks, pages |
|
||||
| Server/API | #fef3c7 (amber-100) | Express routes, middleware, handlers |
|
||||
| SDK/Core | #f3e8ff (purple-100) | Core libraries, SDK wrappers |
|
||||
| Agent/Logic | #dcfce7 (green-100) | Business logic, agents, processors |
|
||||
| Data | #fce7f3 (pink-100) | Database, cache, storage |
|
||||
| External | #fbcfe8 (pink-200) | Third-party services, APIs |
|
||||
|
||||
## Example topics
|
||||
|
||||
- Codebase architecture explorer (modules, imports, data flow)
|
||||
- Microservices map (services, queues, databases, API gateways)
|
||||
- React component tree (components, hooks, context, state)
|
||||
- API architecture (routes, middleware, controllers, models)
|
||||
- Agent system (prompts, tools, skills, subagents)
|
||||
- Data pipeline (sources, transforms, sinks, scheduling)
|
||||
- Plugin/extension architecture (core, plugins, hooks, events)
|
||||
73
plugins/artifact/skills/artifact/templates/concept-map.md
Normal file
73
plugins/artifact/skills/artifact/templates/concept-map.md
Normal file
@@ -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)
|
||||
67
plugins/artifact/skills/artifact/templates/data-explorer.md
Normal file
67
plugins/artifact/skills/artifact/templates/data-explorer.md
Normal file
@@ -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)
|
||||
@@ -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)
|
||||
179
plugins/artifact/skills/artifact/templates/diff-review.md
Normal file
179
plugins/artifact/skills/artifact/templates/diff-review.md
Normal file
@@ -0,0 +1,179 @@
|
||||
# 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.
|
||||
|
||||
## Layout
|
||||
|
||||
```
|
||||
+-------------------+----------------------------------+
|
||||
| | |
|
||||
| Commit Header: | Diff Content |
|
||||
| • Hash | (files with hunks) |
|
||||
| • Message | with line numbers |
|
||||
| • Author/Date | and +/- indicators |
|
||||
| | |
|
||||
+-------------------+----------------------------------+
|
||||
| Prompt Output Panel (fixed bottom-right) |
|
||||
| [ Copy All ] |
|
||||
| Shows all comments formatted for prompt |
|
||||
+------------------------------------------------------+
|
||||
```
|
||||
|
||||
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
|
||||
|
||||
| Feature | Control | Behavior |
|
||||
|---|---|---|
|
||||
| Line commenting | Click any diff line | Opens textarea below the line |
|
||||
| Comment indicator | Badge on commented lines | Shows which lines have feedback |
|
||||
| Save/Cancel | Buttons in comment box | Persist or discard comment |
|
||||
| Copy prompt | Button in prompt panel | Copies all comments to clipboard |
|
||||
|
||||
## Diff rendering
|
||||
|
||||
Parse diff data into structured format for rendering:
|
||||
|
||||
```javascript
|
||||
const diffData = [
|
||||
{
|
||||
file: "path/to/file.py",
|
||||
hunks: [
|
||||
{
|
||||
header: "@@ -41,13 +41,13 @@ function context",
|
||||
lines: [
|
||||
{ type: "context", oldNum: 41, newNum: 41, content: "unchanged line" },
|
||||
{ type: "deletion", oldNum: 42, newNum: null, content: "removed line" },
|
||||
{ type: "addition", oldNum: null, newNum: 42, content: "added line" },
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
```
|
||||
|
||||
## Line type styling
|
||||
|
||||
| Type | Background | Text Color | Prefix |
|
||||
|---|---|---|---|
|
||||
| `context` | transparent | default | ` ` (space) |
|
||||
| `addition` | green tint (#dafbe1 light / rgba(46,160,67,0.15) dark) | green (#1a7f37 light / #7ee787 dark) | `+` |
|
||||
| `deletion` | red tint (#ffebe9 light / rgba(248,81,73,0.15) dark) | red (#cf222e light / #f85149 dark) | `-` |
|
||||
| `hunk-header` | blue tint (#ddf4ff light) | blue (#0969da light) | `@@` |
|
||||
|
||||
## Comment system
|
||||
|
||||
Each diff line gets a unique identifier for comment tracking:
|
||||
|
||||
```javascript
|
||||
const comments = {}; // { lineId: commentText }
|
||||
|
||||
function selectLine(lineId, lineEl) {
|
||||
// Deselect previous
|
||||
document.querySelectorAll('.diff-line.selected').forEach(el =>
|
||||
el.classList.remove('selected'));
|
||||
document.querySelectorAll('.comment-box.active').forEach(el =>
|
||||
el.classList.remove('active'));
|
||||
|
||||
// Select new
|
||||
lineEl.classList.add('selected');
|
||||
document.getElementById(`comment-box-${lineId}`).classList.add('active');
|
||||
}
|
||||
|
||||
function saveComment(lineId) {
|
||||
const textarea = document.getElementById(`textarea-${lineId}`);
|
||||
const comment = textarea.value.trim();
|
||||
|
||||
if (comment) {
|
||||
comments[lineId] = comment;
|
||||
} else {
|
||||
delete comments[lineId];
|
||||
}
|
||||
|
||||
renderDiff(); // Re-render to show comment indicator
|
||||
updatePromptOutput();
|
||||
}
|
||||
```
|
||||
|
||||
## Prompt output format
|
||||
|
||||
Generate a structured code review format:
|
||||
|
||||
```javascript
|
||||
function updatePromptOutput() {
|
||||
const commentKeys = Object.keys(comments);
|
||||
|
||||
if (commentKeys.length === 0) {
|
||||
promptContent.innerHTML = '<span class="no-comments">Click on any line to add a comment...</span>';
|
||||
return;
|
||||
}
|
||||
|
||||
let output = 'Code Review Comments:\n\n';
|
||||
|
||||
commentKeys.forEach(lineId => {
|
||||
const lineEl = document.querySelector(`[data-line-id="${lineId}"]`);
|
||||
const file = lineEl.dataset.file;
|
||||
const lineNum = lineEl.dataset.lineNum;
|
||||
const content = lineEl.dataset.content;
|
||||
|
||||
output += `📍 ${file}:${lineNum}\n`;
|
||||
output += ` Code: ${content.trim()}\n`;
|
||||
output += ` Comment: ${comments[lineId]}\n\n`;
|
||||
});
|
||||
|
||||
promptContent.textContent = output;
|
||||
}
|
||||
```
|
||||
|
||||
## Data attributes for line elements
|
||||
|
||||
Store metadata on each line element for prompt generation:
|
||||
|
||||
```html
|
||||
<div class="diff-line addition"
|
||||
data-line-id="0-1-5"
|
||||
data-file="src/utils/handler.py"
|
||||
data-line-num="45"
|
||||
data-content="subagent_id = tracker.register()">
|
||||
```
|
||||
|
||||
## Pre-populating with real data
|
||||
|
||||
To create a diff viewer for a specific commit:
|
||||
|
||||
1. Run `git show <commit> --format="%H%n%s%n%an%n%ad" -p`
|
||||
2. Parse the output into the `diffData` structure
|
||||
3. Include commit metadata in the header section
|
||||
|
||||
## Theme support
|
||||
|
||||
Support both light and dark modes:
|
||||
|
||||
```css
|
||||
/* Light mode */
|
||||
body { background: #f6f8fa; color: #1f2328; }
|
||||
.file-card { background: #ffffff; border: 1px solid #d0d7de; }
|
||||
.diff-line.addition { background: #dafbe1; }
|
||||
.diff-line.deletion { background: #ffebe9; }
|
||||
|
||||
/* Dark mode */
|
||||
body { background: #0d1117; color: #c9d1d9; }
|
||||
.file-card { background: #161b22; border: 1px solid #30363d; }
|
||||
.diff-line.addition { background: rgba(46, 160, 67, 0.15); }
|
||||
.diff-line.deletion { background: rgba(248, 81, 73, 0.15); }
|
||||
```
|
||||
|
||||
## Interactive features
|
||||
|
||||
- **Hover hint:** Show "Click to comment" tooltip on line hover
|
||||
- **Comment indicator:** Badge (💬) on lines with saved comments
|
||||
- **Toast notification:** "Copied to clipboard!" feedback on copy
|
||||
- **Edit existing:** Allow editing previously saved comments
|
||||
|
||||
## Example topics
|
||||
|
||||
- Git commit review (single commit diff with line comments)
|
||||
- Pull request review (multiple commits, file-level and line-level comments)
|
||||
- Code diff comparison (before/after refactoring)
|
||||
- Merge conflict resolution (showing both versions with annotations)
|
||||
- Code audit (security review with findings per line)
|
||||
171
plugins/artifact/skills/artifact/templates/document-critique.md
Normal file
171
plugins/artifact/skills/artifact/templates/document-critique.md
Normal file
@@ -0,0 +1,171 @@
|
||||
# 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.
|
||||
|
||||
## Layout
|
||||
|
||||
```
|
||||
+---------------------------+--------------------+
|
||||
| | |
|
||||
| Document content | Suggestions panel |
|
||||
| with line numbers | (filterable list) |
|
||||
| and suggestion | • Approve |
|
||||
| highlighting | • Reject |
|
||||
| | • Comment |
|
||||
| | |
|
||||
+---------------------------+--------------------+
|
||||
| Prompt output (approved + commented items) |
|
||||
| [ Copy Prompt ] |
|
||||
+------------------------------------------------+
|
||||
```
|
||||
|
||||
## Key components
|
||||
|
||||
### Document panel (left)
|
||||
- Display full document with line numbers
|
||||
- Highlight lines with suggestions using a colored left border
|
||||
- Color-code by status: pending (amber), approved (green), rejected (red with opacity)
|
||||
- Click a suggestion card to scroll to the relevant line
|
||||
|
||||
### Suggestions panel (right)
|
||||
- Filter tabs: All / Pending / Approved / Rejected
|
||||
- Stats in header showing counts for each status
|
||||
- Each suggestion card shows:
|
||||
- Line reference (e.g., "Line 3" or "Lines 17-24")
|
||||
- The suggestion text
|
||||
- Action buttons: Approve / Reject / Comment (or Reset if already decided)
|
||||
- Optional textarea for user comments
|
||||
|
||||
### Prompt output (bottom)
|
||||
- Generates a prompt only from approved suggestions and user comments
|
||||
- Groups by: Approved Improvements, Additional Feedback, Rejected (for context)
|
||||
- Copy button with "Copied!" feedback
|
||||
|
||||
## State structure
|
||||
|
||||
```javascript
|
||||
const suggestions = [
|
||||
{
|
||||
id: 1,
|
||||
lineRef: "Line 3",
|
||||
targetText: "description: Creates interactive...",
|
||||
suggestion: "The description is too long. Consider shortening.",
|
||||
category: "clarity", // clarity, completeness, performance, accessibility, ux
|
||||
status: "pending", // pending, approved, rejected
|
||||
userComment: ""
|
||||
},
|
||||
// ... more suggestions
|
||||
];
|
||||
|
||||
let state = {
|
||||
suggestions: [...],
|
||||
activeFilter: "all",
|
||||
activeSuggestionId: null
|
||||
};
|
||||
```
|
||||
|
||||
## Suggestion matching to lines
|
||||
|
||||
Match suggestions to document lines by parsing the lineRef:
|
||||
|
||||
```javascript
|
||||
const suggestion = state.suggestions.find(s => {
|
||||
const match = s.lineRef.match(/Line[s]?\s*(\d+)/);
|
||||
if (match) {
|
||||
const targetLine = parseInt(match[1]);
|
||||
return Math.abs(targetLine - lineNum) <= 2; // fuzzy match nearby lines
|
||||
}
|
||||
return false;
|
||||
});
|
||||
```
|
||||
|
||||
## Document rendering
|
||||
|
||||
Handle markdown-style formatting inline:
|
||||
|
||||
```javascript
|
||||
// Skip ``` lines, wrap content in code-block-wrapper
|
||||
if (line.startsWith('```')) {
|
||||
inCodeBlock = !inCodeBlock;
|
||||
// Open or close wrapper div
|
||||
}
|
||||
|
||||
// Headers
|
||||
if (line.startsWith('# ')) renderedLine = `<h1>...</h1>`;
|
||||
if (line.startsWith('## ')) renderedLine = `<h2>...</h2>`;
|
||||
|
||||
// Inline formatting (outside code blocks)
|
||||
renderedLine = renderedLine.replace(/`([^`]+)`/g, '<code>$1</code>');
|
||||
renderedLine = renderedLine.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
|
||||
```
|
||||
|
||||
## Prompt output generation
|
||||
|
||||
Only include actionable items:
|
||||
|
||||
```javascript
|
||||
function updatePrompt() {
|
||||
const approved = state.suggestions.filter(s => s.status === 'approved');
|
||||
const withComments = state.suggestions.filter(s => s.userComment?.trim());
|
||||
|
||||
if (approved.length === 0 && withComments.length === 0) {
|
||||
// Show placeholder
|
||||
return;
|
||||
}
|
||||
|
||||
let prompt = 'Please update [DOCUMENT] with the following changes:\n\n';
|
||||
|
||||
if (approved.length > 0) {
|
||||
prompt += '## Approved Improvements\n\n';
|
||||
for (const s of approved) {
|
||||
prompt += `**${s.lineRef}:** ${s.suggestion}`;
|
||||
if (s.userComment?.trim()) {
|
||||
prompt += `\n → User note: ${s.userComment.trim()}`;
|
||||
}
|
||||
prompt += '\n\n';
|
||||
}
|
||||
}
|
||||
|
||||
// Additional feedback from non-approved items with comments
|
||||
// Rejected items listed for context only
|
||||
}
|
||||
```
|
||||
|
||||
## Styling highlights
|
||||
|
||||
```css
|
||||
.doc-line.has-suggestion {
|
||||
border-left: 3px solid #bf8700; /* amber for pending */
|
||||
background: rgba(191, 135, 0, 0.08);
|
||||
}
|
||||
|
||||
.doc-line.approved {
|
||||
border-left-color: #1a7f37; /* green */
|
||||
background: rgba(26, 127, 55, 0.08);
|
||||
}
|
||||
|
||||
.doc-line.rejected {
|
||||
border-left-color: #cf222e; /* red */
|
||||
background: rgba(207, 34, 46, 0.08);
|
||||
opacity: 0.6;
|
||||
}
|
||||
```
|
||||
|
||||
## Pre-populating suggestions
|
||||
|
||||
When building a critique artifact for a specific document:
|
||||
|
||||
1. Read the document content
|
||||
2. Analyze and generate suggestions with:
|
||||
- Specific line references
|
||||
- Clear, actionable suggestion text
|
||||
- Category tags (clarity, completeness, performance, accessibility, ux)
|
||||
3. Embed both the document content and suggestions array in the HTML
|
||||
|
||||
## Example use cases
|
||||
|
||||
- SKILL.md review (skill definition quality, completeness, clarity)
|
||||
- README critique (documentation quality, missing sections, unclear explanations)
|
||||
- Spec review (requirements clarity, missing edge cases, ambiguity)
|
||||
- Proposal feedback (structure, argumentation, missing context)
|
||||
- Code comment review (docstring quality, inline comment usefulness)
|
||||
9
plugins/claude-code-setup/.claude-plugin/plugin.json
Normal file
9
plugins/claude-code-setup/.claude-plugin/plugin.json
Normal file
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"name": "claude-code-setup",
|
||||
"description": "Analyze codebases and recommend tailored Claude Code automations such as hooks, skills, MCP servers, and subagents.",
|
||||
"version": "1.0.0",
|
||||
"author": {
|
||||
"name": "Anthropic",
|
||||
"email": "support@anthropic.com"
|
||||
}
|
||||
}
|
||||
29
plugins/claude-code-setup/README.md
Normal file
29
plugins/claude-code-setup/README.md
Normal file
@@ -0,0 +1,29 @@
|
||||
# Claude Code Setup Plugin
|
||||
|
||||
Analyze codebases and recommend tailored Claude Code automations - hooks, skills, MCP servers, and more.
|
||||
|
||||
## What It Does
|
||||
|
||||
Claude uses this skill to scan your codebase and recommend the top 1-2 automations in each category:
|
||||
|
||||
- **MCP Servers** - External integrations (context7 for docs, Playwright for frontend)
|
||||
- **Skills** - Packaged expertise (Plan agent, frontend-design)
|
||||
- **Hooks** - Automatic actions (auto-format, auto-lint, block sensitive files)
|
||||
- **Subagents** - Specialized reviewers (security, performance, accessibility)
|
||||
- **Slash Commands** - Quick workflows (/test, /pr-review, /explain)
|
||||
|
||||
This skill is **read-only** - it analyzes but doesn't modify files.
|
||||
|
||||
## Usage
|
||||
|
||||
```
|
||||
"recommend automations for this project"
|
||||
"help me set up Claude Code"
|
||||
"what hooks should I use?"
|
||||
```
|
||||
|
||||
<img src="automation-recommender-example.png" alt="Automation recommender analyzing a codebase and providing tailored recommendations" width="600">
|
||||
|
||||
## Author
|
||||
|
||||
Isabella He (isabella@anthropic.com)
|
||||
BIN
plugins/claude-code-setup/automation-recommender-example.png
Normal file
BIN
plugins/claude-code-setup/automation-recommender-example.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 532 KiB |
@@ -0,0 +1,288 @@
|
||||
---
|
||||
name: claude-automation-recommender
|
||||
description: Analyze a codebase and recommend Claude Code automations (hooks, subagents, skills, plugins, MCP servers). Use when user asks for automation recommendations, wants to optimize their Claude Code setup, mentions improving Claude Code workflows, asks how to first set up Claude Code for a project, or wants to know what Claude Code features they should use.
|
||||
tools: Read, Glob, Grep, Bash
|
||||
---
|
||||
|
||||
# Claude Automation Recommender
|
||||
|
||||
Analyze codebase patterns to recommend tailored Claude Code automations across all extensibility options.
|
||||
|
||||
**This skill is read-only.** It analyzes the codebase and outputs recommendations. It does NOT create or modify any files. Users implement the recommendations themselves or ask Claude separately to help build them.
|
||||
|
||||
## Output Guidelines
|
||||
|
||||
- **Recommend 1-2 of each type**: Don't overwhelm - surface the top 1-2 most valuable automations per category
|
||||
- **If user asks for a specific type**: Focus only on that type and provide more options (3-5 recommendations)
|
||||
- **Go beyond the reference lists**: The reference files contain common patterns, but use web search to find recommendations specific to the codebase's tools, frameworks, and libraries
|
||||
- **Tell users they can ask for more**: End by noting they can request more recommendations for any specific category
|
||||
|
||||
## Automation Types Overview
|
||||
|
||||
| Type | Best For |
|
||||
|------|----------|
|
||||
| **Hooks** | Automatic actions on tool events (format on save, lint, block edits) |
|
||||
| **Subagents** | Specialized reviewers/analyzers that run in parallel |
|
||||
| **Skills** | Packaged expertise, workflows, and repeatable tasks (invoked by Claude or user via `/skill-name`) |
|
||||
| **Plugins** | Collections of skills that can be installed |
|
||||
| **MCP Servers** | External tool integrations (databases, APIs, browsers, docs) |
|
||||
|
||||
## Workflow
|
||||
|
||||
### Phase 1: Codebase Analysis
|
||||
|
||||
Gather project context:
|
||||
|
||||
```bash
|
||||
# Detect project type and tools
|
||||
ls -la package.json pyproject.toml Cargo.toml go.mod pom.xml 2>/dev/null
|
||||
cat package.json 2>/dev/null | head -50
|
||||
|
||||
# Check dependencies for MCP server recommendations
|
||||
cat package.json 2>/dev/null | grep -E '"(react|vue|angular|next|express|fastapi|django|prisma|supabase|stripe)"'
|
||||
|
||||
# Check for existing Claude Code config
|
||||
ls -la .claude/ CLAUDE.md 2>/dev/null
|
||||
|
||||
# Analyze project structure
|
||||
ls -la src/ app/ lib/ tests/ components/ pages/ api/ 2>/dev/null
|
||||
```
|
||||
|
||||
**Key Indicators to Capture:**
|
||||
|
||||
| Category | What to Look For | Informs Recommendations For |
|
||||
|----------|------------------|----------------------------|
|
||||
| Language/Framework | package.json, pyproject.toml, import patterns | Hooks, MCP servers |
|
||||
| Frontend stack | React, Vue, Angular, Next.js | Playwright MCP, frontend skills |
|
||||
| Backend stack | Express, FastAPI, Django | API documentation tools |
|
||||
| Database | Prisma, Supabase, raw SQL | Database MCP servers |
|
||||
| External APIs | Stripe, OpenAI, AWS SDKs | context7 MCP for docs |
|
||||
| Testing | Jest, pytest, Playwright configs | Testing hooks, subagents |
|
||||
| CI/CD | GitHub Actions, CircleCI | GitHub MCP server |
|
||||
| Issue tracking | Linear, Jira references | Issue tracker MCP |
|
||||
| Docs patterns | OpenAPI, JSDoc, docstrings | Documentation skills |
|
||||
|
||||
### Phase 2: Generate Recommendations
|
||||
|
||||
Based on analysis, generate recommendations across all categories:
|
||||
|
||||
#### A. MCP Server Recommendations
|
||||
|
||||
See [references/mcp-servers.md](references/mcp-servers.md) for detailed patterns.
|
||||
|
||||
| Codebase Signal | Recommended MCP Server |
|
||||
|-----------------|------------------------|
|
||||
| Uses popular libraries (React, Express, etc.) | **context7** - Live documentation lookup |
|
||||
| Frontend with UI testing needs | **Playwright** - Browser automation/testing |
|
||||
| Uses Supabase | **Supabase MCP** - Direct database operations |
|
||||
| PostgreSQL/MySQL database | **Database MCP** - Query and schema tools |
|
||||
| GitHub repository | **GitHub MCP** - Issues, PRs, actions |
|
||||
| Uses Linear for issues | **Linear MCP** - Issue management |
|
||||
| AWS infrastructure | **AWS MCP** - Cloud resource management |
|
||||
| Slack workspace | **Slack MCP** - Team notifications |
|
||||
| Memory/context persistence | **Memory MCP** - Cross-session memory |
|
||||
| Sentry error tracking | **Sentry MCP** - Error investigation |
|
||||
| Docker containers | **Docker MCP** - Container management |
|
||||
|
||||
#### B. Skills Recommendations
|
||||
|
||||
See [references/skills-reference.md](references/skills-reference.md) for details.
|
||||
|
||||
Create skills in `.claude/skills/<name>/SKILL.md`. Some are also available via plugins:
|
||||
|
||||
| Codebase Signal | Skill | Plugin |
|
||||
|-----------------|-------|--------|
|
||||
| Building plugins | skill-development | plugin-dev |
|
||||
| Git commits | commit | commit-commands |
|
||||
| React/Vue/Angular | frontend-design | frontend-design |
|
||||
| Automation rules | writing-rules | hookify |
|
||||
| Feature planning | feature-dev | feature-dev |
|
||||
|
||||
**Custom skills to create** (with templates, scripts, examples):
|
||||
|
||||
| Codebase Signal | Skill to Create | Invocation |
|
||||
|-----------------|-----------------|------------|
|
||||
| API routes | **api-doc** (with OpenAPI template) | Both |
|
||||
| Database project | **create-migration** (with validation script) | User-only |
|
||||
| Test suite | **gen-test** (with example tests) | User-only |
|
||||
| Component library | **new-component** (with templates) | User-only |
|
||||
| PR workflow | **pr-check** (with checklist) | User-only |
|
||||
| Releases | **release-notes** (with git context) | User-only |
|
||||
| Code style | **project-conventions** | Claude-only |
|
||||
| Onboarding | **setup-dev** (with prereq script) | User-only |
|
||||
|
||||
#### C. Hooks Recommendations
|
||||
|
||||
See [references/hooks-patterns.md](references/hooks-patterns.md) for configurations.
|
||||
|
||||
| Codebase Signal | Recommended Hook |
|
||||
|-----------------|------------------|
|
||||
| Prettier configured | PostToolUse: auto-format on edit |
|
||||
| ESLint/Ruff configured | PostToolUse: auto-lint on edit |
|
||||
| TypeScript project | PostToolUse: type-check on edit |
|
||||
| Tests directory exists | PostToolUse: run related tests |
|
||||
| `.env` files present | PreToolUse: block `.env` edits |
|
||||
| Lock files present | PreToolUse: block lock file edits |
|
||||
| Security-sensitive code | PreToolUse: require confirmation |
|
||||
|
||||
#### D. Subagent Recommendations
|
||||
|
||||
See [references/subagent-templates.md](references/subagent-templates.md) for templates.
|
||||
|
||||
| Codebase Signal | Recommended Subagent |
|
||||
|-----------------|---------------------|
|
||||
| Large codebase (>500 files) | **code-reviewer** - Parallel code review |
|
||||
| Auth/payments code | **security-reviewer** - Security audits |
|
||||
| API project | **api-documenter** - OpenAPI generation |
|
||||
| Performance critical | **performance-analyzer** - Bottleneck detection |
|
||||
| Frontend heavy | **ui-reviewer** - Accessibility review |
|
||||
| Needs more tests | **test-writer** - Test generation |
|
||||
|
||||
#### E. Plugin Recommendations
|
||||
|
||||
See [references/plugins-reference.md](references/plugins-reference.md) for available plugins.
|
||||
|
||||
| Codebase Signal | Recommended Plugin |
|
||||
|-----------------|-------------------|
|
||||
| General productivity | **anthropic-agent-skills** - Core skills bundle |
|
||||
| Document workflows | Install docx, xlsx, pdf skills |
|
||||
| Frontend development | **frontend-design** plugin |
|
||||
| Building AI tools | **mcp-builder** for MCP development |
|
||||
|
||||
### Phase 3: Output Recommendations Report
|
||||
|
||||
Format recommendations clearly. **Only include 1-2 recommendations per category** - the most valuable ones for this specific codebase. Skip categories that aren't relevant.
|
||||
|
||||
```markdown
|
||||
## Claude Code Automation Recommendations
|
||||
|
||||
I've analyzed your codebase and identified the top automations for each category. Here are my top 1-2 recommendations per type:
|
||||
|
||||
### Codebase Profile
|
||||
- **Type**: [detected language/runtime]
|
||||
- **Framework**: [detected framework]
|
||||
- **Key Libraries**: [relevant libraries detected]
|
||||
|
||||
---
|
||||
|
||||
### 🔌 MCP Servers
|
||||
|
||||
#### context7
|
||||
**Why**: [specific reason based on detected libraries]
|
||||
**Install**: `claude mcp add context7`
|
||||
|
||||
---
|
||||
|
||||
### 🎯 Skills
|
||||
|
||||
#### [skill name]
|
||||
**Why**: [specific reason]
|
||||
**Create**: `.claude/skills/[name]/SKILL.md`
|
||||
**Invocation**: User-only / Both / Claude-only
|
||||
**Also available in**: [plugin-name] plugin (if applicable)
|
||||
```yaml
|
||||
---
|
||||
name: [skill-name]
|
||||
description: [what it does]
|
||||
disable-model-invocation: true # for user-only
|
||||
---
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### ⚡ Hooks
|
||||
|
||||
#### [hook name]
|
||||
**Why**: [specific reason based on detected config]
|
||||
**Where**: `.claude/settings.json`
|
||||
|
||||
---
|
||||
|
||||
### 🤖 Subagents
|
||||
|
||||
#### [agent name]
|
||||
**Why**: [specific reason based on codebase patterns]
|
||||
**Where**: `.claude/agents/[name].md`
|
||||
|
||||
---
|
||||
|
||||
**Want more?** Ask for additional recommendations for any specific category (e.g., "show me more MCP server options" or "what other hooks would help?").
|
||||
|
||||
**Want help implementing any of these?** Just ask and I can help you set up any of the recommendations above.
|
||||
```
|
||||
|
||||
## Decision Framework
|
||||
|
||||
### When to Recommend MCP Servers
|
||||
- External service integration needed (databases, APIs)
|
||||
- Documentation lookup for libraries/SDKs
|
||||
- Browser automation or testing
|
||||
- Team tool integration (GitHub, Linear, Slack)
|
||||
- Cloud infrastructure management
|
||||
|
||||
### When to Recommend Skills
|
||||
|
||||
- Document generation (docx, xlsx, pptx, pdf — also in plugins)
|
||||
- Frequently repeated prompts or workflows
|
||||
- Project-specific tasks with arguments
|
||||
- Applying templates or scripts to tasks (skills can bundle supporting files)
|
||||
- Quick actions invoked with `/skill-name`
|
||||
- Workflows that should run in isolation (`context: fork`)
|
||||
|
||||
**Invocation control:**
|
||||
- `disable-model-invocation: true` — User-only (for side effects: deploy, commit, send)
|
||||
- `user-invocable: false` — Claude-only (for background knowledge)
|
||||
- Default (omit both) — Both can invoke
|
||||
|
||||
### When to Recommend Hooks
|
||||
- Repetitive post-edit actions (formatting, linting)
|
||||
- Protection rules (block sensitive file edits)
|
||||
- Validation checks (tests, type checks)
|
||||
|
||||
### When to Recommend Subagents
|
||||
- Specialized expertise needed (security, performance)
|
||||
- Parallel review workflows
|
||||
- Background quality checks
|
||||
|
||||
### When to Recommend Plugins
|
||||
- Need multiple related skills
|
||||
- Want pre-packaged automation bundles
|
||||
- Team-wide standardization
|
||||
|
||||
---
|
||||
|
||||
## Configuration Tips
|
||||
|
||||
### MCP Server Setup
|
||||
|
||||
**Team sharing**: Check `.mcp.json` into repo so entire team gets same MCP servers
|
||||
|
||||
**Debugging**: Use `--mcp-debug` flag to identify configuration issues
|
||||
|
||||
**Prerequisites to recommend:**
|
||||
- GitHub CLI (`gh`) - enables native GitHub operations
|
||||
- Puppeteer/Playwright CLI - for browser MCP servers
|
||||
|
||||
### Headless Mode (for CI/Automation)
|
||||
|
||||
Recommend headless Claude for automated pipelines:
|
||||
|
||||
```bash
|
||||
# Pre-commit hook example
|
||||
claude -p "fix lint errors in src/" --allowedTools Edit,Write
|
||||
|
||||
# CI pipeline with structured output
|
||||
claude -p "<prompt>" --output-format stream-json | your_command
|
||||
```
|
||||
|
||||
### Permissions for Hooks
|
||||
|
||||
Configure allowed tools in `.claude/settings.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"permissions": {
|
||||
"allow": ["Edit", "Write", "Bash(npm test:*)", "Bash(git commit:*)"]
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,226 @@
|
||||
# Hooks Recommendations
|
||||
|
||||
Hooks automatically run commands in response to Claude Code events. They're ideal for enforcement and automation that should happen consistently.
|
||||
|
||||
**Note**: These are common patterns. Use web search to find hooks for tools/frameworks not listed here to recommend the best hooks for the user.
|
||||
|
||||
## Auto-Formatting Hooks
|
||||
|
||||
### Prettier (JavaScript/TypeScript)
|
||||
| Detection | File Exists |
|
||||
|-----------|-------------|
|
||||
| `.prettierrc`, `.prettierrc.json`, `prettier.config.js` | ✓ |
|
||||
|
||||
**Recommend**: PostToolUse hook on Edit/Write to auto-format
|
||||
**Value**: Code stays formatted without thinking about it
|
||||
|
||||
### ESLint (JavaScript/TypeScript)
|
||||
| Detection | File Exists |
|
||||
|-----------|-------------|
|
||||
| `.eslintrc`, `.eslintrc.json`, `eslint.config.js` | ✓ |
|
||||
|
||||
**Recommend**: PostToolUse hook on Edit/Write to auto-fix
|
||||
**Value**: Lint errors fixed automatically
|
||||
|
||||
### Black/isort (Python)
|
||||
| Detection | File Exists |
|
||||
|-----------|-------------|
|
||||
| `pyproject.toml` with black/isort, `.black`, `setup.cfg` | ✓ |
|
||||
|
||||
**Recommend**: PostToolUse hook to format Python files
|
||||
**Value**: Consistent Python formatting
|
||||
|
||||
### Ruff (Python - Modern)
|
||||
| Detection | File Exists |
|
||||
|-----------|-------------|
|
||||
| `ruff.toml`, `pyproject.toml` with `[tool.ruff]` | ✓ |
|
||||
|
||||
**Recommend**: PostToolUse hook for lint + format
|
||||
**Value**: Fast, comprehensive Python linting
|
||||
|
||||
### gofmt (Go)
|
||||
| Detection | File Exists |
|
||||
|-----------|-------------|
|
||||
| `go.mod` | ✓ |
|
||||
|
||||
**Recommend**: PostToolUse hook to run gofmt
|
||||
**Value**: Standard Go formatting
|
||||
|
||||
### rustfmt (Rust)
|
||||
| Detection | File Exists |
|
||||
|-----------|-------------|
|
||||
| `Cargo.toml` | ✓ |
|
||||
|
||||
**Recommend**: PostToolUse hook to run rustfmt
|
||||
**Value**: Standard Rust formatting
|
||||
|
||||
---
|
||||
|
||||
## Type Checking Hooks
|
||||
|
||||
### TypeScript
|
||||
| Detection | File Exists |
|
||||
|-----------|-------------|
|
||||
| `tsconfig.json` | ✓ |
|
||||
|
||||
**Recommend**: PostToolUse hook to run tsc --noEmit
|
||||
**Value**: Catch type errors immediately
|
||||
|
||||
### mypy/pyright (Python)
|
||||
| Detection | File Exists |
|
||||
|-----------|-------------|
|
||||
| `mypy.ini`, `pyrightconfig.json`, pyproject.toml with mypy | ✓ |
|
||||
|
||||
**Recommend**: PostToolUse hook for type checking
|
||||
**Value**: Catch type errors in Python
|
||||
|
||||
---
|
||||
|
||||
## Protection Hooks
|
||||
|
||||
### Block Sensitive File Edits
|
||||
| Detection | Presence Of |
|
||||
|-----------|-------------|
|
||||
| `.env`, `.env.local`, `.env.production` | Environment files |
|
||||
| `credentials.json`, `secrets.yaml` | Secret files |
|
||||
| `.git/` directory | Git internals |
|
||||
|
||||
**Recommend**: PreToolUse hook that blocks Edit/Write to these paths
|
||||
**Value**: Prevent accidental secret exposure or git corruption
|
||||
|
||||
### Block Lock File Edits
|
||||
| Detection | Presence Of |
|
||||
|-----------|-------------|
|
||||
| `package-lock.json`, `yarn.lock`, `pnpm-lock.yaml` | JS lock files |
|
||||
| `Cargo.lock`, `poetry.lock`, `Pipfile.lock` | Other lock files |
|
||||
|
||||
**Recommend**: PreToolUse hook that blocks direct edits
|
||||
**Value**: Lock files should only change via package manager
|
||||
|
||||
---
|
||||
|
||||
## Test Runner Hooks
|
||||
|
||||
### Jest (JavaScript/TypeScript)
|
||||
| Detection | Presence Of |
|
||||
|-----------|-------------|
|
||||
| `jest.config.js`, `jest` in package.json | Jest configured |
|
||||
| `__tests__/`, `*.test.ts`, `*.spec.ts` | Test files exist |
|
||||
|
||||
**Recommend**: PostToolUse hook to run related tests after edit
|
||||
**Value**: Immediate test feedback on changes
|
||||
|
||||
### pytest (Python)
|
||||
| Detection | Presence Of |
|
||||
|-----------|-------------|
|
||||
| `pytest.ini`, `pyproject.toml` with pytest | pytest configured |
|
||||
| `tests/`, `test_*.py` | Test files exist |
|
||||
|
||||
**Recommend**: PostToolUse hook to run pytest on changed files
|
||||
**Value**: Immediate test feedback
|
||||
|
||||
---
|
||||
|
||||
## Quick Reference: Detection → Recommendation
|
||||
|
||||
| If You See | Recommend This Hook |
|
||||
|------------|-------------------|
|
||||
| Prettier config | Auto-format on Edit/Write |
|
||||
| ESLint config | Auto-lint on Edit/Write |
|
||||
| Ruff/Black config | Auto-format Python |
|
||||
| tsconfig.json | Type-check on Edit |
|
||||
| Test directory | Run related tests on Edit |
|
||||
| .env files | Block .env edits |
|
||||
| Lock files | Block lock file edits |
|
||||
| Go project | gofmt on Edit |
|
||||
| Rust project | rustfmt on Edit |
|
||||
|
||||
---
|
||||
|
||||
## Notification Hooks
|
||||
|
||||
Notification hooks run when Claude Code sends notifications. Use matchers to filter by notification type.
|
||||
|
||||
### Permission Alerts
|
||||
| Matcher | Use Case |
|
||||
|---------|----------|
|
||||
| `permission_prompt` | Alert when Claude requests permissions |
|
||||
|
||||
**Recommend**: Play sound, send desktop notification, or log permission requests
|
||||
**Value**: Never miss permission prompts when multitasking
|
||||
|
||||
### Idle Notifications
|
||||
| Matcher | Use Case |
|
||||
|---------|----------|
|
||||
| `idle_prompt` | Alert when Claude is waiting for input (60+ seconds idle) |
|
||||
|
||||
**Recommend**: Play sound or send notification when Claude needs attention
|
||||
**Value**: Know when Claude is ready for your input
|
||||
|
||||
### Example Configuration
|
||||
|
||||
```json
|
||||
{
|
||||
"hooks": {
|
||||
"Notification": [
|
||||
{
|
||||
"matcher": "permission_prompt",
|
||||
"hooks": [
|
||||
{
|
||||
"type": "command",
|
||||
"command": "afplay /System/Library/Sounds/Ping.aiff"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"matcher": "idle_prompt",
|
||||
"hooks": [
|
||||
{
|
||||
"type": "command",
|
||||
"command": "osascript -e 'display notification \"Claude is waiting\" with title \"Claude Code\"'"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Available Matchers
|
||||
|
||||
| Matcher | Triggers When |
|
||||
|---------|---------------|
|
||||
| `permission_prompt` | Claude needs permission for a tool |
|
||||
| `idle_prompt` | Claude waiting for input (60+ seconds) |
|
||||
| `auth_success` | Authentication succeeds |
|
||||
| `elicitation_dialog` | MCP tool needs input |
|
||||
|
||||
---
|
||||
|
||||
## Quick Reference: Detection → Recommendation
|
||||
|
||||
| If You See | Recommend This Hook |
|
||||
|------------|-------------------|
|
||||
| Prettier config | Auto-format on Edit/Write |
|
||||
| ESLint config | Auto-lint on Edit/Write |
|
||||
| Ruff/Black config | Auto-format Python |
|
||||
| tsconfig.json | Type-check on Edit |
|
||||
| Test directory | Run related tests on Edit |
|
||||
| .env files | Block .env edits |
|
||||
| Lock files | Block lock file edits |
|
||||
| Go project | gofmt on Edit |
|
||||
| Rust project | rustfmt on Edit |
|
||||
| Multitasking workflow | Notification hooks for alerts |
|
||||
|
||||
---
|
||||
|
||||
## Hook Placement
|
||||
|
||||
Hooks go in `.claude/settings.json`:
|
||||
|
||||
```
|
||||
.claude/
|
||||
└── settings.json ← Hook configurations here
|
||||
```
|
||||
|
||||
Recommend creating the `.claude/` directory if it doesn't exist.
|
||||
@@ -0,0 +1,263 @@
|
||||
# MCP Server Recommendations
|
||||
|
||||
MCP (Model Context Protocol) servers extend Claude's capabilities by connecting to external tools and services.
|
||||
|
||||
**Note**: These are common MCP servers. Use web search to find MCP servers specific to the codebase's services and integrations.
|
||||
|
||||
## Setup & Team Sharing
|
||||
|
||||
**Connection methods:**
|
||||
1. **Project config** (`.mcp.json`) - Available only in that directory
|
||||
2. **Global config** (`~/.claude.json`) - Available across all projects
|
||||
3. **Checked-in `.mcp.json`** - Available to entire team (recommended!)
|
||||
|
||||
**Tip**: Check `.mcp.json` into git so your whole team gets the same MCP servers.
|
||||
|
||||
**Debugging**: Use `claude --mcp-debug` to identify configuration issues.
|
||||
|
||||
## Documentation & Knowledge
|
||||
|
||||
### context7
|
||||
**Best for**: Projects using popular libraries/SDKs where you want Claude to code with up-to-date documentation
|
||||
|
||||
| Recommend When | Examples |
|
||||
|----------------|----------|
|
||||
| Using React, Vue, Angular | Frontend frameworks |
|
||||
| Using Express, FastAPI, Django | Backend frameworks |
|
||||
| Using Prisma, Drizzle | ORMs |
|
||||
| Using Stripe, Twilio, SendGrid | Third-party APIs |
|
||||
| Using AWS SDK, Google Cloud | Cloud SDKs |
|
||||
| Using LangChain, OpenAI SDK | AI/ML libraries |
|
||||
|
||||
**Value**: Claude fetches live documentation instead of relying on training data, reducing hallucinated APIs and outdated patterns.
|
||||
|
||||
---
|
||||
|
||||
## Browser & Frontend
|
||||
|
||||
### Playwright MCP
|
||||
**Best for**: Frontend projects needing browser automation, testing, or screenshots
|
||||
|
||||
| Recommend When | Examples |
|
||||
|----------------|----------|
|
||||
| React/Vue/Angular app | UI component testing |
|
||||
| E2E tests needed | User flow validation |
|
||||
| Visual regression testing | Screenshot comparisons |
|
||||
| Debugging UI issues | See what user sees |
|
||||
| Form testing | Multi-step workflows |
|
||||
|
||||
**Value**: Claude can interact with your running app, take screenshots, fill forms, and verify UI behavior.
|
||||
|
||||
### Puppeteer MCP
|
||||
**Best for**: Headless browser automation, web scraping
|
||||
|
||||
| Recommend When | Examples |
|
||||
|----------------|----------|
|
||||
| PDF generation from HTML | Report generation |
|
||||
| Web scraping tasks | Data extraction |
|
||||
| Headless testing | CI environments |
|
||||
|
||||
---
|
||||
|
||||
## Databases
|
||||
|
||||
### Supabase MCP
|
||||
**Best for**: Projects using Supabase for backend/database
|
||||
|
||||
| Recommend When | Examples |
|
||||
|----------------|----------|
|
||||
| Supabase project detected | `@supabase/supabase-js` in deps |
|
||||
| Auth + database needs | User management apps |
|
||||
| Real-time features | Live data sync |
|
||||
|
||||
**Value**: Claude can query tables, manage auth, and interact with Supabase storage directly.
|
||||
|
||||
### PostgreSQL MCP
|
||||
**Best for**: Direct PostgreSQL database access
|
||||
|
||||
| Recommend When | Examples |
|
||||
|----------------|----------|
|
||||
| Raw PostgreSQL usage | No ORM layer |
|
||||
| Database migrations | Schema management |
|
||||
| Data analysis tasks | Complex queries |
|
||||
| Debugging data issues | Inspect actual data |
|
||||
|
||||
### Neon MCP
|
||||
**Best for**: Neon serverless Postgres users
|
||||
|
||||
### Turso MCP
|
||||
**Best for**: Turso/libSQL edge database users
|
||||
|
||||
---
|
||||
|
||||
## Version Control & DevOps
|
||||
|
||||
### GitHub MCP
|
||||
**Best for**: GitHub-hosted repositories needing issue/PR integration
|
||||
|
||||
| Recommend When | Examples |
|
||||
|----------------|----------|
|
||||
| GitHub repository | `.git` with GitHub remote |
|
||||
| Issue-driven development | Reference issues in commits |
|
||||
| PR workflows | Review, merge operations |
|
||||
| GitHub Actions | CI/CD pipeline access |
|
||||
| Release management | Tag and release automation |
|
||||
|
||||
**Value**: Claude can create issues, review PRs, check workflow runs, and manage releases.
|
||||
|
||||
### GitLab MCP
|
||||
**Best for**: GitLab-hosted repositories
|
||||
|
||||
### Linear MCP
|
||||
**Best for**: Teams using Linear for issue tracking
|
||||
|
||||
| Recommend When | Examples |
|
||||
|----------------|----------|
|
||||
| Linear workspace | Issue references like `ABC-123` |
|
||||
| Sprint planning | Backlog management |
|
||||
| Issue creation from code | Auto-create issues for TODOs |
|
||||
|
||||
---
|
||||
|
||||
## Cloud Infrastructure
|
||||
|
||||
### AWS MCP
|
||||
**Best for**: AWS infrastructure management
|
||||
|
||||
| Recommend When | Examples |
|
||||
|----------------|----------|
|
||||
| AWS SDK in dependencies | `@aws-sdk/*` packages |
|
||||
| Infrastructure as code | Terraform, CDK, SAM |
|
||||
| Lambda development | Serverless functions |
|
||||
| S3, DynamoDB usage | Cloud data services |
|
||||
|
||||
### Cloudflare MCP
|
||||
**Best for**: Cloudflare Workers, Pages, R2, D1
|
||||
|
||||
| Recommend When | Examples |
|
||||
|----------------|----------|
|
||||
| Cloudflare Workers | Edge functions |
|
||||
| Pages deployment | Static site hosting |
|
||||
| R2 storage | Object storage |
|
||||
| D1 database | Edge SQL database |
|
||||
|
||||
### Vercel MCP
|
||||
**Best for**: Vercel deployment and configuration
|
||||
|
||||
---
|
||||
|
||||
## Monitoring & Observtic
|
||||
|
||||
### Sentry MCP
|
||||
**Best for**: Error tracking and debugging
|
||||
|
||||
| Recommend When | Examples |
|
||||
|----------------|----------|
|
||||
| Sentry configured | `@sentry/*` in deps |
|
||||
| Production debugging | Investigate errors |
|
||||
| Error patterns | Group similar issues |
|
||||
| Release tracking | Correlate deploys with errors |
|
||||
|
||||
**Value**: Claude can investigate Sentry issues, find root causes, and suggest fixes.
|
||||
|
||||
### Datadog MCP
|
||||
**Best for**: APM, logs, and metrics
|
||||
|
||||
---
|
||||
|
||||
## Communication
|
||||
|
||||
### Slack MCP
|
||||
**Best for**: Slack workspace integration
|
||||
|
||||
| Recommend When | Examples |
|
||||
|----------------|----------|
|
||||
| Team uses Slack | Send notifications |
|
||||
| Deployment notifications | Alert channels |
|
||||
| Incident response | Post updates |
|
||||
|
||||
### Notion MCP
|
||||
**Best for**: Notion workspace for documentation
|
||||
|
||||
| Recommend When | Examples |
|
||||
|----------------|----------|
|
||||
| Notion for docs | Read/update pages |
|
||||
| Knowledge base | Search documentation |
|
||||
| Meeting notes | Create summaries |
|
||||
|
||||
---
|
||||
|
||||
## File & Data
|
||||
|
||||
### Filesystem MCP
|
||||
**Best for**: Enhanced file operations beyond built-in tools
|
||||
|
||||
| Recommend When | Examples |
|
||||
|----------------|----------|
|
||||
| Complex file operations | Batch processing |
|
||||
| File watching | Monitor changes |
|
||||
| Advanced search | Custom patterns |
|
||||
|
||||
### Memory MCP
|
||||
**Best for**: Persistent memory across sessions
|
||||
|
||||
| Recommend When | Examples |
|
||||
|----------------|----------|
|
||||
| Long-running projects | Remember context |
|
||||
| User preferences | Store settings |
|
||||
| Learning patterns | Build knowledge |
|
||||
|
||||
**Value**: Claude remembers project context, decisions, and patterns across conversations.
|
||||
|
||||
---
|
||||
|
||||
## Containers & DevOps
|
||||
|
||||
### Docker MCP
|
||||
**Best for**: Container management
|
||||
|
||||
| Recommend When | Examples |
|
||||
|----------------|----------|
|
||||
| Docker Compose file | Container orchestration |
|
||||
| Dockerfile present | Build images |
|
||||
| Container debugging | Inspect logs, exec |
|
||||
|
||||
### Kubernetes MCP
|
||||
**Best for**: Kubernetes cluster management
|
||||
|
||||
| Recommend When | Examples |
|
||||
|----------------|----------|
|
||||
| K8s manifests | Deploy, scale pods |
|
||||
| Helm charts | Package management |
|
||||
| Cluster debugging | Pod logs, status |
|
||||
|
||||
---
|
||||
|
||||
## AI & ML
|
||||
|
||||
### Exa MCP
|
||||
**Best for**: Web search and research
|
||||
|
||||
| Recommend When | Examples |
|
||||
|----------------|----------|
|
||||
| Research tasks | Find current info |
|
||||
| Competitive analysis | Market research |
|
||||
| Documentation gaps | Find examples |
|
||||
|
||||
---
|
||||
|
||||
## Quick Reference: Detection Patterns
|
||||
|
||||
| Look For | Suggests MCP Server |
|
||||
|----------|-------------------|
|
||||
| Popular npm packages | context7 |
|
||||
| React/Vue/Next.js | Playwright MCP |
|
||||
| `@supabase/supabase-js` | Supabase MCP |
|
||||
| `pg` or `postgres` | PostgreSQL MCP |
|
||||
| GitHub remote | GitHub MCP |
|
||||
| `.linear` or Linear refs | Linear MCP |
|
||||
| `@aws-sdk/*` | AWS MCP |
|
||||
| `@sentry/*` | Sentry MCP |
|
||||
| `docker-compose.yml` | Docker MCP |
|
||||
| Slack webhook URLs | Slack MCP |
|
||||
| `@anthropic-ai/sdk` | context7 for Anthropic docs |
|
||||
@@ -0,0 +1,98 @@
|
||||
# Plugin Recommendations
|
||||
|
||||
Plugins are installable collections of skills, commands, agents, and hooks. Install via `/plugin install`.
|
||||
|
||||
**Note**: These are plugins from the official repository. Use web search to discover additional community plugins.
|
||||
|
||||
---
|
||||
|
||||
## Official Plugins
|
||||
|
||||
### Development & Code Quality
|
||||
|
||||
| Plugin | Best For | Key Features |
|
||||
|--------|----------|--------------|
|
||||
| **plugin-dev** | Building Claude Code plugins | Skills for creating skills, hooks, commands, agents |
|
||||
| **pr-review-toolkit** | PR review workflows | Specialized review agents (code, tests, types) |
|
||||
| **code-review** | Automated code review | Multi-agent review with confidence scoring |
|
||||
| **code-simplifier** | Code refactoring | Simplify code while preserving functionality |
|
||||
| **feature-dev** | Feature development | End-to-end feature workflow with agents |
|
||||
|
||||
### Git & Workflow
|
||||
|
||||
| Plugin | Best For | Key Features |
|
||||
|--------|----------|--------------|
|
||||
| **commit-commands** | Git workflows | /commit, /commit-push-pr commands |
|
||||
| **hookify** | Automation rules | Create hooks from conversation patterns |
|
||||
|
||||
### Frontend
|
||||
|
||||
| Plugin | Best For | Key Features |
|
||||
|--------|----------|--------------|
|
||||
| **frontend-design** | UI development | Production-grade UI, avoids generic aesthetics |
|
||||
|
||||
### Learning & Guidance
|
||||
|
||||
| Plugin | Best For | Key Features |
|
||||
|--------|----------|--------------|
|
||||
| **explanatory-output-style** | Learning | Educational insights about code choices |
|
||||
| **learning-output-style** | Interactive learning | Requests contributions at decision points |
|
||||
| **security-guidance** | Security awareness | Warns about security issues when editing |
|
||||
|
||||
### Language Servers (LSP)
|
||||
|
||||
| Plugin | Language |
|
||||
|--------|----------|
|
||||
| **typescript-lsp** | TypeScript/JavaScript |
|
||||
| **pyright-lsp** | Python |
|
||||
| **gopls-lsp** | Go |
|
||||
| **rust-analyzer-lsp** | Rust |
|
||||
| **clangd-lsp** | C/C++ |
|
||||
| **jdtls-lsp** | Java |
|
||||
| **kotlin-lsp** | Kotlin |
|
||||
| **swift-lsp** | Swift |
|
||||
| **csharp-lsp** | C# |
|
||||
| **php-lsp** | PHP |
|
||||
| **lua-lsp** | Lua |
|
||||
|
||||
---
|
||||
|
||||
## Quick Reference: Codebase → Plugin
|
||||
|
||||
| Codebase Signal | Recommended Plugin |
|
||||
|-----------------|-------------------|
|
||||
| Building plugins | plugin-dev |
|
||||
| PR-based workflow | pr-review-toolkit |
|
||||
| Git commits | commit-commands |
|
||||
| React/Vue/Angular | frontend-design |
|
||||
| Want automation rules | hookify |
|
||||
| TypeScript project | typescript-lsp |
|
||||
| Python project | pyright-lsp |
|
||||
| Go project | gopls-lsp |
|
||||
| Security-sensitive code | security-guidance |
|
||||
| Learning/onboarding | explanatory-output-style |
|
||||
|
||||
---
|
||||
|
||||
## Plugin Management
|
||||
|
||||
```bash
|
||||
# Install a plugin
|
||||
/plugin install <plugin-name>
|
||||
|
||||
# List installed plugins
|
||||
/plugin list
|
||||
|
||||
# View plugin details
|
||||
/plugin info <plugin-name>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## When to Recommend Plugins
|
||||
|
||||
**Recommend plugin installation when:**
|
||||
- User wants to install Claude Code automations from Anthropic's official repository or another shared marketplace
|
||||
- User needs multiple related capabilities
|
||||
- Team wants standardized workflows
|
||||
- First-time Claude Code setup
|
||||
@@ -0,0 +1,408 @@
|
||||
# Skills Recommendations
|
||||
|
||||
Skills are packaged expertise with workflows, reference materials, and best practices. Create them in `.claude/skills/<name>/SKILL.md`. Skills can be invoked by Claude automatically when relevant, or by users directly with `/skill-name`.
|
||||
|
||||
Some pre-built skills are available through official plugins (install via `/plugin install`).
|
||||
|
||||
**Note**: These are common patterns. Use web search to find skill ideas specific to the codebase's tools and frameworks.
|
||||
|
||||
---
|
||||
|
||||
## Available from Official Plugins
|
||||
|
||||
### Plugin Development (plugin-dev)
|
||||
|
||||
| Skill | Best For |
|
||||
|-------|----------|
|
||||
| **skill-development** | Creating new skills with proper structure |
|
||||
| **hook-development** | Building hooks for automation |
|
||||
| **command-development** | Creating slash commands |
|
||||
| **agent-development** | Building specialized subagents |
|
||||
| **mcp-integration** | Integrating MCP servers into plugins |
|
||||
| **plugin-structure** | Understanding plugin architecture |
|
||||
|
||||
### Git Workflows (commit-commands)
|
||||
|
||||
| Skill | Best For |
|
||||
|-------|----------|
|
||||
| **commit** | Creating git commits with proper messages |
|
||||
| **commit-push-pr** | Full commit, push, and PR workflow |
|
||||
|
||||
### Frontend (frontend-design)
|
||||
|
||||
| Skill | Best For |
|
||||
|-------|----------|
|
||||
| **frontend-design** | Creating polished UI components |
|
||||
|
||||
**Value**: Creates distinctive, high-quality UI instead of generic AI aesthetics.
|
||||
|
||||
### Automation Rules (hookify)
|
||||
|
||||
| Skill | Best For |
|
||||
|-------|----------|
|
||||
| **writing-rules** | Creating hookify rules for automation |
|
||||
|
||||
### Feature Development (feature-dev)
|
||||
|
||||
| Skill | Best For |
|
||||
|-------|----------|
|
||||
| **feature-dev** | End-to-end feature development workflow |
|
||||
|
||||
---
|
||||
|
||||
## Quick Reference: Official Plugin Skills
|
||||
|
||||
| Codebase Signal | Skill | Plugin |
|
||||
|-----------------|-------|--------|
|
||||
| Building plugins | skill-development | plugin-dev |
|
||||
| Git commits | commit | commit-commands |
|
||||
| React/Vue/Angular | frontend-design | frontend-design |
|
||||
| Automation rules | writing-rules | hookify |
|
||||
| Feature planning | feature-dev | feature-dev |
|
||||
|
||||
---
|
||||
|
||||
## Custom Project Skills
|
||||
|
||||
Create project-specific skills in `.claude/skills/<name>/SKILL.md`.
|
||||
|
||||
### Skill Structure
|
||||
|
||||
```
|
||||
.claude/skills/
|
||||
└── my-skill/
|
||||
├── SKILL.md # Main instructions (required)
|
||||
├── template.yaml # Template to apply
|
||||
├── scripts/
|
||||
│ └── validate.sh # Script to run
|
||||
└── examples/ # Reference examples
|
||||
```
|
||||
|
||||
### Frontmatter Reference
|
||||
|
||||
```yaml
|
||||
---
|
||||
name: skill-name
|
||||
description: What this skill does and when to use it
|
||||
disable-model-invocation: true # Only user can invoke (for side effects)
|
||||
user-invocable: false # Only Claude can invoke (for background knowledge)
|
||||
allowed-tools: Read, Grep, Glob # Restrict tool access
|
||||
context: fork # Run in isolated subagent
|
||||
agent: Explore # Which agent type when forked
|
||||
---
|
||||
```
|
||||
|
||||
### Invocation Control
|
||||
|
||||
| Setting | User | Claude | Use for |
|
||||
|---------|------|--------|---------|
|
||||
| (default) | ✓ | ✓ | General-purpose skills |
|
||||
| `disable-model-invocation: true` | ✓ | ✗ | Side effects (deploy, send) |
|
||||
| `user-invocable: false` | ✗ | ✓ | Background knowledge |
|
||||
|
||||
---
|
||||
|
||||
## Custom Skill Examples
|
||||
|
||||
### API Documentation with OpenAPI Template
|
||||
|
||||
Apply a YAML template to generate consistent API docs:
|
||||
|
||||
```
|
||||
.claude/skills/api-doc/
|
||||
├── SKILL.md
|
||||
└── openapi-template.yaml
|
||||
```
|
||||
|
||||
**SKILL.md:**
|
||||
```yaml
|
||||
---
|
||||
name: api-doc
|
||||
description: Generate OpenAPI documentation for an endpoint. Use when documenting API routes.
|
||||
---
|
||||
|
||||
Generate OpenAPI documentation for the endpoint at $ARGUMENTS.
|
||||
|
||||
Use the template in [openapi-template.yaml](openapi-template.yaml) as the structure.
|
||||
|
||||
1. Read the endpoint code
|
||||
2. Extract path, method, parameters, request/response schemas
|
||||
3. Fill in the template with actual values
|
||||
4. Output the completed YAML
|
||||
```
|
||||
|
||||
**openapi-template.yaml:**
|
||||
```yaml
|
||||
paths:
|
||||
/{path}:
|
||||
{method}:
|
||||
summary: ""
|
||||
description: ""
|
||||
parameters: []
|
||||
requestBody:
|
||||
content:
|
||||
application/json:
|
||||
schema: {}
|
||||
responses:
|
||||
"200":
|
||||
description: ""
|
||||
content:
|
||||
application/json:
|
||||
schema: {}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Database Migration Generator with Script
|
||||
|
||||
Generate and validate migrations using a bundled script:
|
||||
|
||||
```
|
||||
.claude/skills/create-migration/
|
||||
├── SKILL.md
|
||||
└── scripts/
|
||||
└── validate-migration.sh
|
||||
```
|
||||
|
||||
**SKILL.md:**
|
||||
```yaml
|
||||
---
|
||||
name: create-migration
|
||||
description: Create a database migration file
|
||||
disable-model-invocation: true
|
||||
allowed-tools: Read, Write, Bash
|
||||
---
|
||||
|
||||
Create a migration for: $ARGUMENTS
|
||||
|
||||
1. Generate migration file in `migrations/` with timestamp prefix
|
||||
2. Include up and down functions
|
||||
3. Run validation: `bash ~/.claude/skills/create-migration/scripts/validate-migration.sh`
|
||||
4. Report any issues found
|
||||
```
|
||||
|
||||
**scripts/validate-migration.sh:**
|
||||
```bash
|
||||
#!/bin/bash
|
||||
# Validate migration syntax
|
||||
npx prisma validate 2>&1 || echo "Validation failed"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Test Generator with Examples
|
||||
|
||||
Generate tests following project patterns:
|
||||
|
||||
```
|
||||
.claude/skills/gen-test/
|
||||
├── SKILL.md
|
||||
└── examples/
|
||||
├── unit-test.ts
|
||||
└── integration-test.ts
|
||||
```
|
||||
|
||||
**SKILL.md:**
|
||||
```yaml
|
||||
---
|
||||
name: gen-test
|
||||
description: Generate tests for a file following project conventions
|
||||
disable-model-invocation: true
|
||||
---
|
||||
|
||||
Generate tests for: $ARGUMENTS
|
||||
|
||||
Reference these examples for the expected patterns:
|
||||
- Unit tests: [examples/unit-test.ts](examples/unit-test.ts)
|
||||
- Integration tests: [examples/integration-test.ts](examples/integration-test.ts)
|
||||
|
||||
1. Analyze the source file
|
||||
2. Identify functions/methods to test
|
||||
3. Generate tests matching project conventions
|
||||
4. Place in appropriate test directory
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Component Generator with Template
|
||||
|
||||
Scaffold new components from a template:
|
||||
|
||||
```
|
||||
.claude/skills/new-component/
|
||||
├── SKILL.md
|
||||
└── templates/
|
||||
├── component.tsx.template
|
||||
├── component.test.tsx.template
|
||||
└── component.stories.tsx.template
|
||||
```
|
||||
|
||||
**SKILL.md:**
|
||||
```yaml
|
||||
---
|
||||
name: new-component
|
||||
description: Scaffold a new React component with tests and stories
|
||||
disable-model-invocation: true
|
||||
---
|
||||
|
||||
Create component: $ARGUMENTS
|
||||
|
||||
Use templates in [templates/](templates/) directory:
|
||||
1. Generate component from component.tsx.template
|
||||
2. Generate tests from component.test.tsx.template
|
||||
3. Generate Storybook story from component.stories.tsx.template
|
||||
|
||||
Replace {{ComponentName}} with the PascalCase name.
|
||||
Replace {{component-name}} with the kebab-case name.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### PR Review with Checklist
|
||||
|
||||
Review PRs against a project-specific checklist:
|
||||
|
||||
```
|
||||
.claude/skills/pr-check/
|
||||
├── SKILL.md
|
||||
└── checklist.md
|
||||
```
|
||||
|
||||
**SKILL.md:**
|
||||
```yaml
|
||||
---
|
||||
name: pr-check
|
||||
description: Review PR against project checklist
|
||||
disable-model-invocation: true
|
||||
context: fork
|
||||
---
|
||||
|
||||
## PR Context
|
||||
- Diff: !`gh pr diff`
|
||||
- Description: !`gh pr view`
|
||||
|
||||
Review against [checklist.md](checklist.md).
|
||||
|
||||
For each item, mark ✅ or ❌ with explanation.
|
||||
```
|
||||
|
||||
**checklist.md:**
|
||||
```markdown
|
||||
## PR Checklist
|
||||
|
||||
- [ ] Tests added for new functionality
|
||||
- [ ] No console.log statements
|
||||
- [ ] Error handling includes user-facing messages
|
||||
- [ ] API changes are backwards compatible
|
||||
- [ ] Database migrations are reversible
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Release Notes Generator
|
||||
|
||||
Generate release notes from git history:
|
||||
|
||||
**SKILL.md:**
|
||||
```yaml
|
||||
---
|
||||
name: release-notes
|
||||
description: Generate release notes from commits since last tag
|
||||
disable-model-invocation: true
|
||||
---
|
||||
|
||||
## Recent Changes
|
||||
- Commits since last tag: !`git log $(git describe --tags --abbrev=0)..HEAD --oneline`
|
||||
- Last tag: !`git describe --tags --abbrev=0`
|
||||
|
||||
Generate release notes:
|
||||
1. Group commits by type (feat, fix, docs, etc.)
|
||||
2. Write user-friendly descriptions
|
||||
3. Highlight breaking changes
|
||||
4. Format as markdown
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Project Conventions (Claude-only)
|
||||
|
||||
Background knowledge Claude applies automatically:
|
||||
|
||||
**SKILL.md:**
|
||||
```yaml
|
||||
---
|
||||
name: project-conventions
|
||||
description: Code style and patterns for this project. Apply when writing or reviewing code.
|
||||
user-invocable: false
|
||||
---
|
||||
|
||||
## Naming Conventions
|
||||
- React components: PascalCase
|
||||
- Utilities: camelCase
|
||||
- Constants: UPPER_SNAKE_CASE
|
||||
- Files: kebab-case
|
||||
|
||||
## Patterns
|
||||
- Use `Result<T, E>` for fallible operations, not exceptions
|
||||
- Prefer composition over inheritance
|
||||
- All API responses use `{ data, error, meta }` shape
|
||||
|
||||
## Forbidden
|
||||
- No `any` types
|
||||
- No `console.log` in production code
|
||||
- No synchronous file I/O
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Environment Setup
|
||||
|
||||
Onboard new developers with setup script:
|
||||
|
||||
```
|
||||
.claude/skills/setup-dev/
|
||||
├── SKILL.md
|
||||
└── scripts/
|
||||
└── check-prerequisites.sh
|
||||
```
|
||||
|
||||
**SKILL.md:**
|
||||
```yaml
|
||||
---
|
||||
name: setup-dev
|
||||
description: Set up development environment for new contributors
|
||||
disable-model-invocation: true
|
||||
---
|
||||
|
||||
Set up development environment:
|
||||
|
||||
1. Check prerequisites: `bash scripts/check-prerequisites.sh`
|
||||
2. Install dependencies: `npm install`
|
||||
3. Copy environment template: `cp .env.example .env`
|
||||
4. Set up database: `npm run db:setup`
|
||||
5. Verify setup: `npm test`
|
||||
|
||||
Report any issues encountered.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Argument Patterns
|
||||
|
||||
| Pattern | Meaning | Example |
|
||||
|---------|---------|---------|
|
||||
| `$ARGUMENTS` | All args as string | `/deploy staging` → "staging" |
|
||||
|
||||
Arguments are appended as `ARGUMENTS: <value>` if `$ARGUMENTS` isn't in the skill.
|
||||
|
||||
## Dynamic Context Injection
|
||||
|
||||
Use `!`command`` to inject live data before the skill runs:
|
||||
|
||||
```yaml
|
||||
## Current State
|
||||
- Branch: !`git branch --show-current`
|
||||
- Status: !`git status --short`
|
||||
```
|
||||
|
||||
The command output replaces the placeholder before Claude sees the skill content.
|
||||
@@ -0,0 +1,181 @@
|
||||
# Subagent Recommendations
|
||||
|
||||
Subagents are specialized Claude instances that run in parallel, each with their own context window and tool access. They're ideal for focused reviews, analysis, or generation tasks.
|
||||
|
||||
**Note**: These are common patterns. Design custom subagents based on the codebase's specific review and analysis needs.
|
||||
|
||||
## Code Review Agents
|
||||
|
||||
### code-reviewer
|
||||
**Best for**: Automated code quality checks on large codebases
|
||||
|
||||
| Recommend When | Detection |
|
||||
|----------------|-----------|
|
||||
| Large codebase (>500 files) | File count |
|
||||
| Frequent code changes | Active development |
|
||||
| Team wants consistent review | Quality focus |
|
||||
|
||||
**Value**: Runs code review in parallel while you continue working
|
||||
**Model**: sonnet (balanced quality/speed)
|
||||
**Tools**: Read, Grep, Glob, Bash
|
||||
|
||||
---
|
||||
|
||||
### security-reviewer
|
||||
**Best for**: Security-focused code review
|
||||
|
||||
| Recommend When | Detection |
|
||||
|----------------|-----------|
|
||||
| Auth code present | `auth/`, `login`, `session` patterns |
|
||||
| Payment processing | `stripe`, `payment`, `billing` patterns |
|
||||
| User data handling | `user`, `profile`, `pii` patterns |
|
||||
| API keys in code | Environment variable patterns |
|
||||
|
||||
**Value**: Catches OWASP vulnerabilities, auth issues, data exposure
|
||||
**Model**: sonnet
|
||||
**Tools**: Read, Grep, Glob (read-only for safety)
|
||||
|
||||
---
|
||||
|
||||
### test-writer
|
||||
**Best for**: Generating comprehensive test coverage
|
||||
|
||||
| Recommend When | Detection |
|
||||
|----------------|-----------|
|
||||
| Low test coverage | Few test files vs source files |
|
||||
| Test suite exists | `tests/`, `__tests__/` present |
|
||||
| Testing framework configured | jest, pytest, vitest in deps |
|
||||
|
||||
**Value**: Generates tests matching project conventions
|
||||
**Model**: sonnet
|
||||
**Tools**: Read, Write, Grep, Glob
|
||||
|
||||
---
|
||||
|
||||
## Specialized Agents
|
||||
|
||||
### api-documenter
|
||||
**Best for**: API documentation generation
|
||||
|
||||
| Recommend When | Detection |
|
||||
|----------------|-----------|
|
||||
| REST endpoints | Express routes, FastAPI paths |
|
||||
| GraphQL schema | `.graphql` files |
|
||||
| OpenAPI exists | `openapi.yaml`, `swagger.json` |
|
||||
| Undocumented APIs | Routes without docs |
|
||||
|
||||
**Value**: Generates OpenAPI specs, endpoint documentation
|
||||
**Model**: sonnet
|
||||
**Tools**: Read, Write, Grep, Glob
|
||||
|
||||
---
|
||||
|
||||
### performance-analyzer
|
||||
**Best for**: Finding performance bottlenecks
|
||||
|
||||
| Recommend When | Detection |
|
||||
|----------------|-----------|
|
||||
| Database queries | ORM usage, raw SQL |
|
||||
| High-traffic code | API endpoints, hot paths |
|
||||
| Performance complaints | User reports slowness |
|
||||
| Complex algorithms | Nested loops, recursion |
|
||||
|
||||
**Value**: Finds N+1 queries, O(n²) algorithms, memory leaks
|
||||
**Model**: sonnet
|
||||
**Tools**: Read, Grep, Glob, Bash
|
||||
|
||||
---
|
||||
|
||||
### ui-reviewer
|
||||
**Best for**: Frontend accessibility and UX review
|
||||
|
||||
| Recommend When | Detection |
|
||||
|----------------|-----------|
|
||||
| React/Vue/Angular | Frontend framework detected |
|
||||
| Component library | `components/` directory |
|
||||
| User-facing UI | Not just API project |
|
||||
|
||||
**Value**: Catches accessibility issues, UX problems, responsive design gaps
|
||||
**Model**: sonnet
|
||||
**Tools**: Read, Grep, Glob
|
||||
|
||||
---
|
||||
|
||||
## Utility Agents
|
||||
|
||||
### dependency-updater
|
||||
**Best for**: Safe dependency updates
|
||||
|
||||
| Recommend When | Detection |
|
||||
|----------------|-----------|
|
||||
| Outdated deps | `npm outdated` has results |
|
||||
| Security advisories | `npm audit` warnings |
|
||||
| Major version behind | Significant version gaps |
|
||||
|
||||
**Value**: Updates dependencies incrementally with testing
|
||||
**Model**: sonnet
|
||||
**Tools**: Read, Write, Bash, Grep
|
||||
|
||||
---
|
||||
|
||||
### migration-helper
|
||||
**Best for**: Framework/version migrations
|
||||
|
||||
| Recommend When | Detection |
|
||||
|----------------|-----------|
|
||||
| Major upgrade needed | Framework version very old |
|
||||
| Breaking changes coming | Deprecation warnings |
|
||||
| Refactoring planned | Architectural changes |
|
||||
|
||||
**Value**: Plans and executes migrations incrementally
|
||||
**Model**: opus (complex reasoning needed)
|
||||
**Tools**: Read, Write, Grep, Glob, Bash
|
||||
|
||||
---
|
||||
|
||||
## Quick Reference: Detection → Recommendation
|
||||
|
||||
| If You See | Recommend Subagent |
|
||||
|------------|-------------------|
|
||||
| Large codebase | code-reviewer |
|
||||
| Auth/payment code | security-reviewer |
|
||||
| Few tests | test-writer |
|
||||
| API routes | api-documenter |
|
||||
| Database heavy | performance-analyzer |
|
||||
| Frontend components | ui-reviewer |
|
||||
| Outdated packages | dependency-updater |
|
||||
| Old framework version | migration-helper |
|
||||
|
||||
---
|
||||
|
||||
## Subagent Placement
|
||||
|
||||
Subagents go in `.claude/agents/`:
|
||||
|
||||
```
|
||||
.claude/
|
||||
└── agents/
|
||||
├── code-reviewer.md
|
||||
├── security-reviewer.md
|
||||
└── test-writer.md
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Model Selection Guide
|
||||
|
||||
| Model | Best For | Trade-off |
|
||||
|-------|----------|-----------|
|
||||
| **haiku** | Simple, repetitive checks | Fast, cheap, less thorough |
|
||||
| **sonnet** | Most review/analysis tasks | Balanced (recommended default) |
|
||||
| **opus** | Complex migrations, architecture | Thorough, slower, more expensive |
|
||||
|
||||
---
|
||||
|
||||
## Tool Access Guide
|
||||
|
||||
| Access Level | Tools | Use Case |
|
||||
|--------------|-------|----------|
|
||||
| Read-only | Read, Grep, Glob | Reviews, analysis |
|
||||
| Writing | + Write | Code generation, docs |
|
||||
| Full | + Bash | Migrations, testing |
|
||||
9
plugins/claude-md-management/.claude-plugin/plugin.json
Normal file
9
plugins/claude-md-management/.claude-plugin/plugin.json
Normal file
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"name": "claude-md-management",
|
||||
"description": "Tools to maintain and improve CLAUDE.md files - audit quality, capture session learnings, and keep project memory current.",
|
||||
"version": "1.0.0",
|
||||
"author": {
|
||||
"name": "Anthropic",
|
||||
"email": "support@anthropic.com"
|
||||
}
|
||||
}
|
||||
40
plugins/claude-md-management/README.md
Normal file
40
plugins/claude-md-management/README.md
Normal file
@@ -0,0 +1,40 @@
|
||||
# CLAUDE.md Management Plugin
|
||||
|
||||
Tools to maintain and improve CLAUDE.md files - audit quality, capture session learnings, and keep project memory current.
|
||||
|
||||
## What It Does
|
||||
|
||||
Two complementary tools for different purposes:
|
||||
|
||||
| | claude-md-improver (skill) | /revise-claude-md (command) |
|
||||
|---|---|---|
|
||||
| **Purpose** | Keep CLAUDE.md aligned with codebase | Capture session learnings |
|
||||
| **Triggered by** | Codebase changes | End of session |
|
||||
| **Use when** | Periodic maintenance | Session revealed missing context |
|
||||
|
||||
## Usage
|
||||
|
||||
### Skill: claude-md-improver
|
||||
|
||||
Audits CLAUDE.md files against current codebase state:
|
||||
|
||||
```
|
||||
"audit my CLAUDE.md files"
|
||||
"check if my CLAUDE.md is up to date"
|
||||
```
|
||||
|
||||
<img src="claude-md-improver-example.png" alt="CLAUDE.md improver showing quality scores and recommended updates" width="600">
|
||||
|
||||
### Command: /revise-claude-md
|
||||
|
||||
Captures learnings from the current session:
|
||||
|
||||
```
|
||||
/revise-claude-md
|
||||
```
|
||||
|
||||
<img src="revise-claude-md-example.png" alt="Revise command capturing session learnings into CLAUDE.md" width="600">
|
||||
|
||||
## Author
|
||||
|
||||
Isabella He (isabella@anthropic.com)
|
||||
BIN
plugins/claude-md-management/claude-md-improver-example.png
Normal file
BIN
plugins/claude-md-management/claude-md-improver-example.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 507 KiB |
54
plugins/claude-md-management/commands/revise-claude-md.md
Normal file
54
plugins/claude-md-management/commands/revise-claude-md.md
Normal file
@@ -0,0 +1,54 @@
|
||||
---
|
||||
description: Update CLAUDE.md with learnings from this session
|
||||
allowed-tools: Read, Edit, Glob
|
||||
---
|
||||
|
||||
Review this session for learnings about working with Claude Code in this codebase. Update CLAUDE.md with context that would help future Claude sessions be more effective.
|
||||
|
||||
## Step 1: Reflect
|
||||
|
||||
What context was missing that would have helped Claude work more effectively?
|
||||
- Bash commands that were used or discovered
|
||||
- Code style patterns followed
|
||||
- Testing approaches that worked
|
||||
- Environment/configuration quirks
|
||||
- Warnings or gotchas encountered
|
||||
|
||||
## Step 2: Find CLAUDE.md Files
|
||||
|
||||
```bash
|
||||
find . -name "CLAUDE.md" -o -name ".claude.local.md" 2>/dev/null | head -20
|
||||
```
|
||||
|
||||
Decide where each addition belongs:
|
||||
- `CLAUDE.md` - Team-shared (checked into git)
|
||||
- `.claude.local.md` - Personal/local only (gitignored)
|
||||
|
||||
## Step 3: Draft Additions
|
||||
|
||||
**Keep it concise** - one line per concept. CLAUDE.md is part of the prompt, so brevity matters.
|
||||
|
||||
Format: `<command or pattern>` - `<brief description>`
|
||||
|
||||
Avoid:
|
||||
- Verbose explanations
|
||||
- Obvious information
|
||||
- One-off fixes unlikely to recur
|
||||
|
||||
## Step 4: Show Proposed Changes
|
||||
|
||||
For each addition:
|
||||
|
||||
```
|
||||
### Update: ./CLAUDE.md
|
||||
|
||||
**Why:** [one-line reason]
|
||||
|
||||
\`\`\`diff
|
||||
+ [the addition - keep it brief]
|
||||
\`\`\`
|
||||
```
|
||||
|
||||
## Step 5: Apply with Approval
|
||||
|
||||
Ask if the user wants to apply the changes. Only edit files they approve.
|
||||
BIN
plugins/claude-md-management/revise-claude-md-example.png
Normal file
BIN
plugins/claude-md-management/revise-claude-md-example.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 542 KiB |
179
plugins/claude-md-management/skills/claude-md-improver/SKILL.md
Normal file
179
plugins/claude-md-management/skills/claude-md-improver/SKILL.md
Normal file
@@ -0,0 +1,179 @@
|
||||
---
|
||||
name: claude-md-improver
|
||||
description: Audit and improve CLAUDE.md files in repositories. Use when user asks to check, audit, update, improve, or fix CLAUDE.md files. Scans for all CLAUDE.md files, evaluates quality against templates, outputs quality report, then makes targeted updates. Also use when the user mentions "CLAUDE.md maintenance" or "project memory optimization".
|
||||
tools: Read, Glob, Grep, Bash, Edit
|
||||
---
|
||||
|
||||
# CLAUDE.md Improver
|
||||
|
||||
Audit, evaluate, and improve CLAUDE.md files across a codebase to ensure Claude Code has optimal project context.
|
||||
|
||||
**This skill can write to CLAUDE.md files.** After presenting a quality report and getting user approval, it updates CLAUDE.md files with targeted improvements.
|
||||
|
||||
## Workflow
|
||||
|
||||
### Phase 1: Discovery
|
||||
|
||||
Find all CLAUDE.md files in the repository:
|
||||
|
||||
```bash
|
||||
find . -name "CLAUDE.md" -o -name ".claude.md" -o -name ".claude.local.md" 2>/dev/null | head -50
|
||||
```
|
||||
|
||||
**File Types & Locations:**
|
||||
|
||||
| Type | Location | Purpose |
|
||||
|------|----------|---------|
|
||||
| Project root | `./CLAUDE.md` | Primary project context (checked into git, shared with team) |
|
||||
| Local overrides | `./.claude.local.md` | Personal/local settings (gitignored, not shared) |
|
||||
| Global defaults | `~/.claude/CLAUDE.md` | User-wide defaults across all projects |
|
||||
| Package-specific | `./packages/*/CLAUDE.md` | Module-level context in monorepos |
|
||||
| Subdirectory | Any nested location | Feature/domain-specific context |
|
||||
|
||||
**Note:** Claude auto-discovers CLAUDE.md files in parent directories, making monorepo setups work automatically.
|
||||
|
||||
### Phase 2: Quality Assessment
|
||||
|
||||
For each CLAUDE.md file, evaluate against quality criteria. See [references/quality-criteria.md](references/quality-criteria.md) for detailed rubrics.
|
||||
|
||||
**Quick Assessment Checklist:**
|
||||
|
||||
| Criterion | Weight | Check |
|
||||
|-----------|--------|-------|
|
||||
| Commands/workflows documented | High | Are build/test/deploy commands present? |
|
||||
| Architecture clarity | High | Can Claude understand the codebase structure? |
|
||||
| Non-obvious patterns | Medium | Are gotchas and quirks documented? |
|
||||
| Conciseness | Medium | No verbose explanations or obvious info? |
|
||||
| Currency | High | Does it reflect current codebase state? |
|
||||
| Actionability | High | Are instructions executable, not vague? |
|
||||
|
||||
**Quality Scores:**
|
||||
- **A (90-100)**: Comprehensive, current, actionable
|
||||
- **B (70-89)**: Good coverage, minor gaps
|
||||
- **C (50-69)**: Basic info, missing key sections
|
||||
- **D (30-49)**: Sparse or outdated
|
||||
- **F (0-29)**: Missing or severely outdated
|
||||
|
||||
### Phase 3: Quality Report Output
|
||||
|
||||
**ALWAYS output the quality report BEFORE making any updates.**
|
||||
|
||||
Format:
|
||||
|
||||
```
|
||||
## CLAUDE.md Quality Report
|
||||
|
||||
### Summary
|
||||
- Files found: X
|
||||
- Average score: X/100
|
||||
- Files needing update: X
|
||||
|
||||
### File-by-File Assessment
|
||||
|
||||
#### 1. ./CLAUDE.md (Project Root)
|
||||
**Score: XX/100 (Grade: X)**
|
||||
|
||||
| Criterion | Score | Notes |
|
||||
|-----------|-------|-------|
|
||||
| Commands/workflows | X/20 | ... |
|
||||
| Architecture clarity | X/20 | ... |
|
||||
| Non-obvious patterns | X/15 | ... |
|
||||
| Conciseness | X/15 | ... |
|
||||
| Currency | X/15 | ... |
|
||||
| Actionability | X/15 | ... |
|
||||
|
||||
**Issues:**
|
||||
- [List specific problems]
|
||||
|
||||
**Recommended additions:**
|
||||
- [List what should be added]
|
||||
|
||||
#### 2. ./packages/api/CLAUDE.md (Package-specific)
|
||||
...
|
||||
```
|
||||
|
||||
### Phase 4: Targeted Updates
|
||||
|
||||
After outputting the quality report, ask user for confirmation before updating.
|
||||
|
||||
**Update Guidelines (Critical):**
|
||||
|
||||
1. **Propose targeted additions only** - Focus on genuinely useful info:
|
||||
- Commands or workflows discovered during analysis
|
||||
- Gotchas or non-obvious patterns found in code
|
||||
- Package relationships that weren't clear
|
||||
- Testing approaches that work
|
||||
- Configuration quirks
|
||||
|
||||
2. **Keep it minimal** - Avoid:
|
||||
- Restating what's obvious from the code
|
||||
- Generic best practices already covered
|
||||
- One-off fixes unlikely to recur
|
||||
- Verbose explanations when a one-liner suffices
|
||||
|
||||
3. **Show diffs** - For each change, show:
|
||||
- Which CLAUDE.md file to update
|
||||
- The specific addition (as a diff or quoted block)
|
||||
- Brief explanation of why this helps future sessions
|
||||
|
||||
**Diff Format:**
|
||||
|
||||
```markdown
|
||||
### Update: ./CLAUDE.md
|
||||
|
||||
**Why:** Build command was missing, causing confusion about how to run the project.
|
||||
|
||||
```diff
|
||||
+ ## Quick Start
|
||||
+
|
||||
+ ```bash
|
||||
+ npm install
|
||||
+ npm run dev # Start development server on port 3000
|
||||
+ ```
|
||||
```
|
||||
```
|
||||
|
||||
### Phase 5: Apply Updates
|
||||
|
||||
After user approval, apply changes using the Edit tool. Preserve existing content structure.
|
||||
|
||||
## Templates
|
||||
|
||||
See [references/templates.md](references/templates.md) for CLAUDE.md templates by project type.
|
||||
|
||||
## Common Issues to Flag
|
||||
|
||||
1. **Stale commands**: Build commands that no longer work
|
||||
2. **Missing dependencies**: Required tools not mentioned
|
||||
3. **Outdated architecture**: File structure that's changed
|
||||
4. **Missing environment setup**: Required env vars or config
|
||||
5. **Broken test commands**: Test scripts that have changed
|
||||
6. **Undocumented gotchas**: Non-obvious patterns not captured
|
||||
|
||||
## User Tips to Share
|
||||
|
||||
When presenting recommendations, remind users:
|
||||
|
||||
- **`#` key shortcut**: During a Claude session, press `#` to have Claude auto-incorporate learnings into CLAUDE.md
|
||||
- **Keep it concise**: CLAUDE.md should be human-readable; dense is better than verbose
|
||||
- **Actionable commands**: All documented commands should be copy-paste ready
|
||||
- **Use `.claude.local.md`**: For personal preferences not shared with team (add to `.gitignore`)
|
||||
- **Global defaults**: Put user-wide preferences in `~/.claude/CLAUDE.md`
|
||||
|
||||
## What Makes a Great CLAUDE.md
|
||||
|
||||
**Key principles:**
|
||||
- Concise and human-readable
|
||||
- Actionable commands that can be copy-pasted
|
||||
- Project-specific patterns, not generic advice
|
||||
- Non-obvious gotchas and warnings
|
||||
|
||||
**Recommended sections** (use only what's relevant):
|
||||
- Commands (build, test, dev, lint)
|
||||
- Architecture (directory structure)
|
||||
- Key Files (entry points, config)
|
||||
- Code Style (project conventions)
|
||||
- Environment (required vars, setup)
|
||||
- Testing (commands, patterns)
|
||||
- Gotchas (quirks, common mistakes)
|
||||
- Workflow (when to do what)
|
||||
@@ -0,0 +1,109 @@
|
||||
# CLAUDE.md Quality Criteria
|
||||
|
||||
## Scoring Rubric
|
||||
|
||||
### 1. Commands/Workflows (20 points)
|
||||
|
||||
**20 points**: All essential commands documented with context
|
||||
- Build, test, lint, deploy commands present
|
||||
- Development workflow clear
|
||||
- Common operations documented
|
||||
|
||||
**15 points**: Most commands present, some missing context
|
||||
|
||||
**10 points**: Basic commands only, no workflow
|
||||
|
||||
**5 points**: Few commands, many missing
|
||||
|
||||
**0 points**: No commands documented
|
||||
|
||||
### 2. Architecture Clarity (20 points)
|
||||
|
||||
**20 points**: Clear codebase map
|
||||
- Key directories explained
|
||||
- Module relationships documented
|
||||
- Entry points identified
|
||||
- Data flow described where relevant
|
||||
|
||||
**15 points**: Good structure overview, minor gaps
|
||||
|
||||
**10 points**: Basic directory listing only
|
||||
|
||||
**5 points**: Vague or incomplete
|
||||
|
||||
**0 points**: No architecture info
|
||||
|
||||
### 3. Non-Obvious Patterns (15 points)
|
||||
|
||||
**15 points**: Gotchas and quirks captured
|
||||
- Known issues documented
|
||||
- Workarounds explained
|
||||
- Edge cases noted
|
||||
- "Why we do it this way" for unusual patterns
|
||||
|
||||
**10 points**: Some patterns documented
|
||||
|
||||
**5 points**: Minimal pattern documentation
|
||||
|
||||
**0 points**: No patterns or gotchas
|
||||
|
||||
### 4. Conciseness (15 points)
|
||||
|
||||
**15 points**: Dense, valuable content
|
||||
- No filler or obvious info
|
||||
- Each line adds value
|
||||
- No redundancy with code comments
|
||||
|
||||
**10 points**: Mostly concise, some padding
|
||||
|
||||
**5 points**: Verbose in places
|
||||
|
||||
**0 points**: Mostly filler or restates obvious code
|
||||
|
||||
### 5. Currency (15 points)
|
||||
|
||||
**15 points**: Reflects current codebase
|
||||
- Commands work as documented
|
||||
- File references accurate
|
||||
- Tech stack current
|
||||
|
||||
**10 points**: Mostly current, minor staleness
|
||||
|
||||
**5 points**: Several outdated references
|
||||
|
||||
**0 points**: Severely outdated
|
||||
|
||||
### 6. Actionability (15 points)
|
||||
|
||||
**15 points**: Instructions are executable
|
||||
- Commands can be copy-pasted
|
||||
- Steps are concrete
|
||||
- Paths are real
|
||||
|
||||
**10 points**: Mostly actionable
|
||||
|
||||
**5 points**: Some vague instructions
|
||||
|
||||
**0 points**: Vague or theoretical
|
||||
|
||||
## Assessment Process
|
||||
|
||||
1. Read the CLAUDE.md file completely
|
||||
2. Cross-reference with actual codebase:
|
||||
- Run documented commands (mentally or actually)
|
||||
- Check if referenced files exist
|
||||
- Verify architecture descriptions
|
||||
3. Score each criterion
|
||||
4. Calculate total and assign grade
|
||||
5. List specific issues found
|
||||
6. Propose concrete improvements
|
||||
|
||||
## Red Flags
|
||||
|
||||
- Commands that would fail (wrong paths, missing deps)
|
||||
- References to deleted files/folders
|
||||
- Outdated tech versions
|
||||
- Copy-paste from templates without customization
|
||||
- Generic advice not specific to the project
|
||||
- "TODO" items never completed
|
||||
- Duplicate info across multiple CLAUDE.md files
|
||||
@@ -0,0 +1,253 @@
|
||||
# CLAUDE.md Templates
|
||||
|
||||
## Key Principles
|
||||
|
||||
- **Concise**: Dense, human-readable content; one line per concept when possible
|
||||
- **Actionable**: Commands should be copy-paste ready
|
||||
- **Project-specific**: Document patterns unique to this project, not generic advice
|
||||
- **Current**: All info should reflect actual codebase state
|
||||
|
||||
---
|
||||
|
||||
## Recommended Sections
|
||||
|
||||
Use only the sections relevant to the project. Not all sections are needed.
|
||||
|
||||
### Commands
|
||||
|
||||
Document the essential commands for working with the project.
|
||||
|
||||
```markdown
|
||||
## Commands
|
||||
|
||||
| Command | Description |
|
||||
|---------|-------------|
|
||||
| `<install command>` | Install dependencies |
|
||||
| `<dev command>` | Start development server |
|
||||
| `<build command>` | Production build |
|
||||
| `<test command>` | Run tests |
|
||||
| `<lint command>` | Lint/format code |
|
||||
```
|
||||
|
||||
### Architecture
|
||||
|
||||
Describe the project structure so Claude understands where things live.
|
||||
|
||||
```markdown
|
||||
## Architecture
|
||||
|
||||
```
|
||||
<root>/
|
||||
<dir>/ # <purpose>
|
||||
<dir>/ # <purpose>
|
||||
<dir>/ # <purpose>
|
||||
```
|
||||
```
|
||||
|
||||
### Key Files
|
||||
|
||||
List important files that Claude should know about.
|
||||
|
||||
```markdown
|
||||
## Key Files
|
||||
|
||||
- `<path>` - <purpose>
|
||||
- `<path>` - <purpose>
|
||||
```
|
||||
|
||||
### Code Style
|
||||
|
||||
Document project-specific coding conventions.
|
||||
|
||||
```markdown
|
||||
## Code Style
|
||||
|
||||
- <convention>
|
||||
- <convention>
|
||||
- <preference over alternative>
|
||||
```
|
||||
|
||||
### Environment
|
||||
|
||||
Document required environment variables and setup.
|
||||
|
||||
```markdown
|
||||
## Environment
|
||||
|
||||
Required:
|
||||
- `<VAR_NAME>` - <purpose>
|
||||
- `<VAR_NAME>` - <purpose>
|
||||
|
||||
Setup:
|
||||
- <setup step>
|
||||
```
|
||||
|
||||
### Testing
|
||||
|
||||
Document testing approach and commands.
|
||||
|
||||
```markdown
|
||||
## Testing
|
||||
|
||||
- `<test command>` - <what it tests>
|
||||
- <testing convention or pattern>
|
||||
```
|
||||
|
||||
### Gotchas
|
||||
|
||||
Document non-obvious patterns, quirks, and warnings.
|
||||
|
||||
```markdown
|
||||
## Gotchas
|
||||
|
||||
- <non-obvious thing that causes issues>
|
||||
- <ordering dependency or prerequisite>
|
||||
- <common mistake to avoid>
|
||||
```
|
||||
|
||||
### Workflow
|
||||
|
||||
Document development workflow patterns.
|
||||
|
||||
```markdown
|
||||
## Workflow
|
||||
|
||||
- <when to do X>
|
||||
- <preferred approach for Y>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Template: Project Root (Minimal)
|
||||
|
||||
```markdown
|
||||
# <Project Name>
|
||||
|
||||
<One-line description>
|
||||
|
||||
## Commands
|
||||
|
||||
| Command | Description |
|
||||
|---------|-------------|
|
||||
| `<command>` | <description> |
|
||||
|
||||
## Architecture
|
||||
|
||||
```
|
||||
<structure>
|
||||
```
|
||||
|
||||
## Gotchas
|
||||
|
||||
- <gotcha>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Template: Project Root (Comprehensive)
|
||||
|
||||
```markdown
|
||||
# <Project Name>
|
||||
|
||||
<One-line description>
|
||||
|
||||
## Commands
|
||||
|
||||
| Command | Description |
|
||||
|---------|-------------|
|
||||
| `<command>` | <description> |
|
||||
|
||||
## Architecture
|
||||
|
||||
```
|
||||
<structure with descriptions>
|
||||
```
|
||||
|
||||
## Key Files
|
||||
|
||||
- `<path>` - <purpose>
|
||||
|
||||
## Code Style
|
||||
|
||||
- <convention>
|
||||
|
||||
## Environment
|
||||
|
||||
- `<VAR>` - <purpose>
|
||||
|
||||
## Testing
|
||||
|
||||
- `<command>` - <scope>
|
||||
|
||||
## Gotchas
|
||||
|
||||
- <gotcha>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Template: Package/Module
|
||||
|
||||
For packages within a monorepo or distinct modules.
|
||||
|
||||
```markdown
|
||||
# <Package Name>
|
||||
|
||||
<Purpose of this package>
|
||||
|
||||
## Usage
|
||||
|
||||
```
|
||||
<import/usage example>
|
||||
```
|
||||
|
||||
## Key Exports
|
||||
|
||||
- `<export>` - <purpose>
|
||||
|
||||
## Dependencies
|
||||
|
||||
- `<dependency>` - <why needed>
|
||||
|
||||
## Notes
|
||||
|
||||
- <important note>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Template: Monorepo Root
|
||||
|
||||
```markdown
|
||||
# <Monorepo Name>
|
||||
|
||||
<Description>
|
||||
|
||||
## Packages
|
||||
|
||||
| Package | Description | Path |
|
||||
|---------|-------------|------|
|
||||
| `<name>` | <purpose> | `<path>` |
|
||||
|
||||
## Commands
|
||||
|
||||
| Command | Description |
|
||||
|---------|-------------|
|
||||
| `<command>` | <description> |
|
||||
|
||||
## Cross-Package Patterns
|
||||
|
||||
- <shared pattern>
|
||||
- <generation/sync pattern>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Update Principles
|
||||
|
||||
When updating any CLAUDE.md:
|
||||
|
||||
1. **Be specific**: Use actual file paths, real commands from this project
|
||||
2. **Be current**: Verify info against the actual codebase
|
||||
3. **Be brief**: One line per concept when possible
|
||||
4. **Be useful**: Would this help a new Claude session understand the project?
|
||||
@@ -0,0 +1,150 @@
|
||||
# CLAUDE.md Update Guidelines
|
||||
|
||||
## Core Principle
|
||||
|
||||
Only add information that will genuinely help future Claude sessions. The context window is precious - every line must earn its place.
|
||||
|
||||
## What TO Add
|
||||
|
||||
### 1. Commands/Workflows Discovered
|
||||
|
||||
```markdown
|
||||
## Build
|
||||
|
||||
`npm run build:prod` - Full production build with optimization
|
||||
`npm run build:dev` - Fast dev build (no minification)
|
||||
```
|
||||
|
||||
Why: Saves future sessions from discovering these again.
|
||||
|
||||
### 2. Gotchas and Non-Obvious Patterns
|
||||
|
||||
```markdown
|
||||
## Gotchas
|
||||
|
||||
- Tests must run sequentially (`--runInBand`) due to shared DB state
|
||||
- `yarn.lock` is authoritative; delete `node_modules` if deps mismatch
|
||||
```
|
||||
|
||||
Why: Prevents repeating debugging sessions.
|
||||
|
||||
### 3. Package Relationships
|
||||
|
||||
```markdown
|
||||
## Dependencies
|
||||
|
||||
The `auth` module depends on `crypto` being initialized first.
|
||||
Import order matters in `src/bootstrap.ts`.
|
||||
```
|
||||
|
||||
Why: Architecture knowledge that isn't obvious from code.
|
||||
|
||||
### 4. Testing Approaches That Worked
|
||||
|
||||
```markdown
|
||||
## Testing
|
||||
|
||||
For API endpoints: Use `supertest` with the test helper in `tests/setup.ts`
|
||||
Mocking: Factory functions in `tests/factories/` (not inline mocks)
|
||||
```
|
||||
|
||||
Why: Establishes patterns that work.
|
||||
|
||||
### 5. Configuration Quirks
|
||||
|
||||
```markdown
|
||||
## Config
|
||||
|
||||
- `NEXT_PUBLIC_*` vars must be set at build time, not runtime
|
||||
- Redis connection requires `?family=0` suffix for IPv6
|
||||
```
|
||||
|
||||
Why: Environment-specific knowledge.
|
||||
|
||||
## What NOT to Add
|
||||
|
||||
### 1. Obvious Code Info
|
||||
|
||||
Bad:
|
||||
```markdown
|
||||
The `UserService` class handles user operations.
|
||||
```
|
||||
|
||||
The class name already tells us this.
|
||||
|
||||
### 2. Generic Best Practices
|
||||
|
||||
Bad:
|
||||
```markdown
|
||||
Always write tests for new features.
|
||||
Use meaningful variable names.
|
||||
```
|
||||
|
||||
This is universal advice, not project-specific.
|
||||
|
||||
### 3. One-Off Fixes
|
||||
|
||||
Bad:
|
||||
```markdown
|
||||
We fixed a bug in commit abc123 where the login button didn't work.
|
||||
```
|
||||
|
||||
Won't recur; clutters the file.
|
||||
|
||||
### 4. Verbose Explanations
|
||||
|
||||
Bad:
|
||||
```markdown
|
||||
The authentication system uses JWT tokens. JWT (JSON Web Tokens) are
|
||||
an open standard (RFC 7519) that defines a compact and self-contained
|
||||
way for securely transmitting information between parties as a JSON
|
||||
object. In our implementation, we use the HS256 algorithm which...
|
||||
```
|
||||
|
||||
Good:
|
||||
```markdown
|
||||
Auth: JWT with HS256, tokens in `Authorization: Bearer <token>` header.
|
||||
```
|
||||
|
||||
## Diff Format for Updates
|
||||
|
||||
For each suggested change:
|
||||
|
||||
### 1. Identify the File
|
||||
|
||||
```
|
||||
File: ./CLAUDE.md
|
||||
Section: Commands (new section after ## Architecture)
|
||||
```
|
||||
|
||||
### 2. Show the Change
|
||||
|
||||
```diff
|
||||
## Architecture
|
||||
...
|
||||
|
||||
+## Commands
|
||||
+
|
||||
+| Command | Purpose |
|
||||
+|---------|---------|
|
||||
+| `npm run dev` | Dev server with HMR |
|
||||
+| `npm run build` | Production build |
|
||||
+| `npm test` | Run test suite |
|
||||
```
|
||||
|
||||
### 3. Explain Why
|
||||
|
||||
> **Why this helps:** The build commands weren't documented, causing
|
||||
> confusion about how to run the project. This saves future sessions
|
||||
> from needing to inspect `package.json`.
|
||||
|
||||
## Validation Checklist
|
||||
|
||||
Before finalizing an update, verify:
|
||||
|
||||
- [ ] Each addition is project-specific
|
||||
- [ ] No generic advice or obvious info
|
||||
- [ ] Commands are tested and work
|
||||
- [ ] File paths are accurate
|
||||
- [ ] Would a new Claude session find this helpful?
|
||||
- [ ] Is this the most concise way to express the info?
|
||||
9
plugins/code-simplifier/.claude-plugin/plugin.json
Normal file
9
plugins/code-simplifier/.claude-plugin/plugin.json
Normal file
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"name": "code-simplifier",
|
||||
"version": "1.0.0",
|
||||
"description": "Agent that simplifies and refines code for clarity, consistency, and maintainability while preserving functionality",
|
||||
"author": {
|
||||
"name": "Anthropic",
|
||||
"email": "support@anthropic.com"
|
||||
}
|
||||
}
|
||||
52
plugins/code-simplifier/agents/code-simplifier.md
Normal file
52
plugins/code-simplifier/agents/code-simplifier.md
Normal file
@@ -0,0 +1,52 @@
|
||||
---
|
||||
name: code-simplifier
|
||||
description: Simplifies and refines code for clarity, consistency, and maintainability while preserving all functionality. Focuses on recently modified code unless instructed otherwise.
|
||||
model: opus
|
||||
---
|
||||
|
||||
You are an expert code simplification specialist focused on enhancing code clarity, consistency, and maintainability while preserving exact functionality. Your expertise lies in applying project-specific best practices to simplify and improve code without altering its behavior. You prioritize readable, explicit code over overly compact solutions. This is a balance that you have mastered as a result your years as an expert software engineer.
|
||||
|
||||
You will analyze recently modified code and apply refinements that:
|
||||
|
||||
1. **Preserve Functionality**: Never change what the code does - only how it does it. All original features, outputs, and behaviors must remain intact.
|
||||
|
||||
2. **Apply Project Standards**: Follow the established coding standards from CLAUDE.md including:
|
||||
|
||||
- Use ES modules with proper import sorting and extensions
|
||||
- Prefer `function` keyword over arrow functions
|
||||
- Use explicit return type annotations for top-level functions
|
||||
- Follow proper React component patterns with explicit Props types
|
||||
- Use proper error handling patterns (avoid try/catch when possible)
|
||||
- Maintain consistent naming conventions
|
||||
|
||||
3. **Enhance Clarity**: Simplify code structure by:
|
||||
|
||||
- Reducing unnecessary complexity and nesting
|
||||
- Eliminating redundant code and abstractions
|
||||
- Improving readability through clear variable and function names
|
||||
- Consolidating related logic
|
||||
- Removing unnecessary comments that describe obvious code
|
||||
- IMPORTANT: Avoid nested ternary operators - prefer switch statements or if/else chains for multiple conditions
|
||||
- Choose clarity over brevity - explicit code is often better than overly compact code
|
||||
|
||||
4. **Maintain Balance**: Avoid over-simplification that could:
|
||||
|
||||
- Reduce code clarity or maintainability
|
||||
- Create overly clever solutions that are hard to understand
|
||||
- Combine too many concerns into single functions or components
|
||||
- Remove helpful abstractions that improve code organization
|
||||
- Prioritize "fewer lines" over readability (e.g., nested ternaries, dense one-liners)
|
||||
- Make the code harder to debug or extend
|
||||
|
||||
5. **Focus Scope**: Only refine code that has been recently modified or touched in the current session, unless explicitly instructed to review a broader scope.
|
||||
|
||||
Your refinement process:
|
||||
|
||||
1. Identify the recently modified code sections
|
||||
2. Analyze for opportunities to improve elegance and consistency
|
||||
3. Apply project-specific best practices and coding standards
|
||||
4. Ensure all functionality remains unchanged
|
||||
5. Verify the refined code is simpler and more maintainable
|
||||
6. Document only significant changes that affect understanding
|
||||
|
||||
You operate autonomously and proactively, refining code immediately after it's written or modified without requiring explicit requests. Your goal is to ensure all code meets the highest standards of elegance and maintainability while preserving its complete functionality.
|
||||
16
plugins/kotlin-lsp/README.md
Normal file
16
plugins/kotlin-lsp/README.md
Normal file
@@ -0,0 +1,16 @@
|
||||
Kotlin language server for Claude Code, providing code intelligence, refactoring, and analysis.
|
||||
|
||||
## Supported Extensions
|
||||
`.kt`
|
||||
`.kts`
|
||||
|
||||
## Installation
|
||||
|
||||
Install the Kotlin LSP CLI.
|
||||
|
||||
```bash
|
||||
brew install JetBrains/utils/kotlin-lsp
|
||||
```
|
||||
|
||||
## More Information
|
||||
- [kotlin LSP](https://github.com/Kotlin/kotlin-lsp)
|
||||
Reference in New Issue
Block a user