The challenge
Chipax is a B2B fintech SaaS used by Chilean SMEs for accounting and cash flow management. As the product grew, its UI had become a monolithic structure: hard to maintain, inconsistent across screens, and nearly impossible for AI coding tools to modify reliably.
A developer on the team put it directly: AI doesn’t understand monolithic architecture well. To make AI-assisted development effective, I needed to build a modular, standardized component system.
What I did
01 · Proposed the migration
I identified and championed shadcn-vue as Chipax’s new UI foundation, a headless, composable system built on patterns that AI tools like Claude Code understand natively. The real pitch was making the entire frontend legible to AI.
02 · Implemented the component library
I migrated 30+ components, establishing a shared standard for how UI is built across the product.
03 · Upgraded to Tailwind v4
Led the migration to Tailwind CSS v4 and the new shadcn-vue v4 components, with Claude Code as an active collaborator in the process.
04 · Enabled Storybook
The modular architecture made it possible to document and develop components in isolation for the first time.
05 · Codified UX writing
Built a Claude Code skill that applies Chipax’s voice and tone guidelines automatically. New components and features get consistent microcopy without a manual pass.
The insight
Monolithic UI codebases create a hidden problem in the AI era. Tools like Claude Code struggle to make precise, scoped changes when components aren’t isolated. Migrating to a composable architecture made the entire frontend more legible to AI. Every component is now a clear, bounded unit that both humans and AI can reason about independently.
This wasn’t an obvious migration to propose. Chipax had been on Vuetify for years. The bet was that investing in composability would pay off in maintainability, and more in a new kind of developer leverage where AI becomes a reliable collaborator instead of a source of regressions.
Outcomes
Unlocked AI-assisted development
By proposing a composable architecture, I gave the team the infrastructure to use Claude Code reliably. Scoped, precise changes are now feasible, something architecturally impossible before.
Consistent UI standard
30+ components migrated to a shared system, reducing visual inconsistencies across the product.
Storybook
Components are now documented and developed in isolation for the first time in Chipax’s history.
Tailwind v4
Successfully migrated the entire styling system to Tailwind CSS v4, staying current with the ecosystem.