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.