saas-dev:react-gen

What problem does it solve?

This Skill eliminates the slow, error-prone UI handoff loop by generating complete React/TypeScript page components directly from Claude into production-ready .tsx files.

Core Features & Use Cases

• Direct TSX page generation: Produces finished React components with no intermediate HTML or external UI generation service.
• Design token enforcement: Applies mandatory design rules (colors, typography, icons, radius, banned styles) to keep output consistent with the system.
• Shared component-first workflow: Builds required layout primitives sequentially, writing them immediately so subsequent pages can import them.
• Validated output with self-review: Runs generation validation (structure, banned imports, styling constraints, completeness) and retries once when needed.
• Parallel page builds: Generates multiple pages concurrently while maintaining consistent shared component dependencies.
• Edit mode for surgical updates: Enables post-build modifications by reading existing code, applying guided changes, and rewriting the file for instant Vite hot reload.

Quick Start

Ask for a new page in your desired route and include the page spec and copy, and the skill will write a validated TSX component to client/src/pages/{kebab-name}-page.tsx for Vite live preview.