Does it handle state management and data fetching?

Yes, it promotes the use of TanStack Query with the useSuspenseQuery hook for type-safe, cache-first data management and centralized API service layers.

How does this skill improve application performance?

It enforces mandatory lazy loading for heavy components and utilizes Suspense-based loading patterns to prevent Cumulative Layout Shift (CLS) and reduce initial bundle sizes.

What UI frameworks are supported by these guidelines?

The skill is specifically optimized for Material UI (MUI) v7, providing syntax guidance for the latest grid systems, theme access, and type-safe styling patterns.

Can I use this for existing React projects?

Yes, it provides checklists and directory templates that help developers refactor existing components into modern, modular, feature-based structures.

Frontend Development & React Guidelines

Name: Frontend Development & React Guidelines
Author: mrgoonie

bymrgoonie

•

1,395

•

デザインツール

Standardizes modern React application development with production-ready patterns for data fetching, routing, and UI styling.

This skill provides comprehensive architectural guidance for building high-performance React and TypeScript applications. It enforces modern patterns such as Suspense-based data fetching with TanStack Query, lazy loading for code splitting, and a modular feature-first directory structure. By integrating MUI v7 styling standards and TanStack Router configurations, it ensures frontend codebases are scalable, type-safe, and optimized for both developer experience and user performance, making it an essential companion for building enterprise-grade user interfaces.

主な機能

01Scalable feature-based directory organization and file structure

02Automated routing setup with TanStack Router

031,395 GitHub stars

04Suspense-based data fetching using TanStack Query

05Advanced TypeScript best practices and strict typing standards

06MUI v7 styling patterns and performance-driven UI components

ユースケース

01Architecting a new React enterprise application from scratch

02Refactoring legacy React code to modern Suspense and lazy-loading patterns

03Implementing a standardized, type-safe feature structure across a development team

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mrgoonie/claudekit-skills frontend-development

For use in Claude.ai and ChatGPT

Download Skill