skills.rest
ChrstprJohn
ChrstprJohnCOMMUNITY
Explore all skills by this author →
GitHub

frontend-dev-guidelines

Standardize React + TypeScript frontend architecture with Suspense-first data fetching and MUI v7 styling.

6|Updated Mar 1, 2026
Search Tags:#typescript#suspense#frontend#react#lazy-loading#tanstack-router
One-click install
npx skills add https://github.com/ChrstprJohn/SamsonDentalCenter --skill frontend-dev-guidelines-chrstprjohn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/ChrstprJohn/SamsonDentalCenter/tree/main/.agent/skills/frontend-dev-guidelines
Command: npx skills add https://github.com/ChrstprJohn/SamsonDentalCenter --skill frontend-dev-guidelines-chrstprjohn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Standardize frontend architecture for React + TypeScript projects to reduce drift and speed up onboarding.

Core Features & Use Cases

  • Suspense-first data fetching as the default pattern to simplify loading states.
  • Feature-based code organization and strict TypeScript discipline for scalable codebases.
  • Guidance on lazy loading, MUI v7 styling, and TanStack Router integration to optimize performance and routing.
  • Appropriate for production-grade applications and team migrations toward these standards.

Quick Start

Align your codebase with Suspense-first data fetching, lazy loading, and feature-based organization using the provided guidelines.

Frequently Asked Questions about frontend-dev-guidelines

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

FAQPage Schema
How do I standardize React and TypeScript frontend architecture to reduce code drift?▼

Standardize React and TypeScript frontend architecture by enforcing feature-based organization, strict typing, and Suspense-first data fetching to reduce drift and speed up onboarding. This approach aligns teams on routing, styling, and component creation workflows.

What is the best way to handle loading states with React Suspense and TanStack Router?▼

Adopt Suspense-first data fetching as the default pattern to simplify loading states in React. By using useSuspenseQuery alongside lazy loading and TanStack Router, you delegate loading state management to the Suspense boundary.

How do I structure a scalable React project using feature-based organization?▼

Structure a scalable React project using feature-based organization to group related components, routing, and data-fetching workflows together. This strict TypeScript discipline ensures codebases remain maintainable during team migrations and production scaling.

Can I use MUI v7 styling with strict TypeScript and lazy loading?▼

Yes, you can use MUI v7 styling with strict TypeScript and lazy loading. These are core requirements within the standardized frontend architecture, ensuring optimized performance and consistent UI design across feature-based modules.

When should I not use useSuspenseQuery for data fetching in React?▼

Avoid useSuspenseQuery when migrating legacy code that cannot support Suspense boundaries or when handling data fetching outside the standardized React and TypeScript feature-based architecture. It requires strict TypeScript and modern React Suspense support.

Related Skills

Explore More Software Engineering Skills→
mklozmkloz

react-dev

Builds type-safe React applications with TypeScript and React 19 features.

Community
Advanced
STier-AiSTier-Ai
5

frontend-dev-guidelines

Provide guidelines for building scalable React applications with Suspense-first data fetching and MUI v7 styling.

Official
Advanced
yldst-devyldst-dev
1

frontend-dev-guidelines

Enforce React and TypeScript frontend standards with Suspense-first data fetching.

Community
Advanced
jokken79jokken79
1

frontend-dev-guidelines

Guide React/TypeScript frontend teams with standardized component patterns and templates.

Community
Advanced