react-vite

Guide React and Vite app builds in a pnpm monorepo with API planning.

Updated Apr 1, 2026
One-click install
npx skills add https://github.com/koya-alt/Catalyst --skill react-vite-koya-alt
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-vite
Source: https://github.com/koya-alt/Catalyst/tree/main/local/skills/react-vite
Command: npx skills add https://github.com/koya-alt/Catalyst --skill react-vite-koya-alt

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It eliminates the chaos of manually coordinating backend API contracts, code generation, and frontend design when building React + Vite applications inside a pnpm monorepo.

Core Features & Use Cases

  • App Classification: Guides you to categorize the project (presentation‑first, personal utility, CRUD, logic‑heavy, or interactive) and decide design subagent ownership.
  • API Planning: Encourages adding “wow” endpoints and using OpenAPI spec with codegen for a polished experience.
  • Parallel Build Workflow: Details how to run backend development and design subagent‑driven frontend creation simultaneously for speed.
  • Design Subagent Delegation: Provides precise instructions on launching the design subagent, passing relevant files, and managing its bottleneck.
  • SEO & Consistency: Includes best‑practice SEO tags and guidance on extracting visual tokens for multi‑artifact projects.

Quick Start

Request the assistant to create a new React + Vite app by describing the app’s purpose and providing any existing OpenAPI specifications.

Frequently Asked Questions about react-vite

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

FAQPage Schema
How do I build a React and Vite application inside a pnpm monorepo?▼

To build a React and Vite application in a pnpm monorepo, you can use guidelines that classify the project, plan APIs with OpenAPI codegen, and coordinate parallel backend and frontend workflows to streamline development.

What is a design subagent and how does it help create frontend UI?▼

A design subagent is a delegated process that drives frontend creation by receiving precise instructions and relevant files. It helps create frontend UI by managing visual design bottlenecks while backend development runs simultaneously.

Can I use an OpenAPI spec for code generation in a React and Vite monorepo?▼

Yes, you can use an OpenAPI spec for code generation in a React and Vite monorepo. The workflow encourages adding API endpoints and using OpenAPI specifications to establish backend contracts and generate polished frontend code.

How do I run backend API design and frontend development in parallel?▼

You run backend API design and frontend development in parallel by delegating frontend creation to a design subagent. Pass relevant files to the subagent and manage its bottleneck while backend API planning and codegen proceed simultaneously.

When do I need to classify my web app before starting frontend development?▼

You need to classify your web app before starting frontend development to decide design subagent ownership. Categorizing the project as presentation-first, personal utility, CRUD, logic-heavy, or interactive determines the coordinated build workflow.

How do I add SEO tags and visual tokens to a multi-artifact React project?▼

You add SEO tags and visual tokens to a multi-artifact React project by following built-in best practices. The workflow includes guidance on integrating SEO tags and extracting visual design tokens to maintain consistency across project artifacts.