Automating SaaS Replatforming with Agentic AI

Messagebox is a HotelTech SaaS platform built for hospitality teams to manage service requests, employee communications, guest interactions, and housekeeping operations. The core product relies on a primary web application paired with a companion mobile app for status updates.

• Scale of the Rewrite: Moving a substantial legacy JavaScript codebase to TypeScript while switching the UI component foundation to Radix UI required massive parallel effort across screens, API integrations, and data models.
• Consistency Risk: With many screens to rebuild, manually maintaining a coherent design language across the platform was error-prone and time-consuming.
• Team Size Constraint: A solo developer was responsible for delivering the entire migration, making the scope nearly impossible with conventional approaches.
• Speed Expectations: The previous legacy migration had taken more than four months; business timelines for next generation major upgrade demanded a significantly faster turnaround.

We approached the legacy migration by wiring Claude’s capabilities into the entire development workflow from the start, rather than using AI for isolated tasks. Using Claude Code (powered by the Claude Opus 4.8 model) as the core execution engine, we drove the agentic coding work to generate screens, correct output, scaffold new routes, and iterate on TypeScript types.

The developer utilized Claude Code not just to write code, but to review and validate what had already been generated. This created a tight, automated loop between generation and correction within the same workflow, ensuring the output rarely needed significant manual rework.

To provide the AI with grounded domain knowledge, three purpose-built Claude Skills formed the backbone of the approach:

• Theme and Pattern Extraction: A custom skill analyzed the existing legacy application to extract its design language, color tokens, spacing, component patterns, and visual conventions, giving Claude a grounded understanding before generating code.
• API Layer Wiring: A skill that encoded how the app's API layer was structured, including data models and integration patterns, allowing generated TypeScript components to connect correctly to the backend instantly.
• Screen Generation: Guided Claude to generate new screens that perfectly matched the extracted visual system while producing valid TypeScript using Radix UI primitives.

• ~2 weeks deployment time: Compressed the 4+ month timeline of the legacy migration into a fraction of the time, radically accelerating time-to-market for the next generation platform.
• Lean development execution: Engaged a single engineer to achieve the output of multiple developers by systematically composing Claude's capabilities and custom skills.
• Systematic UI consistency: Replaced manual, variable UI coding with a pattern-driven approach, generating uniformly coherent screens from extracted design tokens.
• Full TypeScript coverage: Successfully transitioned from zero legacy TypeScript to a fully typed next generation baseline, securing type safety and significantly reducing the cost of future feature development.