skills.rest
hanthienduc
hanthienducCOMMUNITY
Explore all skills by this author →
GitHub

frontend-dev-guidelines

Guide React/TypeScript development with Suspense, MUI v7, and TanStack Router.

Updated Aug 23, 2026
Search Tags:#development#performance#React#frontend#TypeScript#guidelines#MUI#TanStack Query
One-click install
npx skills add https://github.com/hanthienduc/myprotocol-stack --skill frontend-dev-guidelines-hanthienduc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/hanthienduc/myprotocol-stack/tree/main/.claude/skills/frontend-development
Command: npx skills add https://github.com/hanthienduc/myprotocol-stack --skill frontend-dev-guidelines-hanthienduc

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Modern React development is complex, with evolving best practices for data fetching, state management, styling, and performance. This skill provides a comprehensive, opinionated guide to ensure consistent, high-quality, and performant React/TypeScript applications, preventing common pitfalls like layout shifts and unoptimized renders.

Core Features & Use Cases

  • Modern React Patterns: Enforces Suspense-based data fetching (useSuspenseQuery), lazy loading, and a "no early returns" rule to prevent layout shifts and improve user experience.
  • Structured File Organization: Guides on organizing code into features/ and components/ with clear subdirectories (api/, hooks/, types/), promoting modularity and maintainability.
  • Performance & Type Safety: Covers useMemo, useCallback, React.memo for optimization, debounced search, and strict TypeScript standards (React.FC<Props>, explicit return types, import type).
  • MUI v7 & TanStack Integration: Provides guidelines for MUI v7 styling (sx prop, new Grid syntax) and TanStack Router for folder-based routing, ensuring modern framework usage.
  • Use Case: A developer needs to build a new feature in a large React/TypeScript application. They can use this skill to get step-by-step guidance on component structure, data fetching with useSuspenseQuery, file organization, and styling with MUI v7, ensuring their code adheres to project standards and best practices.

Quick Start

Explain the core principles for modern React component development, including lazy loading and Suspense.