How does this skill handle data fetching?

It prioritizes the useSuspenseQuery hook from TanStack Query, allowing developers to manage loading states via Suspense boundaries rather than manual loading flags.

Why does the skill recommend against early returns for loading?

Avoiding early returns for loading spinners prevents Cumulative Layout Shift (CLS), ensuring a smoother and more stable user experience as content loads.

How is the project folder structure organized?

It advocates for a 'features/' directory structure where domain-specific logic, APIs, hooks, and components are co-located for better maintainability.

What version of Material UI (MUI) is supported?

This skill specifically targets MUI v7, implementing the latest syntax such as the updated Grid size property and type-safe sx props.

Frontend Development Standards

Name: Frontend Development Standards
Author: GGPrompts

byGGPrompts

•

デザインツール

Enforces modern React and TypeScript best practices for building high-performance web applications using TanStack and MUI v7.

概要

This skill provides a comprehensive framework for modern frontend development, specifically tailored for React and TypeScript environments. It emphasizes a 'Suspense-first' architecture for data fetching and lazy loading to minimize layout shifts and maximize performance. By standardizing file organization through domain-driven feature directories and implementing MUI v7 styling patterns, it ensures consistent, maintainable codebases. It is ideal for developers building new features, setting up routing with TanStack Router, or optimizing existing React applications for better UX and type safety.

主な機能

Standardizes UI development with Material UI (MUI) v7 styling and component patterns.
Implements Suspense-based data fetching with TanStack Query and useSuspenseQuery patterns.
Enforces automatic code-splitting via React.lazy and SuspenseLoader integration.
Configures modular, feature-based file organization to ensure scalable codebases.
Provides type-safe routing configurations using TanStack Router's folder-based system.
1 GitHub stars

ユースケース

Refactoring existing frontend code to eliminate layout shifts and implement modern loading states.
Architecting a new enterprise-grade React dashboard with complex data requirements.
Standardizing team-wide TypeScript and styling conventions for MUI-based projects.

概要

主な機能

Standardizes UI development with Material UI (MUI) v7 styling and component patterns.
Implements Suspense-based data fetching with TanStack Query and useSuspenseQuery patterns.
Enforces automatic code-splitting via React.lazy and SuspenseLoader integration.
Configures modular, feature-based file organization to ensure scalable codebases.
Provides type-safe routing configurations using TanStack Router's folder-based system.
1 GitHub stars

ユースケース

Refactoring existing frontend code to eliminate layout shifts and implement modern loading states.
Architecting a new enterprise-grade React dashboard with complex data requirements.
Standardizing team-wide TypeScript and styling conventions for MUI-based projects.