What styling framework does this skill support?

The skill is specifically optimized for MUI v7, providing guidance on the latest Grid system syntax and type-safe styling using the sx prop and SxProps.

How does this skill improve application performance?

It enforces lazy loading for heavy components and utilizes Suspense-based data fetching to minimize Cumulative Layout Shift (CLS) and improve the overall user experience.

Can I use this for existing React projects?

Yes, it provides migration patterns for moving from legacy 'isLoading' returns to modern Suspense boundaries and reorganizing code into a scalable feature-based directory.

Does it include TypeScript support?

Absolutely. It mandates strict mode, explicit return types, and provides specific patterns for type-safe component props, API services, and custom hooks.

Modern React Frontend Guidelines

Name: Modern React Frontend Guidelines
Author: claudiodearaujo

byclaudiodearaujo

0•

Design Tools

Provides comprehensive architectural patterns and best practices for building scalable React applications using TypeScript, MUI v7, and TanStack Query.

This skill serves as a specialized frontend architect, offering standardized implementation patterns for modern React development. It emphasizes high-performance techniques such as Suspense-based data fetching, lazy loading for code splitting, and a feature-based file organization structure. By enforcing specific standards for MUI v7 styling, TanStack Router integration, and strict TypeScript usage, it ensures that your frontend codebase remains maintainable, performant, and type-safe from component creation to complex feature deployment.

Key Features

01Modular feature-based file organization and directory structures

02Suspense-driven data fetching patterns using TanStack Query

030 GitHub stars

04Modern MUI v7 styling guidelines and component implementation

05Optimized routing strategies with TanStack Router and lazy loading

06Performance-first checklists including memoization and layout shift prevention

Use Cases

01Refactoring legacy loading states to modern React Suspense boundaries

02Architecting a new application feature with dedicated API layers and hooks

03Implementing standardized, type-safe components and forms in a TypeScript environment

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

Key Features

01Modular feature-based file organization and directory structures

02Suspense-driven data fetching patterns using TanStack Query

030 GitHub stars

04Modern MUI v7 styling guidelines and component implementation

05Optimized routing strategies with TanStack Router and lazy loading

06Performance-first checklists including memoization and layout shift prevention

Use Cases

01Refactoring legacy loading states to modern React Suspense boundaries

02Architecting a new application feature with dedicated API layers and hooks

03Implementing standardized, type-safe components and forms in a TypeScript environment

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