What is the recommended folder structure?

The skill enforces a 'features/' directory pattern where each domain-specific module contains its own API layer, components, hooks, and types for maximum modularity.

Does it support the latest MUI version?

Yes, it includes specific guidelines for MUI v7, including the updated Grid syntax and type-safe styling using the sx prop.

How does this skill help with performance?

It automates the implementation of React.lazy() for heavy components, enforces memoization strategies, and provides patterns for efficient code-splitting via TanStack Router.

How does this skill handle data fetching?

It promotes the use of useSuspenseQuery from TanStack Query combined with React Suspense boundaries to eliminate manual loading checks and prevent layout shifts.

Modern React Frontend Guidelines

Name: Modern React Frontend Guidelines
Author: claudiodearaujo

byclaudiodearaujo

0•

Design Tools

Standardizes React and TypeScript development using modern patterns like Suspense, TanStack Router, and MUI v7.

This skill provides a comprehensive framework for building scalable, high-performance React applications by enforcing industry-standard best practices. It guides developers through implementing Suspense-based data fetching with TanStack Query, modular feature-based directory structures, and advanced UI styling with MUI v7. By prioritizing lazy loading and eliminating layout shifts caused by early returns, this skill ensures that frontend projects remain maintainable, type-safe, and optimized for Core Web Vitals.

Key Features

01Type-safe routing and navigation with TanStack Router

02Suspense-based data fetching with TanStack Query

03Modern UI styling and Grid systems using MUI v7

04Performance optimization through lazy loading and code splitting

05Feature-based directory organization for scalable architecture

060 GitHub stars

Use Cases

01Bootstrapping new React features with a standardized API and component structure

02Migrating legacy loading spinners to modern React Suspense patterns for better UX

03Implementing strict TypeScript standards and path aliases in large-scale frontend projects

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/sistema-de-narra-o-de-livro-front frontend-dev-guidelines

For use in Claude.ai and ChatGPT

Download Skill

Key Features

01Type-safe routing and navigation with TanStack Router

02Suspense-based data fetching with TanStack Query

03Modern UI styling and Grid systems using MUI v7

04Performance optimization through lazy loading and code splitting

05Feature-based directory organization for scalable architecture

060 GitHub stars

Use Cases

01Bootstrapping new React features with a standardized API and component structure

02Migrating legacy loading spinners to modern React Suspense patterns for better UX

03Implementing strict TypeScript standards and path aliases in large-scale frontend projects

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/sistema-de-narra-o-de-livro-front frontend-dev-guidelines

For use in Claude.ai and ChatGPT

Download Skill