Does this skill support the latest MUI v7 syntax?

Yes, it includes specific guidelines for MUI v7, including the updated Grid size syntax and sx prop styling conventions.

What directory structure does this skill recommend?

It advocates for a domain-driven 'features' directory where API logic, hooks, types, and components are grouped by feature rather than global type.

Is this suitable for performance optimization?

Absolutely. It provides specific patterns for useMemo, useCallback, and mandatory React.lazy usage to ensure optimal application speed.

How does it handle loading states?

It enforces a 'No Early Returns' rule, using Suspense boundaries and a standardized SuspenseLoader component to prevent Cumulative Layout Shift (CLS).

Frontend Development Guidelines

Name: Frontend Development Guidelines
Author: ddttom

byddttom

0•

デザインツール

Enforces modern React and TypeScript best practices including Suspense, TanStack Query, and MUI v7 architectural patterns.

This skill serves as a comprehensive architectural blueprint for building high-performance React applications. It provides standardized guidance on feature-based file organization, type-safe data fetching with TanStack Query, and efficient routing with TanStack Router. By emphasizing Suspense-driven patterns and mandatory lazy loading for heavy components, it helps developers eliminate layout shifts and reduce initial bundle sizes while maintaining a clean, scalable TypeScript codebase using MUI v7 styling conventions.

主な機能

01Automated code-splitting and lazy loading implementation for heavy components

02MUI v7 styling standards and responsive grid optimization

03Standardized feature-based directory structure (api, hooks, components, types)

04Suspense-based data fetching patterns with TanStack Query

050 GitHub stars

06Type-safe routing configuration using TanStack Router

ユースケース

01Refactoring existing data fetching logic to utilize useSuspenseQuery and Suspense boundaries

02Optimizing application performance through strategic code splitting and callback memoization

03Scaffolding new React features with consistent directory hierarchies and API layers

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ddttom/allaboutv2 frontend-dev-guidelines

For use in Claude.ai and ChatGPT

主な機能

01Automated code-splitting and lazy loading implementation for heavy components

02MUI v7 styling standards and responsive grid optimization

03Standardized feature-based directory structure (api, hooks, components, types)

04Suspense-based data fetching patterns with TanStack Query

050 GitHub stars

06Type-safe routing configuration using TanStack Router

ユースケース

01Refactoring existing data fetching logic to utilize useSuspenseQuery and Suspense boundaries

02Optimizing application performance through strategic code splitting and callback memoization

03Scaffolding new React features with consistent directory hierarchies and API layers

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ddttom/allaboutv2 frontend-dev-guidelines

For use in Claude.ai and ChatGPT