skills.rest
AmirEmad11
AmirEmad11COMMUNITY
Explore all skills by this author →
GitHub

react-vite

Builds React and Vite web applications in a pnpm monorepo with design subagent delegation.

Updated Apr 20, 2026
Search Tags:#react#drizzle#vite#seo#openapi codegen#design subagent#pnpm monorepo
One-click install
npx skills add https://github.com/AmirEmad11/instabot --skill react-vite-amiremad11
Or copy as Structured Prompt for Agentâ–¼
Please help me install this Agent Skill.
Skill: react-vite
Source: https://github.com/AmirEmad11/instabot/tree/main/.local/skills/react-vite
Command: npx skills add https://github.com/AmirEmad11/instabot --skill react-vite-amiremad11

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building a full-stack React + Vite app inside a pnpm monorepo involves many coordinated steps — OpenAPI contracts, code generation, database schema, routing, theming, and SEO — and doing them in the wrong order wastes time or produces broken integrations. This Skill orchestrates the entire build workflow, including delegating the frontend to a design subagent, so the app comes together correctly on the first pass. ## Core Features & Use Cases - Structured first-build workflow: Classifies the app (presentation-first, personal utility, CRUD/dashboard, logic-heavy, or interactive game) and splits work between the parent agent and the design subagent accordingly. - Contract-first backend pipeline: Plans the API surface with extra read-only "wow" endpoints, writes the OpenAPI spec, runs Orval codegen, and implements Drizzle schema and routes using exact generated type names. - Design subagent delegation: Launches an async design subagent with generated API hooks, theme files, and relevant skills so the frontend is built in parallel with backend work. - Frontend and SEO references: Ships detailed rules for wouter routing, shadcn forms, Orval hooks, dark-mode theming, test IDs, plus a full SEO implementation guide covering meta tags, sitemaps, structured data, and SPA crawlability. - Use Case: Ask for a habit-tracking app with a dashboard; the Skill writes the OpenAPI spec, runs codegen, launches the design subagent with the generated hooks, builds the Drizzle schema and routes in parallel, seeds data, and finishes with a deploy prompt. ## Quick Start Build me a React + Vite web app for tracking reading lists with a dashboard showing my reading stats.

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 + Vite app in a pnpm monorepo?â–¼

Classify the app type first, then write the OpenAPI spec in lib/api-spec/openapi.yaml and run codegen. Launch the design subagent with the generated hooks, then build the Drizzle schema and API routes in parallel while it works on the frontend.

How to use Orval-generated hooks in a React frontend?â–¼

Import the generated hooks from @workspace/api-client-react instead of writing raw fetch calls. Query hooks return data directly, and when passing options like enabled you must also pass the generated queryKey helper.

When should the design subagent be used for the frontend?â–¼

The design subagent must be used for every first build with no exceptions, regardless of app size or whether a backend exists. Launch it immediately after codegen completes, since it is the bottleneck of the workflow.

Why is my WebSocket connection not reaching the server?â–¼

The proxy only forwards paths explicitly listed in artifact.toml's paths array. Add the WebSocket path such as /ws alongside the REST API path, otherwise the connection is silently dropped.

Does a React SPA support SEO and search engine crawling?â–¼

SPAs need extra work because crawlers may not execute JavaScript. Use pre-rendering or hardcoded meta tags in the HTML shell, unique titles per route, Open Graph tags, robots.txt, sitemap.xml, and JSON-LD structured data.

Why does my Vite frontend show red backgrounds and borders?â–¼

The scaffold's index.css ships with every CSS custom property set to red as a placeholder. Rewrite the :root and .dark blocks with a cohesive theme palette before writing any components.

Related Skills

Explore More Software Engineering Skills→
ehtbantonehtbanton

pnpm-workspace-generator

Generate pnpm-workspace.yaml configuration files for pnpm monorepos.

Community
Basic
ShopHeckShopHeck

extract-design-system

Extract colors, fonts, and spacing design tokens from websites into JSON and CSS files.

Community
Intermediate
AugustEmnaAugustEmna

design

Delegate frontend design tasks to a DESIGN subagent with project context.

Community
Intermediate
aryankumarraiaryankumarrai

expo

Build cross-platform mobile apps with Expo Router and React context.

Community
Advanced