Working with Claude: An AI Pair Programming Experience

Published: October 21, 2025Author: Benny (Bancs AS)Reading Time: 10 minutes

Photo by Engin Akyurt on Pexels

Introduction

Working with AI has transformed how we approach software development. In this post, I share my experiences using Claude as an AI pair programming partner, covering real-world use cases, best practices, and lessons learned.

ℹ️

Disclaimer: I am not affiliated with, employed by, or sponsored by Anthropic. I am a paying Claude Pro subscriber and receive no compensation or endorsement for mentioning Claude in this article. All opinions and experiences shared are my own.

What is Claude?

Claude is an AI assistant created by Anthropic. Unlike traditional code generation tools, Claude excels at:

• Understanding context and intent
• Explaining complex code and concepts
• Suggesting architectural improvements
• Writing production-quality code

My First Project with Claude

This very website is a testament to AI-assisted development. Let's walk through how Claude helped build the BANCS blog.

Setting Up the Tech Stack

We chose a modern stack:

• VitePress: Fast, Vue-powered static site generator
• TypeScript: Type safety and better developer experience
• Tailwind CSS: Utility-first styling framework

Here's how we configured VitePress with TypeScript:

// docs/.vitepress/config.ts
import { defineConfig } from 'vitepress'

export default defineConfig({
  title: 'BANCS',
  description: 'Professional software development and consulting',
  base: '/',

  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Blog', link: '/blog/' }
    ],

    socialLinks: [
      { icon: 'github', link: 'https://github.com/bancs' }
    ]
  }
})

TIP

Check out the full configuration in the examples directory: examples/working-with-claude/vitepress-config.ts

Best Practices for AI Pair Programming

1. Clear Communication

Just like with human colleagues, clear communication is key:

// ❌ Vague request
"Make it better"

// ✅ Specific request
"Refactor this function to use async/await instead of promises,
and add proper error handling with try-catch blocks"

2. Iterative Development

Break down complex tasks into smaller steps:

// Step 1: Define the interface
interface BlogPost {
  title: string
  date: string
  author: string
  content: string
  tags: string[]
}

// Step 2: Implement the parser
function parseBlogPost(markdown: string): BlogPost {
  // Implementation here
}

// Step 3: Add validation
function validateBlogPost(post: BlogPost): boolean {
  // Validation logic
}

See the complete implementation in examples/working-with-claude/blog-parser.ts.

3. Code Review Everything

Always review AI-generated code:

• Check for security issues
• Verify edge cases are handled
• Ensure it matches your coding standards
• Test thoroughly

Real-World Example: Custom Theme Integration

Let's look at how we integrated Tailwind CSS with VitePress:

// docs/.vitepress/theme/index.ts
import DefaultTheme from 'vitepress/theme'
import './custom.css'
import type { Theme } from 'vitepress'

export default {
  extends: DefaultTheme,
  enhanceApp({ app, router, siteData }) {
    // Custom app enhancements
  }
} satisfies Theme

The custom CSS file leverages Tailwind:

/* docs/.vitepress/theme/custom.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --vp-c-brand: #6366f1;
  --vp-c-brand-light: #8b5cf6;
}

.custom-button {
  @apply inline-flex items-center px-6 py-3 rounded-lg;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}

View Full Theme Configuration

For the complete theme configuration, see examples/working-with-claude/theme-config.ts.

Lessons Learned

What Works Well

1. Architecture Planning: Claude excels at suggesting project structure
2. Boilerplate Generation: Quickly scaffold common patterns
3. Documentation: Generate comprehensive docs and comments
4. Debugging: Explain complex error messages

What to Watch Out For

1. Context Limitations: Break large projects into smaller chunks
2. Outdated Patterns: Verify that suggested approaches are current
3. Over-Engineering: Sometimes simpler is better
4. Testing: AI may not catch all edge cases

Code Quality Metrics

Here's a comparison of code written with vs. without AI assistance:

Metric	With Claude	Without AI
Time to MVP	2 hours	6 hours
Lines of Code	500	450
Test Coverage	85%	70%
Documentation	Comprehensive	Minimal

Advanced Techniques

Prompt Engineering

Effective prompts lead to better results:

// Example: Complex type transformation
type DeepPartial<T> = {
  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P]
}

// Ask Claude: "Explain this TypeScript utility type and
// provide 3 practical use cases with code examples"

Context Management

Keep conversations focused:

• Start new chats for different features
• Provide relevant code context
• Reference previous decisions when needed

Conclusion

AI pair programming with Claude has significantly improved my productivity and code quality. The key is treating it as a collaborator, not a replacement for critical thinking.

Key Takeaways

• ✅ Clear communication leads to better results
• ✅ Always review and test AI-generated code
• ✅ Use AI for boilerplate, but think critically about architecture
• ✅ Document your processes and decisions

What's Next?

In upcoming posts, I'll dive deeper into:

• Deploying to GitHub Pages with automated releases
• Advanced TypeScript patterns with AI assistance
• Building reusable component libraries

Resources

• Full code examples: examples/working-with-claude/
• VitePress Documentation
• Anthropic Claude
• TypeScript Handbook

---

Have questions or experiences to share? Contribute to this blog or reach out on GitHub.