My Claude Code Usage Notes

Since the 9th of last month, I've been using Claude Code from Cursor for almost a month now. I consider myself a moderate user and have easily recouped my costs ($20 a month). Now, Cursor mainly handles tab completion, while I find Claude Code much more useful for daily tasks. Below are screenshots of ccusage.

It's incredibly satisfying; using sonnet-4 is already enough for me. It's very smart, and below are some small tips I've recorded from daily use. This article doesn't have much substantial content, just some notes~

Small Knowledge#

I learned a few small pieces of knowledge from articles like 6 Weeks of Claude Code - Puzzmo Blog and How I use Claude Code (+ my best tips), as well as some I had seen before.

Set notification sounds in Claude's settings.json through hooks (Claude Code Settings - Anthropic), such as notifying me with "Task completed" when finished, and "Waiting for permission" when requesting permissions. Refer to Hook Reference - Anthropic

{
  "hooks": {
    "Notification": [
      {
        "matcher": "",
        "hooks": [
          {
            "type": "command",
            "command": "afplay /System/Library/Sounds/Funk.aiff && say \\\"等待许可\\"
          }
        ]
      }
    ],
    "Stop": [
      {
        "matcher": "",
        "hooks": [
          {
            "type": "command",
            "command": "afplay /System/Library/Sounds/Glass.aiff && say \\\"任务完成\\"
          }
        ]
      }
    ]
  }
}

Set commonly used commands to be allowed without needing permission each time, and without worrying about --dangerously-skip-permissions deleting things randomly.

{
  "permissions": {
    "allow": ["Bash(grep:*)", "Bash(find:*)", "Bash(mkdir:*)", "Bash(rg:*)", "Bash(ls:*)", "Bash(awk:*)"]
  }
}

Since it is a terminal interface, pasting images from Command + V does not work. Please use Control + V (on Mac).
Create custom slash commands. ClaudeCode makes it very easy to add custom slash commands. To add a command, simply create a .claude/commands folder and add the command name as a file with the .md extension. Just write these in natural language, and you can use the $ARGUMENTS string to insert parameters into the prompt. The official tutorial is at Slash Commands - Anthropic

# Create personal commands
mkdir -p ~/.claude/commands
echo "Review the security vulnerabilities of this code:" > ~/.claude/commands/security-review.md

You can use GitHub - brennercruvinel/CCPlugins to add some commands. It provides several main commands, such as:

/cleanproject, /commit, /format, /scaffold, /test, /implement, /refactor for one-click cleaning, initializing, and refactoring.
Code quality and security: /review, /security-scan, /predict-issues for executing code reviews, automatically detecting and fixing security vulnerabilities, importing issues, TODOs, etc.
Advanced analysis: /understand, /explain-like-senior, /make-it-pretty for providing global architecture analysis, advanced code explanations, and readability optimization.
Session and project management: /session-start, /session-end, /docs, /todos-to-issues, /undo to increase session persistence, ensuring the development process is traceable and reversible.

Quick Learning of Projects Using Claude Code#

The official documentation also provides examples of common workflows at Common Workflows - Anthropic.

For example, if I want to learn about this project GitHub - webclipper/web-clipper and have the AI analyze it to learn the essence of web scraping.

First, clone the project locally, use /init to generate the CLAUDE.md project documentation, then I will ask it:

I need to learn about this project, understand its overall structure and how it captures web content, output a series of md documents in the docs folder for my reference.

> @CLAUDE.md @src/ @docs/ I need to learn about this project, understand its overall structure and how it captures web content, output a series of md documents in the docs folder for my reference.
⎿  Read CLAUDE.md (65 lines)
  ⎿  Listed directory src/
  ⎿  Listed directory docs/
  ⎿  ⧉ Selected 46 lines from CLAUDE.md in Cursor

⏺ I'll help you learn the web-clipper project by creating comprehensive documentation. Let me first create a todo list to plan this learning
  documentation task.
...

⏺ Update Todos
  ⎿  ☒ Create docs directory structure
     ☒ Analyze and document overall project architecture
     ☒ Document web content capture mechanism
     ☒ Document service plugin system
     ☒ Document extension system
     ☒ Document IPC communication system
     ☒ Document build and deployment process

⏺ Write(docs/README.md)
  ⎿  Wrote 137 lines to docs/README.md
     # Web-Clipper Learning Documentation
     This document collection provides a detailed analysis of the overall architecture, core mechanisms, and technical implementations of the Web-Clipper project, aimed at helping developers gain a deep understanding of the design philosophy and implementation details of this general web clipping browser extension.
     ## Document Directory
     ### 1. [Project Architecture Overview](./01-architecture-overview.md)
     - Project introduction and core architectural patterns
     - Main directory structure and tech stack
     - Responsibilities of the three main entry points
     … +127 lines (ctrl+r to expand)

⏺ I have completed a comprehensive study and documentation of the Web-Clipper project. A complete series of learning documents has been created in the docs/ folder:

  Created documents

  1. docs/01-architecture-overview.md - Overall architecture and tech stack
  2. docs/02-content-capture-mechanism.md - Core implementation of web content capture
  3. docs/03-service-plugin-system.md - 25+ service plugin architecture
  4. docs/04-extension-system.md - 6 types of extension lifecycle management
  5. docs/05-ipc-communication-system.md - Inter-process communication architecture
  6. docs/06-build-and-deployment.md - Webpack build configuration
  7. docs/README.md - Learning guide and document navigation

  Core Findings

  Web-Clipper is a well-designed browser extension project with the following outstanding features:

  - Highly modular: Achieves high scalability through dynamic service discovery and extension systems
  - Type safety: Complete TypeScript support ensures code quality
  - Advanced architecture: Uses modern architectural patterns like dependency injection and channel communication
  - Multi-browser support: One codebase adapts to both Chrome and Firefox
  - Excellent user experience: Intelligent content extraction, internationalization support, flexible configuration

  These documents will help you gain a deep understanding of the project's design philosophy and implementation details, making them an excellent reference for learning browser extension development and large TypeScript project architecture.

The series of md documents generated in this way are not only highly accurate but also easy to learn, highly recommended.

Continuing to inquire about core implementations:

> Continue to analyze the implementation of intelligent extraction and how images are extracted. Also output markdown files.
  ⎿  Found 10 new diagnostic issues in 1 file (ctrl-r to expand)
⏺ I will delve into the implementation mechanisms of intelligent extraction and image extraction, and create detailed documentation.
⏺ Update Todos
  ⎿  ☐ Analyze intelligent content extraction mechanism
     ☐ Analyze image extraction and processing
     ☐ Document Readability algorithm implementation
     ☐ Document screenshot capture and processing
     ☐ Document image hosting integration
     ☐ Create comprehensive analysis document

The result: a clear and accurate analysis of about 577 lines of md. If you want to delve deeper into a specific part, the same method applies.

I also tried the /understand command mentioned in the CCPlugin above, but this test did not yield as good quality as the previous one; it should be used as an auxiliary tool during the development process.