SLOPSHOPPER

example-mod

One line: what this mod draws or changes.

newbandcommand
v0.1.0MITupdated 2026-10-08arhunsaday/claude-plugins/templates/mod
A shopper browsing a rack in a slop shop
Preview · a replayed session in a sandbox
claude · ~/work/app · example-mod
› fix the failing auth test and add an audit log call ⏺ Read(src/auth.ts) ⎿ Read 6 lines ⏺ Update(src/auth.ts) ⎿ Added 2 lines, removed 1 line ⏺ Bash(bun test) ⎿ 3 pass, 1 fail ● Done. refresh now rejects expired claims and logs an audit event. ✻ Worked for 42s · done 4:20 PM › /example-mod ⎿ example-mod: Example band hidden. ────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── › ? for shortcuts
README

example-mod

A mod is a plugin of function hooks: hooks/register.tsx runs inside Claude Code and can draw UI (a band above the prompt, a pane, the status line), react to tool calls and prompts, and register commands.

  • hooks/hooks.json names the module.
  • types/index.d.ts declares the values the mod keeps in $.state.
  • hooks/*.test.ts run with claude plugin test <folder>.

Develop with claude --plugin-dir plugins/example-mod; the folder is watched and reloads on save.

Source 2 files
hooks/register.tsx 35 lines
1// example-mod: a one-line band above the prompt, toggled by /example-mod.
2
3import { atom, read, update } from 'claude-code'
4import type { Register } from 'claude-code'
5
6const isOpen = atom({ plugin: 'example-mod', key: 'isOpen' } as const, true)
7
8export const register: Register = on => {
9  on('session.start', async ($, e, next) => {
10    await $.command.register({ name: 'example-mod', description: 'Show or hide the example band' })
11    return next(e)
12  })
13
14  on('command.run', { command: 'example-mod' }, async $ => {
15    const was = await read($, isOpen)
16    await update($, isOpen, () => !was)
17    return { text: was ? 'Example band hidden.' : 'Example band shown.' }
18  })
19
20  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
21    if (e.props.hasSurvey || !(await read($, isOpen))) return next(e)
22    const { Box, Text } = $.ui.resolve(e)
23    const below = await next(e)
24    const mine = <Text dimColor>example-mod is running</Text>
25    return below ? (
26      <Box flexDirection="column">
27        {mine}
28        {below}
29      </Box>
30    ) : (
31      mine
32    )
33  })
34}
35
types/index.d.ts 13 lines
1// Contract for example-mod: the values it keeps in $.state.
2
3/** Whether the band above the prompt is shown. */
4export type ExampleModIsOpen = boolean
5
6declare module 'claude-code' {
7  interface PluginState {
8    'example-mod': {
9      isOpen: ExampleModIsOpen
10    }
11  }
12}
13