skills.rest
mokhtarabadi
mokhtarabadiCOMMUNITY
Explore all skills by this author →
Website𝕏@mokhatarabadiGitHub

react-vite

Defines React 19 SPA architecture, hooks, and Vite configuration conventions.

6|Updated May 18, 2026
Search Tags:#typescript#vitest#react#vite#zustand#feature-sliced design#spa architecture
One-click install
npx skills add https://github.com/mokhtarabadi/cognitive-lead-hq --skill react-vite-mokhtarabadi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-vite
Source: https://github.com/mokhtarabadi/cognitive-lead-hq/tree/main/skill-templates/react-vite
Command: npx skills add https://github.com/mokhtarabadi/cognitive-lead-hq --skill react-vite-mokhtarabadi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building large React single-page applications often leads to disorganized codebases, inconsistent naming, prop-drilling bugs, and timezone-related datetime errors. This Skill provides a strict architectural blueprint so AI agents and developers produce consistent, maintainable React 19 + Vite code. ## Core Features & Use Cases - Feature-Sliced Design: Enforces grouping code by feature (e.g., features/auth/) so related components, hooks, and APIs stay co-located, reducing context exhaustion for AI agents. - State & Data Conventions: Standardizes Zustand for global UI state and TanStack React Query for server state, with strict TypeScript interfaces for component props. - DateTime Governance: Mandates epoch ms or ISO-8601 UTC at API boundaries, Intl.DateTimeFormat for display, and dayjs UTC normalization. - Use Case: When scaffolding a new React SPA or adding a feature module, apply this Skill to generate the correct folder structure, naming conventions, and Vitest + React Testing Library test setup automatically. ## Quick Start Apply the react-vite skill to scaffold a new feature module with proper folder structure, typed components, and tests.

Frequently Asked Questions about react-vite

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

FAQPage Schema
How do I structure a React Vite project for large applications?▼

Use Feature-Sliced Design by grouping code under directories like features/auth/ rather than by type. Co-locate each feature's components, hooks, and API calls, and keep shared UI in components/common and components/layout.

What state management library should I use with React 19?▼

Use Zustand for global UI state to avoid Redux boilerplate, and TanStack React Query for server state and data fetching. Store timestamps in Zustand as epoch ms numbers, never Date objects.

How do I test React components with Vitest?▼

Use Vitest with React Testing Library. Render components, query elements by accessibility roles with getByRole, and simulate user interactions using @testing-library/user-event.

Does React 19 still need useMemo and useCallback?▼

With React Compiler v1.0 available, manual memoization is rarely needed. Apply React.memo, useMemo, and useCallback only when profiling identifies an actual performance bottleneck, not preemptively.

How should I handle timezones in a React SPA?▼

Receive datetimes from APIs as epoch ms or ISO-8601 UTC strings, never parse timezone-naive strings. Format for display with Intl.DateTimeFormat using an explicit timeZone option, and use dayjs with the UTC plugin for normalization.

Related Skills

Explore More Software Engineering Skills→
aleeM42aleeM42

react-best-practices

Guide enterprise React project setup with pnpm, Turborepo, and strict coding standards.

Community
Advanced
HouseGarofaloHouseGarofalo
3

azure-static-web-apps

Deploy and manage static web apps on Azure Static Web Apps.

Official
Intermediate
angelgarciasolorzanoangelgarciasolorzano

typescript-conventions

Monitor TypeScript code for naming conventions, import patterns, and type safety.

Community
Intermediate
PatternsDevPatternsDev
235

server-side-rendering

Render React pages on the server with Next.js data fetching.

Official
Advanced