How does it handle data fetching?

It prioritizes the useSuspenseQuery pattern from TanStack Query to eliminate manual loading-state checks and prevent layout shifts.

How does it improve application performance?

By enforcing lazy loading for heavy components, implementing strategic Suspense boundaries, and utilizing React's memoization hooks (useMemo, useCallback).

Does this skill support the latest MUI version?

Yes, it specifically follows MUI v7 styling standards, including the updated Grid component syntax and type-safe SxProps.

What directory structure does it recommend?

It utilizes a feature-based organization where components, API calls, hooks, and types are grouped by domain within a 'features' directory.

Modern React & TypeScript Frontend Standards

Name: Modern React & TypeScript Frontend Standards
Author: CongDon1207

byCongDon1207

•

Design Tools

Implements high-performance React architectures using Suspense-based data fetching, MUI v7, and feature-driven organization.

This skill provides a comprehensive set of development guidelines for building modern React applications with TypeScript. It enforces best practices such as code-splitting via lazy loading, Suspense-driven data fetching with TanStack Query, and a scalable feature-based file architecture. By integrating MUI v7 styling standards and TanStack Router configurations, it ensures frontend projects are performant, maintainable, and free from layout shifts through strict adherence to 'no early return' loading patterns.

Key Features

011 GitHub stars

02Feature-driven directory organization for scalable codebases

03TanStack Router integration with folder-based routing and breadcrumb support

04Suspense-based data fetching with TanStack Query (useSuspenseQuery)

05MUI v7 styling patterns with TypeScript-safe SxProps

06Performance-optimized lazy loading and code-splitting strategies

Use Cases

01Architecting a new React feature with isolated API, hooks, and components

02Optimizing application performance through strategic lazy loading and Suspense boundaries

03Standardizing a TypeScript codebase with strict import aliases and component patterns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add congdon1207/agents.md frontend-development

For use in Claude.ai and ChatGPT

Download Skill