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

Design Tools

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

About

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

Type-safe routing and navigation with TanStack Router
Suspense-based data fetching with TanStack Query
Modern UI styling and Grid systems using MUI v7
Performance optimization through lazy loading and code splitting
Feature-based directory organization for scalable architecture
0 GitHub stars

Use Cases

Bootstrapping new React features with a standardized API and component structure
Migrating legacy loading spinners to modern React Suspense patterns for better UX
Implementing 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

GitHub