MCPInstall

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
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads webup-statusline automatically when relevant.

  3. 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:

  1. Determine this SKILL.md file's directory path as SKILL_DIR
  2. Script path = ${SKILL_DIR}/scripts/<script-name>.mjs
  3. Replace all ${SKILL_DIR} in this document with the actual path

Script Reference:

ScriptPurpose
scripts/generate.mjsGenerate 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 bun if 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

FlagDefaultDescription
--elements <list>model,context,cost,effort,style,git,dirComma-separated columns to display
--theme <name>gruvboxColor theme — see table below
--effort-icon <preset>arrow (↯) for iconic themes, none otherwiseOverride the effort prefix icon. Presets: arrow, bolt, flash, reason, dot, none. A raw character is also accepted.
--installoffWrite script to ~/.claude/scripts/statusline.sh and update settings.json

Columns

ColumnDescriptionData source
modelActive model name (e.g. "Opus 4.7")model.display_name
contextProgress bar + percentage — color changes with remaining capacitycontext_window.remaining_percentage
costSession API spend formatted as $X.XX in gold — hidden when rounds to $0.00cost.total_cost_usd from input JSON
effortReasoning effort level — color changes with leveleffortLevel in ~/.claude/settings.local.json → ~/.claude/settings.json
styleOutput style name (e.g. Explanatory, Learning) — hidden when "default"output_style.name from input JSON
gitGit branch name (yellow when dirty)worktree.branch → git CLI
dirRepo basename (original repo when in a worktree)worktree.original_repo_dir → workspace.current_dir
worktreeBold worktree:<id> label (hidden outside a worktree)worktree.name → parent-dir basename via git CLI
vimVim mode indicator (hidden when inactive)vim.mode

Color-changing elements

context — bar fill + percentage color scale with remaining capacity:

RemainingColorMeaning
> 50%greenplenty of context
20–50%yellowwatch out
< 20%rednearly full — compact soon

effort — value + optional prefix icon color by level:

LevelColor
max, xhigh, highbold red
mediumyellow
low, xlow, minimalgreen
other / unsetdim (or hidden when completely unset)

Themes

ThemeVibeIcons rendered in bar
gruvboxWarm retro, muted✦ model · ↯ effort · ❋ style · ⌂ dir · ⊕ worktree · ⎇ git · ⌨ vim
draculaModern dark, high saturation◈ model · ↯ effort · ❋ style · ⌂ dir · ⊕ worktree · ⎇ git · ⌨ vim
robbyrussellClassic oh-my-zshno prefix icons — colors + labels only
minimalDefault terminal colorsno 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:

PresetGlyphNotes
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 via AskUserQuestion to 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:

  1. theme — match against: gruvbox, robbyrussell, minimal, dracula. Recognize aliases (暗黑=dracula, 极简=minimal, 复古=gruvbox, レトロ=gruvbox).
  2. 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

  1. If no args provided: Use AskUserQuestion to ask 2 questions in a single prompt. AskUserQuestion caps 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 — AskUserQuestion will 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; vim is 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 Default if 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.

  2. Map user selections to script flags:

    • Column preset → expand to the preset's canonical --elements list:
      • Everything → model,context,cost,effort,style,git,dir,worktree
      • Default → model,context,effort,style,git,dir
      • Essentials → model,context,git,dir
      • Other (auto-added by AskUserQuestion) → 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 to Default.
    • Theme → --theme value (one of gruvbox, dracula, robbyrussell, minimal)
  3. Run the generator with --install:

    npx -y bun ${SKILL_DIR}/scripts/generate.mjs --elements <list> --theme <theme> --install
    
  4. 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 jq to 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-locks to 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

View all →

webup-buddy-reroll

webup/skills-cc

Open the skill to read its SKILL.md instructions.

405 installs

Popular frontend & design skills

View category →

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 & Design1.1M installs

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.

OfficialFrontend & Design1M installs

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.

Frontend & Design999.2K installs

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.

Frontend & Design930.5K installs

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.

OfficialFrontend & Design843.1K installs