Does this skill work with Material UI?

Yes, it is specifically optimized for MUI v7, providing guidelines for the 'sx' prop, type-safe styling, and the latest Grid component syntax.

What primary React patterns does this skill advocate?

The skill emphasizes Suspense-based data fetching, lazy loading for heavy components, and a feature-first directory structure to prevent layout shifts and improve maintainability.

How does it handle state management and data fetching?

It uses TanStack Query (React Query) with a focus on useSuspenseQuery to handle caching, data synchronization, and loading states without manual boolean flags.

Is this skill suitable for large-scale enterprise projects?

Absolutely. It enforces strict TypeScript standards and a modular folder structure (features/ vs components/) designed specifically to handle large, complex codebases.

Frontend Development Guidelines

Name: Frontend Development Guidelines
Author: nordeim

bynordeim

Design Tools

Implements modern React and TypeScript patterns using Suspense-based data fetching and feature-driven architecture.

About

This skill provides a comprehensive framework for building high-performance React applications with a focus on modern developer experience. It enforces best practices such as code splitting with React.lazy, standardized data fetching via TanStack Query's Suspense hooks, and type-safe routing with TanStack Router. By following a domain-driven file organization strategy and MUI v7 styling standards, it ensures scalable, maintainable, and performance-optimized frontend codebases while preventing common issues like layout shifts and cumulative layout shift (CLS).

Key Features

MUI v7 styling patterns including optimized Grid v2 and SxProps
Type-safe routing and breadcrumb management with TanStack Router
Domain-driven 'features' directory organization for scalable codebases
Automatic code splitting and lazy loading implementation for heavy components
Suspense-driven data fetching with TanStack Query and useSuspenseQuery
0 GitHub stars

Use Cases

Refactoring legacy loading spinners to use React Suspense and consistent loading states
Scaffolding new feature modules with standardized API, component, and hook subdirectories
Implementing type-safe forms and centralized API integration layers with Axios

About

Key Features

MUI v7 styling patterns including optimized Grid v2 and SxProps
Type-safe routing and breadcrumb management with TanStack Router
Domain-driven 'features' directory organization for scalable codebases
Automatic code splitting and lazy loading implementation for heavy components
Suspense-driven data fetching with TanStack Query and useSuspenseQuery
0 GitHub stars

Use Cases

Refactoring legacy loading spinners to use React Suspense and consistent loading states
Scaffolding new feature modules with standardized API, component, and hook subdirectories
Implementing type-safe forms and centralized API integration layers with Axios