How does this skill handle data fetching?

It prioritizes the useSuspenseQuery hook from TanStack Query, allowing developers to manage loading states via Suspense boundaries rather than manual loading flags.

Why does the skill recommend against early returns for loading?

Avoiding early returns for loading spinners prevents Cumulative Layout Shift (CLS), ensuring a smoother and more stable user experience as content loads.

How is the project folder structure organized?

It advocates for a 'features/' directory structure where domain-specific logic, APIs, hooks, and components are co-located for better maintainability.

What version of Material UI (MUI) is supported?

This skill specifically targets MUI v7, implementing the latest syntax such as the updated Grid size property and type-safe sx props.

Frontend Development Standards

Name: Frontend Development Standards
Author: GGPrompts

byGGPrompts

•

Design Tools

Enforces modern React and TypeScript best practices for building high-performance web applications using TanStack and MUI v7.

This skill provides a comprehensive framework for modern frontend development, specifically tailored for React and TypeScript environments. It emphasizes a 'Suspense-first' architecture for data fetching and lazy loading to minimize layout shifts and maximize performance. By standardizing file organization through domain-driven feature directories and implementing MUI v7 styling patterns, it ensures consistent, maintainable codebases. It is ideal for developers building new features, setting up routing with TanStack Router, or optimizing existing React applications for better UX and type safety.

Key Features

01Standardizes UI development with Material UI (MUI) v7 styling and component patterns.

02Implements Suspense-based data fetching with TanStack Query and useSuspenseQuery patterns.

03Enforces automatic code-splitting via React.lazy and SuspenseLoader integration.

04Configures modular, feature-based file organization to ensure scalable codebases.

05Provides type-safe routing configurations using TanStack Router's folder-based system.

061 GitHub stars

Use Cases

01Refactoring existing frontend code to eliminate layout shifts and implement modern loading states.

02Architecting a new enterprise-grade React dashboard with complex data requirements.

03Standardizing team-wide TypeScript and styling conventions for MUI-based projects.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ggprompts/my-plugins frontend-development

For use in Claude.ai and ChatGPT

Download Skill