Does it support custom styling patterns?

Yes, it provides specific thresholds for MUI styling, recommending inline sx props for small components and separate .styles.ts files for complex layouts exceeding 100 lines.

How does it improve application performance?

It enforces lazy loading for heavy components and routes, utilizes Suspense boundaries to prevent layout shifts, and provides specific optimization patterns for useMemo and useCallback.

What core libraries does this skill support?

This skill is optimized for React applications using TypeScript, MUI v7, TanStack Query (React Query), and TanStack Router.

What is the 'Feature-First' directory structure?

It organizes code by domain (e.g., 'auth', 'profile') rather than by file type, grouping APIs, hooks, components, and types together within a dedicated feature folder.

Frontend Development Guidelines

Name: Frontend Development Guidelines
Author: claudiodearaujo

byclaudiodearaujo

0•

Design Tools

Enforces modern React and TypeScript standards using Suspense, TanStack Query, and MUI v7 for high-performance web applications.

This skill serves as a comprehensive architectural blueprint for React development, focusing on modern patterns that prioritize user experience and maintainability. It provides standardized workflows for implementing Suspense-based data fetching, lazy loading for performance optimization, and a feature-first directory structure. By integrating specific guidelines for TanStack Router, MUI v7 styling, and strict TypeScript practices, it helps developers eliminate layout shifts, reduce boilerplate, and ensure consistent code quality across complex frontend projects.

Key Features

01Strict TypeScript best practices and import alias management

02Suspense-driven data fetching patterns using TanStack Query

030 GitHub stars

04Modern MUI v7 styling standards and performance-first CSS patterns

05Standardized feature-based directory organization for scalable codebases

06Automated routing configuration with TanStack Router and lazy loading

Use Cases

01Scaffolding new React features with pre-defined API and component structures

02Refactoring legacy data fetching to modern Suspense-based query patterns

03Optimizing application performance and reducing Cumulative Layout Shift (CLS)

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/sistema-de-narra-o-de-livro-front frontend-dev-guidelines

For use in Claude.ai and ChatGPT

Download Skill

Key Features

01Strict TypeScript best practices and import alias management

02Suspense-driven data fetching patterns using TanStack Query

030 GitHub stars

04Modern MUI v7 styling standards and performance-first CSS patterns

05Standardized feature-based directory organization for scalable codebases

06Automated routing configuration with TanStack Router and lazy loading

Use Cases

01Scaffolding new React features with pre-defined API and component structures

02Refactoring legacy data fetching to modern Suspense-based query patterns

03Optimizing application performance and reducing Cumulative Layout Shift (CLS)

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/sistema-de-narra-o-de-livro-front frontend-dev-guidelines

For use in Claude.ai and ChatGPT

Download Skill