How does this skill handle project file organization?

It enforces a modular 'features/' directory structure where domain-specific code is grouped into subdirectories for API logic, components, hooks, and types.

What is the primary data fetching pattern recommended by this skill?

The skill prioritizes the use of useSuspenseQuery in combination with React Suspense boundaries to eliminate manual loading state checks and prevent layout shifts.

Which UI library and version is supported?

The skill is specifically optimized for Material UI (MUI) version 7, including the latest Grid syntax and SxProps styling patterns.

Does this skill provide guidance on performance optimization?

Yes, it includes detailed checklists for implementing React.lazy for code-splitting, useCallback/useMemo for rendering efficiency, and debouncing strategies.

How are routing and navigation handled?

It utilizes TanStack Router with a folder-based routing approach, supporting lazy loading and integrated breadcrumb data within route loaders.

React & TypeScript Frontend Architecture

Name: React & TypeScript Frontend Architecture
Author: piotroq

bypiotroq

0•

设计工具

Implements modern React architecture patterns including Suspense-based data fetching, MUI v7 styling, and TanStack routing.

This skill provides a comprehensive framework for building high-performance, maintainable React and TypeScript applications. It enforces industry best practices such as code-splitting via lazy loading, Suspense-driven data orchestration, and a domain-driven 'features' directory structure to prevent technical debt. By standardizing component lifecycles, styling with MUI v7, and type-safe routing with TanStack, it ensures consistent UI/UX while effectively eliminating cumulative layout shifts and optimizing runtime performance across complex web projects.

主要功能

01Scalable feature-based directory organization

02Type-safe routing implementation using TanStack Router

03MUI v7 styling and type-safe component patterns

04Suspense-based data fetching with TanStack Query

05Performance optimization through code-splitting and memoization

060 GitHub stars

使用场景

01Standardizing TypeScript patterns and MUI styling across a development team

02Scaling a React application from a flat structure to a domain-driven feature architecture

03Implementing zero-layout-shift loading states using Suspense boundaries

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add piotroq/adwokat-trzebnica-html-to-php-com frontend-development

For use in Claude.ai and ChatGPT

Download Skill