
- Installs
- 1.1K
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/yeachan-heo/oh-my-claudecode --skill hud- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads hud automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
HUD Skill
Configure the OMC HUD (Heads-Up Display) for the statusline.
Note: All ~/.claude/... paths in this guide respect CLAUDE_CONFIG_DIR when that environment variable is set.
Quick Commands
| Command | Description |
|---|---|
/oh-my-claudecode:hud | Show current HUD status (auto-setup if needed) |
/oh-my-claudecode:hud setup | Install/repair HUD statusline |
/oh-my-claudecode:hud minimal | Switch to minimal display |
/oh-my-claudecode:hud focused | Switch to focused display (default) |
/oh-my-claudecode:hud full | Switch to full display |
/oh-my-claudecode:hud status | Show detailed HUD status |
Auto-Setup
When you run /oh-my-claudecode:hud or /oh-my-claudecode:hud setup, the system will automatically:
- Check if
~/.claude/hud/omc-hud.mjsexists - Check if
statusLineis configured in~/.claude/settings.json - If missing, create the HUD wrapper script and configure settings
- Report status and prompt to restart Claude Code if changes were made
IMPORTANT: 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.
Setup Instructions (Run These Commands)
Step 1: Check if setup is needed:
node -e "const p=require('path'),f=require('fs'),d=process.env.CLAUDE_CONFIG_DIR||p.join(require('os').homedir(),'.claude');console.log(f.existsSync(p.join(d,'hud','omc-hud.mjs'))?'EXISTS':'MISSING')"
Step 2: Verify the plugin is installed:
node -e "const p=require('path'),f=require('fs'),d=process.env.CLAUDE_CONFIG_DIR||p.join(require('os').homedir(),'.claude'),b=p.join(d,'plugins','cache','omc','oh-my-claudecode');try{const v=f.readdirSync(b).filter(x=>/^\d/.test(x)).sort((a,c)=>a.localeCompare(c,void 0,{numeric:true}));if(v.length===0){console.log('Plugin not installed - run: /plugin install oh-my-claudecode');process.exit()}const l=v[v.length-1],h=p.join(b,l,'dist','hud','index.js');console.log('Version:',l);console.log(f.existsSync(h)?'READY':'NOT_FOUND - try reinstalling: /plugin install oh-my-claudecode')}catch{console.log('Plugin not installed - run: /plugin install oh-my-claudecode')}"
Step 3: If omc-hud.mjs is MISSING or argument is setup, install the HUD wrapper and its dependency from the canonical template:
HUD_DIR="${CLAUDE_CONFIG_DIR:-$HOME/.claude}/hud"
mkdir -p "$HUD_DIR/lib"
cp "${CLAUDE_PLUGIN_ROOT}/scripts/lib/hud-wrapper-template.txt" "$HUD_DIR/omc-hud.mjs"
cp "${CLAUDE_PLUGIN_ROOT}/scripts/lib/config-dir.mjs" "$HUD_DIR/lib/config-dir.mjs"
IMPORTANT: Always copy from the canonical template at scripts/lib/hud-wrapper-template.txt. Do NOT write the wrapper content inline — the template is the single source of truth and is guarded by drift tests (src/__tests__/hud-wrapper-template-sync.test.ts, src/__tests__/paths-consistency.test.ts).
Step 4: Make it executable (Unix only, skip on Windows):
node -e "if(process.platform==='win32'){console.log('Skipped (Windows)')}else{require('fs').chmodSync(require('path').join(process.env.CLAUDE_CONFIG_DIR||require('path').join(require('os').homedir(),'.claude'),'hud','omc-hud.mjs'),0o755);console.log('Done')}"
Step 5: Update settings.json to use the HUD:
Read ${CLAUDE_CONFIG_DIR:-~/.claude}/settings.json, then update/add the statusLine field.
IMPORTANT: Do not use ~ in the command. On Unix, use $HOME to keep the path portable across machines. On Windows, use an absolute path because Windows does not expand ~ in shell commands.
If you are on Windows, first determine the correct path:
node -e "const p=require('path').join(require('os').homedir(),'.claude','hud','omc-hud.mjs').split(require('path').sep).join('/');console.log(JSON.stringify(p))"
IMPORTANT: The command path MUST use forward slashes on all platforms. Claude Code executes statusLine commands via bash, which interprets backslashes as escape characters and breaks the path.
Then set the statusLine field. On Unix it should stay portable and look like:
{
"statusLine": {
"type": "command",
"command": "node ${CLAUDE_CONFIG_DIR:-$HOME/.claude}/hud/omc-hud.mjs"
}
}
On Windows the path uses forward slashes (not backslashes):
{
"statusLine": {
"type": "command",
"command": "node C:/Users/username/.claude/hud/omc-hud.mjs"
}
}
Use the Edit tool to add/update this field while preserving other settings.
Step 6: Clean up old HUD scripts (if any):
node -e "const p=require('path'),f=require('fs'),d=process.env.CLAUDE_CONFIG_DIR||p.join(require('os').homedir(),'.claude'),t=p.join(d,'hud','omc-hud.js');try{if(f.existsSync(t)){f.unlinkSync(t);console.log('Removed legacy omc-hud.js')}else{console.log('No legacy script found')}}catch{}"
Step 7: Tell the user to restart Claude Code for changes to take effect.
Display Presets
Minimal
Shows only the essentials:
[OMC] ralph | todos:2/5
Focused (Default)
Shows all relevant elements:
[OMC] branch:main | ralph:3/10 | US-002 | skill:planner | ctx:67% | agents:2 | bg:3/5 | todos:2/5
Full
Shows everything including multi-line agent details:
[OMC] repo:oh-my-claudecode branch:main | ralph:3/10 | US-002 (2/5) | 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
Multi-Line Agent Display
When agents are running, the HUD shows detailed information on separate lines:
- Tree characters (
├─,└─) show visual hierarchy - Agent code (O, e, s) indicates agent type with model tier color
- Duration shows how long each agent has been running
- Description shows what each agent is doing (up to 45 chars)
Display Elements
| Element | Description |
|---|---|
[OMC] | Mode identifier |
repo:name | Git repository name (cyan) |
branch:name | Git branch name (cyan) |
ralph:3/10 | Ralph loop iteration/max |
US-002 | Current PRD story ID |
skill:name | Last activated skill (cyan) |
effort:high | Effort level from Claude Code (dim low, cyan medium, yellow high, magenta xhigh, bold magenta max) |
ctx:67% | Context window usage |
agents:2 | Running subagent count |
bg:3/5 | Background task slots |
todos:2/5 | Todo completion |
Color Coding
- Green: Normal/healthy
- Yellow: Warning (context >70%, ralph >7)
- Red: Critical (context >85%, ralph at max)
Configuration Location
HUD config is stored in ~/.claude/settings.json under the omcHud key (or your custom config directory if CLAUDE_CONFIG_DIR is set).
Legacy config location (deprecated): ~/.claude/.omc/hud-config.json
Manual Configuration
You can manually edit the config file. Each option can be set individually - any unset values will use defaults.
{
"preset": "focused",
"elements": {
"omcLabel": true,
"updateNotification": true,
"ralph": true,
"autopilot": true,
"prdStory": true,
"activeSkills": true,
"lastSkill": true,
"contextBar": true,
"agents": true,
"agentsFormat": "multiline",
"backgroundTasks": true,
"todos": true,
"thinking": true,
"thinkingFormat": "text",
"effort": true,
"permissionStatus": false,
"apiKeySource": false,
"profile": true,
"promptTime": true,
"sessionHealth": true,
"useBars": true,
"showCallCounts": true,
"callCountsFormat": "auto",
"safeMode": true,
"maxOutputLines": 4
},
"thresholds": {
"contextWarning": 70,
"contextCompactSuggestion": 80,
"contextCritical": 85,
"ralphWarning": 7
},
"staleTaskThresholdMinutes": 30,
"contextLimitWarning": {
"threshold": 80,
"autoCompact": false
}
}
callCountsFormat
Controls the call-count badge icon style:
"auto"(default): emoji on macOS/Linux, ASCII on Windows/WSL"emoji": force🔧 🤖 ⚡"ascii": forceT: A: S:
safeMode
When safeMode is true (default), the HUD strips ANSI codes and uses ASCII-only output to prevent terminal rendering corruption during concurrent updates. This is especially important on Windows and when using terminal multiplexers.
agentsFormat Options
count: agents:2codes: agents:Oes (type-coded with model tier casing)codes-duration: agents:O(2m)es (codes with duration)detailed: agents:[architect(2m),explore,exec]descriptions: O:analyzing code | e:searching (codes + what they're doing)tasks: [analyzing code, searching...] (just descriptions)multiline: Multi-line display with full agent details on separate lines
Troubleshooting
If the HUD is not showing:
- Run
/oh-my-claudecode:hud setupto auto-install and configure - Restart Claude Code after setup completes
- If still not working, run
/oh-my-claudecode:omc-doctorfor full diagnostics
Legacy string format migration: Older OMC versions wrote statusLine as a plain string (e.g., "~/.claude/hud/omc-hud.mjs"). Modern Claude Code (v2.1+) requires an object format. Running the installer or /oh-my-claudecode:hud setup will auto-migrate legacy strings to the correct object format:
{
"statusLine": {
"type": "command",
"command": "node ${CLAUDE_CONFIG_DIR:-$HOME/.claude}/hud/omc-hud.mjs"
}
}
Node 24+ compatibility: The HUD wrapper script imports homedir from node:os (not node:path). If you encounter SyntaxError: The requested module 'path' does not provide an export named 'homedir', re-run the installer to regenerate omc-hud.mjs.
Manual verification:
- HUD script:
~/.claude/hud/omc-hud.mjs - Settings:
~/.claude/settings.jsonshould havestatusLineconfigured as an object withtypeandcommandfields
The HUD updates automatically every ~300ms during active sessions.
FAQ
What does the hud skill do?
Configure HUD display options (layout, presets, display elements)
How do I install hud?
Run npx skills add https://github.com/yeachan-heo/oh-my-claudecode --skill hud in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/hud/ (personal) or .claude/skills/hud/ (project).
Which AI agents can use hud?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is hud safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains hud?
It is published by yeachan-heo in yeachan-heo/oh-my-claudecode. It has 1,147 recorded installs.
More from yeachan-heo/oh-my-claudecode
ai-slop-cleaner
yeachan-heo/oh-my-claudecode
Clean AI-generated code slop with a regression-safe, deletion-first workflow and optional reviewer-only mode
ralplan
yeachan-heo/oh-my-claudecode
Consensus planning entrypoint that auto-gates vague ralph/autopilot/team requests before execution
deepinit
yeachan-heo/oh-my-claudecode
Deep codebase initialization with hierarchical AGENTS.md documentation
deep-interview
yeachan-heo/oh-my-claudecode
Socratic deep interview with mathematical ambiguity gating before explicit execution approval
omc-setup
yeachan-heo/oh-my-claudecode
Install or refresh oh-my-claudecode for plugin, npm, and local-dev setups from the canonical setup flow
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.