Configure HUD display options (layout, presets, display elements)
Configures and displays a customizable heads-up status line for Claude Code with layout presets and real-time metrics.
npx claudepluginhub mazenyassergithub/oh-my-claudecodeThis skill inherits all available tools. When active, it can use any tool Claude has access to.
Configure the OMC HUD (Heads-Up Display) for the statusline.
| Command | Description |
|---|---|
/hud | Show current HUD status (auto-setup if needed) |
/hud setup | Install/repair HUD statusline |
/hud minimal | Switch to minimal display |
/hud focused | Switch to focused display (default) |
/hud full | Switch to full display |
/hud status | Show detailed HUD status |
When you run /hud or /hud setup, the system will automatically:
~/.claude/hud/omc-hud.mjs existsstatusLine is configured in ~/.claude/settings.jsonIMPORTANT: If the argument is setup OR if the HUD script doesn't exist at ~/.claude/hud/omc-hud.mjs, you MUST create the HUD files directly using the instructions below.
Step 1: Check if setup is needed:
ls ~/.claude/hud/omc-hud.mjs 2>/dev/null && echo "EXISTS" || echo "MISSING"
Step 2: Check if the plugin is built (CRITICAL - common issue!):
# Find the latest version and check if dist/hud/index.js exists
PLUGIN_VERSION=$(ls ~/.claude/plugins/cache/omc/oh-my-claudecode/ 2>/dev/null | sort -V | tail -1)
if [ -n "$PLUGIN_VERSION" ]; then
ls ~/.claude/plugins/cache/omc/oh-my-claudecode/$PLUGIN_VERSION/dist/hud/index.js 2>/dev/null && echo "BUILT" || echo "NOT_BUILT"
fi
If NOT_BUILT, the plugin needs to be compiled. Run:
cd ~/.claude/plugins/cache/omc/oh-my-claudecode/$PLUGIN_VERSION && npm install
This will install dependencies and build the TypeScript code automatically (via the prepare script).
Step 3: If omc-hud.mjs is MISSING or argument is setup, create the HUD directory and script:
First, create the directory:
mkdir -p ~/.claude/hud
Then, use the Write tool to create ~/.claude/hud/omc-hud.mjs with this exact content:
#!/usr/bin/env node
/**
* OMC HUD - Statusline Script
* Wrapper that imports from plugin cache or development paths
*/
import { existsSync, readdirSync } from "node:fs";
import { homedir } from "node:os";
import { join } from "node:path";
async function main() {
const home = homedir();
// 1. Try plugin cache first (marketplace: omc, plugin: oh-my-claudecode)
const pluginCacheBase = join(home, ".claude/plugins/cache/omc/oh-my-claudecode");
if (existsSync(pluginCacheBase)) {
try {
const versions = readdirSync(pluginCacheBase);
if (versions.length > 0) {
const latestVersion = versions.sort().reverse()[0];
const pluginPath = join(pluginCacheBase, latestVersion, "dist/hud/index.js");
if (existsSync(pluginPath)) {
await import(pluginPath);
return;
}
}
} catch { /* continue */ }
}
// 2. Development paths
const devPaths = [
join(home, "Workspace/oh-my-claude-sisyphus/dist/hud/index.js"),
join(home, "workspace/oh-my-claude-sisyphus/dist/hud/index.js"),
join(home, "Workspace/oh-my-claudecode/dist/hud/index.js"),
join(home, "workspace/oh-my-claudecode/dist/hud/index.js"),
];
for (const devPath of devPaths) {
if (existsSync(devPath)) {
try {
await import(devPath);
return;
} catch { /* continue */ }
}
}
// 3. Fallback
console.log("[OMC] run /omc-setup to install properly");
}
main();
Step 3: Make it executable:
chmod +x ~/.claude/hud/omc-hud.mjs
Step 4: Update settings.json to use the HUD:
Read ~/.claude/settings.json, then update/add the statusLine field:
{
"statusLine": {
"type": "command",
"command": "node ~/.claude/hud/omc-hud.mjs"
}
}
Use the Edit tool to add/update this field while preserving other settings.
Step 5: Clean up old HUD scripts (if any):
rm -f ~/.claude/hud/sisyphus-hud.mjs 2>/dev/null
Step 6: Tell the user to restart Claude Code for changes to take effect.
Shows only the essentials:
[OMC] ralph | ultrawork | todos:2/5
Shows all relevant elements:
[OMC] ralph:3/10 | US-002 | ultrawork skill:planner | ctx:67% | agents:2 | bg:3/5 | todos:2/5
Shows everything including multi-line agent details:
[OMC] ralph:3/10 | US-002 (2/5) | ultrawork | ctx:[████░░]67% | agents:3 | bg:3/5 | todos:2/5
├─ O architect 2m analyzing architecture patterns...
├─ e explore 45s searching for test files
└─ s executor 1m implementing validation logic
When agents are running, the HUD shows detailed information on separate lines:
├─, └─) show visual hierarchy| Element | Description |
|---|---|
[OMC] | Mode identifier |
ralph:3/10 | Ralph loop iteration/max |
US-002 | Current PRD story ID |
ultrawork | Active mode badge |
skill:name | Last activated skill (cyan) |
ctx:67% | Context window usage |
agents:2 | Running subagent count |
bg:3/5 | Background task slots |
todos:2/5 | Todo completion |
HUD config is stored at: ~/.claude/.omc/hud-config.json
You can manually edit the config file:
{
"preset": "focused",
"elements": {
"omcLabel": true,
"ralph": true,
"prdStory": true,
"activeSkills": true,
"lastSkill": true,
"contextBar": true,
"agents": true,
"backgroundTasks": true,
"todos": true
},
"thresholds": {
"contextWarning": 70,
"contextCritical": 85,
"ralphWarning": 7
}
}
If the HUD is not showing:
/hud setup to auto-install and configure/doctor for full diagnosticsManual verification:
~/.claude/hud/omc-hud.mjs~/.claude/settings.json should have statusLine configuredThe HUD updates automatically every ~300ms during active sessions.
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.