Claude Blocker — Development skill for Claude Code

Claude Blocker

Block distracting websites unless [Claude Code](https://claude.ai/claude-code) is actively running inference.

**The premise is simple:** if Claude is working, you should be too. When Claude stops, your distractions come back.

How It Works

┌─────────────────┐     hooks      ┌─────────────────┐    websocket    ┌─────────────────┐
│   Claude Code   │ ─────────────► │  Blocker Server │ ◄─────────────► │ Chrome Extension│
│   (terminal)    │                │  (localhost)    │                 │   (browser)     │
└─────────────────┘                └─────────────────┘                 └─────────────────┘
       │                                   │                                   │
       │ UserPromptSubmit                  │ tracks sessions                   │ blocks sites
       │ PreToolUse                        │ broadcasts state                  │ shows modal
       │ Stop                              │                                   │ bypass button
       └───────────────────────────────────┴───────────────────────────────────┘

1. Claude Code hooks notify the server when you submit a prompt or when Claude finishes
2. Blocker server tracks all Claude Code sessions and their working/idle states
3. Chrome extension blocks configured sites when no session is actively working

Quick Start

1. Install the server

npx claude-blocker --setup

This installs the Claude Code hooks and starts the server. The hooks are configured in `~/.claude/settings.json`.

2. Install the Chrome extension

• Download from Chrome Web Store (coming soon)
• Or load unpacked from packages/extension/dist

3. Configure blocked sites

Click the extension icon → Settings to add sites you want blocked when Claude is idle.

Default blocked sites: `x.com`, `youtube.com`

Server CLI

# Start with auto-setup (recommended for first run)
npx claude-blocker --setup

# Start on custom port

...