skills.rest
gmackie
gmackieCOMMUNITY
Explore all skills by this author →
Website𝕏@grahammackieGitHub

react-project-init

Initialize React projects with Vite, TypeScript, TanStack Query, Zustand, and shadcn/ui.

Updated Mar 27, 2026
Search Tags:#typescript#Zustand#React#tailwind css#vite#Shadcn UI#project scaffolding
One-click install
npx skills add https://github.com/gmackie/agent-skills --skill react-project-init-gmackie
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-project-init
Source: https://github.com/gmackie/agent-skills/tree/main/skills/react-project-init
Command: npx skills add https://github.com/gmackie/agent-skills --skill react-project-init-gmackie

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Setting up a new React project requires manually installing and wiring together many libraries—Vite, TypeScript, Tailwind CSS, state management, data fetching, and UI components—which is repetitive and error-prone. This Skill provides a complete, ordered setup procedure that produces a working modern React application. ## Core Features & Use Cases - Full Stack Scaffolding: Creates a Vite + React + TypeScript project and installs TanStack Query, Zustand, React Router, React Hook Form, and Zod. - Styling and UI Setup: Configures Tailwind CSS with PostCSS and initializes shadcn/ui with common components like button, card, form, and toast. - Ready-Made Configuration: Includes a preconfigured TanStack Query client and a persisted Zustand theme store, plus troubleshooting guidance for common setup failures. - Use Case: When starting a new web application, use this Skill to scaffold the project, configure path aliases, and reach a running dev server without manually assembling each piece. ## Quick Start Initialize a new React project with Vite, TypeScript, Tailwind, TanStack Query, Zustand, and shadcn/ui, then start the dev server.

Frequently Asked Questions about react-project-init

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

FAQPage Schema
How do I create a React project with Vite and TypeScript?▼

Run npm create vite@latest my-app -- --template react-ts, then install dependencies with npm install. This scaffolds a React project with TypeScript configuration, and you can start developing with npm run dev.

How to set up shadcn/ui with Tailwind CSS in a Vite project?▼

First install Tailwind CSS with PostCSS and autoprefixer, then run npx tailwindcss init -p and configure content paths in tailwind.config.js. After that, run npx shadcn-ui@latest init and add components like button, card, and form.

Zustand vs TanStack Query for React state management?▼

They serve different purposes and work together. Zustand manages client-side UI state like themes with optional persistence, while TanStack Query handles server state with caching, stale time, and retry logic for API data.

Can I use pnpm instead of npm for React project setup?▼

Yes, pnpm works with the same setup flow. Use pnpm create vite my-app --template react-ts, then pnpm install and pnpm add for dependencies like TanStack Query and Zustand, and pnpm dev to start the server.

Why are Tailwind styles not applying in my React app?▼

Tailwind styles fail when the content paths in tailwind.config.js do not include your source files. Verify the content array covers ./index.html and ./src/**/*.{js,ts,jsx,tsx}, and confirm the @tailwind directives exist in src/index.css.

Why do shadcn/ui components fail to resolve after installation?▼

shadcn/ui components fail when path aliases are not configured in both tsconfig.json and vite.config.ts. Ensure the @ alias points to the src directory in both files, and install @types/node if TypeScript reports path errors.

Related Skills

Explore More Software Engineering Skills→
parisgroup-aiparisgroup-ai
1

dep-check

Audit npm dependencies for vulnerabilities, outdated packages, and workspace mismatches.

Official
Intermediate
MadAppGangMadAppGang
7

react-typescript

Implement React 19+ frontend patterns with TypeScript, Zustand, and TanStack Query.

Official
Intermediate
devrelaicomdevrelaicom
37

midnight-cq:quality-init

Initializes Midnight Network code quality tooling with Biome, hooks, and CI workflows.

Official
Advanced
ggombeeggombee
13

react-nextjs-app

Implement a convention-based file structure for Next.js applications.

Community
Intermediate