Claude Code 工具

Claude Code Tools

Claude code 工具的使用
摘要
本文主要介绍在了解Claude Code基础入门之后，安装Claude Code tools 用来提高效率

1. Claude Code 工具

1.1 ccstatusline

适用于 Claude Code CLI 的美观且高度可定制的状态栏，支持 powerline、主题等功能。

  1. 安装

安装过程非常的简单,使用npx或bunx直接进行安装即可

# Run the configuration TUI with npm
npx ccstatusline@latest

# Or with Bun (faster)
bunx ccstatusline@latest

ccline

ccline

安装之后会启动一个交互配置界面(TUI)

  1. 配置显示信息
  1. Edit Line 编辑状态

Enter键进入编辑模式，可以修改显示内容

↑↓ select, ←→ change type, Enter to move, (a)dd, (i)nsert, (d)elete, (c)lear line, (r)aw value, ESC back

ccline02

ccline02
  • Model: 模型名称
  • Separator: 分隔符 使用
  • Context length: 上下文长度
  • Tokens input: 输入的tokens
  • Tokens output: 输出的tokens
  • Tokens cached: 缓存的tokens
  • Claude Session ID: 会话ID
  1. Edit Colors 编辑颜色

同样的操作方式，为了把之前选择的模式赋予自己想要的颜色

ccline03

ccline03
  1. 安装到Claude Code&

将配置修改好之后，安装到Claude Code，一路点击确认

This will modify ~/.claude/settings.json to add ccstatusline with npx.

重要

别忘了保存 save & exit

如果还要修改，走个上述的循环即可，从头再开始一遍,设置好的界面如下所示

ccline04

ccline04

1.2 claude-hud

一款 Claude Code 插件，可显示当前正在发生的事情——上下文使用情况、活动工具、正在运行的代理以及待办事项进度。始终显示在输入框下方。

claude-hud

注记

原理：Claude HUD 使用 Claude Code 的原生状态栏 API——无需单独的窗口，无需 tmux，可在任何终端中使用

Claude Code → stdin JSON → claude-hud → stdout → displayed in your terminal
           ↘ transcript JSONL (tools, agents, todos)
  1. 安装

在Claude Code内部运行下面的命令

# 1. 加入marketplace
/plugin marketplace add jarrodwatts/claude-hud

# 2. 安装插件
/plugin install claude-hud

# 3. 启动进行设置
/claude-hud:setup

Claude Hud 插件的定位是显示常规的Token损耗

What You See Why It Matters
Project path Know which project you’re in (configurable 1–3 directory levels)
Context health Know exactly how full your context window is before it’s too late
Tool activity Watch Claude read, edit, and search files as it happens
Agent tracking See which subagents are running and what they’re doing
Todo progress Track task completion in real-time

Claude HUD 使用 Claude Code 的原生状态栏 API——无需单独的窗口，无需 tmux，可在任何终端中使用。

  1. 设置

设置是最考验一个人审美的，可以参考一下别的好看的设置，或者问AI来给调

标准的设置是

[Opus | Max] │ my-project git:(main*)
Context █████░░░░░ 45% │ Usage ██░░░░░░░░ 25% (1h 30m / 5h)
  • Line1 –模型、计划名称（或基石）、项目路径、git分支
  • Line2 –上下文栏（绿色→黄色→红色）和使用速率限制

自定义设置

◐ Edit: auth.ts | ✓ Read ×3 | ✓ Grep ×2        ← Tools activity
◐ explore [haiku]: Finding auth code (2m 15s)    ← Agent status
▸ Fix authentication bug (2/5)                   ← Todo progress
  1. 启动设置

在claude进入之后，输入/claude-hud:setup,开始基础的配置

  • 初次输入等设置完成后，会提醒✅ Config written. Please restart Claude Code now — quit and run claude again in your terminal.
  • 如果出错重启Claude code后，再次输入/claude-hud:setup进行后续自动配置，配置完成后进行下一步，这个设置出来是最简单的
  1. 详细配置

自定义HUD 的外观和功能，调整颜色、阈值、显示元素等，以适应您的工作流程和审美偏好。

在claude code内部输入/claude-hud:configure,开始引导流程负责布局和显示切换。高级设置（例如自定义颜色和阈值）也保留在其中

  • 首次设置：选择一个预设（完整/基本/极简），然后微调各个元素
  • 随时自定义：切换项目显示/隐藏、调整 Git 显示样式、切换布局
  • 保存前预览：在提交更改之前，准确查看 HUD 的外观。

输入/claude-hud:configure,后进入模式选择


Choose your HUD layout:

❯ 1. Expanded (Recommended)
     Split into semantic lines (identity, project, environment, usage)
  2. Compact
     Everything on one line
  3. Compact + Separators
     One line with separator before activity
  4. Type something.
  1. 选择1 后会进行提供的选择
预设 (Preset) 显示内容
Full（完整） 启用所有内容 —— 工具、子代理、待办事项、Git 状态、使用情况、运行时长
Essential（精简） 显示活动日志 + Git 状态，信息更简洁
Minimal（最简） 仅显示核心信息 —— 模型名称和上下文进度条
  1. 选择1继续，选择完整的部署,按照需求进行选择配置
Disable any of these? (enabled by your preset)

❯ 1. [ ] Tools activity
  ○ Edit: file.ts | ✓ Read ×3
  2. [ ] Agents status
  ○ explore [haiku]: Finding code
  3. [ ] Todo progress
  ▸ Fix bug (2/5 tasks)
  4. [ ] Project name
  my-project path display
  5. [ ] Type something
     Submit
  1. 选择所有配件后会提醒

Save these changes?

Summary: - Layout: Expanded - Preset: Full, with Tools, Agents, Todos, and Git disabled

Preview:

[Opus | Pro] │ my-project
Context ████░░░░░ 45% │ Usage ██░░░░░░░░ 25%
⏱️ 5m | fix-auth-bug | 2 CLAUDE.md | 4 rules
(in: 45k, cache: 12k) | out: 42.1 tok/s | 5h: 25% | 7d: 10%
  1. 手动配置

编辑~/.claude/plugins/claude-hud/config.json,直接修改高级的配置，更加快速和方便，但是要明白参数的作用，之后运行 /claude-hud:configure 可以保留这些手动设置

布局设置

  ┌────────────────┬────────────┬───────────────────────────────────────────────────────────────────────┐
  │      参数      │     值     │                                 说明                                  │
  ├────────────────┼────────────┼───────────────────────────────────────────────────────────────────────┤
  │ lineLayout     │ "expanded" │ HUD 布局模式• expanded - 分散到多行语义行• compact - 单行显示所有内容 │
  ├────────────────┼────────────┼───────────────────────────────────────────────────────────────────────┤
  │ showSeparators │ false      │ 是否在紧凑模式下显示分隔符                                            │
  ├────────────────┼────────────┼───────────────────────────────────────────────────────────────────────┤
  │ pathLevels     │ 1          │ 项目路径显示层级（显示1个目录名）                                     │
  └────────────────┴────────────┴───────────────────────────────────────────────────────────────────────┘

显示选项

  ┌────────────────────────────┬───────┬────────────────────────────────────────────────┐
  │            参数            │  值   │                      说明                      │
  ├────────────────────────────┼───────┼────────────────────────────────────────────────┤
  │ display.showModel          │ true  │ 显示模型名称 [Opus]                            │
  ├────────────────────────────┼───────┼────────────────────────────────────────────────┤
  │ display.showContextBar     │ true  │ 显示上下文进度条 ████░░░░░░ 45%                │
  ├────────────────────────────┼───────┼────────────────────────────────────────────────┤
  │ display.showTools          │ false │ 显示工具活动 ○ Edit: file.ts | ✓ Read ×3       │
  ├────────────────────────────┼───────┼────────────────────────────────────────────────┤
  │ display.showAgents         │ false │ 显示子代理状态 ○ explore [haiku]: Finding code │
  ├────────────────────────────┼───────┼────────────────────────────────────────────────┤
  │ display.showTodos          │ false │ 显示待办事项进度 ▸ Fix bug (2/5)               │
  ├────────────────────────────┼───────┼────────────────────────────────────────────────┤
  │ display.showProject        │ true  │ 显示项目名称                                   │
  ├────────────────────────────┼───────┼────────────────────────────────────────────────┤
  │ display.showConfigCounts   │ true  │ 显示配置计数 2 CLAUDE.md | 4 rules             │
  ├────────────────────────────┼───────┼────────────────────────────────────────────────┤
  │ display.showTokenBreakdown │ true  │ 显示 Token 详情 (in: 45k, cache: 12k)          │
  ├────────────────────────────┼───────┼────────────────────────────────────────────────┤
  │ display.showSpeed          │ true  │ 显示输出速度 out: 42.1 tok/s                   │
  ├────────────────────────────┼───────┼────────────────────────────────────────────────┤
  │ display.showUsage          │ true  │ 显示使用限制 5h: 25% | 7d: 10%                 │
  ├────────────────────────────┼───────┼────────────────────────────────────────────────┤
  │ display.usageBarEnabled    │ true  │ 使用进度条样式 ██░░░░░░░░ 25% 而非纯文本       │
  ├────────────────────────────┼───────┼────────────────────────────────────────────────┤
  │ display.showDuration       │ true  │ 显示会话时长 ⏱️ 5m                             │
  ├────────────────────────────┼───────┼────────────────────────────────────────────────┤
  │ display.showSessionName    │ true  │ 显示会话名称（slug 或自定义标题）              │
  └────────────────────────────┴───────┴────────────────────────────────────────────────┘

高级设置


  ┌──────────────────────────────┬─────┬───────────────────────────────────────┐
  │             参数             │ 值  │                 说明                  │
  ├──────────────────────────────┼─────┼───────────────────────────────────────┤
  │ display.usageThreshold       │ 80  │ 使用率超过此百分比时显示警告（0-100） │
  ├──────────────────────────────┼─────┼───────────────────────────────────────┤
  │ display.environmentThreshold │ 80  │ 环境资源阈值                          │
  └──────────────────────────────┴─────┴───────────────────────────────────────┘

Git 状态设置

  ┌───────────────────────────┬───────┬─────────────────────────────────┐
  │           参数            │  值   │              说明               │
  ├───────────────────────────┼───────┼─────────────────────────────────┤
  │ gitStatus.enabled         │ false │ 是否显示 Git 状态（当前已禁用） │
  ├───────────────────────────┼───────┼─────────────────────────────────┤
  │ gitStatus.showDirty       │ true  │ 显示未提交更改标记 *            │
  ├───────────────────────────┼───────┼─────────────────────────────────┤
  │ gitStatus.showAheadBehind │ false │ 显示领先/落后提交数 ↑2 ↓1       │
  ├───────────────────────────┼───────┼─────────────────────────────────┤
  │ gitStatus.showFileStats   │ false │ 显示文件统计 !2 +1 ?3           │
  └───────────────────────────┴───────┴─────────────────────────────────┘

颜色配置

  ┌─────────────────────┬───────────────┬────────────────────────────────────────────────┐
  │        参数         │    默认值     │                      用途                      │
  ├─────────────────────┼───────────────┼────────────────────────────────────────────────┤
  │ colors.context      │ green         │ 上下文进度条和百分比的基础颜色                 │
  ├─────────────────────┼───────────────┼────────────────────────────────────────────────┤
  │ colors.usage        │ brightBlue    │ 使用率进度条和百分比的基础颜色（低于警告阈值） │
  ├─────────────────────┼───────────────┼────────────────────────────────────────────────┤
  │ colors.warning      │ yellow        │ 上下文警告阈值和警告文本的颜色                 │
  ├─────────────────────┼───────────────┼────────────────────────────────────────────────┤
  │ colors.usageWarning │ brightMagenta │ 使用率接近阈值时的进度条和百分比颜色           │
  ├─────────────────────┼───────────────┼────────────────────────────────────────────────┤
  │ colors.critical     │ red           │ 严重警告颜色（超过阈值）                       │
  └─────────────────────┴───────────────┴────────────────────────────────────────────────┘

2. 终端

2.1 Lazygit

Git的强大是所有开发者心中的利器

LazyGit 是一个使用 Go 语言编写的终端界面 Git 客户端，它以一种轻量级、高效且用户友好的方式提供了对 Git 仓库的全面管理.

它能为 git 命令提供一个终端图形界面，用户可以通过键盘快捷键或鼠标快速地完成各种 Git 操作，如提交、合并、推送、查看或切换分支等。

  1. 安装lazygit
brew install lazygit
# Add the extras bucket
scoop bucket add extras

# Install lazygit
scoop install lazygit

使用gah/go进行安装

# gah
gah install lazygit

# go
go install github.com/jesseduffield/lazygit@latest
注记设置语言 
lazygit --config | grep "lang"       # 查看 lazygit 当前使用的自然语言
lazygit -cd    # 获取 lazygit 的配置文件目录
printf "gui:\n  language: zh-CN\n" > "$(lazygit -cd)/config.yml"    # 修改 lazygit 配置文件，如将语言设置为中文
  1. 启动lazygit

在终端命令行中输入lazygit之后，进入LazyGit 的主界面

lazygit

lazygit

常用的快捷键
- q：退出 Lazygit - esc:取消lazygit操作 - h/j：上下切换到其他功能区面板（如文件变更面板、分支管理）； - <space>：（在文件变更面板）git add - 暂存选中的更改或取消暂存 -

  1. 功能多样：涵盖了大量 git 管理功能，例如 Rebase 、Worktrees、cherry-pick、修改仓库提交记录、浏览分支关系图等，用户能以交互的方式操作相对复杂的 Git 操作。
  2. 交互友好：拥有美观的 Terminal UI 以及直观的绘图渲染，快捷键的设计非常实用方便，支持鼠标操作，支持多种自然语言。
  1. 界面介绍

lazygit panel(.lightbox fig-alt=“lazygit panel” fig-align=“center”)

Lazygit = 多个panel+光标焦点+上下文快捷键

  • 0 是状态显示栏，0不是Git视图，而是lazygit的UI交互层
  • 1 仓库状态 是lazygit的全局健康检查层
  • 2 工作区/文件/子模块(Working Tree/index/submodules)
  • 3 引用(Refs) 是分支层，包括本地分支、远程分支、标签等
  • 4 提交&引用日志(Commits & Reflog) 是提交层，包括提交历史、引用日志等
  • 5 贮藏&命令执行日志(Stash & Command log) 是暂存层，包括暂存列表、暂存操作等

完全是贴合Git内部对象模式

Working Tree
   ↓
Index
   ↓
Refs
   ↓
Commits
   ↓
Reflog
   ↓
Stash
  1. 使用lazygit

编号0-5编号对应着lazygit默认的窗口索引，在Lazygit中，你可以直接通过键盘上的数字键0-5在这些层级之间快速的条约，0作为全局状态和日志的反馈

2 Files(工作区层)

工作区是管理文件的核心，所有文件的改变都可以从File进行快速改变

按照Claude Code官网进行skill的构建，创建了SKILL.md文件，输入相关内容后保存，切换到- 2-Files

add: 暂存文件使用

  • 如果是对单个文件进行暂存可以聚焦到对应文件后按下 space 键即可(等价于 git add SKILL.md)
  • 如果对所有文件暂存则可以按a(等价于git add ./)
  • 按Enter键，能够在0区，展开或者折叠文件资料夹，方便查看储存和未储存的差别(相当于git diff)
  • 按c键，打开外部的文字编辑器，编辑commit message，之后commit(等价于git commit -m "commit message“)
  • 按A键，就是追加commit(等价于git commit -amend "messave")
  • 按d, 删除/放弃修改（相当于 git checkout – ）
  • C (大写)：调用外部编辑器（如 Vim/Nano）来编写详细的提交说明。

3. Skills必装排行榜

Skills是什么？skill是什么？请参考claude code skills,这里主要介绍一些常用的实用skills，不分顺序，按照分类推荐，不定时更新

  1. 官方skill仓库

官方github仓库中提供了18个skills。该仓库包含的技能展示了克劳德的技能系统所能实现的功能。这些技能涵盖了从创意应用（艺术、音乐、设计）到技术任务（测试 Web 应用程序、MCP 服务器生成）再到企业工作流程（沟通、品牌推广等）的各个方面。

skills目录下的文件包含下面：

skills
  - .claude-plugin/
  -  skills/
  - spec/
  - template/
  - .gitignore
  - README.md

所有的skills包含在skills目录下，而template目录下则包含一些模板文件，用于创建新的skill。

.claude-plugin 文件的作用就是

  • 聚合管理：它将多个分散的 Skill 文件夹（如 xlsx, docx, algorithmic-art 等）组织成一个统一的插件包（Plugin）
  • 一键安装/加载：用户或系统只需读取这个文件，就能一次性安装或启用底下列出的所有技能，而不需要逐个去配置每个技能。
  • 标准化分发：它使得技能可以像软件插件一样被分享、下载和复用，从而实现技能的标准化和模块化。

文档处理类

Skill 描述
docx Word 文档创建、编辑和分析。支持表格、图片、页眉页脚、目录、修订追踪等
pdf PDF 文件处理，包括提取文本/表格、合并/拆分、加水印、OCR、表单填写等
pptx PowerPoint 演示文稿创建和编辑，支持模板编辑、从头创建、设计指南
xlsx Excel 电子表格处理，支持数据分析、公式计算、财务建模、格式化

创意与设计类

Skill 描述
algorithmic-art 使用 p5.js 创建算法艺术，支持生成式艺术、粒子系统、流场等
canvas-design 创建视觉艺术作品（PNG/PDF），输出设计哲学和视觉设计
frontend-design 创建高质量前端界面，避免通用 AI 美学，提供独特设计
theme-factory 为幻灯片/文档等工件应用主题样式，提供 10 种预设主题
slack-gif-creator 创建优化的 Slack 动画 GIF，支持抖动、脉冲、弹跳等动画效果

开发与技术类

Skill 描述
claude-api 使用 Claude API 或 Anthropic SDK 构建应用，支持多语言
mcp-builder 构建 MCP（Model Context Protocol）服务器，支持 Python 和 TypeScript
webapp-testing 使用 Playwright 测试本地 Web 应用，支持截图、日志捕获
web-artifacts-builder 构建复杂的 HTML artifacts，使用 React + Tailwind + shadcn/ui
skill-creator 创建、修改和优化 Skills，包含评估和基准测试工具

在claude code中输入

# 注册skill marketplace
/plugin marketplace add anthropics/skills

# 安装
/plugin
  1. Select Browse and install plugins 2.Select anthropic-agent-skills
  2. Select document-skills or example-skills
  3. Select Install now
注记

Install Plugins

❯ ◯ claude-api Claude API and SDK documentation skill for building LLM-p…

◯ document-skills
  Collection of document processing suite including Excel, ...

◯ example-skills
  Collection of example skills demonstrating various capabi...

  • Claude Code API / Agent SDK 是 底层引擎和运行环境。它提供了让 AI 能够“思考”、“规划”以及“执行操作”（如读写文件、运行命令、调用工具）的基础能力。

  • document-skills / example-skills 是 预制的专业插件包（Apps/Mods）。它们是利用上述引擎的能力，针对特定任务（如处理 Excel、做 PPT、写代码）封装好的具体业务逻辑和指令集。