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

デザインツール

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.

主な機能

Strict TypeScript best practices and import alias management
Suspense-driven data fetching patterns using TanStack Query
0 GitHub stars
Modern MUI v7 styling standards and performance-first CSS patterns
Standardized feature-based directory organization for scalable codebases
Automated routing configuration with TanStack Router and lazy loading

ユースケース

Scaffolding new React features with pre-defined API and component structures
Refactoring legacy data fetching to modern Suspense-based query patterns
Optimizing 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

GitHub

概要