Webup Statusline
Generate and install a customized Claude Code status line script showing model, context, cost, git, and directory with theme colors.
Overview
webup-statusline is an agent skill for the Build phase that generates a themed, installable Claude Code status line via Bun.
Install
npx skills add https://github.com/webup/skills-cc --skill webup-statuslineWhat is this skill?
- Bun generator: bun generate.mjs with --elements, --theme, --icon, and --install
- Configurable elements include model, context, cost, effort, style, git, and dir
- Built-in themes such as Gruvbox Dark with context bar color thresholds
- Writes an executable status line script into the Claude Code config path when --install is set
- Default element list: model,context,cost,effort,style,git,dir
- Theme example: Gruvbox Dark with context threshold colors
Adoption & trust: 843 installs on skills.sh; 76 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You use Claude Code daily but cannot see model, context, cost, git, and directory state in one glance at the prompt.
Who is it for?
Solo builders standardizing a Claude Code terminal setup with Gruvbox-style themes and rich status elements.
Skip if: Teams needing production APM dashboards or users not on Claude Code/Bun who will not run generate.mjs.
When should I use this skill?
You want to generate or reinstall a Claude Code status line with selected elements and a named theme.
What do I get? / Deliverables
You get a generated shell statusline script, optionally installed into Claude Code config, reflecting your chosen elements and color theme.
- Executable status line shell script
- Themed ANSI color definitions for status segments
Recommended Skills
Journey fit
Status line tooling configures the agent coding environment during build-time agent-tooling setup, not customer-facing launch work. Agent-tooling is the right shelf because the skill emits a shell statusline for Claude Code rather than product application code.
How it compares
Terminal statusline generator for Claude Code, not a SaaS analytics or error monitoring integration.
Common Questions / FAQ
Who is webup-statusline for?
Indie developers using Claude Code who want a customizable status bar for model, context, cost, git, and cwd.
When should I use webup-statusline?
During Build → agent-tooling when onboarding a new machine or tuning your Claude Code shell experience before long coding sessions.
Is webup-statusline safe to install?
It writes and chmods local shell scripts; review the Security Audits panel on this page and inspect generate.mjs output before using --install.
SKILL.md
READMESKILL.md - Webup Statusline
#!/usr/bin/env bun // Generate a custom Claude Code status line shell script // // Usage: bun generate.mjs --elements model,context,style,git,dir,vim --theme gruvbox --icon ✦ --install import { readFileSync, writeFileSync, mkdirSync, chmodSync, existsSync } from 'fs' import { join } from 'path' import { homedir } from 'os' const args = process.argv.slice(2) function getArg(name, def) { const i = args.indexOf(`--${name}`) return i >= 0 && i + 1 < args.length ? args[i + 1] : def } const hasFlag = (name) => args.includes(`--${name}`) const elements = getArg('elements', 'model,context,cost,effort,style,git,dir').split(',').map(s => s.trim()) const theme = getArg('theme', 'gruvbox') const effortIconFlag = getArg('effort-icon', '') // optional override; see themes.effort icons const install = hasFlag('install') // ── Theme definitions ────────────────────────────────────────────── const themes = { gruvbox: { name: 'Gruvbox Dark', model: '\\033[38;2;86;182;194m', // bright teal ctx_ok: '\\033[38;2;142;192;124m', // aqua/green (>50% remaining) ctx_warn: '\\033[38;2;250;189;47m', // yellow (20-50% remaining) ctx_low: '\\033[38;2;251;73;52m', // red (<20% remaining) bar_empty: '\\033[38;2;80;73;69m', // dark bg pct: '\\033[38;2;251;241;199m', // bright fg dir: '\\033[38;2;152;195;121m', // soft green git: '\\033[38;2;143;175;209m', // soft blue git_dirty: '\\033[38;2;224;175;104m', // warm yellow vim: '\\033[38;2;214;93;14m', // orange worktree: '\\033[38;2;211;134;155m', // soft pink style: '\\033[38;2;177;98;134m', // soft violet — output style cost: '\\033[38;2;215;153;33m', // gruvbox gold — session spend effort_high: '\\033[1;38;2;251;73;52m', // bold red effort_med: '\\033[38;2;250;189;47m', // yellow effort_low: '\\033[38;2;142;192;124m', // green effort_off: '\\033[2;38;2;168;153;132m', // dim gray sep: '\\033[38;2;102;92;84m', // gray separator: ' | ', bar_chars: ['■', '□'], }, robbyrussell: { name: 'Robbyrussell', model: '\\033[38;5;45m', // cyan ctx_ok: '\\033[38;5;32m', // green ctx_warn: '\\033[38;5;220m', // yellow ctx_low: '\\033[38;5;196m', // red bar_empty: '\\033[2m', // dim pct: '\\033[38;5;220m', // yellow dir: '\\033[38;5;39m', // blue — softer than red for folder git: '\\033[38;5;32m', // green git_dirty: '\\033[38;5;220m', // yellow vim: '\\033[38;5;45m', // cyan worktree: '\\033[38;5;170m', // magenta style: '\\033[38;5;135m', // violet cost: '\\033[38;5;172m', // orange3 — session spend effort_high: '\\033[1;38;5;196m', // bold red effort_med: '\\033[38;5;220m', // yellow effort_low: '\\033[38;5;32m', // green effort_off: '\\033[2m', // dim sep: '\\033[2m', // dim separator: ' · ', bar_chars: ['━', '─'], }, minimal: { name: 'Minimal', model: '\\033[0m', ctx_ok: '\\033[32m', // green ctx_warn: '\\033[33m', // yellow ctx_low: '\\033[31m', // red bar_empty: '\\033[2m', pct: '\\033[0m', dir: '\\033[2m', git: '\\033[0m', git_dirty: '\\033[33m', vim: '\\033[0m', worktree: '\\033[2m', style: '\\033[0m', // default — name speaks for itself cost: '\\033[33m', // yellow effort_high: '\\033[1;31m', // bold red effort_med: '\\033[33m', // yellow effort_low: '\\033[32m', // green effort_off: '\\033[2m', // dim sep: '\\033[2m', separator: ' · ', bar_chars: ['▰', '▱'], }, dracula: { name: 'Dracula', model: '\\033[38;2;189;147;249m', // purple ctx_ok: '\\033[38;2;80;250;123m', // green ctx_warn: '\\033[38;2;241;250;140m', // yellow ctx_low: