skills.rest
antonyfmunoz
antonyfmunozCOMMUNITY
Explore all skills by this author →
GitHub

saas-dev:react-gen

Generate React/TypeScript page components into .tsx files with design-token enforcement.

1|Updated Mar 11, 2026
Search Tags:#typescript#react#design tokens#component validation#tsx generation#vite preview#ui self-review
One-click install
npx skills add https://github.com/antonyfmunoz/OS --skill saas-dev-react-gen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: saas-dev:react-gen
Source: https://github.com/antonyfmunoz/OS/tree/main/skills/saas-dev-skill/.claude/skills/saas-dev/skills/react-gen
Command: npx skills add https://github.com/antonyfmunoz/OS --skill saas-dev-react-gen

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about saas-dev:react-gen

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

FAQPage Schema
How do I generate production-ready React TSX pages with enforced design tokens?▼

Generate production-ready React TSX pages by providing your page specification and copy; the skill writes validated React/TypeScript components directly to .tsx files while enforcing a fixed design-token system for colors, typography, and styling.

Can I build multiple React pages in parallel while maintaining shared component dependencies?▼

Yes, you can build multiple React pages in parallel; the skill first generates required shared layout components sequentially, then concurrently generates pages with validation, ensuring consistent imports and styling across all concurrent outputs.

How do I apply surgical edits to existing TSX components for Vite hot reload?▼

Apply surgical edits to existing TSX components using edit mode; the skill reads your existing code, applies guided modifications, and rewrites the file to enable instant Vite hot reload preview without regenerating the entire page.

Does React TSX generation validate component structure and banned imports?▼

Yes, React TSX generation validates component structure, banned imports, styling constraints, and completeness; if validation fails, the skill executes a one-step recovery retry to ensure compliance before writing the final output.

What is the best way to automate SaaS front-end page creation with consistent styling rules?▼

Automate SaaS front-end page creation by enforcing a shared component-first workflow; the skill sequentially builds layout primitives, applies mandatory design rules, and runs a self-review scoring system to ensure complete styling compliance across all generated pages.

Do I need Vite to preview generated React TSX page components?▼

Vite is required for live preview; generated TSX components are written directly to the client/src/pages directory as kebab-named files, enabling instant Vite hot reload during development and post-build surgical edits.

Related Skills

Explore More Software Engineering Skills→
chaitinchaitin
5

frontend-project-creator

Scaffold React frontend projects with Vite, TypeScript, and chosen UI libraries.

Official
Advanced
ouzayrouzayr

mockup-sandbox

Create and preview web UI components on a canvas via Vite dev server.

Community
Advanced
antonyfmunozantonyfmunoz

saas-dev:orchestrator

Orchestrate a SaaS pipeline from spec to React, backend, migrations, and deployment.

Community
Advanced
Design-System-ETDesign-System-ET

ui-creator

Convert UI images and OpenAPI specs into Angular or React components and services.

Official
Advanced