What frontend libraries does this skill support?

It focuses on modern React development using TypeScript, Material UI (MUI) v7, TanStack Query (v5+), and TanStack Router.

Is it suitable for large-scale enterprise projects?

Yes, it mandates a feature-based directory structure (subdirectories for api, components, hooks, and types) designed specifically for enterprise scalability.

How does it improve web application performance?

It enforces mandatory lazy loading for heavy components and utilizes Suspense-based data fetching to prevent Cumulative Layout Shift (CLS).

Does it include styling best practices?

Yes, it provides specific rules for MUI v7 styling, including the use of sx props, theme-aware type safety, and the updated Grid system syntax.

React & TypeScript Frontend Architect

Name: React & TypeScript Frontend Architect
Author: xiaxingxiaowei1983

byxiaxingxiaowei1983

0•

Design Tools

Provides comprehensive guidelines and best practices for building modern, high-performance React applications using TypeScript, MUI, and TanStack.

This skill equips Claude with specialized knowledge for architecting React-based web applications according to modern industry standards. It emphasizes a Suspense-first data fetching approach with TanStack Query, efficient routing via TanStack Router, and scalable file organization using a feature-based directory structure. By enforcing TypeScript best practices, Material UI v7 styling patterns, and aggressive lazy-loading strategies, it ensures that generated code is performant, maintainable, and free from common pitfalls like layout shifts and inefficient state management. It is ideal for developers looking to maintain high code quality across complex frontend codebases.

Key Features

01Enforces feature-based directory structures for scalable project organization

020 GitHub stars

03Standardizes React component patterns using TypeScript and lazy loading

04Implements Suspense-based data fetching with TanStack Query

05Optimizes performance through useMemo, useCallback, and code-splitting

06Applies Material UI (MUI) v7 styling conventions and responsive Grid layouts

Use Cases

01Ensuring consistent styling and TypeScript type safety across large frontend codebases

02Scaffolding new React features with dedicated API layers and hooks

03Refactoring legacy React code to use modern Suspense and TanStack Router patterns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add xiaxingxiaowei1983/ai frontend-development

For use in Claude.ai and ChatGPT

Key Features

01Enforces feature-based directory structures for scalable project organization

020 GitHub stars

03Standardizes React component patterns using TypeScript and lazy loading

04Implements Suspense-based data fetching with TanStack Query

05Optimizes performance through useMemo, useCallback, and code-splitting

06Applies Material UI (MUI) v7 styling conventions and responsive Grid layouts

Use Cases

01Ensuring consistent styling and TypeScript type safety across large frontend codebases

02Scaffolding new React features with dedicated API layers and hooks

03Refactoring legacy React code to use modern Suspense and TanStack Router patterns