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

设计工具

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.

主要功能

Modular feature-based file organization and directory structures
Suspense-driven data fetching patterns using TanStack Query
0 GitHub stars
Modern MUI v7 styling guidelines and component implementation
Optimized routing strategies with TanStack Router and lazy loading
Performance-first checklists including memoization and layout shift prevention

使用场景

Refactoring legacy loading states to modern React Suspense boundaries
Architecting a new application feature with dedicated API layers and hooks
Implementing 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

Download Skill

GitHub

关于