Is this compatible with TanStack Router?

Yes, it includes specific guidelines for folder-based routing, lazy loading routes, and managing breadcrumb data using TanStack Router.

Does this skill support older versions of MUI?

This skill is specifically optimized for MUI v7, emphasizing the latest grid syntax and styling patterns, though core React principles remain applicable to older versions.

What is the recommended file structure?

The skill enforces a domain-driven 'features/' directory pattern where components, API logic, hooks, and types are grouped by functional area rather than technical type.

How does it handle loading states in React?

It promotes a 'No Early Returns' policy, utilizing SuspenseLoader and useSuspenseQuery to manage loading states without causing disruptive layout shifts.

Frontend Development Guidelines

Name: Frontend Development Guidelines
Author: claudiodearaujo

byclaudiodearaujo

0•

Herramientas de Diseño

Enforces modern React and TypeScript best practices using Suspense, TanStack, and MUI v7 for high-performance applications.

This skill provides a comprehensive architectural framework for building scalable React applications, emphasizing modern patterns such as Suspense-driven data fetching and feature-based file organization. It streamlines the development workflow by providing standardized checklists for components and features, ensuring consistent styling with MUI v7, rigorous type safety through TypeScript, and optimized performance via strategic lazy loading and TanStack routing. It is ideal for teams looking to maintain high code quality and prevent common pitfalls like layout shifts or disorganized project structures.

Características Principales

01Modern MUI v7 styling and responsive grid implementations

02Suspense-based data fetching patterns with TanStack Query

030 GitHub stars

04Feature-based directory architecture for scalable codebases

05Strict TypeScript standards for enhanced type safety and documentation

06Automated performance optimization through lazy loading and code splitting

Casos de Uso

01Standardizing UI development across teams using MUI v7 and shared components

02Implementing high-performance data fetching without Cumulative Layout Shift (CLS)

03Scaffolding new React features with consistent directory and API layers

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/izacenter frontend-dev-guidelines

For use in Claude.ai and ChatGPT

Download Skill