Context Mode

https://github.com/mksglu/context-mode
Admin
Context Mode is an MCP plugin that reduces context window usage by 98% through sandboxed code...
Tokens:111,718
Snippets:817
Trust Score:9.9
Update:3 weeks ago
Show doc for...
Tokens:
Raw
### Clone, install, and test context-mode

Source: https://github.com/mksglu/context-mode/blob/main/README.md

Use this command to clone the repository, install dependencies, and run the test suite. It is the standard setup for contributing to the project.

```bash
git clone https://github.com/mksglu/context-mode.git
cd context-mode && npm install && npm test
```

--------------------------------

### Install hooks with npx context-mode setup

Source: https://github.com/mksglu/context-mode/blob/main/docs/jetbrains-copilot.md

Run this command to install hooks for the JetBrains Copilot adapter. It creates .github/hooks/context-mode.json in your project.

```bash
npx context-mode@latest setup --adapter jetbrains-copilot
```

--------------------------------

### Quick install via npm run install:openclaw

Source: https://github.com/mksglu/context-mode/blob/main/docs/adapters/openclaw.md

Runs scripts/install-openclaw-plugin.sh to build, set up the extension, register the runtime, and restart the gateway. Requires Node.js in PATH and OpenClaw started once to create openclaw.json. Pass OPENCLAW_STATE_DIR as an argument if not at the default /openclaw.

```bash
npm run install:openclaw
```

--------------------------------

### Install context-mode and Copilot CLI plugin (Option A)

Source: https://github.com/mksglu/context-mode/blob/main/README.md

Recommended one-command installation for GitHub Copilot CLI. Installs context-mode globally and registers the plugin that sets up MCP, hooks, and routing skill.

```bash
npm install -g context-mode                                     # the plugin's MCP server runs the global binary
copilot plugin install mksglu/context-mode:configs/copilot-cli  # registers MCP + hooks + routing skill
```

--------------------------------

### Clone and install context-mode for OpenClaw

Source: https://github.com/mksglu/context-mode/blob/main/README.md

Clones the repository and runs the OpenClaw installer. The installer uses $OPENCLAW_STATE_DIR from your environment (default: /openclaw) and handles npm install, build, better-sqlite3 native rebuild, extension registration in runtime.json, and gateway restart via SIGUSR1.

```bash
git clone https://github.com/mksglu/context-mode.git
cd context-mode
npm run install:openclaw
```

--------------------------------

### Clone and install context-mode

Source: https://github.com/mksglu/context-mode/blob/main/CONTRIBUTING.md

Clones the repository, installs dependencies, and builds the project using npm. Requires Node.js 20+ or Bun.

```bash
git clone https://github.com/mksglu/context-mode.git
cd context-mode
npm install
npm run build  # tsc compiles src/ → build/
```

--------------------------------

### Install OMP plugin for context-mode

Source: https://github.com/mksglu/context-mode/blob/main/README.md

Installs the context-mode plugin via the OMP CLI.

```bash
omp plugin install context-mode
```

--------------------------------

### Install build tools on CentOS 7 / RHEL 7

Source: https://github.com/mksglu/context-mode/blob/main/README.md

Install the required C++20 compiler (GCC 10), Make, Python, and setuptools on CentOS 7 / RHEL 7 (glibc 2.17) to compile better-sqlite3 from source. Then enable the toolset and install context-mode globally.

```bash
yum install -y centos-release-scl
yum install -y devtoolset-10-gcc devtoolset-10-gcc-c++ make python3
pip3 install setuptools
scl enable devtoolset-10 'npm install -g context-mode'
```

--------------------------------

### Install context-mode into Pi

Source: https://github.com/mksglu/context-mode/blob/main/README.md

Installs the context-mode package into Pi Coding Agent using the pi CLI.

```bash
pi install npm:context-mode
```

--------------------------------

### Install global context-mode binary (prerequisite)

Source: https://github.com/mksglu/context-mode/blob/main/configs/copilot-cli/README.md

Installs the context-mode binary globally via npm. Required because the MCP server needs the native better-sqlite3 dependency.

```sh
npm install -g context-mode
```

--------------------------------

### Install context-mode plugin via Claude Code marketplace

Source: https://github.com/mksglu/context-mode/blob/main/README.md

Adds the mksglu/context-mode marketplace and installs the context-mode plugin. Requires Claude Code v1.0.33+ and a restart or /reload-plugins after installation.

```bash
/plugin marketplace add mksglu/context-mode
/plugin install context-mode@context-mode
```

--------------------------------

### Manual install via install-openclaw-plugin.sh

Source: https://github.com/mksglu/context-mode/blob/main/docs/adapters/openclaw.md

For advanced users or custom setups. Accepts an optional OPENCLAW_STATE_DIR argument. See the script for details.

```bash
bash scripts/install-openclaw-plugin.sh [OPENCLAW_STATE_DIR]
```

--------------------------------

### Install build tools on CentOS 8 / RHEL 8

Source: https://github.com/mksglu/context-mode/blob/main/README.md

Install the required C++20 compiler (GCC 10), Make, Python, and setuptools on CentOS 8 / RHEL 8 (glibc 2.28) to compile better-sqlite3 from source. Then enable the toolset and install context-mode globally.

```bash
dnf install -y gcc-toolset-10-gcc gcc-toolset-10-gcc-c++ make python3 python3-setuptools
scl enable gcc-toolset-10 'npm install -g context-mode'
```

--------------------------------

### Install context-mode as an agy plugin

Source: https://github.com/mksglu/context-mode/blob/main/docs/platform-support.md

Installs the context-mode plugin bundle from the GitHub repository, resolving the configs/antigravity-cli subpath and registering the plugin's components.

```bash
agy plugin install https://github.com/mksglu/context-mode/tree/main/configs/antigravity-cli
```

--------------------------------

### useEffect API Documentation Block

Source: https://github.com/mksglu/context-mode/blob/main/tests/fixtures/context7-react-docs.md

A comprehensive API reference for useEffect, including syntax, parameters, return value, rules, and caveats. The syntax is `useEffect(setup, dependencies?)`. The setup function runs after commit and may return a cleanup function. Dependencies are optional; omitted means re-run after every commit, empty array runs once, and array with values re-runs on changes using Object.is comparison. Returns undefined. Effects run only on client, not during server rendering.

```markdown
## useEffect Hook

### Description
A React Hook that synchronizes a component with an external system by running side effects after render commits.

### Syntax
```js
useEffect(setup, dependencies?)
```

### Parameters

#### setup (Function) - Required
The function containing your Effect's logic. May optionally return a cleanup function.
- Runs after component commits to DOM
- Cleanup function runs before re-runs with new dependencies or before component unmounts
- Receives no parameters

#### dependencies (Array) - Optional
List of all reactive values referenced in setup code (props, state, variables, functions declared in component body).
- If omitted: Effect re-runs after every commit
- If empty array `[]`: Effect runs once after initial mount
- If array with values `[dep1, dep2]`: Effect re-runs when dependencies change
- Compared using `Object.is()` comparison
- Must have constant number of items and be written inline

### Returns
`undefined`

### Basic Example
```js
import { useState, useEffect } from 'react';
import { createConnection } from './chat.js';

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();

    // Cleanup function
    return () => {
      connection.disconnect();
    };
  }, [serverUrl, roomId]);

  return <div>Chat Room</div>;
}
```

### Important Rules

#### Placement
- Call at top level of component or custom Hook
- Cannot call inside loops or conditions
- Extract to new component if conditional Effect needed

#### When to Use
- Synchronizing with external systems
- Do not use if not synchronizing with external system

#### Development Behavior
- Strict Mode runs extra setup+cleanup cycle before first real setup
- Stress-tests that cleanup mirrors setup logic
- Only in development, not in production

#### Performance Considerations
- Object/function dependencies can cause unnecessary re-runs
- Remove unnecessary object and function dependencies
- Extract state updates outside Effect when possible
- Extract non-reactive logic outside Effect

#### Rendering Behavior
- Effects run on client only, not during server rendering
- Non-interaction Effects: browser paints before Effect runs
- Interaction Effects: Effect may run before browser paints
- Use `useLayoutEffect` if visual Effect needs to run before paint
- Use `setTimeout` to defer work until after paint if needed

### Caveats
- Effects only run on client, not during server rendering
- Strict Mode adds extra setup+cleanup cycle in development
- Object/function dependencies may cause excessive re-runs
- Visual Effects may need `useLayoutEffect` instead
- Browser repaint timing depends on Effect cause (interaction vs non-interaction)
```

--------------------------------

### Install context-mode and agy plugin

Source: https://github.com/mksglu/context-mode/blob/main/README.md

Installs the context-mode global binary and registers the agy plugin which includes MCP, rule, skill, and hooks. Requires Node.js >= 22.5 and agy >= 1.0.7.

```bash
npm install -g context-mode                                                                  # the plugin's MCP server + hooks run the global binary
agy plugin install https://github.com/mksglu/context-mode/tree/main/configs/antigravity-cli  # registers MCP + rule + skill + hooks
```

--------------------------------

### Documentation search prompt

Source: https://github.com/mksglu/context-mode/blob/main/README.md

Use this prompt to fetch React useEffect docs, index them, and find the cleanup pattern with code examples. Expect 2 calls and 1.8 KB context. Run /context-mode:ctx-stats after to see the savings.

```text
Fetch the React useEffect docs, index them, and find the cleanup pattern
with code examples. Then run /context-mode:ctx-stats.
```

--------------------------------

### Install context-mode plugin into Copilot CLI

Source: https://github.com/mksglu/context-mode/blob/main/configs/copilot-cli/README.md

One-command installation of the context-mode MCP server and routing skill into GitHub Copilot CLI. Registers the MCP server, routing skill, and capture hooks without requiring a context-mode upgrade or agent call.

```sh
copilot plugin install mksglu/context-mode:configs/copilot-cli
```

--------------------------------

### Verify OMP plugin installation

Source: https://github.com/mksglu/context-mode/blob/main/README.md

Checks that the context-mode plugin is installed and enabled.

```bash
omp plugin list
omp plugin doctor
```

--------------------------------

### Install capture hooks from inside Copilot

Source: https://github.com/mksglu/context-mode/blob/main/configs/copilot-cli/README.md

Runs the context-mode ctx_upgrade tool from inside Copilot to install the capture hooks, ensuring the copilot-cli platform is detected via the live MCP client.

```sh
copilot -p "Use the context-mode ctx_upgrade tool to install context-mode's hooks." --allow-all
```

--------------------------------

### Install context-mode-ops skill via npx

Source: https://github.com/mksglu/context-mode/blob/main/CONTRIBUTING.md

Use this command to install the context-mode-ops skill from the repository's .claude/skills/context-mode-ops directory. The skill includes TDD enforcement, issue triage, PR review, and release automation.

```bash
npx skills add https://github.com/mksglu/context-mode/tree/main/.claude/skills/context-mode-ops
```

--------------------------------

### Copy routing instructions for JetBrains Copilot

Source: https://github.com/mksglu/context-mode/blob/main/README.md

Optionally copies routing instructions to enable full model awareness. Run after installing context-mode.

```bash
cp node_modules/context-mode/configs/jetbrains-copilot/copilot-instructions.md .github/copilot-instructions.md
```

--------------------------------

### Cursor local install on Windows (PowerShell)

Source: https://github.com/mksglu/context-mode/blob/main/README.md

Uses `robocopy` to copy the context-mode repository to the Cursor plugins folder because Cursor does not follow symlinks on Windows. Excludes unnecessary directories and files.

```powershell
git clone https://github.com/mksglu/context-mode.git
cd context-mode
robocopy . "$env:USERPROFILE\.cursor\plugins\local\context-mode" /MIR `
  /XD node_modules .git build web tests scripts .vscode `
  /XF *.log .gitignore *.bundle.mjs.map
```

--------------------------------

### Manually add context-mode to OMP plugins

Source: https://github.com/mksglu/context-mode/blob/main/README.md

Manual installation for OMP when the plugin install command is unavailable. Adds the package to the plugins directory.

```bash
cd ~/.omp/plugins
bun add context-mode    # or: npm install context-mode
```

--------------------------------

### Think in Code: ctx_execute example

Source: https://github.com/mksglu/context-mode/blob/main/web/context-saving.html

Illustrates the 'Think in Code' paradigm: instead of reading 47 files into context, use ctx_execute to run a JavaScript script that processes files and returns only the summary. The example shows a before/after comparison and the actual script call.

```javascript
// Before: 47 files × Read() = 700 KB in context
// After: 1 ctx_execute() = 3.6 KB in context
ctx_execute("javascript", `
  const fs = require('fs');
  const files = fs.readdirSync('src').filter(f => f.endsWith('.ts'));
  files.forEach(f => {
    const lines = fs.readFileSync('src/'+f,'utf8').split('\n').length;
    console.log(f + ': ' + lines + ' lines');
  });
`);
// 47 files analyzed. 15,314 LoC processed.
// Context used: 3.6 KB. Reduction: 200×.
```

--------------------------------

### Install context-mode globally via npm

Source: https://github.com/mksglu/context-mode/blob/main/README.md

Installs the context-mode package globally for manual fallback on Codex builds without plugin_hooks.

```bash
npm install -g context-mode

```

--------------------------------

### Install OpenClaw plugin locally

Source: https://github.com/mksglu/context-mode/blob/main/CONTRIBUTING.md

Installs the OpenClaw plugin, optionally with a custom state directory. The script uses $OPENCLAW_STATE_DIR (default /openclaw) and handles building, native dependency rebuild, extension registration, and gateway restart.

```bash
npm run install:openclaw
```

```bash
npm run install:openclaw -- /path/to/openclaw-state
```

--------------------------------

### Generated hook configuration (context-mode.json)

Source: https://github.com/mksglu/context-mode/blob/main/docs/jetbrains-copilot.md

This JSON is created by the setup command. It configures PreToolUse, PostToolUse, PreCompact, and SessionStart hooks to run context-mode commands.

```json
{
  "hooks": {
    "PreToolUse": [
      { "type": "command", "command": "context-mode hook jetbrains-copilot pretooluse" }
    ],
    "PostToolUse": [
      { "type": "command", "command": "context-mode hook jetbrains-copilot posttooluse" }
    ],
    "PreCompact": [
      { "type": "command", "command": "context-mode hook jetbrains-copilot precompact" }
    ],
    "SessionStart": [
      { "type": "command", "command": "context-mode hook jetbrains-copilot sessionstart" }
    ]
  }
}
```

--------------------------------

### Copy routing instructions for VS Code Copilot

Source: https://github.com/mksglu/context-mode/blob/main/README.md

Optionally copies routing instructions to enable full model awareness. Run after installing context-mode.

```bash
cp node_modules/context-mode/configs/vscode-copilot/copilot-instructions.md .github/copilot-instructions.md
```

--------------------------------

### Copy routing instructions for Gemini CLI

Source: https://github.com/mksglu/context-mode/blob/main/README.md

Optionally copies the GEMINI.md routing file into the project root for full model awareness. Requires the context-mode package to be installed.

```bash
cp node_modules/context-mode/configs/gemini-cli/GEMINI.md ./GEMINI.md
```

--------------------------------

### Cursor local install on macOS/Linux

Source: https://github.com/mksglu/context-mode/blob/main/README.md

Clones the repository and creates a symlink to the Cursor plugins folder. Re-run the `ln -s` line to pull updates.

```bash
git clone https://github.com/mksglu/context-mode.git
ln -s "$PWD/context-mode" ~/.cursor/plugins/local/context-mode
```

--------------------------------

### Analyze project structure and file sizes

Source: https://github.com/mksglu/context-mode/blob/main/skills/context-mode/references/patterns-shell.md

Run these commands to get an overview of the project structure, file type distribution, and largest files. Excludes common directories like node_modules, .git, dist, .next, and __pycache__. The output includes a summary prompt for reporting.

```shell
echo "=== Directory Structure ==="
find . -maxdepth 3 -type d \
  ! -path '*/node_modules/*' \
  ! -path '*/.git/*' \
  ! -path '*/dist/*' \
  ! -path '*/.next/*' \
  ! -path '*/__pycache__/*' \
  | sort

echo ""
echo "=== File Type Distribution ==="
find . -type f \
  ! -path '*/node_modules/*' \
  ! -path '*/.git/*' \
  ! -path '*/dist/*' \
  | sed 's/.*\.//' | sort | uniq -c | sort -rn | head -20

echo ""
echo "=== Largest Files (top 20) ==="
find . -type f \
  ! -path '*/node_modules/*' \
  ! -path '*/.git/*' \
  -exec ls -la {} \; | sort -k5 -rn | head -20 | awk '{print $5, $9}'

echo ""
echo "=== Directory Sizes ==="
du -sh */ 2>/dev/null | sort -rh | head -15
```

--------------------------------

### Install context-mode plugin with npm

Source: https://github.com/mksglu/context-mode/blob/main/web/index.html

Install the context-mode MCP plugin globally using npm. The plugin runs entirely on your machine and is free under the Elastic License 2.0.

```bash
npm i -g context-mode
```

--------------------------------

### Import existing Claude Code setup into agy

Source: https://github.com/mksglu/context-mode/blob/main/docs/platform-support.md

Imports an existing Claude Code setup into agy, but note that the native context-mode agy bundle is the supported path for agy hooks.

```bash
agy plugin import claude
```

--------------------------------

### Add context-mode MCP server manually (alternative)

Source: https://github.com/mksglu/context-mode/blob/main/configs/copilot-cli/README.md

Alternative to the plugin install: adds the context-mode MCP server to Copilot CLI with the CONTEXT_MODE_PLATFORM environment variable set to copilot-cli.

```sh
copilot mcp add context-mode --env CONTEXT_MODE_PLATFORM=copilot-cli -- context-mode
```

--------------------------------

### Install build tools on Alpine Linux

Source: https://github.com/mksglu/context-mode/blob/main/README.md

Install build tools on Alpine Linux only if you pin an older version of better-sqlite3 that lacks musl prebuilt binaries. With the default ^12.6.2 dependency range, npm install works without build tools.

```bash
apk add build-base python3 py3-setuptools
npm install -g context-mode
```

--------------------------------

### Copy routing instructions for Zed

Source: https://github.com/mksglu/context-mode/blob/main/README.md

Copies the AGENTS.md routing file from the context-mode package to the project root. Required for manual Zed setup; Zed has no hook support.

```bash
cp node_modules/context-mode/configs/zed/AGENTS.md ./AGENTS.md
```

--------------------------------

### Install upstream skills with npx skills add

Source: https://github.com/mksglu/context-mode/blob/main/docs/UPSTREAM-CREDITS.md

Use this command to install the upstream skills into your local Claude Code. It adds the specified skills from the mattpocock/skills repository with the claude-code adapter and assumes yes to prompts.

```bash
npx skills add mattpocock/skills \
  -s tdd grill-me grill-with-docs diagnose improve-codebase-architecture \
  -a claude-code -y
```

--------------------------------

### Run diagnostic with ctx doctor

Source: https://github.com/mksglu/context-mode/blob/main/docs/adapters/kimi-code.md

Start a new Kimi session and type 'ctx doctor' to run the diagnostic.

```bash
kimi # start a new session
# Then type:
ctx doctor
```

--------------------------------

### Install OpenClaw plugin with custom state path

Source: https://github.com/mksglu/context-mode/blob/main/README.md

Use this command to specify a custom path for the OpenClaw state directory instead of the default /openclaw. Common locations: Docker /openclaw, local ~/.openclaw or wherever OPENCLAW_STATE_DIR is set.

```bash
npm run install:openclaw -- /path/to/openclaw-state
```

--------------------------------

### context-mode hook dispatcher command

Source: https://github.com/mksglu/context-mode/blob/main/docs/platform-support.md

Use this command to dispatch a hook event for a specified platform. The dispatcher resolves the hook script relative to the installed package and dynamically imports it, allowing stdin/stdout to flow naturally. It works from any directory and requires only a single global install.

```bash
context-mode hook <platform> <event>
```

--------------------------------

### Migrate getServerSideProps to App Router Server Component (pages directory)

Source: https://github.com/mksglu/context-mode/blob/main/tests/fixtures/context7-nextjs-docs.md

Shows the original pages directory implementation using getServerSideProps to fetch data and pass it as props to the component. This is the 'before' example for migration.

```javascript
// `pages` directory

export async function getServerSideProps() {
  const res = await fetch(`https://...`)
  const projects = await res.json()

  return { props: { projects } }
}

export default function Dashboard({ projects }) {
  return (
    <ul>
      {projects.map((project) => (
        <li key={project.id}>{project.name}</li>
      ))}
    </ul>
  )
}
```

--------------------------------

### useEffect External System Connection with Cleanup

Source: https://github.com/mksglu/context-mode/blob/main/tests/fixtures/context7-react-docs.md

Practical example of using useEffect to connect to an external chat system. The effect runs when serverUrl or roomId changes, and the cleanup function disconnects when dependencies change or the component unmounts. Demonstrates dependency array usage and proper cleanup.

```javascript
import { useState, useEffect } from 'react';
import { createConnection } from './chat.js';

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, [serverUrl, roomId]);
  // ...
}
```

--------------------------------

### initPromise pattern for synchronous register()

Source: https://github.com/mksglu/context-mode/blob/main/docs/adapters/openclaw.md

OpenClaw silently discards the return value of register(), so async setup must be wrapped in an initPromise that hooks await before handling events. This prevents hooks from being lost when register() is async.

```typescript
register(api): void {
  const initPromise = (async () => { /* async setup */ })();
  api.on("after_tool_call", async (e) => {
    await initPromise;
    // handle event
  });
}
```

--------------------------------

### Bad workflow: Read package-lock.json vs Good workflow: execute with JavaScript

Source: https://github.com/mksglu/context-mode/blob/main/skills/context-mode/references/anti-patterns.md

Shows a bad workflow of reading a 20,000-line package-lock.json file, and a good workflow using execute with JavaScript to find the installed version of lodash. The rule is to use execute for files over 200 lines when only specific data is needed.

```text
BAD workflow:
  1. Read tool: read 'package-lock.json' (20,000 lines)
  2. "What version of lodash is installed?"

GOOD workflow:
  1. execute with language: javascript
     code: |
       const lock = require('./package-lock.json');
       const find = (deps, name) => {
         if (deps[name]) return deps[name].version;
         for (const [, dep] of Object.entries(deps)) {
           if (dep.dependencies) {
             const v = find(dep.dependencies, name);
             if (v) return v;
           }
         }
       };
       console.log(`lodash: ${find(lock.dependencies, 'lodash') || 'not found'}`);
     summary_prompt: "Report the installed version of lodash"
```

--------------------------------

### Session continuity prompt

Source: https://github.com/mksglu/context-mode/blob/main/README.md

Use this prompt to test session continuity during context compaction. Start a multi-step task and after 20+ tool calls, type 'ctx stats' to see the session event count. When context compacts, the model continues from your last prompt with tasks, files, and decisions intact — no re-prompting needed.

```text
Start a multi-step task: "Create a REST API with Express — add routes, tests,
and error handling." After 20+ tool calls, type: ctx stats to see the session
event count. When context compacts, the model continues from your last prompt
with tasks, files, and decisions intact — no re-prompting needed.
```

--------------------------------

### Copy QWEN.md routing file for Qwen Code (project)

Source: https://github.com/mksglu/context-mode/blob/main/README.md

Copy the routing instructions file to the project root. Recommended for full routing awareness.

```bash
cp node_modules/context-mode/configs/qwen-code/QWEN.md ./QWEN.md
```

--------------------------------

### Run test suites and live benchmark

Source: https://github.com/mksglu/context-mode/blob/main/BENCHMARK.md

Commands to run individual test suites, all tests, and a live benchmark. The live benchmark requires a Context7 fixture.

```bash
# Run individual test suites
npm run test              # Executor tests
npm run test:store        # FTS5 BM25 store tests
npm run test:ecosystem    # Ecosystem benchmark

# Run all tests
npm run test:all

# Live benchmark (requires Context7 fixture)
npx tsx tests/live-benchmark.ts
```

--------------------------------

### Copy Kiro routing instructions

Source: https://github.com/mksglu/context-mode/blob/main/README.md

Copies the KIRO.md routing file into the current directory. Required because Kiro's agentSpawn (SessionStart) is not yet implemented.

```bash
cp node_modules/context-mode/configs/kiro/KIRO.md ./KIRO.md
```

--------------------------------

### Copy QWEN.md routing file for Qwen Code (global)

Source: https://github.com/mksglu/context-mode/blob/main/README.md

Copy the routing instructions file to ~/.qwen/QWEN.md for global use.

```bash
cp node_modules/context-mode/configs/qwen-code/QWEN.md ~/.qwen/QWEN.md
```

--------------------------------

### Investigate disk usage and cleanup targets

Source: https://github.com/mksglu/context-mode/blob/main/skills/context-mode/references/patterns-shell.md

Run these commands to report total project size, largest contributors, and recommend cleanup targets. Checks top-level directory sizes, node_modules size and largest packages, build artifacts (dist, build, .next, out, .cache), and git objects size. Includes a summary prompt for reporting.

```shell
echo "=== Top-Level Disk Usage ==="
du -sh */ 2>/dev/null | sort -rh

echo ""
echo "=== node_modules Size ==="
if [ -d "node_modules" ]; then
  du -sh node_modules
  echo ""
  echo "=== Largest node_modules packages ==="
  du -sh node_modules/*/ 2>/dev/null | sort -rh | head -20
else
  echo "No node_modules directory"
fi

echo ""
echo "=== Build Artifacts ==="
for dir in dist build .next out .cache; do
  if [ -d "$dir" ]; then
    echo "  $dir: $(du -sh "$dir" | cut -f1)"
  fi
done

echo ""
echo "=== Git Objects Size ==="
if [ -d ".git" ]; then
  du -sh .git
fi
```

--------------------------------

### Upgrade plugin with ctx-upgrade

Source: https://github.com/mksglu/context-mode/blob/main/CONTRIBUTING.md

Run the ctx-upgrade command to upgrade the plugin.

```bash
/context-mode:ctx-upgrade
```

--------------------------------

### Run all tests with npm test

Source: https://github.com/mksglu/context-mode/blob/main/CONTRIBUTING.md

Run the full test suite.

```bash
npm test
```

--------------------------------

### Copy AGENTS.md routing file for Kimi Code (project)

Source: https://github.com/mksglu/context-mode/blob/main/README.md

Copy the routing instructions file to the project root. Optional but recommended for model awareness.

```bash
cp "$(npm root -g)/context-mode/configs/codex/AGENTS.md" ./AGENTS.md
```

--------------------------------

### Create .github/hooks/context-mode.json for JetBrains Copilot

Source: https://github.com/mksglu/context-mode/blob/main/README.md

Configures PreToolUse, PostToolUse, and SessionStart hooks for context-mode in JetBrains Copilot.

```json
{
  "hooks": {
    "PreToolUse": [
      { "type": "command", "command": "context-mode hook jetbrains-copilot pretooluse" }
    ],
    "PostToolUse": [
      { "type": "command", "command": "context-mode hook jetbrains-copilot posttooluse" }
    ],
    "SessionStart": [
      { "type": "command", "command": "context-mode hook jetbrains-copilot sessionstart" }
    ]
  }
}
```

--------------------------------

### Add context-mode package to Pi settings

Source: https://github.com/mksglu/context-mode/blob/main/README.md

Alternative manual configuration for Pi: adds the context-mode package to the agent settings file.

```json
{
  "packages": ["npm:context-mode"]
}
```

--------------------------------

### Create .vscode/mcp.json for VS Code Copilot

Source: https://github.com/mksglu/context-mode/blob/main/README.md

Registers the context-mode MCP server in VS Code. Create this file in your project root.

```json
{
  "servers": {
    "context-mode": {
      "command": "context-mode"
    }
  }
}
```

--------------------------------

### JavaScript: Serialize objects with JSON.stringify

Source: https://github.com/mksglu/context-mode/blob/main/skills/context-mode/references/anti-patterns.md

Demonstrates the anti-pattern of printing objects without serialization, resulting in [object Object], and the correct approach using JSON.stringify with indentation. The good example shows the expected output with dependencies listed.

```javascript
// BAD — prints [object Object]:
const pkg = require('./package.json');
console.log(pkg.dependencies);
// Output: [object Object]

// GOOD — serialize properly:
const pkg = require('./package.json');
console.log(JSON.stringify(pkg.dependencies, null, 2));
// Output: { "react": "^18.2.0", "next": "^14.0.0", ... }
```

--------------------------------

### Configure permissions in .claude/settings.json

Source: https://github.com/mksglu/context-mode/blob/main/README.md

Add this JSON to your project's .claude/settings.json or ~/.claude/settings.json to enforce permission rules. The pattern is Tool(what to match) where * means anything. Commands chained with &&, ;, or | are split and each part is checked separately. deny always wins over allow, and more specific project-level rules override global ones.

```json
{
  "permissions": {
    "deny": [
      "Bash(sudo *)",
      "Bash(rm -rf /*)",
      "Read(.env)",
      "Read(**/.env*)"
    ],
    "allow": [
      "Bash(git:*)",
      "Bash(npm:*)"
    ]
  }
}
```

--------------------------------

### Manual hooks.json for context-mode

Source: https://github.com/mksglu/context-mode/blob/main/README.md

Creates $CODEX_HOME/hooks.json with hook definitions for PreToolUse, PostToolUse, SessionStart, PreCompact, UserPromptSubmit, and Stop. PreToolUse enforces deny/block routing; PostToolUse captures session events; PreCompact builds resume snapshot; SessionStart restores state; UserPromptSubmit captures decisions; Stop records turn-end state.

```json
{
  "hooks": {
   "PreToolUse": [{ "matcher": "local_shell|shell|shell_command|exec_command|Bash|Shell|apply_patch|Edit|Write|grep_files|ctx_execute|ctx_execute_file|ctx_batch_execute|ctx_fetch_and_index|ctx_search|ctx_index|mcp__", "hooks": [{ "type": "command", "command": "context-mode hook codex pretooluse" }] }],
    "PostToolUse": [{ "hooks": [{ "type": "command", "command": "context-mode hook codex posttooluse" }] }],
    "SessionStart": [{ "hooks": [{ "type": "command", "command": "context-mode hook codex sessionstart" }] }],
    "PreCompact": [{ "hooks": [{ "type": "command", "command": "context-mode hook codex precompact" }] }],
    "UserPromptSubmit": [{ "hooks": [{ "type": "command", "command": "context-mode hook codex userpromptsubmit" }] }],
    "Stop": [{ "hooks": [{ "type": "command", "command": "context-mode hook codex stop" }] }]
  }
}

```

--------------------------------

### Capture build errors only with npm run build

Source: https://github.com/mksglu/context-mode/blob/main/skills/context-mode/references/patterns-shell.md

Runs npm build, captures output to a temp file, and reports exit code, errors, warnings, and output size. Uses PIPESTATUS to get the build's exit code. Configured with summary_prompt and timeout_ms.

```shell
npm run build 2>&1 | tee /tmp/build-output.txt
EXIT_CODE=${PIPESTATUS[0]}

echo "=== Build Result ==="
echo "Exit code: $EXIT_CODE"

if [ "$EXIT_CODE" -ne 0 ]; then
  echo ""
  echo "=== Errors ==="
  grep -iE '(error|failed|FAIL)' /tmp/build-output.txt | head -50
  echo ""
  echo "=== Warnings ==="
  grep -iE '(warning|warn)' /tmp/build-output.txt | head -20
else
  echo "Build succeeded."
  echo ""
  echo "=== Warnings (if any) ==="
  grep -iE '(warning|warn)' /tmp/build-output.txt | head -10
fi

echo ""
echo "=== Output Size ==="
wc -l < /tmp/build-output.txt | xargs -I{} echo "{} total lines of output"
rm -f /tmp/build-output.txt
```

--------------------------------

### Copy AGENTS.md routing file for Kimi Code (global)

Source: https://github.com/mksglu/context-mode/blob/main/README.md

Copy the routing instructions file to ~/.kimi-code/AGENTS.md for global use.

```bash
CM_ROOT="$(npm root -g)/context-mode"; cp "$CM_ROOT/configs/codex/AGENTS.md" ~/.kimi-code/AGENTS.md
```

--------------------------------

### Responsive grid columns with breakpoint variants

Source: https://github.com/mksglu/context-mode/blob/main/tests/fixtures/context7-tailwind-docs.md

Use Tailwind's responsive variants (md, lg) to apply different grid column counts at specific viewport breakpoints. This example renders a 3-column grid on mobile, 4 columns on medium screens, and 6 columns on large screens.

```html
<div class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
  <!-- ... -->
</div>
```

--------------------------------

### View session stats with ctx-stats

Source: https://github.com/mksglu/context-mode/blob/main/CONTRIBUTING.md

Run the ctx-stats command to view session statistics.

```bash
/context-mode:ctx-stats
```

--------------------------------

### Initialize Supabase Client with Auth Context in Deno Edge Function

Source: https://github.com/mksglu/context-mode/blob/main/tests/fixtures/context7-supabase-edge.md

Creates a Supabase client inside a Deno.serve handler, forwarding the incoming Authorization header. Uses SUPABASE_URL and SUPABASE_ANON_KEY environment variables.

```typescript
import { createClient } from 'npm:@supabase/supabase-js@2'

Deno.serve(async (req: Request) => {
  const supabaseClient = createClient(
    Deno.env.get('SUPABASE_URL') ?? '',
    Deno.env.get('SUPABASE_ANON_KEY') ?? '',
    { global: { headers: { Authorization: req.headers.get('Authorization')! } } }
  );
})
```

--------------------------------

### Mask position grid layout with Tailwind CSS

Source: https://github.com/mksglu/context-mode/blob/main/tests/fixtures/context7-tailwind-docs.md

Demonstrates a complete grid layout showcasing all mask position utilities (top-left, top, top-right, left, center, right, bottom-left, bottom, bottom-right). Uses a 3-column grid with responsive design and displays each mask position variant with labeled examples.

```jsx
<div className="grid grid-cols-3 gap-y-8 p-8 text-center font-mono text-xs font-medium text-gray-500 max-sm:items-end max-sm:justify-between max-sm:px-2 dark:text-gray-400">
  <div className="flex flex-col items-center">
    <p className="mb-3">mask-top-left</p>
    <Stripes className="aspect-[1.333] w-32 rounded-lg max-sm:w-24" border>
      <div className="h-full rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-70% mask-radial-to-70% bg-cover bg-center mask-size-[50%_66%] mask-top-left mask-no-repeat"></div>
    </Stripes>
  </div>
</div>
```

--------------------------------

### TypeScript compilation check with npx tsc --noEmit

Source: https://github.com/mksglu/context-mode/blob/main/skills/context-mode/references/patterns-shell.md

Runs TypeScript type checking without emitting files, captures output, and reports total errors, error codes, affected files, and first 30 errors. Uses PIPESTATUS to get the tsc exit code. Configured with summary_prompt and timeout_ms.

```shell
npx tsc --noEmit 2>&1 | tee /tmp/tsc-output.txt
EXIT_CODE=${PIPESTATUS[0]}

echo "=== TypeScript Check ==="
echo "Exit code: $EXIT_CODE"

TOTAL_ERRORS=$(grep -c 'error TS' /tmp/tsc-output.txt 2>/dev/null || echo 0)
echo "Total errors: $TOTAL_ERRORS"

if [ "$TOTAL_ERRORS" -gt 0 ]; then
  echo ""
  echo "=== Errors by Code ==="
  grep -oP 'error TS\d+' /tmp/tsc-output.txt | sort | uniq -c | sort -rn | head -20

  echo ""
  echo "=== Errors by File ==="
  grep 'error TS' /tmp/tsc-output.txt | cut -d'(' -f1 | sort | uniq -c | sort -rn | head -20

  echo ""
  echo "=== First 30 Errors ==="
  grep 'error TS' /tmp/tsc-output.txt | head -30
fi

rm -f /tmp/tsc-output.txt
```

--------------------------------

### Configure Gemini CLI settings for context-mode

Source: https://github.com/mksglu/context-mode/blob/main/README.md

Adds MCP server and all four hooks to ~/.gemini/settings.json. Registers the context-mode MCP server and hooks for BeforeTool, AfterTool, PreCompress, and SessionStart.

```json
{
  "mcpServers": {
    "context-mode": {
      "command": "context-mode"
    }
  },
  "hooks": {
    "BeforeTool": [
      {
        "matcher": "run_shell_command|read_file|read_many_files|grep_search|search_file_content|web_fetch|activate_skill|mcp__plugin_context-mode|mcp__context-mode|mcp__(?!.*context-mode)",
        "hooks": [{ "type": "command", "command": "context-mode hook gemini-cli beforetool" }]
      }
    ],
    "AfterTool": [
      {
        "matcher": "",
        "hooks": [{ "type": "command", "command": "context-mode hook gemini-cli aftertool" }]
      }
    ],
    "PreCompress": [
      {
        "matcher": "",
        "hooks": [{ "type": "command", "command": "context-mode hook gemini-cli precompress" }]
      }
    ],
    "SessionStart": [
      {
        "matcher": "",
        "hooks": [{ "type": "command", "command": "context-mode hook gemini-cli sessionstart" }]
      }
    ]
  }
}
```

--------------------------------

### Create .github/hooks/context-mode.json for VS Code Copilot

Source: https://github.com/mksglu/context-mode/blob/main/README.md

Configures PreToolUse, PostToolUse, and SessionStart hooks for context-mode in VS Code Copilot.

```json
{
  "hooks": {
    "PreToolUse": [
      { "type": "command", "command": "context-mode hook vscode-copilot pretooluse" }
    ],
    "PostToolUse": [
      { "type": "command", "command": "context-mode hook vscode-copilot posttooluse" }
    ],
    "SessionStart": [
      { "type": "command", "command": "context-mode hook vscode-copilot sessionstart" }
    ]
  }
}
```

--------------------------------

### Deno Unit Test for Supabase Edge Functions

Source: https://github.com/mksglu/context-mode/blob/main/tests/fixtures/context7-supabase-edge.md

Initializes a Supabase client with environment variables, tests client creation and database connectivity, and invokes the 'hello-world' Edge Function to assert its response. Requires SUPABASE_URL and SUPABASE_PUBLISHABLE_KEY environment variables.

```typescript
import { assert, assertEquals } from 'jsr:@std/assert@1'
import { createClient, SupabaseClient } from 'npm:@supabase/supabase-js@2'
import 'jsr:@std/dotenv/load'

const supabaseUrl = Deno.env.get('SUPABASE_URL') ?? ''
const supabaseKey = Deno.env.get('SUPABASE_PUBLISHABLE_KEY') ?? ''
const options = {
  auth: {
    autoRefreshToken: false,
    persistSession: false,
    detectSessionInUrl: false,
  },
}

const testClientCreation = async () => {
  var client: SupabaseClient = createClient(supabaseUrl, supabaseKey, options)
  if (!supabaseUrl) throw new Error('supabaseUrl is required.')
  if (!supabaseKey) throw new Error('supabaseKey is required.')
  const { data: table_data, error: table_error } = await client.from('my_table').select('*').limit(1)
  if (table_error) throw new Error('Invalid Supabase client: ' + table_error.message)
  assert(table_data, 'Data should be returned from the query.')
}

const testHelloWorld = async () => {
  var client: SupabaseClient = createClient(supabaseUrl, supabaseKey, options)
  const { data: func_data, error: func_error } = await client.functions.invoke('hello-world', { body: { name: 'bar' } })
  if (func_error) throw new Error('Invalid response: ' + func_error.message)
  console.log(JSON.stringify(func_data, null, 2))
  assertEquals(func_data.message, 'Hello bar!')
}

Deno.test('Client Creation Test', testClientCreation)
Deno.test('Hello-world Function Test', testHelloWorld)
```

--------------------------------

### Copy routing rules file for Cursor

Source: https://github.com/mksglu/context-mode/blob/main/README.md

Creates the .cursor/rules directory and copies the context-mode.mdc routing rules file. Required because Cursor lacks a SessionStart hook, so the model needs a rules file for routing awareness.

```bash
mkdir -p .cursor/rules
cp node_modules/context-mode/configs/cursor/context-mode.mdc .cursor/rules/context-mode.mdc
```

--------------------------------

### Add hooks for Qwen Code settings.json

Source: https://github.com/mksglu/context-mode/blob/main/README.md

Add hooks for PreToolUse, PostToolUse, SessionStart, PreCompact, and UserPromptSubmit events to ~/.qwen/settings.json. The PreToolUse matcher includes tool patterns and MCP tool prefixes.

```json
{
  "hooks": {
    "PreToolUse": [{ "matcher": "run_shell_command|read_file|read_many_files|grep_search|web_fetch|agent|mcp__plugin_context-mode_context-mode__ctx_execute|mcp__plugin_context-mode_context-mode__ctx_execute_file|mcp__plugin_context-mode_context-mode__ctx_batch_execute|mcp__(?!.*context-mode)", "hooks": [{ "type": "command", "command": "context-mode hook qwen-code pretooluse" }] }],
    "PostToolUse": [{ "matcher": "", "hooks": [{ "type": "command", "command": "context-mode hook qwen-code posttooluse" }] }],
    "SessionStart": [{ "matcher": "", "hooks": [{ "type": "command", "command": "context-mode hook qwen-code sessionstart" }] }],
    "PreCompact": [{ "matcher": "", "hooks": [{ "type": "command", "command": "context-mode hook qwen-code precompact" }] }],
    "UserPromptSubmit": [{ "matcher": "", "hooks": [{ "type": "command", "command": "context-mode hook qwen-code userpromptsubmit" }] }]
  }
}
```

--------------------------------

### Copy routing instructions for OMP

Source: https://github.com/mksglu/context-mode/blob/main/README.md

Copies the SYSTEM.md routing file from the context-mode package to OMP's agent directory.

```bash
cp node_modules/context-mode/configs/omp/SYSTEM.md ~/.omp/agent/SYSTEM.md
```

--------------------------------

### Qwen Code Hook Commands

Source: https://github.com/mksglu/context-mode/blob/main/docs/platform-support.md

Commands to set up context-mode hooks for Qwen Code, covering pretooluse, posttooluse, sessionstart, precompact, and userpromptsubmit events.

```bash
context-mode hook qwen-code pretooluse
context-mode hook qwen-code posttooluse
context-mode hook qwen-code sessionstart
context-mode hook qwen-code precompact
context-mode hook qwen-code userpromptsubmit
```

--------------------------------

### Add context-mode plugin marketplace

Source: https://github.com/mksglu/context-mode/blob/main/README.md

Adds the mksglu/context-mode plugin marketplace to Codex.

```bash
codex plugin marketplace add mksglu/context-mode

```

--------------------------------

### Markdown checklist for upgrade results

Source: https://github.com/mksglu/context-mode/blob/main/skills/ctx-upgrade/SKILL.md

Use this markdown checklist to display the upgrade results. Replace version numbers with actual values and use [x] for success, [ ] for failure.

```markdown
## context-mode upgrade
- [x] Pulled latest from GitHub
- [x] Built and installed v1.0.39
- [x] Hooks configured
- [x] Doctor: all checks PASS
```

--------------------------------

### Kimi Code Hook Commands

Source: https://github.com/mksglu/context-mode/blob/main/docs/platform-support.md

Commands to set up context-mode hooks for Kimi Code, covering pretooluse, posttooluse, precompact, sessionstart, userpromptsubmit, and stop events.

```bash
context-mode hook kimi pretooluse
context-mode hook kimi posttooluse
context-mode hook kimi precompact
context-mode hook kimi sessionstart
context-mode hook kimi userpromptsubmit
context-mode hook kimi stop
```

--------------------------------

### Workflow B: Snapshot to File and Execute File

Source: https://github.com/mksglu/context-mode/blob/main/skills/context-mode/SKILL.md

Saves a Playwright snapshot to a file and processes it in a sandbox with `ctx_execute_file`. Total context cost is ~250B instead of 135K tokens.

```text
Step 1: browser_snapshot(filename: "/tmp/playwright-snapshot.md")
        → saves to file, returns ~50B confirmation

Step 2: ctx_execute_file(path: "/tmp/playwright-snapshot.md", language: "javascript", code: "
          const links = [...FILE_CONTENT.matchAll(/- link \"([^\"]+)\"/g)].map(m => m[1]);
          const buttons = [...FILE_CONTENT.matchAll(/- button \"([^\"]+)\"/g)].map(m => m[1]);
          const inputs = [...FILE_CONTENT.matchAll(/- textbox|- checkbox|- radio/g)];
          console.log('Links:', links.length, '| Buttons:', buttons.length, '| Inputs:', inputs.length);
          console.log('Navigation:', links.slice(0, 10).join(', '));
        ")
        → processes in sandbox, returns ~200B summary
```

--------------------------------

### See background steps with Ctrl+O

Source: https://github.com/mksglu/context-mode/blob/main/CONTRIBUTING.md

Press Ctrl+O to view background steps.

```bash
Ctrl+O
```

--------------------------------

### Verify Gemini CLI MCP server connection

Source: https://github.com/mksglu/context-mode/blob/main/README.md

Lists MCP servers to confirm context-mode is connected. Expect to see 'context-mode: ... - Connected'.

```bash
/mcp list
```

--------------------------------

### Copy routing rules file for OpenCode

Source: https://github.com/mksglu/context-mode/blob/main/README.md

Copies the AGENTS.md routing rules file. Optional but recommended; without it, hooks still enforce routing but the model won't know why a command was denied.

```bash
cp node_modules/context-mode/configs/opencode/AGENTS.md AGENTS.md
```

--------------------------------

### Verify local dev mode output

Source: https://github.com/mksglu/context-mode/blob/main/CONTRIBUTING.md

Expected output from /context-mode:ctx-doctor showing the local dev version warning.

```text
npm (MCP): WARN — local v0.9.23-dev, latest v0.9.23
```
Tokens:
Raw