frontend-development

Standardize React/TypeScript frontend features with Suspense and TanStack Router.

Updated Feb 27, 2026

Search Tags:#typescript #suspense #frontend #react #routing #lazy-loading

Ready to run

npx skills add https://github.com/haidonglethqb/CloudSchool --skill frontend-development-haidonglethqb

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-development
Source: https://github.com/haidonglethqb/CloudSchool/tree/main/.claude/skills/frontend-development
Command: npx skills add https://github.com/haidonglethqb/CloudSchool --skill frontend-development-haidonglethqb

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often struggle to apply consistent modern React/TypeScript patterns across new components, routes, and features, leading to inconsistent code quality and slower delivery.

Core Features & Use Cases

Suspense-based data fetching and code splitting with React.lazy for improved user experience
TanStack Router-based routing with lazy-loaded pages and structured feature boundaries
MUI v7 styling conventions and TypeScript-first development for predictable UI
Clear guidance on feature structure, data layer, and error handling to accelerate delivery

Quick Start

Create a new frontend feature by scaffolding a React/TypeScript component with Suspense boundaries and TanStack Router routes.

Frequently Asked Questions about frontend-development

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

FAQPage Schema

How do I structure a React TypeScript project with Suspense for data fetching?▼

Structure a React TypeScript project with Suspense by organizing code into modular features, components, and hooks directories. Use Suspense boundaries with useSuspenseQuery for data fetching and React.lazy for code splitting to improve user experience.

What is the best way to implement lazy loading and routing in a React application?▼

The best way to implement lazy loading and routing in a React application is using TanStack Router for routing combined with React.lazy for code splitting. This approach standardizes feature boundaries and accelerates delivery.

How does TanStack Router work with lazy-loaded pages and Suspense boundaries?▼

TanStack Router works with lazy-loaded pages by integrating React.lazy to split code and Suspense boundaries to manage loading states. This combination ensures predictable UI rendering while fetching data via useSuspenseQuery.

Do I need strict TypeScript typing for modern frontend feature scaffolding?▼

Yes, you need strict TypeScript typing for modern frontend feature scaffolding to ensure predictable UI and maintain consistent code quality. TypeScript-first development is required alongside standardized styling conventions like MUI v7.

Can I use MUI v7 styling conventions with a modular React feature layout?▼

Yes, you can use MUI v7 styling conventions with a modular React feature layout. This approach combines TypeScript-first development with structured feature boundaries to standardize UI components and accelerate delivery.

Why does my React feature need standardized error handling with Suspense boundaries?▼

Your React feature needs standardized error handling with Suspense boundaries because teams often struggle to apply consistent modern patterns. Standardization ensures predictable UI rendering, clear data layer organization, and consistent code quality.