How does it handle performance optimization?

It implements route-level and component-level code splitting using React.lazy and Suspense, combined with manual chunking in the Vite configuration to keep initial bundle sizes small.

How are API requests managed?

It includes a standardized Axios client setup with request and response interceptors to handle base URLs, authorization headers, and automatic logout on 401 errors.

What project structure does this skill use?

It follows Feature-Sliced Design (FSD), organizing code into distinct layers like app, pages, widgets, features, entities, and shared for maximum scalability and separation of concerns.

Is authentication included in these patterns?

Yes, it provides robust patterns for persistent authentication states using Zustand and specific 'ProtectedRoute' components to manage access control across the application.

Does this skill support Server-Side Rendering (SSR)?

No, this skill is specifically designed and optimized for Client-Side Rendering (CSR) patterns using the Vite build tool.

Vite React SPA Architect

Name: Vite React SPA Architect
Author: dding-g

bydding-g

0•

Developer Tools

Implements production-grade React Single Page Applications using Vite, Feature-Sliced Design, and high-performance client-side rendering patterns.

This skill provides a comprehensive architectural framework for building scalable React SPAs with Vite. It enforces the Feature-Sliced Design (FSD) methodology to ensure code maintainability while providing standardized patterns for performance-critical tasks like route-level code splitting, asynchronous state management with TanStack Query, and persistent authentication via Zustand. It is particularly useful for developers who need to scaffold enterprise-ready frontend projects with built-in SEO, optimized build configurations, and robust API integration layers.

Key Features

01Standardized API client configuration with Axios interceptors and environment safety

02Built-in SEO management and dynamic meta tags using React Helmet

03Feature-Sliced Design (FSD) architectural organization for scalable codebases

04Global state management implementation using Zustand and TanStack Query

050 GitHub stars

06Optimized code splitting and lazy loading patterns for superior performance

Use Cases

01Implementing secure authentication flows with protected routes and persistent state

02Scaffolding a new enterprise React application with a proven, scalable directory structure

03Configuring advanced Vite build settings for optimized vendor chunking and performance

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add dding-g/ddingg-claude-marketplace vite-csr

For use in Claude.ai and ChatGPT

Download Skill