
webup-statusline
Generate and install a custom Claude Code status line with selectable columns (model, context, effort level, git, dir, worktree, vim) and a color theme. Context and effort elements color-change based on level. Triggers on "status line", "statusline", "customize status", "status bar", "effort level display", "状态栏", "ステータスライン", or similar.
- Installs
- 1.4K
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/webup/skills-cc --skill webup-statusline- 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 webup-statusline 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.
Status Line Generator
Generate a custom Claude Code status line script with your choice of columns and a color theme. Installs directly to ~/.claude/settings.json.
How It Works
Claude Code supports custom status lines via a shell script configured in ~/.claude/settings.json. The script receives session JSON on stdin (model, context window, workspace, vim, worktree, etc.) and prints formatted text to stdout.
This skill generates a bash script tailored to your preferences and installs it automatically.
Script Directory
Important: All scripts are located in the scripts/ subdirectory of this skill.
Agent Execution Instructions:
- Determine this SKILL.md file's directory path as
SKILL_DIR - Script path =
${SKILL_DIR}/scripts/<script-name>.mjs - Replace all
${SKILL_DIR}in this document with the actual path
Script Reference:
| Script | Purpose |
|---|---|
scripts/generate.mjs | Generate and install status line script from chosen options |
Prerequisites
- jq — required by the generated status line script to parse JSON input from Claude Code. On Windows, the script auto-detects jq installed via WinGet or scoop; if jq is still not found, add its directory to your PATH manually.
- Bun — required to run the generator. Use
npx -y bunif not installed globally.
Usage
# Preview generated script
npx -y bun ${SKILL_DIR}/scripts/generate.mjs --elements model,context,effort,git,dir --theme gruvbox
# Generate and install
npx -y bun ${SKILL_DIR}/scripts/generate.mjs --elements model,context,effort,git,dir --theme dracula --install
Options
| Flag | Default | Description |
|---|---|---|
--elements <list> | model,context,cost,effort,style,git,dir | Comma-separated columns to display |
--theme <name> | gruvbox | Color theme — see table below |
--effort-icon <preset> | arrow (↯) for iconic themes, none otherwise | Override the effort prefix icon. Presets: arrow, bolt, flash, reason, dot, none. A raw character is also accepted. |
--install | off | Write script to ~/.claude/scripts/statusline.sh and update settings.json |
Columns
| Column | Description | Data source |
|---|---|---|
model | Active model name (e.g. "Opus 4.7") | model.display_name |
context | Progress bar + percentage — color changes with remaining capacity | context_window.remaining_percentage |
cost | Session API spend formatted as $X.XX in gold — hidden when rounds to $0.00 | cost.total_cost_usd from input JSON |
effort | Reasoning effort level — color changes with level | effortLevel in ~/.claude/settings.local.json → ~/.claude/settings.json |
style | Output style name (e.g. Explanatory, Learning) — hidden when "default" | output_style.name from input JSON |
git | Git branch name (yellow when dirty) | worktree.branch → git CLI |
dir | Repo basename (original repo when in a worktree) | worktree.original_repo_dir → workspace.current_dir |
worktree | Bold worktree:<id> label (hidden outside a worktree) | worktree.name → parent-dir basename via git CLI |
vim | Vim mode indicator (hidden when inactive) | vim.mode |
Color-changing elements
context — bar fill + percentage color scale with remaining capacity:
| Remaining | Color | Meaning |
|---|---|---|
| > 50% | green | plenty of context |
| 20–50% | yellow | watch out |
| < 20% | red | nearly full — compact soon |
effort — value + optional prefix icon color by level:
| Level | Color |
|---|---|
max, xhigh, high | bold red |
medium | yellow |
low, xlow, minimal | green |
| other / unset | dim (or hidden when completely unset) |
Themes
| Theme | Vibe | Icons rendered in bar |
|---|---|---|
gruvbox | Warm retro, muted | ✦ model · ↯ effort · ❋ style · ⌂ dir · ⊕ worktree · ⎇ git · ⌨ vim |
dracula | Modern dark, high saturation | ◈ model · ↯ effort · ❋ style · ⌂ dir · ⊕ worktree · ⎇ git · ⌨ vim |
robbyrussell | Classic oh-my-zsh | no prefix icons — colors + labels only |
minimal | Default terminal colors | no prefix icons — plain text |
The context column intentionally skips a prefix icon — the colored progress bar is already visually rich. The effort prefix (↯) is baked into iconic themes and can be overridden with --effort-icon.
Effort icons
Pass --effort-icon <preset> to swap the glyph in front of the effort value. Presets:
| Preset | Glyph | Notes |
|---|---|---|
arrow | ↯ | Electric arrow — default, narrow |
bolt | ϟ | Greek koppa — narrow lightning |
flash | ⚡ | Classic lightning — wide in emoji-presentation fonts |
reason | ∴ | Therefore |
dot | ◉ | Filled circle |
none | (hidden) | Drop the icon entirely |
You can also pass any raw character as --effort-icon <char>.
Worktree behavior: When inside a git worktree (detected via the input JSON's worktree.* fields or via git rev-parse --git-common-dir fallback), the worktree column shows a bold worktree:<id> label using the parent dir name (e.g. ~/.codex/worktrees/46a6/clawmaster → worktree:46a6). The git column prefers worktree.branch from the input JSON; the dir column prefers worktree.original_repo_dir so the repo identity stays stable across worktrees.
Invocation
This skill can be invoked with or without arguments:
- No args (
/webup-statusline): Interactive prompt viaAskUserQuestionto pick columns and theme. - With args (
/webup-statusline dracula): NLP parse for theme and column preferences.
Arg parsing (natural language)
The args string is free-form text. Use NLP to extract:
- theme — match against: gruvbox, robbyrussell, minimal, dracula. Recognize aliases (暗黑=dracula, 极简=minimal, 复古=gruvbox, レトロ=gruvbox).
- elements — look for mentions of: model, context/进度/コンテキスト, effort/推理强度/努力度, git/分支/ブランチ, dir/目录/ディレクトリ, worktree/工作树/ワークツリー, vim.
Unspecified fields use defaults: model,context,effort,git,dir columns, gruvbox theme.
Workflow
-
If no args provided: Use
AskUserQuestionto ask 2 questions in a single prompt.AskUserQuestioncaps each question at 4 options, so offer curated presets for columns rather than an exhaustive toggle list. If the user picks "Other", interpret their free text as a comma-separated column list (or a natural-language description that maps to one).Q1 — Column preset (single): Which columns to display? Offer these 3 curated presets —
AskUserQuestionwill auto-append an "Other" option that lets the user type a free-text column list or description.- "Everything (Recommended)" —
model,context,cost,effort,style,git,dir,worktree(all columns that have a useful signal today;vimis excluded because most users don't use vim keybindings) - "Default" —
model,context,effort,style,git,dir(balanced — drops cost and worktree; matches the skill's default flag value) - "Essentials" —
model,context,git,dir(lean; no effort, no style, no cost)
If the user picks the auto-added "Other", treat their free text as a comma-separated column list, or as a natural-language description to map to columns. Fall back to
Defaultif parsing is ambiguous.Q2 — Theme (single): Color theme?
- "Dracula" — modern dark, purple/pink/cyan (Recommended)
- "Gruvbox Dark" — warm retro palette, 24-bit true color
- "Robbyrussell" — classic oh-my-zsh style, no icons
- "Minimal" — no decoration, dim separators only
If args provided: Parse theme and columns from args. Skip the prompt.
- "Everything (Recommended)" —
-
Map user selections to script flags:
- Column preset → expand to the preset's canonical
--elementslist:Everything→model,context,cost,effort,style,git,dir,worktreeDefault→model,context,effort,style,git,dirEssentials→model,context,git,dirOther(auto-added byAskUserQuestion) → parse the user's free text; keep only recognized column names (model,context,cost,effort,style,dir,worktree,git,vim). If parsing is ambiguous, fall back toDefault.
- Theme →
--themevalue (one ofgruvbox,dracula,robbyrussell,minimal)
- Column preset → expand to the preset's canonical
-
Run the generator with
--install:npx -y bun ${SKILL_DIR}/scripts/generate.mjs --elements <list> --theme <theme> --install -
Tell user to restart Claude Code to see the new status line.
Output Examples
Dracula (all columns), remaining=49%, cost=$0.42, effort=high, output style=Explanatory, inside a worktree:
◈ Opus 4.7 | [■■■■■■■■■■□□□□□□□□□□] 51% | $0.42 | ↯ high | ❋ Explanatory | ⌂ clawmaster | ⊕ worktree:46a6 | ⎇ feat/xyz
(bar yellow — 49% remaining; $0.42 gold session spend next to the bar; effort "high" bold red; purple ❋ Explanatory sits between effort and dir; context carries no prefix icon — the bar is already visual enough)
Gruvbox Dark (model + context + effort + dir + git), remaining=88%, effort=medium:
✦ Opus 4.7 | [■■□□□□□□□□□□□□□□□□□□] 12% | ↯ medium | ⌂ skills-cc | ⎇ main
(bar green — 88% remaining; effort "medium" yellow)
Minimal (model + effort + dir + git), effort=low:
Claude Opus 4.7 · low · skills-cc · main
(no prefix icons in minimal; effort "low" green)
Notes
- Generated script is saved to
~/.claude/scripts/statusline.sh - Running the skill again overwrites the existing script — just re-run to change theme or columns
- The script uses
jqto parse JSON input — make sure it's installed. On Windows, the script auto-detects WinGet and scoop jq paths; if jq is still not found, add it to PATH manually. - Git dirty detection uses
--no-optional-locksto avoid interfering with other git operations
FAQ
What does the webup-statusline skill do?
Generate and install a custom Claude Code status line with selectable columns (model, context, effort level, git, dir, worktree, vim) and a color theme. Context and effort elements color-change based on level. Triggers on "status line", "statusline", "customize status", "status bar", "effort level display", "状态栏", "ステータスライン", or similar.
How do I install webup-statusline?
Run npx skills add https://github.com/webup/skills-cc --skill webup-statusline 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/webup-statusline/ (personal) or .claude/skills/webup-statusline/ (project).
Which AI agents can use webup-statusline?
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 webup-statusline 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 webup-statusline?
It is published by webup in webup/skills-cc. It has 1,394 recorded installs.
More from webup/skills-cc
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.