What version of Material UI does this skill support?

This skill is specifically optimized for MUI v7, including updated syntax for components like the Grid system.

Does it include data fetching best practices?

Yes, it promotes the use of useSuspenseQuery from TanStack Query and a centralized API service layer organized by feature.

Is this guideline set compatible with Vite?

Yes, the guidelines include specific import alias configurations and routing patterns designed for Vite-based environments.

How does this skill handle application loading states?

It enforces a 'no early returns' policy, utilizing Suspense boundaries and lazy loading to prevent Cumulative Layout Shift (CLS) for a better user experience.

Can this skill help with TypeScript performance?

It provides standards for strict typing, explicit return types, and optimized import patterns to ensure a performant and type-safe development environment.

Frontend Engineering Standards

Name: Frontend Engineering Standards
Author: moonklabs

bymoonklabs

•

디자인 도구

Standardizes modern React and TypeScript development workflows with best practices for routing, styling, and data fetching.

소개

This skill provides a comprehensive framework for building high-performance React applications using TypeScript and MUI v7. It enforces modern architectural patterns such as Suspense-based data fetching with TanStack Query, route-based code splitting, and a domain-driven 'features' directory structure. By following these guidelines, developers can minimize layout shifts, optimize performance through specific memoization patterns, and maintain a clean, scalable codebase using standardized import aliases and component templates.

주요 기능

Suspense-based data fetching patterns with TanStack Query
Performance optimization via memoization and debouncing guidelines
Modern MUI v7 styling standards and layout components
Route-level code splitting and lazy loading implementation
Feature-based project organization and domain-driven file structure
1 GitHub stars

사용 사례

Refactoring legacy component loading states to use React Suspense
Implementing a consistent styling and responsive design system with MUI v7
Architecting a new enterprise-scale React application from scratch

소개

주요 기능

Suspense-based data fetching patterns with TanStack Query
Performance optimization via memoization and debouncing guidelines
Modern MUI v7 styling standards and layout components
Route-level code splitting and lazy loading implementation
Feature-based project organization and domain-driven file structure
1 GitHub stars

사용 사례

Refactoring legacy component loading states to use React Suspense
Implementing a consistent styling and responsive design system with MUI v7
Architecting a new enterprise-scale React application from scratch