Claude Code + GitHub WORKFLOW for Complex Apps

Unlocking Superpowers in Web App Development with AI Coding Workflow: A Deep Dive into Cloud Code and GitHub Integration

Over the past few weeks, I embarked on a journey to build a new web app using a powerful AI-assisted development workflow integrating Cloud Code and GitHub. This approach has truly unlocked new superpowers in my coding process, allowing for rapid, iterative, and well-managed software development. In this blog post, I’ll share the high-level workflow, the rationale behind it, and detailed insights into each phase, including planning, creating, testing, and deploying code with AI assistance.

The AI Coding Workflow at a Glance

The workflow centers around managing work through GitHub issues and leveraging Cloud Code's custom slash commands to process these issues methodically. Here's how it works:

Issue Creation: Every feature or bug fix starts as a GitHub issue.
Planning: Cloud Code uses detailed instructions to break down big issues into small, atomic tasks using scratchpads.
Code Generation: Once planned, Cloud Code writes the code.
Testing: The AI runs test suites and uses Puppeteer to verify UI changes by simulating browser interactions.
Commit & Pull Requests: After successful testing, Cloud Code commits changes and opens a pull request (PR) for review.
Review & Integration: PRs are reviewed either by me or by Claude Code itself, with continuous integration (CI) systems running tests on every commit.
Cycle Repeats: After clearing the context window with /clear, the system moves to the next issue.

This cycle aligns closely with the classic software development life cycle (SDLC) phases: plan, create, test, and deploy.

Why Adopt This Workflow?

Even with advanced AI coding assistants, writing code is only one part of delivering quality software. The software industry has long recognized that managing the entire lifecycle — from planning to deployment — is crucial. The workflow I use is heavily based on GitHub Flow, a proven process designed for small teams and perfectly suited for a human paired with an AI assistant.

This structured approach ensures that AI-generated code integrates well with existing systems, remains maintainable, and is thoroughly tested before deployment.

Detailed Breakdown of the Workflow

1. Creating and Refining GitHub Issues

My process starts with dictation and transforming ideas into a requirements document using Claude. From there, Claude helps generate GitHub issues.

Key Lessons:
- Initially, I created 30–40 issues right away, which was overly optimistic.
- The issues needed to be granular, specific, and atomic to set the AI up for success.
- I had to take on a managerial role: refining issues, prioritizing tasks, and clarifying specifications.
- This phase is critical and involves a lot of human involvement to ensure the AI understands the scope and requirements precisely.

2. Setting Up the Foundation

Before AI can be effective, a solid foundation is essential:

Test Suite and Continuous Integration (CI): I prioritized setting up a robust test suite using Rails’ integrated testing framework and connected it with GitHub Actions for automatic testing on commits.
Puppeteer for UI Testing: Puppeteer allows Cloud Code to interact with the app in a real browser, clicking buttons and filling forms to validate UI changes, which is surprisingly satisfying to watch.
The foundation enables rapid, confident feature development with automated safety nets.

3. Planning with Custom Slash Commands

I created a custom slash command that accepts an issue number and guides Cloud Code through four stages: plan, create code, test, and deploy.

Planning Highlights:
- Cloud Code uses the GitHub CLI to fetch issue details.
- It searches scratchpads and previous PRs to gather context and avoid duplicate work.
- I utilize Anthropic’s “think harder” prompt to encourage deeper reasoning.
- The AI breaks down issues into manageable subtasks and documents them.

4. Create, Test, and Deploy

Creating and Testing:
- Claude writes the code and commits changes.
- While some teams prefer manually reviewing all commits, I’ve allowed Claude to handle commits and focused on reviewing pull requests.
- Tests serve as a confidence booster, ensuring changes don’t break existing features.
- I encourage thorough code reviews and sometimes have Claude perform PR reviews in the style of coding experts like Sandy Mets, which surfaces maintainability improvements.

Deploying:
- I deploy using Render, which automatically updates the app on merges to the main branch.
- Merging a PR essentially equates to a production deployment in this workflow.

Human vs. AI Responsibilities

Human Focus: I spend most of my time during the planning phase, crafting precise issues and refining specs.
AI Focus: Claude Code handles much of the coding, testing, and deploying, with occasional human code reviews.
This balance leverages the strengths of both parties effectively.

Managing Context with `/clear`

After merging a PR, I use the /clear command to wipe Cloud Code’s context window, ensuring that each issue is tackled fresh without previous context pollution. This keeps token usage efficient and forces issues to be self-contained with all necessary information.

Using Claude via GitHub Actions: Pros and Cons

Anthropic introduced Claude integration directly in GitHub Actions, allowing AI to work on GitHub issues via tagging. However:

This method is metered and can incur additional API costs, even on unlimited plans.
I found better results and more insightful interactions using Cloud Code in the console.
GitHub Actions are ideal for small tweaks or copy edits but less practical for large, complex changes.

Running Parallel Agents with Work Trees

Work trees allow running multiple AI agents in parallel on different branches, akin to multitabling in online poker. However, I encountered some challenges:

Permission re-approval was required for each new session, leading to time-consuming babysitting.
Managing multiple work trees increased merge conflicts and overhead.
Due to the early stage of my app and iterative nature of development, parallel work had limited benefit.
For now, a single Cloud Code instance suffices for my needs.

Final Thoughts

This AI-powered workflow combining Cloud Code, GitHub issues, custom slash commands, automated testing, and CI has transformed how I build web apps. It requires a shift in mindset — embracing a managerial role in planning while delegating coding and testing to AI. The process is iterative and involves continuous refinement of issues and commands, but it holds immense promise for boosting productivity and code quality.

If you’re interested in learning more, I recommend checking out my video on Claude Code pro tips for deeper insights into maximizing AI coding assistants.