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

Design Tools

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

About

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

Suspense-driven data fetching patterns with TanStack Query
Performance optimization via lazy loading and memoization
MUI v7 styling standards and type-safe SxProps implementation
Feature-based directory architecture (api, components, hooks, types)
0 GitHub stars
Type-safe routing configurations with TanStack Router

Use Cases

Implementing consistent, type-safe UI components with MUI v7
Refactoring legacy data fetching logic to modern Suspense patterns
Scaffolding 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

GitHub