LogoCésar Alberca

AstroKube — Implementing an Agentic Frontend Architecture (AI)

Case Study

#Summary

Problem: Agentic coding generates code without considering best practices, resulting in code that does not scale, potential bugs, and failure to unlock the full potential of AI agents.

Solution: Creation of 10 Frontend Architecture skills for agents, definition of multi-model conventions based on best practices, and the establishment of a solid Frontend Architecture foundation.

Result: Greater adoption by the team, a substantial improvement in code quality, more effective use of AI agents, lower costs, and more confidence from users.

#About AstroKube

AstroKubeOpen in a new tab is a Spanish company led by Nicolás QuicenoOpen in a new tab and Pasquale ToscanoOpen in a new tab. AstroKube is dedicated to automating cloud deployments. They are experts in Kubernetes and infrastructure.

Pasquale reached out through my website; he knew me from my Frontend Architecture talks. He told me they were developing their own product and wanted someone with expertise on the Frontend side to help them define a scalable Frontend architecture that was integrated with AI.

#The challenge

The product wasn't progressing as fast as they wanted, nor were they fully leveraging AI agents like Claude Code. They lacked a set of conventions, and the code generated by the agents was based on what already existed: although it was reasonably well-structured, certain parts could be improved.

#The Solution: Architectural Patterns for Scalable Innovation

To address the challenges mentioned above, the following changes were made:

  • A use case engine was defined to abstract their execution, enabling middlewares to run arbitrary code and reconfigure the application to a great extent.
  • A test-harness was added with PlaywrightOpen in a new tab, and testing strategies were defined for unit, integration, and e2e tests.
  • The project was configured using BiomeOpen in a new tab to improve lint rules and reduce CI time.
  • New CI workflows were defined.
  • We defined 10 multi-agentic skills with the best Frontend Architecture practices, including a skill to create skills and a skill to capture learnings.
  • We created a PRD-based workflow with technical tasks generated from AI interviews.

Once this foundation was in place, one application module was migrated to serve as an example — both for the AI and for humans — when migrating the remaining modules.

In addition, as part of our collaboration, we built a project for one of their clients in record time using all the pieces previously built, including a monorepo with TurborepoOpen in a new tab, a design system with StorybookOpen in a new tab, and an architecture library. The whole configuration was abstracted so it would be reusable not only in one project but across all of them.

This entire process was documented internally, knowledge transfer sessions were held, and juniors were mentored so the team has ownership of the architecture and no knowledge silos are created.

Interested in implementing a similar solution in your organization?

Let's talk about how a robust codebase reduces costs, prevents errors, and increases development speed.

Schedule a call with me →

#AstroKube Results

By raising code quality, errors were reduced.

By creating reusable architecture pieces, costs were lowered.

By having a scalable architecture, AI integration improved, allowing AstroKube to win a client thanks to the quality of generated code and development speed, without losing trust in the codebase.

#AstroKube Conclusion

AI has driven code to no longer be a commodity, making other areas like architecture more critical — where the optimization that can be achieved makes the investment of resources truly worthwhile, as the return on investment has grown.

#Ready to Transform Your Development Process?

If you're facing challenges with:

  • Integrating AI agents without sacrificing quality
  • Maintaining complex business logic across your application
  • Ensuring consistency in your user interface
  • Scaling your development team while keeping the codebase solid
  • Reducing technical debt and improving maintainability

Let's talk about your specific challenges

I'd love to explore how these architectural patterns can benefit your organization and create a tailored implementation roadmap.

Schedule a call with me →

During our call:

  1. We'll discuss your current development challenges
  2. We'll explore how solid architecture integrates with AI agents
  3. We'll create a tailored roadmap to implement these patterns in your organization
  4. We'll answer any questions you have about the implementation process

Don't let technical debt and inconsistent UIs slow down your development process. Take the first step toward a more maintainable, scalable, and efficient codebase today.