Which tech stack does this skill focus on?

This skill is specifically designed for modern React and TypeScript applications using TanStack Query, TanStack Router, MUI v7, and Vite.

How does it handle data fetching?

It prioritizes useSuspenseQuery as the primary pattern to handle loading states declaratively and ensure type safety across the application.

What is the recommended project structure?

It advocates for a domain-driven 'features' directory where API calls, hooks, types, and components are co-located, keeping truly reusable items in a separate 'components' folder.

How does this skill improve application performance?

It enforces strict lazy loading for heavy components, promotes code splitting, and provides patterns for preventing Cumulative Layout Shift (CLS) through Suspense boundaries.

Does it provide styling recommendations?

Yes, it provides guidance on using MUI v7's sx prop and Grid system, including rules for when to keep styles inline versus moving them to separate files.

Frontend Dev Guidelines & Patterns

Name: Frontend Dev Guidelines & Patterns
Author: claudiodearaujo

byclaudiodearaujo

0•

Design Tools

Standardizes modern React and TypeScript development using best practices for Suspense, TanStack Query, and MUI v7.

This skill provides a comprehensive framework for building high-performance, maintainable React applications by enforcing strict architectural patterns. It guides developers through feature-based file organization, Suspense-based data fetching with TanStack Query, and type-safe styling using the latest MUI v7 standards. By following these guidelines, developers can ensure consistent code quality, eliminate cumulative layout shifts through loading state management, and leverage modern React features like lazy loading and code splitting for optimal performance.

Key Features

01Suspense-driven data fetching patterns with TanStack Query

02Performance optimization via lazy loading and memoization

03MUI v7 styling standards and type-safe SxProps implementation

04Feature-based directory architecture (api, components, hooks, types)

050 GitHub stars

06Type-safe routing configurations with TanStack Router

Use Cases

01Implementing consistent, type-safe UI components with MUI v7

02Refactoring legacy data fetching logic to modern Suspense patterns

03Scaffolding new React features with a standardized directory structure

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

01Suspense-driven data fetching patterns with TanStack Query

02Performance optimization via lazy loading and memoization

03MUI v7 styling standards and type-safe SxProps implementation

04Feature-based directory architecture (api, components, hooks, types)

050 GitHub stars

06Type-safe routing configurations with TanStack Router

Use Cases

01Implementing consistent, type-safe UI components with MUI v7

02Refactoring legacy data fetching logic to modern Suspense patterns

03Scaffolding new React features with a standardized directory structure

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