Does this skill support the latest MUI v7 syntax?

Yes, it includes specific guidelines for MUI v7, including the updated Grid size syntax and sx prop styling conventions.

What directory structure does this skill recommend?

It advocates for a domain-driven 'features' directory where API logic, hooks, types, and components are grouped by feature rather than global type.

Is this suitable for performance optimization?

Absolutely. It provides specific patterns for useMemo, useCallback, and mandatory React.lazy usage to ensure optimal application speed.

How does it handle loading states?

It enforces a 'No Early Returns' rule, using Suspense boundaries and a standardized SuspenseLoader component to prevent Cumulative Layout Shift (CLS).

Frontend Development Guidelines

Name: Frontend Development Guidelines
Author: ddttom

byddttom

设计工具

Enforces modern React and TypeScript best practices including Suspense, TanStack Query, and MUI v7 architectural patterns.

关于

This skill serves as a comprehensive architectural blueprint for building high-performance React applications. It provides standardized guidance on feature-based file organization, type-safe data fetching with TanStack Query, and efficient routing with TanStack Router. By emphasizing Suspense-driven patterns and mandatory lazy loading for heavy components, it helps developers eliminate layout shifts and reduce initial bundle sizes while maintaining a clean, scalable TypeScript codebase using MUI v7 styling conventions.

主要功能

Automated code-splitting and lazy loading implementation for heavy components
MUI v7 styling standards and responsive grid optimization
Standardized feature-based directory structure (api, hooks, components, types)
Suspense-based data fetching patterns with TanStack Query
0 GitHub stars
Type-safe routing configuration using TanStack Router

使用场景

Refactoring existing data fetching logic to utilize useSuspenseQuery and Suspense boundaries
Optimizing application performance through strategic code splitting and callback memoization
Scaffolding new React features with consistent directory hierarchies and API layers

关于

主要功能

Automated code-splitting and lazy loading implementation for heavy components
MUI v7 styling standards and responsive grid optimization
Standardized feature-based directory structure (api, hooks, components, types)
Suspense-based data fetching patterns with TanStack Query
0 GitHub stars
Type-safe routing configuration using TanStack Router

使用场景

Refactoring existing data fetching logic to utilize useSuspenseQuery and Suspense boundaries
Optimizing application performance through strategic code splitting and callback memoization
Scaffolding new React features with consistent directory hierarchies and API layers