What technologies does this frontend skill support?

It specifically supports React, TypeScript, MUI v7, TanStack Query (React Query), TanStack Router, and Vite-based projects.

What is the recommended file structure?

It advocates for a 'features/' directory where each domain contains its own api, components, hooks, helpers, and types subdirectories.

How does this skill handle loading states?

It enforces the use of Suspense boundaries and the SuspenseLoader component instead of early returns with loading spinners to prevent Cumulative Layout Shift (CLS).

Does it include styling best practices?

Yes, it provides guidelines for MUI v7 styling, recommending inline styles for small components and separate .styles.ts files for components exceeding 100 lines.

React Frontend Development Guidelines

Name: React Frontend Development Guidelines
Author: kettleofketchup

bykettleofketchup

•

Design Tools

Implements modern React and TypeScript patterns including Suspense-based data fetching, MUI v7 styling, and optimized feature-based architecture.

This Claude Code skill provides a comprehensive framework for building high-performance React applications using TypeScript and the TanStack ecosystem. It enforces best practices for code splitting through lazy loading, eliminates layout shifts using Suspense boundaries, and provides standardized patterns for MUI v7 styling and TanStack Router integration. Ideal for developers looking to maintain a clean, feature-driven directory structure while ensuring type safety and optimal user experience through advanced data fetching and performance optimization techniques.

Key Features

015 GitHub stars

02MUI v7 styling patterns and component standards

03TanStack Router configuration with automatic lazy loading

04Suspense-based data fetching with TanStack Query

05Strict TypeScript standards and import alias management

06Modular feature-based file organization and architecture

Use Cases

01Refactoring legacy loading states to modern Suspense-based patterns

02Scaffolding new React features with a standardized directory structure

03Implementing type-safe API service layers and data fetching hooks

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add kettleofketchup/draftforge frontend-development

For use in Claude.ai and ChatGPT

Download Skill