Create event hooks for Claude Code that trigger on specific events. Generate hooks with proper JSON configuration for automating workflows. Use when: creating hooks, setting up event triggers, automating on file saves or tool calls. Activates for: "create hook", "generate hook", "new hook", "event hook", "make hook"
Creates event-driven hooks that automatically run shell commands when specific Claude Code events occur. Use when you need to automate workflows like formatting on save, running tests after edits, or validating code before commits.
/plugin marketplace add jbabin91/super-claude/plugin install meta@super-claudeThis skill inherits all available tools. When active, it can use any tool Claude has access to.
Generate event-driven hooks for Claude Code with proper configuration.
Hooks allow you to run shell commands or scripts in response to Claude Code events:
Event Types:
user-prompt-submit - Before Claude processes user inputtool-call - Before/after tool executionsession-start - When Claude Code session beginssession-end - When session endsAsk the user:
Location:
~/.claude/skills/super-claude/plugins/[plugin]/hooks/hooks.json/path/to/project/.claude/hooks/hooks.jsonFormat:
{
"hooks": [
{
"name": "hook-name",
"event": "event-type",
"when": "before|after",
"command": "shell command to execute",
"filter": {
"tool": "specific-tool-name",
"filePattern": "*.ts"
},
"description": "What this hook does"
}
]
}
Ensure:
{
"hooks": [
{
"name": "format-on-save",
"event": "tool-call",
"when": "after",
"command": "prettier --write $FILE",
"filter": {
"tool": "Write",
"filePattern": "*.{ts,tsx,js,jsx,md,json}"
},
"description": "Automatically format files after writing"
}
]
}
{
"hooks": [
{
"name": "type-check-pre-commit",
"event": "user-prompt-submit",
"when": "before",
"command": "npm run type-check",
"filter": {
"promptPattern": "commit|create.*commit"
},
"description": "Run type check before git commits"
}
]
}
{
"hooks": [
{
"name": "test-after-edit",
"event": "tool-call",
"when": "after",
"command": "npm test -- --related $FILE --run",
"filter": {
"tool": "Edit",
"filePattern": "*.{ts,tsx}"
},
"description": "Run related tests after editing source files"
}
]
}
{
"hooks": [
{
"name": "validate-openapi-schema",
"event": "tool-call",
"when": "after",
"command": "npm run validate:openapi",
"filter": {
"tool": "Write",
"filePattern": "**/api/**/*.ts"
},
"description": "Validate OpenAPI schema after API changes"
}
]
}
{
"hooks": [
{
"name": "a11y-check-components",
"event": "tool-call",
"when": "after",
"command": "npm run a11y:check $FILE",
"filter": {
"tool": "Write",
"filePattern": "**/components/**/*.tsx"
},
"description": "Run accessibility checks on component changes"
}
]
}
{
"hooks": [
{
"name": "session-start-checks",
"event": "session-start",
"when": "after",
"command": "./scripts/check-dependencies.sh",
"description": "Check dependencies and environment on session start"
}
]
}
user-prompt-submit
when: "before" to validate/modify inputwhen: "after" to log/process completed requeststool-call
filter.tool to specify which tool$FILE variablesession-start
session-end
{
"filter": {
"tool": "Write", // Specific tool name
"filePattern": "*.ts", // Glob pattern for files
"promptPattern": "commit|deploy", // Regex for prompt content
"fileType": "typescript" // File type detection
}
}
Available in commands:
$FILE - File path being operated on$TOOL - Tool name being used$PROJECT - Project root directory$PWD - Current working directory⚠️ Important: Hooks execute shell commands
Solution:
Solution:
Solution:
{
"name": "conditional-hook",
"event": "tool-call",
"when": "after",
"command": "if [ -f package.json ]; then npm test; fi",
"description": "Run tests only if package.json exists"
}
{
"name": "format-and-lint",
"event": "tool-call",
"when": "after",
"command": "prettier --write $FILE && eslint --fix $FILE",
"filter": {
"tool": "Write",
"filePattern": "*.ts"
},
"description": "Format and lint TypeScript files"
}
{
"name": "background-validation",
"event": "tool-call",
"when": "after",
"command": "npm run validate &",
"description": "Run validation in background"
}
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.