# Claude Code Mods: Commands, Code and Prompts

This is the companion to my Claude Code mods video. Every file we look at and every command we run is here, so you don't have to copy anything from the screen.

You need a version of Claude Code that supports mods. Check yours with:

```bash
claude --version
```

If you already have custom mods installed, disable them in `/plugin` while you follow along. That way the only thing drawing in the interface is the mod you're working on.

Mods run with your user permissions and they're not sandboxed. Read the source, and only install mods from authors you trust.

## 1. hello-mod: the files

The simplest possible mod. It puts "Hello from my mod" above the prompt. The video uses it to show what each file is for and how they connect.

```text
hello-mod/
├── .claude-plugin/
│   └── plugin.json
└── hooks/
    ├── hooks.json
    └── register.tsx
```

`hello-mod/.claude-plugin/plugin.json` tells Claude Code what the plugin is:

```json
{
  "name": "hello-mod",
  "version": "0.1.0",
  "description": "A simple greeting above the Claude Code prompt",
  "author": { "name": "Your Name" }
}
```

`hello-mod/hooks/hooks.json` points to the code Claude Code should load. `./` means the same folder:

```json
{
  "modules": ["./register.tsx"]
}
```

`hello-mod/hooks/register.tsx` registers two event handlers:

```tsx
import type { Register } from 'claude-code';

let message = '';

export const register: Register = (on) => {
  on('session.start', ($, event, next) => {
    message = 'Hello from my mod';
    return next(event);
  });

  on('ui.render', { component: 'AbovePrompt' }, ($, event) => {
    const { Text } = $.ui.resolve(event);
    return <Text>{message}</Text>;
  });
};
```

When the mod loads, Claude Code runs `register` and passes in `on`. Each `on` call takes an event name and a function to run when that event happens. The `session.start` handler sets the message, and `next(event)` lets startup continue. The `ui.render` handler uses `AbovePrompt` to draw the Text component above the prompt.

## 2. Have Claude build Session Note

Session Note is a small pane beside the conversation where you type a note about what you're working on and save it. Saving it doesn't send anything to Claude.

Paste this into a Claude Code session:

```text
Use the plugin-authoring skill to build a mod called session-note.

It adds a pane beside the conversation with a text box and a Save button, so I can jot down what I'm working on. Add a /session-note command to reopen the pane. When I reopen it, show the last note I saved. The note is just for me, so don't send it to Claude.

Keep it clean: a small heading, a bit of padding, and theme colors so it matches Claude Code.

Keep your reply short.
```

When Claude Code asks, click **Enable for this session**. That turns on hot reloading, so the mod updates as you keep prompting and changing it.

Then try it: type a note and click Save. `/session-note` reopens the pane:

```text
/session-note
```

For now the mod only exists in this session. Open a different project and it isn't there.

## 3. Keep Session Note with a marketplace

Claude builds the mod in a folder for that session. To use it in your other projects and in the terminal, put it in a marketplace. That's just a folder of mods with a file that lists them and tells Claude Code where they are.

You can move the files yourself, but it's easier to ask Claude. In the same session:

```text
Can you put this mod into a marketplace folder called my-mods in ~/Code/Sandbox?
```

Any folder works. Claude copies the mod into it and writes the marketplace file:

```text
my-mods/
├── .claude-plugin/
│   └── marketplace.json
└── session-note/
    ├── .claude-plugin/
    │   └── plugin.json
    ├── hooks/
    │   ├── hooks.json
    │   └── register.tsx
    ├── tests/
    └── types/
```

`my-mods/.claude-plugin/marketplace.json` describes the whole collection. Mine looks like this:

```json
{
  "name": "my-mods",
  "description": "Brad's personal Claude Code mods",
  "owner": {
    "name": "Brad Traversy"
  },
  "plugins": [
    {
      "name": "session-note",
      "source": "./session-note"
    }
  ]
}
```

Each entry in `plugins` is part of the marketplace, and its `source` points to that mod's folder. If you make more mods, put them in my-mods and add them to `plugins`.

The session-note folder has the same structure as hello-mod, plus types and tests: a `plugin.json`, a `hooks.json` and a `register.tsx` whose `register` function sets up handlers for `session.start`, `command.run` and `ui.render`.

Creating the folder doesn't make it a marketplace yet. You can check it with:

```bash
claude plugin validate ~/Code/Sandbox/my-mods
```

Then add the marketplace and install Session Note from the terminal. Use the full path to your folder:

```bash
claude plugin marketplace add ~/Code/Sandbox/my-mods
claude plugin install session-note@my-mods --scope user
```

User scope makes the mod available in all your projects on this computer. It's the default, so `--scope user` is optional. Use `--scope project` to install it for one project only. Keep the my-mods folder where it is, because the installed mod loads from it.

Now open a session in another project and Session Note is there. It works in the terminal too: run `claude` and the pane shows up beside the conversation.

## 4. The mods I use

These are mods I use every day. Install them one at a time and try each one right after. The prompts work in any project, so open a session in one of yours. Each install turns the mod on. If a mod doesn't show up in an open session, run `/reload-plugins`.

If the area above the prompt gets busy, turn a mod off with:

```bash
claude plugin disable NAME@MARKETPLACE --scope user
```

### Session HUD

Session HUD is in my marketplace on GitHub. Adding a GitHub marketplace clones it for you, so there's nothing to download first.

```bash
claude plugin marketplace add bradtraversy/traversy-claude-mods
claude plugin install session-hud@traversy-mods --scope user
```

It shows your branch, a context meter and your weekly usage above the prompt. Give Claude something to do and watch the meter move:

```text
Give me a summary of the project.
```

The meter measures against a context target you choose, 300,000 tokens by default. Click Details to change the target and save it, and to see your 5-hour and weekly usage and what this session's context is made of. The target changes the meter, not Claude's actual context window.

### Tool Cards

Tool Cards is in the same marketplace, so you only need the install:

```bash
claude plugin install tool-cards@traversy-mods --scope user
```

It turns each tool call into a card with an icon for the tool, its status, and Details for the output. Run this prompt once before installing and once after to see the difference. It makes a few tool calls and stops without a reply, so the cards stay on screen:

```text
Use Bash to run git branch --show-current. Then use Bash to run git ls-files | head -3. Then use Read to open the first file in that list. Don't write any reply, just stop after the last call.
```

### Next Steps

Next Steps is in the same marketplace too. It's my fork of Hamza Zafar's next-steps mod, with buttons added for the desktop app.

```bash
claude plugin install next-steps@traversy-mods --scope user
```

After each reply, it suggests two or three prompts you might send next. In the desktop app, click one to put it in the prompt box, where you can edit it before sending. In the terminal, press 1, 2 or 3 in an empty prompt, or 0 to dismiss. Nothing is sent on its own. Each round of suggestions is one small Haiku call.

Ask Claude anything about your project to see it:

```text
Explain how this project is organized in a few sentences. Don't edit any files.
```

### Filetree

Filetree is by Kurt Buhler (data-goblin on GitHub) and has its own marketplace.

```bash
claude plugin marketplace add data-goblin/claude-code-filetree
claude plugin install filetree@claude-code-filetree --scope user
```

The tree opens beside the conversation once it's installed. If it doesn't, run `/filetree`. Then give Claude something to read and write. Files it reads flash purple, and new files show up green:

```text
Read this project's README and one of its main source files. Then create a folder called filetree-demo with a file inside it called notes.md, and write a two-line summary of what you read. Then edit notes.md to add a third line. Don't change any other files.
```

Delete the `filetree-demo` folder when you're done.

To open files in VS Code from the tree, go to `/config`, then Filetree, and set Open with to:

```text
code --reuse-window
```

Then double-click a file in the tree to open it in VS Code.

### Blast Radius

Blast Radius is from Hamza Zafar's marketplace on GitHub, which has plenty of other mods worth a look.

```bash
claude plugin marketplace add hamzafer/claude-code-mods
claude plugin install blast-radius@claude-code-mods --scope user
```

Blast Radius holds risky commands like `rm -r`, `git push --force` and database migrations, and shows what they would change before they run, even in auto mode. If you don't answer within 60 seconds, it cancels the command. Make a throwaway folder in your project to test it:

```bash
mkdir -p build-demo
printf 'Temporary demo output\n' > build-demo/one.txt
printf 'More temporary output\n' > build-demo/two.txt
```

Then ask Claude:

```text
Use the Bash tool to run rm -rf ./build-demo. Do not run it through a script or wrapper.
```

The pane lists the files and their size, with Cancel and Proceed. Click Proceed and the folder is deleted. Click Cancel instead and the files stay; check with `ls -l build-demo`, then delete the folder yourself. It only recognizes certain commands, so it's not a replacement for permissions or a sandbox.

## 5. Links

- [Mods overview](https://code.claude.com/docs/en/plugins/mods/overview)
- [Create a mod](https://code.claude.com/docs/en/plugins/mods/create)
- [Test a mod](https://code.claude.com/docs/en/plugins/mods/test)
- [Create a marketplace](https://code.claude.com/docs/en/plugin-marketplaces)
- [Session HUD, Tool Cards and Next Steps](https://github.com/bradtraversy/traversy-claude-mods)
- [Hamza Zafar's original next-steps](https://github.com/hamzafer/claude-code-mods/tree/main/mods/next-steps)
- [Filetree](https://github.com/data-goblin/claude-code-filetree)
- [Hamza Zafar's mods, including Blast Radius](https://github.com/hamzafer/claude-code-mods)