Does it handle state management and data fetching?

Yes, it promotes the use of TanStack Query with the useSuspenseQuery hook for type-safe, cache-first data management and centralized API service layers.

How does this skill improve application performance?

It enforces mandatory lazy loading for heavy components and utilizes Suspense-based loading patterns to prevent Cumulative Layout Shift (CLS) and reduce initial bundle sizes.

What UI frameworks are supported by these guidelines?

The skill is specifically optimized for Material UI (MUI) v7, providing syntax guidance for the latest grid systems, theme access, and type-safe styling patterns.

Can I use this for existing React projects?

Yes, it provides checklists and directory templates that help developers refactor existing components into modern, modular, feature-based structures.

Frontend Development & React Guidelines

Name: Frontend Development & React Guidelines
Author: mrgoonie

bymrgoonie

•

1,395

设计工具

Standardizes modern React application development with production-ready patterns for data fetching, routing, and UI styling.

关于

This skill provides comprehensive architectural guidance for building high-performance React and TypeScript applications. It enforces modern patterns such as Suspense-based data fetching with TanStack Query, lazy loading for code splitting, and a modular feature-first directory structure. By integrating MUI v7 styling standards and TanStack Router configurations, it ensures frontend codebases are scalable, type-safe, and optimized for both developer experience and user performance, making it an essential companion for building enterprise-grade user interfaces.

主要功能

Scalable feature-based directory organization and file structure
Automated routing setup with TanStack Router
1,395 GitHub stars
Suspense-based data fetching using TanStack Query
Advanced TypeScript best practices and strict typing standards
MUI v7 styling patterns and performance-driven UI components

使用场景

Architecting a new React enterprise application from scratch
Refactoring legacy React code to modern Suspense and lazy-loading patterns
Implementing a standardized, type-safe feature structure across a development team

关于

主要功能

Scalable feature-based directory organization and file structure
Automated routing setup with TanStack Router
1,395 GitHub stars
Suspense-based data fetching using TanStack Query
Advanced TypeScript best practices and strict typing standards
MUI v7 styling patterns and performance-driven UI components

使用场景

Architecting a new React enterprise application from scratch
Refactoring legacy React code to modern Suspense and lazy-loading patterns
Implementing a standardized, type-safe feature structure across a development team