Does this skill work with Material UI?

Yes, it is specifically optimized for MUI v7, providing guidelines for the 'sx' prop, type-safe styling, and the latest Grid component syntax.

What primary React patterns does this skill advocate?

The skill emphasizes Suspense-based data fetching, lazy loading for heavy components, and a feature-first directory structure to prevent layout shifts and improve maintainability.

How does it handle state management and data fetching?

It uses TanStack Query (React Query) with a focus on useSuspenseQuery to handle caching, data synchronization, and loading states without manual boolean flags.

Is this skill suitable for large-scale enterprise projects?

Absolutely. It enforces strict TypeScript standards and a modular folder structure (features/ vs components/) designed specifically to handle large, complex codebases.

Frontend Development Guidelines

Name: Frontend Development Guidelines
Author: nordeim

bynordeim

0•

デザインツール

Implements modern React and TypeScript patterns using Suspense-based data fetching and feature-driven architecture.

This skill provides a comprehensive framework for building high-performance React applications with a focus on modern developer experience. It enforces best practices such as code splitting with React.lazy, standardized data fetching via TanStack Query's Suspense hooks, and type-safe routing with TanStack Router. By following a domain-driven file organization strategy and MUI v7 styling standards, it ensures scalable, maintainable, and performance-optimized frontend codebases while preventing common issues like layout shifts and cumulative layout shift (CLS).

主な機能

01MUI v7 styling patterns including optimized Grid v2 and SxProps

02Type-safe routing and breadcrumb management with TanStack Router

03Domain-driven 'features' directory organization for scalable codebases

04Automatic code splitting and lazy loading implementation for heavy components

05Suspense-driven data fetching with TanStack Query and useSuspenseQuery

060 GitHub stars

ユースケース

01Refactoring legacy loading spinners to use React Suspense and consistent loading states

02Scaffolding new feature modules with standardized API, component, and hook subdirectories

03Implementing type-safe forms and centralized API integration layers with Axios

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add nordeim/prompt-engineering frontend-development

For use in Claude.ai and ChatGPT

主な機能

01MUI v7 styling patterns including optimized Grid v2 and SxProps

02Type-safe routing and breadcrumb management with TanStack Router

03Domain-driven 'features' directory organization for scalable codebases

04Automatic code splitting and lazy loading implementation for heavy components

05Suspense-driven data fetching with TanStack Query and useSuspenseQuery

060 GitHub stars

ユースケース

01Refactoring legacy loading spinners to use React Suspense and consistent loading states

02Scaffolding new feature modules with standardized API, component, and hook subdirectories

03Implementing type-safe forms and centralized API integration layers with Axios

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add nordeim/prompt-engineering frontend-development

For use in Claude.ai and ChatGPT