Claude Code Templates
A free, searchable catalog of Claude Code agents, commands, MCP servers, hooks, settings, and skills — each with a one-line install command.
Claude Code Agents
Specialized AI subagents with their own prompt, tools, and context.
Browse agents →Claude Code Commands
Reusable slash commands that automate repeatable prompts.
Browse commands →Claude Code MCP Servers
Model Context Protocol servers that connect Claude Code to external tools.
Browse mcp servers →Claude Code Skills
Packaged, model-invoked instruction bundles that add reusable capabilities.
Browse skills →Claude Code Settings
Drop-in settings.json configurations for permissions, environment, and more.
Browse settings →Claude Code Hooks
Shell commands that fire on Claude Code lifecycle events for automation.
Browse hooks →Most Popular Components
Frontend Design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
Frontend Developer
"Use when building complete frontend applications across React, Vue, and Angular frameworks requiring multi-framework expertise and full-stack integration. Specifically:\n\n<example>\nContext: Starting a new React frontend for an e-commerce platform with complex state management and real-time updates\nuser: \"Build a React frontend for product catalog with filtering, cart management, and checkout flow. Need TypeScript, responsive design, and 85% test coverage.\"\nassistant: \"I'll create a scalable React frontend with component architecture, server state via TanStack Query, client state via Zustand, responsive Tailwind v4 CSS styling, WCAG 2.2 accessibility compliance, and comprehensive testing with Vitest + Testing Library. First, let me query the context-manager for your existing infrastructure, design language, and API contracts.\"\n<commentary>\nUse frontend-developer when you need full frontend application development with multiple pages, complex state, user interactions, and integration with backend APIs. This agent handles the complete frontend lifecycle from architecture to deployment.\n</commentary>\n</example>\n\n<example>\nContext: Migrating legacy jQuery frontend to modern Vue 3 with existing PHP backend\nuser: \"We need to modernize our PHP web app's frontend from jQuery to Vue 3.5. The backend is stable. Need to maintain existing functionality while improving UX and code maintainability.\"\nassistant: \"I'll architect a Vue 3.5 migration strategy preserving backend contracts, gradually replace jQuery components with Vue Single File Components using the Composition API and reactive props destructure, implement TypeScript for type safety, add Pinia for state management, ensure 90% test coverage with Vitest, and maintain zero-downtime during rollout.\"\n<commentary>\nUse frontend-developer when modernizing existing frontend codebases across different frameworks. This agent excels at strategic migrations, maintaining backward compatibility, and integrating with established backend systems.\n</commentary>\n</example>\n\n<example>\nContext: Building shared component library for multi-team organization using different frameworks\nuser: \"Create a component library that works across our React, Vue, and Angular projects. Need consistent design tokens, accessibility, documentation, and framework-agnostic design patterns.\"\nassistant: \"I'll design a framework-agnostic component architecture with TypeScript interfaces, implement components in multiple frameworks maintaining API consistency, establish design token system with CSS custom properties, write Storybook documentation, create migration guides for teams, and ensure WCAG 2.2 compliance across all implementations — including Focus Appearance and Target Size Minimum criteria.\"\n<commentary>\nUse frontend-developer for multi-framework solutions, design system work, and component library architecture. This agent bridges different frontend ecosystems while maintaining consistency and quality standards.\n</commentary>\n</example>"
Code Reviewer
Comprehensive code review skill for TypeScript, JavaScript, Python, Swift, Kotlin, Go. Includes automated code analysis, best practice checking, security scanning, and review checklist generation. Use when reviewing pull requests, providing code feedback, identifying issues, or ensuring code quality standards.
Code Reviewer
"Use this agent when you need to conduct comprehensive code reviews focusing on code quality, security vulnerabilities, and best practices. Specifically:\\n\\n<example>\\nContext: Developer has submitted a pull request with changes to critical authentication logic in a TypeScript backend service.\\nuser: \"Can you review this PR that refactors our authentication system? We need to catch any security issues, performance problems, or maintainability concerns.\"\\nassistant: \"I'll conduct a thorough code review examining the authentication logic for security vulnerabilities, checking error handling, validating the refactored patterns against SOLID principles, and assessing whether the changes maintain or improve code quality metrics. I'll provide specific feedback on each concern.\"\\n<commentary>\\nInvoke code-reviewer when code has been changed and you need detailed analysis of code quality, security, performance, and maintainability. This is distinct from security-auditor (which focuses narrowly on security) and architect-reviewer (which focuses on system design).\\n</commentary>\\n</example>\\n\\n<example>\\nContext: Team has merged several features and wants a quality assessment before production deployment.\\nuser: \"We need a code review of the changes in our payment processing module before we deploy to production. Check for any issues we might have missed.\"\\nassistant: \"I'll review the payment processing module systematically: analyzing input validation and error handling, checking for injection vulnerabilities, reviewing error recovery patterns, verifying test coverage, assessing maintainability of the code, and identifying any technical debt or performance concerns. I'll prioritize critical issues and provide constructive feedback.\"\\n<commentary>\\nUse code-reviewer for pre-deployment reviews when you need comprehensive quality gates across multiple dimensions (security, performance, maintainability, correctness).\\n</commentary>\\n</example>\\n\\n<example>\\nContext: New junior developer's code is being integrated and team wants learning-focused feedback.\\nuser: \"Can you review this TypeScript module my new team member wrote? I want to make sure the code quality is good and they're following our patterns.\"\\nassistant: \"I'll review the code for correctness, design patterns, naming conventions, and compliance with your team's standards. I'll also check for common mistakes, suggest improvements where they could learn from, and acknowledge what was done well to provide constructive, educational feedback.\"\\n<commentary>\\nInvoke code-reviewer when you want detailed feedback that helps developers grow, ensures standards compliance, and catches issues beyond what automated tools can detect. The feedback is actionable and specific.\\n</commentary>\\n</example>"
Senior Frontend
Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and UI best practices. Use when developing frontend features, optimizing performance, implementing UI/UX designs, managing state, or reviewing frontend code.
Ui Ux Designer
Use proactively when reviewing UI/UX design, evaluating visual interfaces, auditing web components for usability issues, checking accessibility compliance, or critiquing design aesthetics. Invoke when the user shares screenshots, mockup files, CSS, HTML, design tokens, or asks for feedback on visual design decisions, font choices, color palettes, layout structure, or user experience. Also use when asked to evaluate AI chat interfaces, copilot UIs, or prompt-driven interface patterns.
Backend Architect
"Backend system architecture and API design specialist. Use PROACTIVELY for greenfield service design, monolith decomposition, API paradigm selection (REST/gRPC/GraphQL), microservice boundaries, database schemas, scalability planning, event-driven architecture, and observability design. This agent focuses on architecture and design decisions — for writing implementation code use the backend-developer agent instead.\n\n<example>\nContext: An existing Rails monolith is growing too large and needs to be split into independent services.\nuser: \"We need to split our Rails monolith into services — where do we start?\"\nassistant: \"I'll analyze the monolith's bounded contexts, data dependencies, and traffic patterns to produce a phased decomposition roadmap with service boundary definitions, API contracts between services, and a strangler-fig migration strategy.\"\n<commentary>\nMonolith decomposition is a core architecture concern: service boundaries, migration sequencing, and managing the transition period without downtime. Use backend-architect for design decisions; use backend-developer to implement the resulting services.\n</commentary>\n</example>\n\n<example>\nContext: A startup is building a new real-time ride-sharing platform from scratch and needs an initial backend architecture.\nuser: \"Design the backend architecture for a real-time ride-sharing platform expected to handle 50k concurrent users at launch.\"\nassistant: \"I'll design a service architecture covering trip lifecycle management, driver matching, real-time location tracking, and payment processing — including API contracts, event-driven communication via Kafka, PostgreSQL + PostGIS schema, caching strategy with Redis, an OpenAPI 3.1 spec for the public API, and an observability plan with OpenTelemetry and SLO thresholds.\"\n<commentary>\nGreenfield service architecture requires upfront decisions on API paradigms, data consistency, scaling approach, and observability before any code is written. This is backend-architect territory.\n</commentary>\n</example>"
Ui Ux Pro Max
"UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples."
Senior Backend
Comprehensive backend development skill for building scalable backend systems using NodeJS, Express, Go, Python, Postgres, GraphQL, REST APIs. Includes API scaffolding, database optimization, security implementation, and performance tuning. Use when designing APIs, optimizing database queries, implementing business logic, handling authentication/authorization, or reviewing backend code.
The ToolZip Claude Code catalog is a free, searchable directory of ready-made components for Claude Code, Anthropic's agentic command-line coding tool. Instead of building every subagent, workflow, or integration from scratch, you can browse working examples, read a plain-English explanation of what each one does, and copy a single command to install it into your own project.
Claude Code is configured through small, composable files that live in your repository's .claude directory. Each type of component extends the tool in a different way: a subagent handles a focused task, a slash command packages a repeatable prompt, an MCP server connects Claude to an external system, and so on. This catalog groups every component by type so you can go straight to the piece you need.
The six component types
- Agents — subagents in
.claude/agentsthat Claude can delegate focused work to, such as code review, debugging, or database design. Browse 421 agents. - Commands — reusable slash commands stored in
.claude/commandsthat turn a repeatable prompt into a single keystroke. 286 to choose from. - MCP servers — connectors that use the Model Context Protocol to give Claude access to databases, APIs, and other external tools. 93 integrations and counting.
- Skills — packaged instructions and resources that teach Claude a repeatable procedure and load only when they are relevant. 865 skills available.
- Hooks — shell commands that run automatically on lifecycle events, like formatting code after every edit or running a check before a commit. 62 hooks.
- Settings — configuration snippets that tune Claude Code's behavior, permissions, and defaults. 69 settings.
Good starting points include a code-reviewer agent, a PostgreSQL MCP server, a test-generation command, and a Prettier formatting hook. In total the catalog curates over 1,790 components across all six types.
Installing a component
Every component page shows an install command you can paste straight into your terminal. It follows the open-source claude-code-templates CLI — for example, npx claude-code-templates@latest --agent="category/name" --yes for an agent, with matching --command, --mcp, --skill, --hook, and --setting flags for the other types. Nothing is installed until you run it, and everything lands in your project's .claude folder where you can read and edit it.
The catalog is curated from the open-source davila7/claude-code-templates project (MIT licensed), with original descriptions written by ToolZip and attribution to the upstream authors. These are community templates, not official Anthropic products. Like the rest of ToolZip, the catalog runs in your browser with no account and no tracking.
Frequently Asked Questions
What is a Claude Code component?
What's the difference between an agent, a command, and a skill?
How do I install a component from this catalog?
What is an MCP server in Claude Code?
Does ToolZip store my code or require an account?
Where do these components come from, and are they official?
Catalog data and component content are sourced from the open-source davila7/claude-code-templates project (MIT license). ToolZip curates the listing and writes original descriptions; every component links back to its original source. Claude Code is a product of Anthropic. ToolZip is an independent catalog and is not affiliated with or endorsed by Anthropic.