Heidelberg AICurriculum

Claude Code Advanced Workflow - Build & Ship Real Apps

Leon van Zyl ·2026-05-26 ·1 min read

Summary written by us from the video's transcript. The video, and everything in it, is Leon van Zyl's work.

Learn how to structure Claude Code projects with reusable skills, design systems, planning phases, and automated checkpoints for building real applications efficiently.

Takeaways

  • Define a reusable skill for your tech stack and install it via `npx skills <repo>` to bootstrap projects instantly.
  • Generate and lock a UI design system in `design.md` so all generated components stay consistent.
  • Break a large project plan into independent waves; sub‑agents can work in parallel, reducing overall build time.
  • Use a checkpoint skill to auto‑create concise commit messages after each wave of changes.
  • Leverage Claude’s Goal command with the agent view to coordinate multiple parallel implementation sessions.

Create a Reusable Project Skill

Instead of manually installing frameworks each time, define an agent skill that describes your entire tech stack. Install it in a new project with the command `npx skills <your‑repo>` which scans the repo for available skills and lets you select one, such as *create a genteck app*. The skill sets up the folder structure, installs dependencies, and can remove unwanted template features automatically. Updating the skill in its GitHub repository propagates changes to future projects.

Set Up a Design System Early

Begin by creating a basic landing page and establishing a UI design system before adding backend complexity. Use Claude’s front‑end design skill (or tools like Google Stitch) to generate a unique design, store it in a `design.md` file, and have the agent follow this system for all components. Keeping Claude’s responses concise saves tokens and costs.

Plan with Detailed Phases

Prompt Claude to produce a high‑level plan for your app (e.g., a second‑brain web scraper) and then break that plan into phases or “waves.” Each wave contains independent tasks, dependencies, and technical details, allowing parallel execution by sub‑agents. This avoids implementing everything in one session and aligns with the Goal command workflow.

Automate Commits with Checkpoints

Create a simple *checkpoint* skill that generates commit messages summarizing changes. Run the checkpoint command after each set of modifications; you can customize comment detail level (one‑liner or detailed). This keeps version control tidy and provides clear progress markers.

Execute Implementation via Goal Command

Store the phased implementation plan in a `specs` folder, then use Claude’s Goal command to fire off multiple sub‑agents across waves simultaneously. Run `claude agents` (optionally with dangerous skip‑permissions mode) to start parallel sessions that each handle a wave’s tasks, speeding up development while respecting the design system and commit checkpoints.