saas-dev:integrator

Integrate LLM-generated React TSX pages into SaaS codebases with route and sidebar wiring.

1|Updated Mar 11, 2026
One-click install
npx skills add https://github.com/antonyfmunoz/OS --skill saas-dev-integrator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: saas-dev:integrator
Source: https://github.com/antonyfmunoz/OS/tree/main/skills/saas-dev-skill/.claude/skills/saas-dev/skills/integrator
Command: npx skills add https://github.com/antonyfmunoz/OS --skill saas-dev-integrator

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It turns LLM-generated React TSX page output into fully wired, working UI by integrating routes, navigation, and components safely—without silently overwriting existing code.

Core Features & Use Cases

  • Per-page route + nav wiring: Injects a ProtectedRoute (and optional CompanyGate) into App.tsx and adds the correct remixicon-based sidebar entry.
  • Safe translation-to-code workflow: Converts Phase 3 React TSX HTML output into shadcn-compatible React TSX, then runs multiple review passes and verification before writing.
  • Branch + atomic commits + PR creation: Creates an integration feature branch, writes pages with conflict checks, commits each integrated page atomically, then pushes and opens a PR.

Quick Start

Ask the AI to run the saas-dev:integrator skill using your SaaS projectRoot, App.tsx path, sidebar path, and projectId after Phase 3 (react-gen) has completed and marked the target pages as complete in the pipeline.

Frequently Asked Questions about saas-dev:integrator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I integrate LLM-generated React pages into an existing SaaS codebase?▼

To integrate LLM-generated React pages into a SaaS codebase, this skill wires routes into App.tsx and adds sidebar navigation entries. It translates generated HTML to shadcn/ui TSX and performs conflict checks before writing files to prevent overwriting existing code.

How can I add new React routes to App.tsx without causing file conflicts?▼

Adding React routes to App.tsx without causing file conflicts requires a workflow that audits existing inventory and detects route or file collisions. This skill detects potential conflicts during integration and prompts user-driven resolution before applying any code changes.

Does the page integration workflow support shadcn/ui translation and git branching?▼

Yes, the page integration workflow supports shadcn/ui translation and git branching by converting React TSX output to shadcn-compatible components. It creates an integration feature branch and commits each integrated page atomically before opening a pull request.

What is the best way to wire sidebar navigation for newly generated React TSX pages?▼

The best way to wire sidebar navigation for newly generated React TSX pages is to automatically inject the correct remixicon-based sidebar entry. This skill handles sidebar updates alongside route injection into App.tsx to ensure complete navigation wiring.

When do I need data-fetching guards during shadcn/ui component translation?▼

Data-fetching guards are needed during shadcn/ui component translation to prevent runtime errors when converting raw HTML output. This skill applies these guards during the HTML-to-shadcn translation process to ensure safe integration into your SaaS application.

Can I use this React code integration workflow for multi-page SaaS updates?▼

Yes, you can use this React code integration workflow for multi-page SaaS updates. It is specifically designed for brownfield inventory auditing and applying multi-page React app updates where generated output must be safely inserted into existing project structures.