ModsCode / Claude Code Mods / Build
The Claude Code Mods code reference
Read real mods' code and start building from it. For each thing you may want to build: the smallest form, written by ModsCode, and the code of public mods that do it, with their licence. The same code runs in the terminal and the desktop app.
Check the code yourself before you copy or install it. Mods run unsandboxed, with your permissions. ModsCode does not vouch for what the code does.
- Pane (panel)A panel beside the transcript: buttons, lists, charts.$.ui.open · 6 examples
- Band above the promptA strip right above the prompt: state or usage in a line or two.on('ui.render', { component: 'AbovePrompt' }) · 6 examples
- Status lineOne line under the prompt, with $.ui.status.$.ui.status(text) · 6 examples
- ToastA short notice that goes away.$.ui.toast(text, { timeoutMs }) · 6 examples
- Deny a tool callBlock rm -rf or a force push. The mod form of PreToolUse.on('tool.call', { tool: 'Bash' }) · 6 examples
- Rewrite the promptFix the text before it is sent, or add a line only Claude reads.on('prompt.submit') · 6 examples
- Add a slash commandA /command that runs your code.$.command.register · 6 examples
- Keep state with $.storeSave values across sessions.$.store.get · 6 examples
- Settings (userConfig)Settings users can change, declared in plugin.json.plugin.json userConfig · 6 examples
- Add a tool for ClaudeA tool Claude can call, without an MCP server.$.tool.register · 6 examples
Security practices
How to build a mod that readers can check before they install it. Each practice rests on rules ModsCode reads in every mod's code; none of them rates a mod.
- Keep the code in the modYour own files as plain source: no packages, no eval, no blobs.import { x } from './x' · 2 examples
- Draw onlyA pane, band or status line that reaches no network, programs or files.$.ui · $.store · 2 examples
- Run programs by nameThe program written in the code, never a shell.$.process.run(['git', …]) · 2 examples
- Fetch named hostsEvery URL starts with https:// and its host, in the code.$.http.fetch('https://…') · 2 examples
- Read or send, not bothWhat the mod reads stays off the network; no keys in the source.$.fs.read · $.env.get · 2 examples
- Refuse dangerous tool callsA guard hook on tool.call that returns a reason instead of running the tool.return { deny: 'why' } · 6 examples
- Keep the licence textA LICENSE file at the root, so others know how they may use the code.LICENSE · 2 examples
Designs
Pane designs to copy into a mod: one file each of look, a mod by the maker of ModsCode, with sample data and its code (PolyForm Noncommercial 1.0.0). All 54 designs.
- Over timeCandlestick chart, Sparklines, Bar chart around zero, …9 designs
- Usage and limitsGauges, Stat tiles, Bullet graphs, …9 designs
- Code and CICI pipeline, Dependency graph, Git graph, …4 designs
- Work and agentsCalendar heatmap, Gantt chart, Kanban board, …8 designs
- CompareRadar chart, Dumbbell chart, Lollipop chart, …5 designs
- SpreadBox plots, Density contours, Hexbin plot, …7 designs
- Parts of a wholeDonut chart, Treemap, Circle packing, …8 designs
- Flows and linksChord diagram, Dendrogram, Force-directed graph, …4 designs
A mod is a plugin with a .claude-plugin/plugin.json, a hooks/hooks.json whose modules names your code, and a file that exports register(on). on(event, hook) handles an event, and each hook gets ($, e, next). See the guide; the primary source is Anthropic's official documentation. Once it is public on GitHub, a topic adds it to ModsCode.