skills.rest
hungtrandigital
hungtrandigitalCOMMUNITY
Explore all skills by this author →
GitHub

frontend-dev-guidelines

Guide React/TypeScript frontend architecture with TanStack Query, Router, and MUI v7.

Updated Dec 12, 2025
Search Tags:#code quality#development#performance#React#frontend#TypeScript#MUI#TanStack Query
One-click install
npx skills add https://github.com/hungtrandigital/ResidentOne --skill frontend-dev-guidelines-hungtrandigital
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/hungtrandigital/ResidentOne/tree/main/0-agents/agents/skills/frontend-development
Command: npx skills add https://github.com/hungtrandigital/ResidentOne --skill frontend-dev-guidelines-hungtrandigital

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Modern React/TypeScript development can be complex, with evolving patterns for data fetching, state management, styling, and performance. This Skill provides a comprehensive guide to ensure consistent, high-quality, and performant frontend code, reducing development time and code review cycles.

Core Features & Use Cases

  • Suspense-Based Data Fetching: Guides on useSuspenseQuery and lazy loading for optimal performance and user experience, eliminating manual loading state management.
  • Structured File Organization: Best practices for organizing features, components, hooks, and types for maintainability and scalability, simplifying large codebases.
  • MUI v7 Styling & TanStack Router: Up-to-date guidelines for styling with MUI's sx prop and efficient routing, ensuring consistent UI and smooth navigation.
  • Performance & TypeScript: Covers useMemo, useCallback, React.memo, debouncing, and strict TypeScript standards to prevent bugs and optimize application speed.

Quick Start

Create a new feature directory for 'products' including API service, components, and types, following the recommended file structure.

Frequently Asked Questions about frontend-dev-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure a React/TypeScript project for maintainability and scalability?▼

Organize features into directories with dedicated folders for components, hooks, types, and API services. This structured file organization reduces complexity in large codebases and simplifies code reviews by keeping related logic together.

What's the best way to handle data fetching in React with TypeScript?▼

Use TanStack Query's `useSuspenseQuery` to enable Suspense-based data fetching, eliminating manual loading state management. This approach optimizes performance and user experience while maintaining type safety.

How do I optimize React component performance with TypeScript?▼

Apply `useMemo`, `useCallback`, and `React.memo` strategically, enforce strict TypeScript standards, and implement debouncing where needed. These patterns prevent unnecessary re-renders and catch bugs early through type checking.

Can I use TanStack Router and MUI v7 together for navigation and styling?▼

Yes. TanStack Router provides efficient routing while MUI v7's `sx` prop enables consistent, performant styling. Together they ensure smooth navigation and unified UI design across your React application.

What are the key benefits of Suspense-based data fetching over traditional loading states?▼

Suspense eliminates boilerplate for manual loading and error state management, provides cleaner component logic, and enables better code-splitting. This results in faster perceived performance and simpler maintenance.

Does this approach work for large-scale React/TypeScript applications?▼

Yes. The guidelines cover scalability through structured file organization, type-safe patterns, code-splitting, and performance optimization techniques designed specifically for maintaining consistency across large codebases.

Related Skills

Explore More Software Engineering Skills→
MadAppGangMadAppGang
278

tooling-setup

Configure React 19 frontend tooling with Vite, TypeScript, Biome, and Vitest.

Official
Intermediate
nicholasgriffintnnicholasgriffintn
2

performance-optimisation

Identify and fix performance bottlenecks across frontend, backend, and database layers.

Community
Basic
Mte90Mte90
51

TypeScript Tooling

Configure ESLint, Prettier, Jest, and build tools for TypeScript projects.

Community
Intermediate
Ayub-KhanAyub-Khan

state-management

Organize client, server, and URL state with patterns for React, Vue, and Svelte.

Community
Advanced