How does it improve application performance?

It enforces lazy loading for heavy components, provides specific patterns for useMemo and useCallback, and implements route-based code-splitting.

What is the primary data fetching pattern used in this skill?

The skill prioritizes useSuspenseQuery with TanStack Query and Suspense boundaries to eliminate early returns and prevent Cumulative Layout Shift (CLS).

How does this skill handle file organization?

It promotes a feature-based structure where API services, components, hooks, and types are grouped by domain within a dedicated 'features/' directory for better encapsulation.

Does it support the latest version of Material UI?

Yes, it includes specific guidelines for MUI v7, including the updated syntax for responsive Grid sizes and type-safe sx props.

Frontend Development Guidelines

Name: Frontend Development Guidelines
Author: moonklabs

bymoonklabs

•

開発者ツール

Standardizes modern React and TypeScript application development with performance-optimized patterns and structured architectures.

This skill provides a comprehensive framework for building scalable React applications using modern patterns like Suspense-based data fetching, TanStack Router, and MUI v7. It enforces best practices for code splitting through lazy loading, implements a feature-based directory structure for better maintainability, and provides strict TypeScript standards to ensure type safety and performance across the entire frontend stack. By following these guidelines, developers can eliminate layout shifts, optimize data fetching with TanStack Query, and maintain a consistent, production-grade codebase.

主な機能

01Scalable feature-driven directory organization with import aliasing

02Route management and lazy loading with TanStack Router

03Performance optimization via memoization and code-splitting

04Suspense-based data fetching implementation using TanStack Query

051 GitHub stars

06Standardized MUI v7 styling patterns and Grid layout syntax

ユースケース

01Enforcing consistent styling and TypeScript standards across a development team

02Migrating legacy data fetching to modern Suspense-based patterns

03Scaling React applications with a standardized feature-driven architecture

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add moonklabs/aiwf frontend-dev-guidelines

For use in Claude.ai and ChatGPT

Download Skill