What UI framework is supported by these guidelines?

The skill is specifically optimized for Material UI (MUI) v7, including the updated Grid system and type-safe styling using the sx prop.

How does this skill handle data fetching in React?

It prioritizes the useSuspenseQuery pattern from TanStack Query to eliminate early returns and layout shifts, ensuring a smoother user experience.

Does this skill help with file organization?

Yes, it enforces a 'features/' directory structure that isolates domain-specific logic, API services, hooks, and types for better scalability.

How are loading states managed?

The guidelines strictly prohibit early returns for loading spinners; instead, it utilizes Suspense boundaries and a standardized SuspenseLoader component to prevent layout shifts.

Frontend Development Guidelines

Name: Frontend Development Guidelines
Author: xiaxingxiaowei1983

byxiaxingxiaowei1983

0•

设计工具

Streamlines React and TypeScript development using modern patterns like Suspense, TanStack Query, and Material UI v7.

This skill serves as a comprehensive guide for building production-grade React applications with a focus on performance and maintainability. It establishes clear architectural standards for feature-based file organization, type-safe data fetching with TanStack Query, and efficient styling using Material UI v7. By integrating these guidelines, developers can automate the creation of robust components, manage complex routing with TanStack Router, and ensure adherence to performance best practices like lazy loading and layout shift prevention.

主要功能

01Feature-driven architecture for better code organization

02Modern Material UI (MUI) v7 styling conventions

03Strict TypeScript standards and import aliasing

04Suspense-based data fetching with TanStack Query

050 GitHub stars

06Performance optimization through lazy loading and memoization

使用场景

01Optimizing application performance to reduce Cumulative Layout Shift (CLS)

02Refactoring legacy data fetching to use type-safe Suspense patterns

03Scaffolding new feature modules with standardized folder structures

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add xiaxingxiaowei1983/openclaw frontend-development

For use in Claude.ai and ChatGPT

主要功能

01Feature-driven architecture for better code organization

02Modern Material UI (MUI) v7 styling conventions

03Strict TypeScript standards and import aliasing

04Suspense-based data fetching with TanStack Query

050 GitHub stars

06Performance optimization through lazy loading and memoization

使用场景

01Optimizing application performance to reduce Cumulative Layout Shift (CLS)

02Refactoring legacy data fetching to use type-safe Suspense patterns

03Scaffolding new feature modules with standardized folder structures

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add xiaxingxiaowei1983/openclaw frontend-development

For use in Claude.ai and ChatGPT