AI Study Online
AI Tutorials

Advanced Claude Code: Custom Slash Commands, Hooks, and CI/CD Integration

5 min read

Going Beyond Basic Prompts

By now you have installed Claude Code, configured MCP tools, and built a project with prompts. This final article covers the advanced workflows that make Claude Code a professional development tool: debugging, refactoring, multi-file operations, and bash integration.

Debugging with Claude Code

When your code has a bug, describe the symptoms and let Claude Code investigate:

I'm getting "Uncaught TypeError: Cannot read properties of null" when I
click the export button in link-vault. Look at app.js and find what's
null. Fix it and explain what caused the bug.

Claude Code will:

  1. Read the relevant source files
  2. Trace the error to its root cause
  3. Propose a fix with explanation
  4. Apply the fix after your confirmation

For harder bugs, ask Claude Code to add logging:

The search filter isn't working correctly. Add console.log statements
at each step of filterBookmarks() so we can trace the issue. Don't change
the logic yet, just add logging.

Review the logs in your browser console, then ask for the fix with the evidence.

Refactoring Across Multiple Files

This is where Claude Code excels over single-file AI tools. A refactoring prompt might look like:

Refactor link-vault to use a proper MVC pattern:
1. Create a BookmarkModel class in model.js (handles localStorage operations)
2. Create a BookmarkView class in view.js (handles DOM rendering)
3. Create a BookmarkController class in controller.js (handles events)
4. Keep app.js as the entry point that wires everything together
5. Maintain all existing functionality and styling

Claude Code creates the new files, updates existing ones, and removes obsolete code — all in one operation. Verify with git diff --stat to see the full scope of changes.

Using Bash Commands Inside Claude Code

Claude Code can run shell commands directly. This is useful for setup, testing, and deployment tasks:

# Run tests
Run npm test and fix any failures

# Check for common issues
Run ESLint on the src/ directory and fix all errors

# Optimize images
Find all PNG files larger than 100KB in assets/ and compress them
using pngquant without losing quality

Claude Code executes the commands, reads the output, and takes action based on results. For long-running commands, it shows progress updates.

Multi-File Code Review

Ask Claude Code to review your entire project:

Review all files in the src/ directory for:
1. Potential bugs (null references, undefined variables, race conditions)
2. Security issues (XSS, SQL injection, exposed secrets)
3. Performance problems (unnecessary re-renders, memory leaks)
4. Code style inconsistencies
5. Missing error handling

Provide a prioritized list of issues to fix.

Each issue includes the file path, line number, severity, and suggested fix. You can then ask Claude Code to implement specific fixes.

Working with Git History

Claude Code can analyze and work with your git history:

# Review recent changes
Show me a summary of all commits in the last week grouped by file

# Find when a bug was introduced
Search git history for when the "export" function was last modified

# Squash recent commits
Squash the last 3 commits into one with a descriptive message

# Revert a specific change
Create a revert commit for the change that modified app.js yesterday

Project-Level Prompts

For ongoing projects, create project-level instructions in .claude/instructions.md:

# Link Vault Project Rules

- Use vanilla JavaScript (no frameworks)
- Follow the existing MVC pattern
- All new features must include error handling
- Use CSS custom properties for colors and spacing
- Keep functions under 30 lines
- Write JSDoc comments for all public functions

Claude Code reads this file on every session and follows these instructions automatically.

FAQ

Q: How does Claude Code handle very large refactoring tasks?

Claude Code breaks large tasks into steps. It shows you the plan first, then executes step by step with confirmation at each stage. You can stop mid-operation if something looks wrong and ask for adjustments.

Q: Can Claude Code work with TypeScript?

Yes. Claude Code reads tsconfig.json, understands type definitions, and generates typed code. It handles type errors during refactoring and can fix type mismatches automatically.

Q: Is Claude Code safe for production codebases?

Yes, but with proper review. Always review changes with git diff before committing. For production work, use the --permission flag to require explicit approval for each file change. Start with small projects until you are comfortable with the workflow.

Frequently Asked Questions

Q: What are custom slash commands in Claude Code and how do I create one?

Custom slash commands are shortcuts for frequently used tasks. Define them in CLAUDE.md or Claude Code configuration. For example, define /deploy to run your deployment script with description and action.

Q: How do Claude Code hooks work for automating my workflow?

Hooks run automatically at specific points. Pre-commit hooks run before saving. Post-deploy hooks after deployment. Configure hooks to run tests, format code, send notifications, or update docs.

Q: Can I integrate Claude Code with my existing CI/CD pipeline?

Yes. Integrate with GitHub Actions, GitLab CI, or Jenkins. Automatically review pull requests, run tests, and generate release notes. Headless mode runs in automated environments without human interaction.

Claude Code path completed.

Share this article

Related Articles

AI TutorialsBeginner

How to Write Prompts That Actually Work: The 5-Point Framework

Vague prompts get mediocre answers. Master the 5-Point Prompt Framework — Role, Context, Task, Format, Constraints — and get dramatically better results from any AI tool.

5 min read
PromptsPrompt EngineeringFramework