frontend-dev-guidelines

Standardize React/TypeScript frontend development with consistent component and feature patterns.

Updated Jan 24, 2026

Search Tags:#typescript #suspense #frontend #react #routing #styling #patterns

Ready to run

npx skills add https://github.com/Khoatran1999/aquarium-commerce --skill frontend-dev-guidelines-khoatran1999

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/Khoatran1999/aquarium-commerce/tree/main/.claude/skills/frontend-development
Command: npx skills add https://github.com/Khoatran1999/aquarium-commerce --skill frontend-dev-guidelines-khoatran1999

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend development often suffers from pattern drift and inconsistent practices across teams; this guide consolidates modern React/TypeScript patterns to raise quality and maintainability.

Core Features & Use Cases

Enforces modern component patterns (React.FC<Props>, lazy loading, Suspense boundaries, useSuspenseQuery) and standardized file organization (features/, components/), with a focus on performance and type-safety.
Provides guidance for data fetching, routing with TanStack Router, styling with MUI v7, and robust form handling with TypeScript best practices.
Use cases include new components/pages, feature development, data fetching, routing, and styling in large frontend applications.

Quick Start

Create a new frontend feature following the prescribed structure and conventions.

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 scalable React app to prevent pattern drift?▼

To structure a scalable React app and prevent pattern drift, enforce standardized file organization using features/ and components/ directories alongside modern component patterns like React.FC and lazy loading.

What is the best way to handle data fetching with Suspense in React?▼

The best way to handle data fetching with Suspense in React is by using useSuspenseQuery combined with Suspense boundaries. This ensures robust type-safety and optimizes performance across feature development.

Does this frontend development guide support TanStack Router and MUI?▼

Yes, this frontend development guide supports TanStack Router for routing and MUI v7 for styling. It provides specific guidance to ensure type-safety and consistent patterns across these tools.

How do I configure lazy loading and type-safety for new React features?▼

To configure lazy loading and type-safety for new React features, apply TypeScript best practices and prescribed structure conventions. This enforces alias usage and robust form handling across components.

When should I not use React.FC and lazy loading patterns?▼

You should not use React.FC and lazy loading patterns when building simple, non-scalable applications where strict structure and alias usage are unnecessary. These patterns target large frontend applications requiring maintainability.