How do I install the React Spa Vite skill?

Run npx skillmds@latest add tomevault-io/react-spa-vite in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is React Spa Vite safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: CAUTION, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with React Spa Vite?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is React Spa Vite free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published React Spa Vite?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

React Spa Vite by tomevault-io — Agent Skill

Name: React Spa Vite
Author: tomevault-io

React Spa Vite

Scaffold and build production-ready static SPAs with Vite, React, Tailwind CSS v4, PWA support, Subresource Integrity (SRI), and image optimization. Use when creating a new React SPA, setting up a Vite + React + Tailwind stack, enabling offline/PWA behavior, hardening build output with SRI, adding image optimization, or configuring optional Vitest/Playwright testing. Use when this capability is needed.

tomevault-io Updated Sep 17, 2026

File contents

React SPA Vite

Create a production-ready static React SPA and keep decisions consistent.

Workflow

Confirm required inputs:

App name
Package manager (pnpm preferred)
Need for PWA and offline support
Need for SRI hardening
Need for image optimization
Need for optional testing setup (Vitest, Playwright, both, or none)

Initialize the project with Vite React SWC TypeScript template.
Configure core stack:

Tailwind CSS v4 via @tailwindcss/vite
TypeScript strict settings
Vite aliases when requested

Add production features requested by the user:

PWA via vite-plugin-pwa
SRI via vite-plugin-sri-gen (must be last in Vite plugin order)
Image optimization via vite-imagetools

Apply sensible defaults for static deployment:

Keep index.html in project root
Keep source assets in src/assets/*
Keep deployable static output in dist/

Validate setup:

Install dependencies
Run type checks and build
Run preview
Run tests only if test tooling was added

Reference Map

Load only the reference needed for the current request:

references/quickstart.md Use for project bootstrap, dependency installation, scripts, and baseline file structure.
references/configuration.md Use for Vite plugin setup, Tailwind v4, PWA, SRI, image optimization, env vars, fonts, and common implementation patterns.
references/testing.md Use only when the user asks for unit/component tests (Vitest) or E2E tests (Playwright).
references/troubleshooting.md Use only when diagnosing build, plugin, PWA, Tailwind, asset, or dev server issues.

Guardrails

Keep SKILL.md focused on orchestration; put detailed snippets in references.
Do not inline large templates in the main skill body.
Prefer minimal, working defaults first; add advanced options only when requested.
Prefer pnpm commands unless the user requests another package manager.

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: react-spa-vitedescription: Scaffold and build production-ready static SPAs with Vite, React, Tailwind CSS v4, PWA support, Subresource Integrity (SRI), and image optimization. Use when creating a new React SPA, setting up a Vite + React + Tailwind stack, enabling offline/PWA behavior, hardening build output with SRI, adding image optimization, or configuring optional Vitest/Playwright testing. Use when this capability is needed.---# React SPA ViteCreate a production-ready static React SPA and keep decisions consistent.## Workflow1. Confirm required inputs:- App name- Package manager (`pnpm` preferred)- Need for PWA and offline support- Need for SRI hardening- Need for image optimization- Need for optional testing setup (Vitest, Playwright, both, or none)2. Initialize the project with Vite React SWC TypeScript template.3. Configure core stack:- Tailwind CSS v4 via `@tailwindcss/vite`- TypeScript strict settings- Vite aliases when requested4. Add production features requested by the user:- PWA via `vite-plugin-pwa`- SRI via `vite-plugin-sri-gen` (must be last in Vite plugin order)- Image optimization via `vite-imagetools`5. Apply sensible defaults for static deployment:- Keep `index.html` in project root- Keep source assets in `src/assets/*`- Keep deployable static output in `dist/`6. Validate setup:- Install dependencies- Run type checks and build- Run preview- Run tests only if test tooling was added## Reference MapLoad only the reference needed for the current request:- `references/quickstart.md`Use for project bootstrap, dependency installation, scripts, and baseline file structure.- `references/configuration.md`Use for Vite plugin setup, Tailwind v4, PWA, SRI, image optimization, env vars, fonts, and common implementation patterns.- `references/testing.md`Use only when the user asks for unit/component tests (Vitest) or E2E tests (Playwright).- `references/troubleshooting.md`Use only when diagnosing build, plugin, PWA, Tailwind, asset, or dev server issues.## Guardrails- Keep `SKILL.md` focused on orchestration; put detailed snippets in references.- Do not inline large templates in the main skill body.- Prefer minimal, working defaults first; add advanced options only when requested.- Prefer `pnpm` commands unless the user requests another package manager.---> Converted and distributed by [TomeVault](https://tomevault.io/claim/italypaleale) — claim your Tome and manage your conversions.

Frequently asked questions