Skip to content
AI Growth Lab
Navigation menu
AI Growth Lab

Loading lesson…

CoursesContactPrivacy

Curriculum based on Datawhale / Easy Vibe · CC BY-NC-SA 4.0

← Back to course

AI-Native Engineer

Claude Code Fundamentals
  1. Getting Started with Claude Code
  2. Essential Claude Code Techniques
  3. Configuring Claude Code for Your Project
  4. Everyday Development Workflows
  5. Troubleshooting Claude Code
MCP: Connecting Claude Code to Tools
  1. Getting Started with MCP in Claude Code
  2. Using and Troubleshooting MCP
  3. Configuring Common MCP Servers
Claude Code Skills
  1. Finding and Using Your First Skills
  2. Understanding Skills and SKILL.md
  3. Creating and Improving Your Own Skills
  4. How Claude Skills Work Internally
Claude Agent Teams
  1. Understanding and Setting Up Agent Teams
  2. Build an RPG with Agent Teams
  3. Agent Teams Best Practices
  4. Choosing When to Use Agent Teams
AI-Assisted Development Workflows
  1. Choosing an AI Development Strategy
  2. Developing Features and Fixing Bugs with AI
  3. Refactoring and Reviewing Code with AI
  4. Building a Project Knowledge Base
  5. Improving AI Collaboration Efficiency
Building Agents with Claude Agent SDK
  1. Getting Started with Claude Agent SDK
  2. Advanced Features and Practical Agent Examples
  3. Building a Code-Quality Guardrail Pipeline
Engineering Workflows with Superpowers
  1. Getting Started with Superpowers and Its Core Skills
  2. Build an Authentication System with Superpowers
  3. Configuring and Using Superpowers Effectively
Spec Coding
  1. Spec Coding Foundations
  2. Practicing Spec Coding in Claude Code
  3. Moving from Vibe Coding to Spec Coding
  4. Spec Coding FAQ and Summary
GitHub Spec-Driven Development
  1. Workflow Foundations and Setup
  2. From Product Idea to Specification
  3. From Specification to Working Software
  4. Reusable Prompts and Responsible Autonomy
Cross-Platform Development
  1. From a Web Page to Real Software and an AI-Native Product
  2. How to Choose the Right Platform for Your App
  3. How to Build an Android App with Jetpack Compose
  4. How to Build an iOS App with SwiftUI
  5. Build a Store Inspection App with React Native and Expo

Lesson Contents

  1. Core Operation Commands
AI Development FAQ and Summary
How to Build a Cross-Platform App with Flutter
  • How to Build a PWA Local App
  • How to Build a Browser AI Assistant Extension
  • How to Build a Cross-Platform Electron Desktop App
  • How to Build Platform, Pixel-Art, and 3D Games with Godot
  • How to Build a VS Code Extension
  • How to Build an Industrial Qt Desktop App
  • How to Build Your Personal Website and Academic Blog
  • How to Publish the Application You Built
  • On this page
    • Core Operation Commands

    Core Operation Commands

    Claude Code provides a rich set of operational commands for efficient AI collaboration. These commands fall into categories: Slash commands (built-in features), symbol system (short operations), and natural-language instructions (daily development).

    Slash Command Quick Reference

    Slash commands are built-in operations that start with /. They provide standardized actions such as project initialization, config management, and status checks.

    CommandFunctionUse scenario
    /helpShow all commandsquick lookup when you forget commands
    /initInitialize project and generate CLAUDE.mdnew project or adding config
    /planEnter planning modecreate plan before complex tasks
    /clearClear conversation historyrestart when context is messy
    /compactCompress contextsave tokens after long chat
    /diffOpen interactive diff viewinspect current uncommitted changes
    /pluginManage pluginsinstall commit/review extensions
    /contextShow context usageoptimize token cost
    /costShow session costmonitor usage cost
    /configOpen config panelupdate settings
    /permissionsPermission managementadjust operation permissions
    /modelSwitch modelchoose different models

    Command-combination example:

    # complete development workflow
    /plan                    # 1. create plan
    # ... execute development ...
    /diff                    # 2. inspect changes
    Generate a commit message from current diff
    !git add -A              # 3. stage changes
    !git commit -m "..."     # 4. commit
    /cost                    # 5. check cost
    

    Symbol System

    Symbol system is Claude Code's shorthand operation mechanism. Special symbols quickly trigger specific capabilities.

    SymbolNamePurposeExample
    /Slash commandexecute built-in operation/help, /plan
    @At referencereference file/directory@src/app.tsx
    !Bang moderun terminal command!npm test
    &Background runrun task in background&npm run dev

    Symbol combination tips:

    # combine symbols
    @src/utils.ts !npm test
    # meaning: read utils.ts, then run tests
    
    @src/components/ @src/pages/ compare structures of these two directories
    # meaning: reference two directories simultaneously for comparison
    
    !git diff @src/app.tsx explain these changes
    # meaning: inspect Git diff and ask Claude to explain specific file changes
    

    File Operations

    File operations are the most common daily actions: read, edit, create, and delete files.

    Read files:

    # basic read
    @src/app.tsx explain this file
    
    # read + analyze
    @src/utils/helpers.ts find potential performance issues
    
    # compare read
    @src/components/OldButton.tsx @src/components/NewButton.tsx compare differences
    

    Edit files:

    # simple edit
    Modify formatDate in src/utils/date.ts to support Chinese locale format
    
    # complex edit
    @src/api/users.ts Refactor this file:
    1. Extract duplicated error handling into shared handleError
    2. Replace Promise chains with async/await
    3. Add JSDoc comments
    
    # batch edit
    Convert all class components under src/components/ into function components
    

    Create files:

    # create one file
    Create src/components/UserCard.tsx, a card component to display user info
    
    # create related files
    Create user module:
    1. src/types/user.ts - define User interface
    2. src/api/users.ts - user API calls
    3. src/components/UserCard.tsx - user card component
    4. src/hooks/useUser.ts - hook to fetch user data
    

    Delete files:

    # delete with confirmation
    Delete src/old-component.tsx (this component is no longer used)
    
    # Claude asks for confirmation and may suggest checking references first
    

    Git Operations

    Claude Code deeply integrates with Git so you can complete full version-control workflow without leaving terminal.

    Check status:

    # show Git status
    Show git status and uncommitted changes
    
    # detailed diff
    !git diff
    Explain changes in src/api/users.ts
    

    Create commits:

    # inspect changes
    /diff
    
    # generate commit message
    Generate a Conventional Commit message from current git diff
    
    # commit manually
    !git add -A
    !git commit -m "..."
    

    Branch operations:

    # create feature branch
    !git checkout -b feature/user-authentication
    
    # after implementation
    Generate commit message based on current changes
    !git add -A
    !git commit -m "..."
    !git push -u origin feature/user-authentication
    

    Complete Git workflow example:

    # 1. start new feature
    !git checkout -b feature/payment-integration
    
    # 2. develop feature (with Claude assistance)
    Create payment module with Alipay and WeChat Pay
    
    # 3. run tests
    !npm test
    
    # 4. inspect changes
    /diff
    
    # 5. generate and confirm commit message
    Generate a Conventional Commit message from current git diff
    !git add -A
    !git commit -m "..."
    
    # 6. push remote
    !git push -u origin feature/payment-integration
    
    # 7. create PR (optional, with GitHub CLI)
    !gh pr create --title "feat: add payment integration" --body "Support Alipay and WeChat Pay"
    

    Code Operations

    Code operations are Claude Code's core strengths: generation, explanation, refactoring, and optimization.

    Generate code:

    # generate component
    Create a React Hook to manage auth state, including login/logout/permission checks
    
    # generate utility function
    Create a date-formatting utility that supports relative time (e.g. "2 hours ago")
    
    # generate complete module
    Create order module with:
    - order list page
    - order detail page
    - create-order API
    - order status management
    

    Explain code:

    # line-by-line explanation
    Explain src/algorithms/quicksort.ts line by line
    
    # high-level explanation
    @src/services/payment.ts explain architecture design of this module
    
    # explain complex logic
    Explain what reduce in src/utils/dataTransformer.ts is doing
    

    Refactor code:

    # architecture refactor
    Convert class components in src/components/ to function components
    
    # performance refactor
    Optimize rendering performance in src/App.tsx, reduce unnecessary re-renders
    
    # cleanup refactor
    @src/utils/helpers.ts Refactor this file:
    1. Delete unused functions
    2. Extract repeated logic into shared utilities
    3. Add type definitions
    4. Improve function naming
    

    Debug code:

    # error analysis
    npm test failed, analyze root cause and fix it
    
    # performance analysis
    @src/components/DataTable.tsx This component renders slowly, find bottlenecks
    
    # log analysis
    !cat logs/error.log
    Analyze these error logs and identify root cause
    

    Test Operations

    Testing is essential for quality assurance. Claude Code can help generate tests, run tests, and analyze results.

    Generate tests:

    # unit tests
    Generate unit tests for src/utils/math.ts, including boundary cases
    
    # component tests
    Generate React Testing Library tests for src/components/UserForm.tsx
    
    # integration tests
    Create integration test for user registration flow from form submission to DB write
    

    Run and debug tests:

    # run tests
    !npm test
    
    # debug failed tests
    Analyze failure reasons and fix
    @tests/auth.test.ts
    
    # coverage check
    !npm run test:coverage
    Which code paths are not covered?
    

    Testing strategy suggestion:

    I added user authentication. Please:
    1. Generate unit tests for auth.service.ts
    2. Generate component tests for LoginForm
    3. Run all tests and ensure pass
    

    Command Chaining and Workflow Composition

    The most efficient way to use Claude Code is chaining commands into complete workflows.

    Scenario 1: bug-fix workflow

    # 1. inspect issue
    !npm test
    Tests failed, analyze why
    
    # 2. locate issue
    @src/utils/validation.ts Is the issue in this file?
    
    # 3. fix issue
    Fix isEmail in validation.ts to correctly handle addresses containing +
    
    # 4. verify fix
    !npm test
    
    # 5. commit fix
    Generate a fix-type commit message from current diff
    !git add -A
    !git commit -m "fix: ..."
    

    Scenario 2: code review workflow

    # 1. inspect changes
    !git diff --stat
    Which files changed?
    
    # 2. detailed review
    @src/components/ Review these component changes
    
    # 3. suggest improvements
    What improvements should be made based on this review?
    
    # 4. implement improvements
    Optimize performance of UserList component
    
    # 5. final review
    /diff
    Review current changes and point out potential risks and improvements
    

    Scenario 3: new feature workflow

    # 1. plan first
    /plan
    I want to add shopping cart feature
    
    # 2. create branch
    !git checkout -b feature/shopping-cart
    
    # 3. implement feature
    Implement step by step according to plan
    
    # 4. add tests
    Generate tests for shopping cart module
    
    # 5. run tests
    !npm test
    
    # 6. code review
    /diff
    Please do a code review on current diff
    
    # 7. commit
    Generate commit message for this feature development
    !git add -A
    !git commit -m "feat: ..."
    !git push
    

    Previous
    Sign in to track progress
    Next