DEV Community: Daniel (San) Ávila

Installs Claude Code Mods with one command

Daniel (San) Ávila — Wed, 21 Oct 2026 15:03:00 +0000

Mods let you hook into Claude Code while it works: block a command, rewrite a tool call, redact a secret from a result, or draw a live pane above the prompt. Until recently that meant writing the module yourself, packaging it as a plugin and publishing a marketplace. The Mods catalog on aitmpl.com removes those steps: 38 mods, one command each.

What a Mod is

A Mod is a Claude Code plugin whose behavior lives in a function-hooks module. A shell hook reacts to an event after the fact. A function hook wraps the event: your function receives the engine object $, the event e, and a next continuation, and decides what happens.

That gives three positions instead of one:

Observe. Await next(e) and inspect what came back.
Rewrite. Call next({ ...e, input }) with changed data, or change the result on the way out.
Answer. Return { deny: "reason" } and never call next. The tool does not run.

The module runs in a sandbox of its own, with no DOM and no Node. Everything outside it goes through $: $.ui, $.http, $.fs, $.process, $.state, $.store, $.session, $.command, $.tool, $.model and $.clock. That is what makes a mod more than a filter.

It is a plugin, so there are two ways to get one

Mods are distributed as plugins. The standard route is a plugin marketplace (a repo with .claude-plugin/marketplace.json):

/plugin marketplace add <repo>
/plugin install <mod>@<marketplace>
/reload-plugins

With aitmpl.com you skip that. Pick a mod on the site, copy the command, run it in your project:

npx claude-code-templates@latest --mod security/secret-redactor

The CLI downloads the whole plugin directory (.claude-plugin/plugin.json, hooks/, commands, types, tests) and writes it to .claude/skills/secret-redactor/. Claude Code loads it on the next session as secret-redactor@skills-dir.

Two details that trip people up:

Trust. A project’s .claude/skills/ is only read once you have accepted the workspace trust prompt. In a folder you never opened interactively (for example a headless claude -p run) the mod does not load. Install it in ~/.claude/skills/ if you want it everywhere.
Options. Mod options are declared as userConfig in plugin.json and read from your user settings, keyed by the full plugin id:

{ "pluginConfigs": { "npm-to-pnpm-rewriter@skills-dir": { "options": { "manager": "yarn" } } } }

Use the wrong key ("npm-to-pnpm-rewriter") and every option silently stays at its default.

What is in the catalog

Seven categories, 38 mods:

security: secret-redactor, block-destructive-commands, protected-paths-guard, large-edit-confirmation, jev-auto-mode, jev-guardrails, jev-vercel-sandbox
productivity: aitmpl (a component browser inside Claude Code), npm-to-pnpm-rewriter, webfetch-cache, jev-model-router, jev-skill-suggestion
ui: agent-flow, git-sidebar, tool-timing-badge
observability: prompt-cache-control, universal-audit-log
integrations: linear-tickets, vercel-deploys, neon-branch-per-session, websearch-to-exa, pi-agent-for-claude
enterprise: admin-capability-lockdown
games: 15 of them above the prompt, from snake and tetris to doom, pacman and tool-defense, where every enemy is one of Claude's real tool calls

Terminal and Desktop

Mods are not terminal-only. The official guide demos each one in both Claude Code in the terminal and Claude Code Desktop, and surfaces like panes and status lines are drawn through $.ui.resolve(e), which returns the constructors for whichever surface you are on. Same plugin, same install command, both places.

Requirements

Claude Code 2.1.287 or later. Per the official guide, mods are on by default; there is nothing to enable. (Earlier early-access builds needed CLAUDE_CODE_ENABLE_FUNCTION_HOOKS=1.)
The $ API is still young and can change between releases. The catalog's type definitions follow Claude Code 2.1.283 and every mod is typechecked against them in CI.

Debugging a mod that seems silent

Before touching the code, check in this order:

Is the project trusted? (See above.)
Are you looking in the right place? $.ui.log goes to the transcript and to ~/.claude/debug/<session-id>.txt; in claude -p it only reaches the debug file.
Is pluginConfigs keyed by name@skills-dir?
Does claude --debug show hooks module <name>@skills-dir loaded?

A note on model routers: a mod that rewrites model or effort at turn.step changes that request only. The header, the status line and the effort box show your session's setting and will not move.

Try it

npx claude-code-templates@latest --mod games/pacman

Browse the catalog at aitmpl.com, validate any installed mod with claude plugin validate <dir>, and run its tests with claude plugin test <dir>.

Where the Mods live

Every mod has its own page with the install command, the options it accepts and what it hooks.

Secret Redactor
Pacman
The full Mods catalog
aitmpl.com for the rest of the components: agents, commands, skills, hooks, MCPs and settings

You can follow me on my social media:

Twitter (English): https://x.com/dani_avila7
LinkedIn (Spanish): https://www.linkedin.com/in/daniel-avila-arias/
Youtube (Spanish): https://www.youtube.com/@daniiielsan
Instagram (Spanish): https://www.instagram.com/danielsan_avila/

Ultra Config switches your whole Claude Code setup between five profiles mid-session

Daniel (San) Ávila — Mon, 19 Oct 2026 15:00:58 +0000

I keep changing the same handful of things in Claude Code depending on what I am doing. Cheap and quiet when I am grinding through a long refactor. The most capable model and maximum effort when the problem is actually hard. Everything asking first when I am working in someone else’s repo. Those are different values in different places, and I was editing them by hand every time.

Ultra Config is a Mod I built so that it is one press instead.

// Detect dark theme var iframe = document.getElementById('tweet-2111558707033018828-99'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2111558707033018828&theme=dark" }

Five profiles, one press each

Each profile is a list of settings with a reason attached to every one of them. This is what they set:

Token saver: model sonnet, effort low, subagents on haiku, Concise output, no prompt suggestions or recap, auto-compact on, small workflow fan-outs, the ultracode keyword off, and MCP output capped at 10,000 tokens (the default is 25,000).
Fast flow: model sonnet, effort medium, edits auto-accepted, Concise output, prompt suggestions on, turn duration and the progress bar on, medium workflows.
Max quality: the most capable model available to you, effort xhigh, subagents keep whatever model they ask for, default output style, workflows on with large fan-outs and the ultracode keyword, checkpoints and auto-compact on.
Guarded: every edit and command asks first, plan mode never acts on its own, bypassPermissions disabled, Read deny rules for .env, secrets/, ~/.ssh and ~/.aws, checkpoints on, verbose output, ultracode off.
Autopilot: auto permission mode including during plan, effort high, workflows on, recap on, push notifications when Claude decides something or needs you, auto-compact on.

The pane shows how much of a profile is already in force as a fraction, 3/11, and marks it active when all of it is. Open a profile and every line is either a change (old value struck through, new value, and why), something already set, or something skipped.

Token saver is the one I reach for most, and it is worth noticing what it is: the same model split I posted about last week, without installing a separate setting for it.

// Detect dark theme var iframe = document.getElementById('tweet-2108687263043575923-831'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2108687263043575923&theme=dark" }

Install it and open the pane

npx claude-code-templates@latest --mod productivity/ultra-config

It needs Claude Code 2.1.287 or later, which is the version where Mods are on by default, and a trusted project folder.

Then:

/ultra-config opens the pane
/ultra-config <profile> opens it on one profile (saver, flow, quality, guarded, autopilot)
/ultra-config apply <profile> activates one and prints what it changed and what it skipped
/ultra-config undo reverts the last profile you activated, newest first
/ultra-config close closes the pane

Everything in the pane is a press, not a menu. There are no tabs and no arrow-key navigation, which matters because Claude Code already uses the left arrow for its own agents view.

In the fullscreen layout the pane docks next to the transcript, which needs /tui fullscreen and at least 110 columns. On the classic layout it sits above the prompt. In Claude Desktop it draws in the session's side panel.

// Detect dark theme var iframe = document.getElementById('tweet-2111624442413756446-753'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2111624442413756446&theme=dark" }

Where the changes actually land

This is the part worth understanding before you let something rewrite your configuration.

Rows that exist in Claude Code’s own settings menu, like the model, the permission mode, the output style or auto-compact, are set through the same path the menu uses. Claude Code decides which file they go in, exactly as if you had changed them yourself.

Effort is saved per model, the way /effort saves it, under modelSettings in ~/.claude/settings.json. That keying matters: since Claude Code 2.1.251, a top-level effortLevel is ignored by Opus 5.5 and later models, so the Mod never writes one. A model id containing a dot, which is what you get on Bedrock and Vertex, cannot be saved this way, and the effort then applies to that one request only.

Four keys have no menu row, so they are written straight into ~/.claude/settings.json:

{
  "env": {
    "CLAUDE_CODE_SUBAGENT_MODEL": "haiku",
    "MAX_MCP_OUTPUT_TOKENS": "10000"
  },
  "permissions": {
    "disableBypassPermissionsMode": "disable",
    "deny": ["Read(./.env)", "Read(./secrets/**)", "Read(~/.ssh/**)"]
  }
}

Before each of those writes the file is copied to settings.json.ultra-config.bak, and a settings.json that is not valid JSON is never overwritten: those steps are skipped and the pane says why. The last 20 activations are kept in the plugin's store, so undo still works after a restart and puts back the values it changed, leaving alone any deny rule you already had.

What to check before you trust a profile

Guarded does not stop a shell read. The rules it adds are Read() rules, and a Read deny rule blocks Claude's file tools, not a shell command that reads the same file. The Mod's own README says this plainly, which is more than most components do, but it is the thing people get wrong about deny rules.
The subagent model does not reach Explore and Plan. CLAUDE_CODE_SUBAGENT_MODEL on its own does not change the model the built-in Explore and Plan subagents run on. If you want Token saver's haiku to apply to every subagent, you also need CLAUDE_CODE_SUBAGENT_MODEL_FORCE=1, which requires 2.1.257 or later.
Two of those keys only take effect next session. CLAUDE_CODE_SUBAGENT_MODEL and MAX_MCP_OUTPUT_TOKENS are read when Claude Code starts. The menu rows apply right away and the effort applies from your next message, but those two do not.
disableBypassPermissionsMode locks you out too. It is the string "disable", it works from any settings file, and while it is set Claude Code rejects --dangerously-skip-permissions and ignores an agent definition asking for bypassPermissions. Guarded writes it to your user settings, so undo is how you get it back, not a flag.

Where the Mods live

The component page: Ultra Config on aitmpl.com
The model split on its own, without the rest of a profile: Sonnet Opus Advisor Haiku Subagents
The rest of the catalog: aitmpl.com

You can follow me on my social media:

Twitter (English): https://x.com/dani_avila7
LinkedIn (Spanish): https://www.linkedin.com/in/daniel-avila-arias/
Youtube (Spanish): https://www.youtube.com/@daniiielsan
Instagram (Spanish): https://www.instagram.com/danielsan_avila/

Prompt Cache Control puts a live countdown on Claude Code’s 5 minute cache

Daniel (San) Ávila — Fri, 16 Oct 2026 16:59:16 +0000

Claude Code already caches your prompt prefix. What it does not tell you is how much of the last request the cache actually served, or how many seconds you have left before that cache lapses and you pay to write the whole thing again.

That number matters most exactly when you are not looking at it. You read a long file, Claude answers, you go think for six minutes, you come back and type one line, and that one line costs you a full rewrite of a 150k token prefix.

// Detect dark theme var iframe = document.getElementById('tweet-2106455605925822967-193'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2106455605925822967&theme=dark" }

What the band shows

One row above the prompt, redrawn every second:

cache 98% read 80k · wrote 1k · new 300 · 3:41 · 5m · warm: keep going
cache  0% read 0 · wrote 52k · new 300 · 4:58 · 5m · cache missed: model changed
cache 98% read 150k · wrote 1k · new 300 · 0:00 · 5m · expired: the next message rewrites 151k tokens

Three numbers per request, which is how the API reports a prompt: what the cache served, what this request wrote into it, and what went past it uncached. Then a countdown, the lifetime in force, and a verdict.

The verdict is the part that earns its row. “Keep going” means a reply now is a cache read. “Expired” with a large prefix means the next message is a cache write at 1.25x base input, and the Mod says /compact instead, or /clear if you are done with the task anyway.

When it misses, it names why: the model changed, the entry lapsed, or the prefix changed. A prefix change is anything the request is built on top of, so switching model or effort, changing your tool set, or editing CLAUDE.md all land in that bucket.

/cache, and the toasts

// Detect dark theme var iframe = document.getElementById('tweet-2106455608090099799-415'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2106455608090099799&theme=dark" }

/cache opens a pane with the time left as a bar that shrinks, green down to yellow below 40% of the lifetime and red from the warning threshold, a stacked read / wrote / new bar for the last request, and a colour coded table with one row per turn. That table is the part I actually read after a long session, because it shows where the misses were.

The toasts fire once per cache entry: at the warning threshold, which is 60 seconds by default, and then again at 10, 3, 2 and 1 seconds. Only for prompts of 20k tokens or more, so a short session never nags you.

Every request that reads the cache refreshes it at no extra cost. That is Anthropic’s rule, not the Mod’s, and it is why the toast says what it says: any message keeps the 5 minute window alive, and the Mod is only telling you the window is closing.

Installing it

npx claude-code-templates@latest --mod observability/prompt-cache-control

It lands in .claude/skills/prompt-cache-control/ and loads as prompt-cache-control@skills-dir. Then /reload-plugins and you have the band.

Mods need Claude Code v2.1.287 or later and are on by default from that version. If you still export CLAUDE_CODE_ENABLE_FUNCTION_HOOKS=1 from the early access period, drop it, because v2.1.287 and later ignores it. The component page still carries the old 2.1.259 line, and that is on me to fix.

The options worth changing

{
  "pluginConfigs": {
    "prompt-cache-control@skills-dir": {
      "options": { "warnSeconds": 120, "compactAtTokens": 60000, "status": true }
    }
  }
}

ttl: auto, 5m or 1h. Leave it on auto unless you know better than the inference.
warnSeconds: when the band turns yellow and the first toast fires. Default 60.
compactAtTokens: the prefix size from which an expired cache suggests /compact. Default 100000.
band, status, toast: the three surfaces. Band on, status line entry off, toasts on, by default.

One caveat on that 100k default: it is a judgement call, not a figure from Anthropic’s documentation. If your model’s cache writes hurt, lower it.

pluginConfigs is read from user or managed settings only. Project and local entries are ignored, so putting this in a repository's .claude/settings.json does nothing.

How it works out your lifetime

// Detect dark theme var iframe = document.getElementById('tweet-2106474300785996075-391'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2106474300785996075&theme=dark" }

The cache is 5 minutes by default and 1 hour when asked for, and which one you get depends on your account and your environment. The Mod walks the same precedence chain Claude Code does: its own ttl option, then FORCE_PROMPT_CACHING_5M, CLAUDE_CODE_PROMPT_CACHE_TTL, the promptCacheTtl setting, ENABLE_PROMPT_CACHING_1H, and finally the account, which is 1 hour on a subscription inside its plan usage and 5 minutes on usage credits, an API key or a cloud provider.

Then it watches the traffic, which overrules all of that. A cache hit more than 5 minutes after the previous request proves the 1 hour lifetime. A miss between 5 and 60 minutes later, with the same model and a prompt that did not shrink, says the entry lapsed, so 5 minutes. That covers what a Mod cannot read: managed settings, a gateway rewriting the TTL, or a subscription that ran out of plan usage mid session.

The reason it has to infer at all is a gap in the surface. The API names the TTL of each write, and Claude Code’s status line exposes it as prompt_cache.ttl, but the Mod API hands over only the four token counts. If you want the ground truth, run claude -p "hello" --output-format json and read usage.cache_creation.

Where the Mods live

The component: Prompt Cache Control on aitmpl.com
Context Timeline, the other way to watch a session: Context Timeline
Every Mod in the catalog: the Mods index
Everything else: aitmpl.com

You can follow me on my social media:

Twitter (English): https://x.com/dani_avila7
LinkedIn (Spanish): https://www.linkedin.com/in/daniel-avila-arias/
Youtube (Spanish): https://www.youtube.com/@daniiielsan
Instagram (Spanish): https://www.instagram.com/danielsan_avila/

Subagent Read Only Guard stops your Claude Code subagents from writing files

Daniel (San) Ávila — Mon, 12 Oct 2026 13:06:40 +0000

I run Sonnet as the main model and Haiku for subagents. Subagents are good at going out, reading a lot of code and coming back with a report. They are less good at deciding on their own that the right next move is to rewrite a file in a repo they only half understand.

So there are two components here. One tells subagents to stay read-only. The other makes sure they do.

// Detect dark theme var iframe = document.getElementById('tweet-2109041206097289420-143'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2109041206097289420&theme=dark" }

The instruction is not the enforcement

The first half is the setting, hooks/subagents-explore-only. It registers a SubagentStart hook that prints a single JSON object with hookSpecificOutput.additionalContext, and Claude Code injects that text into every subagent before its first prompt: investigate with read-only tools, do not create, edit, move or delete files, do not run state-changing commands, and describe the exact change in the final report so the main agent applies it. Built-in agents, custom agents and plugin agents all get it.

SubagentStart is a context-only event. It has no decision control, so it cannot block anything. It is a prompt, and a prompt is a request.

Subagent Read Only Guard is the half that enforces. It runs on PreToolUse, which does have decision control.

What the guard denies

The hook matches Edit|Write|MultiEdit|NotebookEdit|PowerShell|Bash|Monitor and hands the call to a Python script. The first thing that script does is look for agent_id in the hook input. Claude Code sets that field only when the hook fires inside a subagent, so a call from the main conversation exits before any of the checking happens. Your own session is untouched.

Edit, Write, NotebookEdit and PowerShell are denied outright. The reason string tells the subagent to describe the change in its report so the main agent can apply it.
Bash and Monitor commands get parsed. A command passes only when every program in it is a bare name from a short read-only allowlist (cat, ls, grep, rg, find, jq, diff, wc, sort, git log/diff/status/show/blame and similar) called without the options that would make that program write a file or run another one. Abbreviated long options count, so --out is caught the same as --output.
Output redirection to a file, here-documents, command substitution, $VAR and brace expansion, subshells, environment variable prefixes and git -c are all denied. 2>/dev/null, 2>&1 and input redirection are fine.
Anything the classifier cannot parse is denied, including its own bugs. It fails closed.

The block is a real permission decision, not an exit code. The script prints permissionDecision: "deny" with a permissionDecisionReason, and that reason is the text the subagent reads.

Install it

npx claude-code-templates@latest --setting hooks/subagents-explore-only --hook security/subagent-read-only-guard

That drops the guard at .claude/hooks/subagent-read-only-guard.py and registers the hooks in your project settings. The registration is an ordinary hooks block, so you can read it, move it to ~/.claude/settings.json to get it on every project, or trim the matcher:

{
  "hooks": {
    "PreToolUse": [
      {
        "matcher": "Edit|Write|NotebookEdit|PowerShell|Bash|Monitor",
        "hooks": [
          { "type": "command", "command": "python3 .claude/hooks/subagent-read-only-guard.py" }
        ]
      }
    ]
  }
}

Two things I changed from what ships. MultiEdit is gone from the matcher: it is not a built-in tool name any more, so that entry never matches anything. And the command uses a path relative to the working directory, which is not always the project root, so python3 "$CLAUDE_PROJECT_DIR"/.claude/hooks/subagent-read-only-guard.py is the safer spelling. You also need python3 on PATH.

Narrow what it fires on

As installed, the hook runs on every Edit, Write, Bash and Monitor call in the session, including yours, and exits on the first line when agent_id is missing. Cheap, but it is still a python3 process per tool call.

If you want it to fire less often, hooks take an if field next to matcher, using permission rule syntax, exactly one rule, no && or ||:

{ "matcher": "Bash", "if": "Bash(rm *)", "hooks": [] }

if is evaluated on PreToolUse, PostToolUse, PostToolUseFailure, PermissionRequest and PermissionDenied. On any other event a hook that carries it never runs.

// Detect dark theme var iframe = document.getElementById('tweet-2037598893157032421-970'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2037598893157032421&theme=dark" }

What it does not cover

MCP tools. PreToolUse fires for them, but a matcher made only of names and pipes is an exact-string list, and MCP tools are called mcp__server__tool, so none of them match. A subagent with a write-capable MCP server still writes.
Secrets. cat and printenv are on the read-only allowlist, so a subagent can still read .env. Pair it with Env File Protection.
git diff and git blame can still run a diff or textconv driver the repo already has configured.

The trade is real: subagents will sometimes come back with a described change instead of a finished one, and your main agent has to apply it. That is the whole point, but it means the orchestration work moves up to the main prompt. For exploration-heavy sessions with cheap subagents, it is worth it.

Where the hooks live

Subagent Read Only Guard, the PreToolUse hook in this article
Subagents Explore Only, the SubagentStart setting that pairs with it
Env File Protection, for the secrets this guard still lets through
The rest of the catalog

// Detect dark theme var iframe = document.getElementById('tweet-2109089568494649601-117'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2109089568494649601&theme=dark" }

You can follow me on my social media:

Twitter (English): https://x.com/dani_avila7
LinkedIn (Spanish): https://www.linkedin.com/in/daniel-avila-arias/
Youtube (Spanish): https://www.youtube.com/@daniiielsan
Instagram (Spanish): https://www.instagram.com/danielsan_avila/

Complete Guide to Claude Code Templates

Daniel (San) Ávila — Wed, 27 Aug 2025 20:56:31 +0000

What is Claude Code Templates

Claude Code Templates is an open-source project that simplifies Claude Code adoption through ready-to-use configurations.

Visit aitmpl.com to browse over 400 components including agents, commands, settings, hooks, MCPs, and templates.

Claude Code Templates - Supercharge Your AI Development with Anthropic Claude

*Professional templates and configurations for Anthropic's Claude Code. Get Claude Opus 4.1 working at terminal velocity…*aitmpl.com

The core insight behind this project: how you configure your AI development agents is often more critical to project success than the actual code they generate.

Currently hosting over 400 components with thousands of downloads, Claude Code Templates has become the de facto package manager for the Claude Code ecosystem.

Component

Claude Code Templates organizes components into six categories:

Agents

Specialized AI personas with specific expertise. Examples include frontend developers, security auditors, and legal reviewers. Each agent comes with optimized system prompts and tool configurations.

Commands

Reusable command configurations for common development tasks like code review, testing, and deployment checks.

Settings

Pre-configured permission sets, tool allowlists, and environment configurations that ensure secure and efficient AI interactions.

Hooks

Integration points for CI/CD pipelines, git workflows, and automated development processes.

MCPs

Model Context Protocol integrations that connect Claude Code to external services like databases, APIs, and development tools.

Templates

Complete project setups combining multiple components for specific use cases or technology stacks.

Using the Search Function

The search interface allows you to filter through hundreds of components efficiently. Enter keywords related to your technology stack, development role, or specific needs.

For example:

Search “react” to find frontend development components
Search “security” for auditing and security review tools
Search “game” for game development resources
Search “api” for backend and API development components

You can also browse by category using the filter tabs (Agents, Commands, Settings, Hooks, MCPs, Templates) or explore predefined categories like “Development Team,” “AI Specialists,” or “Business Marketing.”

Installing Individual Components

Each component can be installed independently using the provided command. Click the “Install” button next to any component to copy its installation command.

Individual installation commands follow this pattern:

npx claude-code-templates@latest --agent=development-team/frontend-developer
npx claude-code-templates@latest --command=code-optimization/bundle-analyzer  
npx claude-code-templates@latest --setting=security/enterprise-permissions

The --yes flag can be added to skip confirmation prompts:

npx claude-code-templates@latest --agent=development-team/frontend-developer --yes

Building Complete Stacks with Cart Functionality

Rather than installing components one by one, you can build complete development stacks using the cart system. This approach is more efficient for setting up comprehensive development environments.

To build a stack:

Browse components and click “Add to Cart” for each item you need

The cart accumulates your selections across all component types

When ready, click “Generated Command” to create a single command that installs everything

Copy and run the generated command in your terminal

You also can share this command on X or Threads

A typical full-stack development setup might include:

Frontend developer agent
Code reviewer agent
Security auditor agent
Performance optimization commands
Git integration hooks
Development environment settings
Relevant MCP integrations

This results in a single command that configures your entire Claude Code environment at once.

Discovering Popular Components with Trending

The trending section shows which components the community uses most, updated weekly. This data helps identify battle-tested components and emerging patterns in how developers configure their AI workflows.

Conclusion

Claude Code Templates transforms Claude Code from a powerful but complex tool into an accessible development platform. By providing curated, tested configurations, it removes the barrier between developers and productive AI-assisted coding.

AI agent configuration has become as important as the code itself. A thoughtfully configured development environment with the right agents, permissions, and integrations can dramatically improve productivity and code quality. Claude Code Templates makes this sophistication accessible to every developer.

For advanced usage including Global Agents that run directly from your terminal, check out this step-by-step tutorial.

Contribute to the project at github.com/davila7/claude-code-templates.

You can follow me on my social media:

LinkedIn (Spanish): https://www.linkedin.com/in/daniel-avila-arias/
Twitter (English): https://x.com/dani_avila7
Youtube (Spanish): https://www.youtube.com/@daniiielsan

Claude Code: From Zero to Hero

Daniel (San) Ávila — Tue, 26 Aug 2025 18:10:16 +0000

What is Claude Code?

Claude Code is an AI-powered coding assistant that lives in your terminal, understanding your codebase and accelerating development through natural language. It integrates directly into your workflow, providing a flexible and safe way to leverage AI for coding tasks.

Why Use Claude Code?

Claude Code offers several key benefits:

Codebase Understanding: Quickly understand project architecture and logic.
Code Editing & Bug Fixing: Edit files and fix bugs with natural language.
Testing & Linting: Execute and fix tests and linting errors.
Git Integration: Simplify Git operations like commits, PRs, and conflict resolution.
Web Search: Access documentation and online resources.
MCP Integration
Secure & Private: Direct API connection to Anthropic, operating within your terminal.
Codebase Understanding: Quickly understand project architecture and logic.
Code Editing & Bug Fixing: Edit files and fix bugs with natural language.
Testing & Linting: Execute and fix tests and linting errors.
Git Integration: Simplify Git operations like commits, PRs, and conflict resolution.
Web Search: Access documentation and online resources.
MCP Integration
Secure & Private: Direct API connection to Anthropic, operating within your terminal.

Installation and Authentication

Install Claude Code: Ensure you have Node.js 18+ installed, then run:

npm install -g @anthropic-ai/claude-code

Authenticate: Run claude in your terminal and follow the authentication prompts.

Pro tips: You can authenticate via the Anthropic Console, Claude App (Pro/Max plan), or enterprise platforms like Amazon Bedrock or Google Vertex AI.

Pro tips: You can authenticate via the Anthropic Console, Claude App (Pro/Max plan), or enterprise platforms like Amazon Bedrock or Google Vertex AI.

If you want to make any changes to Claude Code’s initial configuration, just run the /config command

1. Initializing Your Project

Initialize: Use the /init command to generate a CLAUDE.md project guide.

Running this command, Claude Code will create the CLAUDE.md file with all the necessary information to work properly with this project.

Click Yes and you’ll see the file created in your project.

You can ask Claude Code to commit the CLAUDE.md file it just generated: “commit the CLAUDE.md file”.

Claude Code will execute git and add this file to staging.

2. Basic Usage

Asking Questions

Start by understanding your codebase:

> what does this project do?

You can try different questions like these:

> what technologies does this project use? > explain the folder structure

Make Code Changes

Instruct Claude to make edits:

> Create a GitHub Action that, on every npm publish, automatically creates a GitHub Release and publishes the package to GitHub Packages.

Claude Code will show you how it’s performing the tasks one by one

When finished, it will give you a summary of the changes it just made

Claude will show you the proposed changes and ask for your approval before modifying any files.

3. Essential Commands and Workflows

Navigating the Command Line Interface (CLI)

Claude Code offers a simple yet powerful command-line interface with tab completion for files and commands. Use /help to see all available commands and /clear to reset the conversation context.

Using Claude Code as a Unix-Style Utility

Command Breakdown: Security Scanning

cat package.json | claude -p "review this file for security vulnerabilities and dependency issues" > security_report.txt

This command demonstrates Claude Code’s versatility as a Unix-style utility that can be integrated into your existing shell scripts and workflows. Let’s break it down:

Input Piping: cat package.json | reads the contents of your package.json file and pipes it directly to Claude Code.
**Headless Mode: **The -p flag runs Claude in headless (non-interactive) mode with the specified prompt.
Specialized Analysis: The prompt instructs Claude to perform a security-focused code review, specifically looking for vulnerabilities and dependency issues.
Output Redirection: > security_report.txt captures Claude’s analysis in a text file for documentation or further processing.

Input Piping: cat package.json | reads the contents of your package.json file and pipes it directly to Claude Code.
**Headless Mode: **The -p flag runs Claude in headless (non-interactive) mode with the specified prompt.
Specialized Analysis: The prompt instructs Claude to perform a security-focused code review, specifically looking for vulnerabilities and dependency issues.
Output Redirection: > security_report.txt captures Claude’s analysis in a text file for documentation or further processing.

Working with your IDE

The /ide command connects Claude Code to your IDE (VS Code, Cursor, Windsorf or JetBrains), enabling powerful integrations:

# Connect Claude to your IDE> /ide

Automatic Context Sharing When you select files or code in your IDE, Claude automatically receives this context.

Or you can add a file as context using @

Creating Custom Slash Commands

The custom slash commands feature in Claude Code lets you create reusable prompts for common tasks:

# Create a project-specific commandmkdir -p .claude/commandsecho "Analyze this code for security vulnerabilities and suggest fixes:" > .claude/commands/security-review.md

Project Commands vs. Personal Commands

Project Commands (shared with your team):

> /project:security-review

Stored in .claude/commands/ directory
Available to everyone who clones the repo
Great for standardizing team workflows
Stored in .claude/commands/ directory
Available to everyone who clones the repo
Great for standardizing team workflows
Personal Commands (just for you):

> /user:optimize

Stored in ~/.claude/commands/directory
Available across all your projects
Perfect for your individual preferences
Stored in ~/.claude/commands/directory
Available across all your projects
Perfect for your individual preferences

Adding Command Arguments

Make commands flexible with the $ARGUMENTS placeholder:

# Create a command with argumentsecho "Find and fix issue #$ARGUMENTS. Follow these steps:1. Understand the issue described in the ticket2. Locate the relevant code3. Implement a solution4. Add appropriate tests" > .claude/commands/fix-issue.md

Then use it with:

> /project:fix-issue 123

Organizing Commands

You can create subdirectories for better organization:

.claude/commands/frontend/component.md → /project:frontend:component

Custom commands transform Claude Code into a powerful, personalized coding assistant that adapts to your specific workflows and team standards.

Creating Custom Slash Commands for npm Packages

Here’s a practical example of creating a custom slash command for npm package development:

Create the file .claude/commands/npm-contributing-docs.md

With the following content:

Create a CONTRIBUTING.md file with:   - Development setup instructions   - Testing guidelines   - Pull request process

Now you can use this command in your npm package project (you must restart claude to see the command):

The command will be executed and in this case will create the CONTRIBUTING.md file as we requested in the created command file.

Working with Model Context Protocol (MCP)

MCP allows Claude Code to connect with external tools and data sources, extending its capabilities beyond your local environment.

# Basic MCP server additionclaude mcp add postgres-db -- /path/to/postgres-mcp-server --connection-string "postgresql://user:pass@localhost:5432/mydb"

Managing MCP Servers

# List all configured serversclaude mcp list# Get details for a specific serverclaude mcp get postgres-db# Remove a serverclaude mcp remove postgres-db

Scopes for MCP Servers

Local (-s local): Available only to you in the current project
Project (-s project): Shared with everyone via .mcp.json file
Local (-s local): Available only to you in the current project
Project (-s project): Shared with everyone via .mcp.json file
User (-s user): Available to you across all projects
User (-s user): Available to you across all projects

Example: Using CodeGPT’s Deep Graph MCP

Let’s see how to implement a powerful code analysis MCP in practice:

Let’s integrate the Deep Graph MCP with Claude Code. This integration transforms Claude Code into a powerful code comprehension tool that understands your entire codebase at a semantic level, making it ideal for large, complex projects.

Here you can see all the documentation for this CodeGPT MCP and all the information to use it in Claude Code: https://github.com/JudiniLabs/mcp-code-graph

Add the MCP with the following command and don’t forget to add your CodeGPT API Key

# Add the Deep Graph MCP serverclaude mcp add "Deep Graph MCP" npx -- -y mcp-code-graph@latest YOUR_CODEGPT_API_KEY

Interacting with Deep Graph MCP

Once configured, you can use it in your Claude Code sessions:

Check if you have Deep Graph MCP installed by running “claude mcp list”

To call the MCP and use its tools, you can mention it and then request something directly. Claude Code will detect the tools it needs to execute and show you the confirmation message:

Deep Graph MCP: list graphs

With the Deep Graph MCP you can work with all the repositories you have converted into knowledge graphs.

Once your repositories are listed, you could ask Claude Code to work directly with a graph.

Deep Graph MCP: show all the endpoints from danielavila.me@main

Claude Code will execute the corresponding tools with the selected graph and finally you’ll have a direct response in the console.

Amazing! Now you can work with any repository within your project using Claude Code, special commands, Deep Graph MCP and all the tools that Claude has available!

You can follow me on my social media:

LinkedIn (Spanish): https://www.linkedin.com/in/daniel-avila-arias/
Twitter (English): https://x.com/dani_avila7
LinkedIn (Spanish): https://www.linkedin.com/in/daniel-avila-arias/
Twitter (English): https://x.com/dani_avila7

Llama 3.2 Running Locally in VSCode: How to Set It Up with CodeGPT and Ollama

Daniel (San) Ávila — Mon, 30 Sep 2024 12:09:19 +0000

Llama 3.2 models are now available to run locally in VSCode, providing a lightweight and secure way to access powerful AI tools directly from your development environment.

With the integration of Ollama and CodeGPT, you can download and install Llama models (1B and 3B) on your machine, making them ready to use for any coding task.

In this guide, I’ll walk you through the installation process, so you can get up and running with Llama 3.2 in VSCode quickly.

Step-by-Step Installation Guide: Llama 3.2 in VSCode

Step 1: Install Visual Studio Code (VSCode)

To start, make sure you have Visual Studio Code installed. If you don’t have it yet, download it from here and follow the instructions for your operating system.

Step 2: Install CodeGPT Extension

The CodeGPT extension is necessary to integrate AI models like Llama 3.2 into your VSCode environment. Here’s how to get it:

Open VSCode.
Click on the Extensions icon on the left sidebar.
Search for “CodeGPT” in the marketplace.

Step 3: Install Ollama

Ollama enables local deployment of language models. To install it:

Visit the Ollama website.
Download the appropriate installer for your operating system.
Follow the installation instructions provided on the site.
Once installed, verify it by typing the following in your terminal:

ollama --version

output: ollama version is 0.3.12

Step 4: Download Llama 3.2 Models

With CodeGPT and Ollama installed, you’re ready to download the Llama 3.2 models to your machine:

Open CodeGPT in VSCode
In the CodeGPT panel, navigate to the Model Selection section.
Select Ollama as the provider and choose the Llama 3.2 models (1B or 3B).

Click “Download Model” to save the models locally.

Step 5: Verify Your Setup

Once the model is downloaded, you can verify it’s ready to use:

Open a code file or project in VSCode.
In the CodeGPT panel, make sure Llama 3.2 is selected as your active model.
Begin interacting with the model for code completions, suggestions, or any coding assistance you need.

Ready to Use Llama 3.2 in VSCode

That’s it! With Llama 3.2 running locally through CodeGPT, you’re set up to enjoy a secure, private, and fast AI assistant for your coding tasks — all without relying on external servers or internet connections.

If you found this guide helpful, let us know in the comments, and feel free to reach out if you encounter any issues during the setup!

Lightning-Fast Code Assistant with Groq in VSCode

Daniel (San) Ávila — Sun, 21 Jul 2024 20:29:57 +0000

In this tutorial, I’ll show you how to integrate Groq’s cloud-based language models as a code assistant in Visual Studio Code (and Jetrbains) using the CodeGPT extension.

You’ll learn to set up an AI-powered coding assistant to enhance your productivity.

First, What is Groq?

Groq is the AI infrastructure company that delivers fast AI inference.

The LPU™ Inference Engine by Groq is a hardware and software platform that delivers exceptional compute speed, quality, and energy efficiency.

Let’s begin!

To use Groq’s services, you must first create an account on Groq Cloud by accessing the following link: https://console.groq.com/

Once you’re logged in, navigate to the API Keys section in the main menu.

Create a new API Key and copy it.

Next, you need to open VSCode and install the CodeGPT extension.

Open CodeGPT in VSCode and in the main selector, select Groq as the provider.

Now select “Connect” and you’ll see the window to paste the API Key you just created. Paste it and then click Connect.

Excellent! We’re now connected with Groq.

Next, we’ll select a model from the ones Groq has available. With CodeGPT, you’ll always have an updated list of models, so you’ll be able to see each new release directly in CodeGPT.

In this case, we’ll be working with the llama3–70b-8192 model.

Once the model is selected, we can start using the features offered by CodeGPT.

Explain a file:

In the CodeGPT text input, we select the /Explain option, then use the @ symbol to select a file from our project, and when we press Enter, Llama3 will provide a complete explanation of the ENTIRE file.

Document a file:

It seems like there’s no content to translate. Could you please provide the text you’d like me to translate into native English? I’ll be happy to assist you.

Experience the speed of Groq in software development with CodeGPT as your code assistant!

YoutubeGPT, start a chat with a video 🤖

Daniel (San) Ávila — Thu, 09 Feb 2023 03:15:23 +0000

With Youtube GPT you will be able to extract all the information from a video on YouTube just by pasting the video link.
You will obtain the transcription, the embedding of each segment and also ask questions to the video through a chat.

All code was written with the help of Code GPT

Features

Video transcription with OpenAI Whisper
Embedding Transcript Segments with the OpenAI API (text-embedding-ada-002)
Chat with the video using streamlit-chat and OpenAI API (text-davinci-003)

Example

For this example we are going to use this video from The PyCoach
https://youtu.be/lKO3qDLCAnk

Add the video URL and then click Start Analysis

Pytube and OpenAI Whisper

The video will be downloaded with pytube and then OpenAI Whisper will take care of transcribing and segmenting the video.

# Get the video 
youtube_video = YouTube(youtube_link)
streams = youtube_video.streams.filter(only_audio=True)
mp4_video = stream.download(filename='youtube_video.mp4')
audio_file = open(mp4_video, 'rb')

# whisper load base model
model = whisper.load_model('base')

# Whisper transcription
output = model.transcribe("youtube_video.mp4")

Embedding with "text-embedding-ada-002"

We obtain the vectors with text-embedding-ada-002 of each segment delivered by whisper

# Embeddings
segments = output['segments']
for segment in segments:
    openai.api_key = user_secret
    response = openai.Embedding.create(
        input= segment["text"].strip(),
        model="text-embedding-ada-002"
    )
    embeddings = response['data'][0]['embedding']
    meta = {
        "text": segment["text"].strip(),
        "start": segment['start'],
        "end": segment['end'],
        "embedding": embeddings
    }
    data.append(meta)
pd.DataFrame(data).to_csv('word_embeddings.csv')

OpenAI GPT-3

We make a question to the vectorized text, we do the search of the context and then we send the prompt with the context to the model "text-davinci-003"

We can even ask direct questions about what happened in the video. For example, here we ask about how long the exercise with Numpy that Pycoach did in the video took.

Running Locally

Github: https://github.com/davila7/youtube-gpt

Clone the repository

git clone https://github.com/davila7/youtube-gpt
cd youtube-gpt

Install dependencies

These dependencies are required to install with the requirements.txt file:

streamlit
streamlit_chat
matplotlib
plotly
scipy
sklearn
pandas
numpy
git+https://github.com/openai/whisper.git
pytube
openai-whisper

pip install -r requirements.txt

Run the Streamlit server

streamlit run app.py

Upcoming Features 🚀

Semantic search with embedding
Chart with emotional analysis
Connect with Pinecone

Compare human and AI responses on Stackoverflow using CodeGPT

Daniel (San) Ávila — Thu, 26 Jan 2023 23:35:39 +0000

In this article I will explain how to use Ask StackOverflow functionality of the Code GPT extension.

Code GPT extension, available for VSCode, allows you to search for questions on StackOverflow and compare the best human response with the response from artificial intelligence such as OpenAI's GPT-3.

Official Code GPT documentation: https://codegpt.co

Install CodeGPT in VSCode

Follow the instructions below to install the extension in VSCode

Install CodeGPT

Ask StackOverflow

To activate this option you just have to press the cmd + shift + p keys and look for the Ask StackOverflow option

Now search for a question or even it can be just with a keyword, in this case, we just enter python and we can get all the queries with this concept that exist on StackOverflow

Select a question and Code GPT will do the magic 😍

It will show you the question, then the best answer and for the last time you will be able to see the answer of the artificial intelligence that you have selected.

In this case, we perform the test with OpenAI and the text-davinci-003 model

Example:

Human vs AI

Try this tool on your own so that you have both human responses and AI responses within Visual Studio Code to improve your projects.

GPT-3 inside VSCode with official OpenAI API

Daniel (San) Ávila — Thu, 29 Dec 2022 19:06:35 +0000

Code GPT extension for VSCode

Using the official OpenAI API inside the IDE with Code GPT.

New feature! Get code from comments

Write a comment asking for a specific code
Press cmd + shift + i
Use the code 😎

Examples

Create a README.md with "Ask CodeGPT"

Select the code and then click on `Explain CodeGPT`

Result:

Features

Get Code: Create a comment asking for a specific code and CodeGPT will open a new Editor with the code (You don't need to write the code language. CodeGPT will detect it automatically).
Ask CodeGPT: CodeGPT will open a new Editor and respond the question.
Explain CodeGPT: CodeGPT will open a new Editor and explain the code.
Refactor CodeGPT: CodeGPT will open a new Editor and refactor the code.
Document CodeGPT: CodeGPT will open a new Editor and Document the code.
Find Problems CodeGPT: CodeGPT will open a new Editor and find problems in the code.
Set API KEY: To save your API KEY securely.
Remove API KEY: To remove your API KEY.

Installation

Go to Settings > Extensions > CodeGPT

Complete the following information:

To enter your API Key press cmd+shift+p and search for CodeGPT: Set API KEY. Your API KEY will be safely stored.

CI/CD con Synthetic Monitoring de Datadog y Bitbucket pipelines

Daniel (San) Ávila — Sat, 17 Dec 2022 04:31:17 +0000

En este artículo te mostraré como enlazar la herramienta Synthetic Monitoring de
Datadog HQ
con la herramienta Pipelines de
Atlassian Bitbucket
y tener un panel de control completo de pruebas CI/CD.

DataDog Synthetic Monitoring
Esta herramienta permite automatizar pruebas en tus procesos de despliegue de aplicaciones ya sea en ambiente staging o producción.

En este ejemplo vamos a realizar una prueba básica a la página inicial de BoxMagic (https://go.boxmagic.app) mediante diferentes navegadores y dispositivos para que sean ejecutadas cada vez que se realiza un push en el repositorio del proyecto en Bitbucket.

Browser Test
Para comenzar ingresamos al panel de Datadog y seleccionamos el menú UX Monitoring / Synthetic Tests

Creamos un nuevo test de tipo Browser Test

Agregamos la URL donde se ejecutará el Test, en este caso será https://go.boxmagic.app (nuestra url inicial), agregamos el nombre y el ambiente. Luego seleccionamos que navegadores y dispositivos serán los que realizarán las pruebas.

Se pueden agregar las ubicaciones desde donde se realizarán las pruebas.

Por último configuramos la frecuencia en que se ejecutará esta prueba y además podemos configurar el monitoreo, alertas y permisos.

Pruebas
En este caso solo crearemos una prueba de Assertion / Test an element’s content que permite verificar el contenido de un elemento dentro de la página:

Solo debes hacer click en el elemento y completar los datos del formulario, en este caso se está comprobando si el div contenga la frase “Ingresa aquí”.

Seleccionamos Apply para finalizar y comenzar a ejecutar la prueba.

Api Keys y test public ID
Para que esta prueba pueda correr cada vez que se ejecute el pipeline de bitbucket debemos obtener 3 variables Public Test ID, APP Key y API Key.

El Public Test ID se obtiene seleccionando la prueba que acabamos de realizar

El APP Key y el API Key se obtienen dentro del menú Organization Settings donde debes crear un nuevo APP Key y un API Key.

NPM datadog-ci
Puedes ejecutar estas pruebas de forma local con npm para probar que estén correctamente configuradas.

Primero ejecutamos la instalación con npm

npm install -g @datadog/datadog-ci

Luego ejecutamos synthetics run-test con los parámetros que obtuvimos del paso anterior.

datadog-ci synthetics run-tests --public-id $DD_TEST_PUBLIC_ID --apiKey $DD_API_KEY --appKey $DD_APP_KEY

El resultado debería verse de esta forma si todas las pruebas se realizaron correctamente:

Bitbucket Pipeline
Con todas las pruebas configuradas solo nos hace falta agregarlas al pipeline de bitbucket para que sean ejecutadas cada vez que se realice un push al repositorio

Agregamos las variables de entorno a nuestro repositorio en bitbucket en Repository Setting / Repository variables

En el archivo bitbucket-pipeline.yml agregamos los comandos para ejecutar las pruebas.

pipelines:
     default:
           - step:
               name: datadog-synthetics testing
               image: node:15-alpine3.10
               script:
                 - npm install -g @datadog/datadog-ci
                 - datadog-ci synthetics run-tests --public-id        $DD_TEST_PUBLIC_ID  --apiKey $DD_API_KEY --appKey $DD_APP_KEY

Una vez que realizas un push al repositorio debes ingresar al del menú Pipelines de bitbucket podrás ver la ejecución de las pruebas.

Puedes ver la realización de cada prueba en el panel de Datadog

También puedes ver la ejecución de las pruebas y en la columna RUN TYPE deberías poder observar que fueron ejecutadas por el pipeline de CI/CD

Eso es todo, ya puedes comenzar a crear todo tipo de pruebas dentro de datadog, se ejecutarán automáticamente en tu CI/CD y de esta forma te aseguras que cada push que se realice al repositorio deba pasar todas las pruebas para que se pueda desplegar en ambientes de staging o producción.