How does it handle data fetching?

It prioritizes the useSuspenseQuery pattern from TanStack Query to eliminate manual loading-state checks and prevent layout shifts.

How does it improve application performance?

By enforcing lazy loading for heavy components, implementing strategic Suspense boundaries, and utilizing React's memoization hooks (useMemo, useCallback).

Does this skill support the latest MUI version?

Yes, it specifically follows MUI v7 styling standards, including the updated Grid component syntax and type-safe SxProps.

What directory structure does it recommend?

It utilizes a feature-based organization where components, API calls, hooks, and types are grouped by domain within a 'features' directory.

Modern React & TypeScript Frontend Standards

Name: Modern React & TypeScript Frontend Standards
Author: CongDon1207

byCongDon1207

•

设计工具

Implements high-performance React architectures using Suspense-based data fetching, MUI v7, and feature-driven organization.

关于

This skill provides a comprehensive set of development guidelines for building modern React applications with TypeScript. It enforces best practices such as code-splitting via lazy loading, Suspense-driven data fetching with TanStack Query, and a scalable feature-based file architecture. By integrating MUI v7 styling standards and TanStack Router configurations, it ensures frontend projects are performant, maintainable, and free from layout shifts through strict adherence to 'no early return' loading patterns.

主要功能

1 GitHub stars
Feature-driven directory organization for scalable codebases
TanStack Router integration with folder-based routing and breadcrumb support
Suspense-based data fetching with TanStack Query (useSuspenseQuery)
MUI v7 styling patterns with TypeScript-safe SxProps
Performance-optimized lazy loading and code-splitting strategies

使用场景

Architecting a new React feature with isolated API, hooks, and components
Optimizing application performance through strategic lazy loading and Suspense boundaries
Standardizing a TypeScript codebase with strict import aliases and component patterns

关于

主要功能

1 GitHub stars
Feature-driven directory organization for scalable codebases
TanStack Router integration with folder-based routing and breadcrumb support
Suspense-based data fetching with TanStack Query (useSuspenseQuery)
MUI v7 styling patterns with TypeScript-safe SxProps
Performance-optimized lazy loading and code-splitting strategies

使用场景

Architecting a new React feature with isolated API, hooks, and components
Optimizing application performance through strategic lazy loading and Suspense boundaries
Standardizing a TypeScript codebase with strict import aliases and component patterns