frontend-dev-guidelines

Guide React/TypeScript frontend development with Suspense, lazy loading, and TanStack Query.

Updated Mar 26, 2026

Search Tags:#typescript #best practices #react #performance optimization #frontend development

Ready to run

npx skills add https://github.com/locdinh209/curation-skills --skill frontend-dev-guidelines-locdinh209

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/locdinh209/curation-skills/tree/main/frontend-development
Command: npx skills add https://github.com/locdinh209/curation-skills --skill frontend-dev-guidelines-locdinh209

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, typescript, @tanstack/react-query, @mui/material, @tanstack/react-router, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides comprehensive guidelines and best practices for modern frontend development, helping developers create efficient, maintainable, and scalable React/TypeScript applications.

Core Features & Use Cases

Modern Development Patterns: Utilizes Suspense, lazy loading, useSuspenseQuery, proper file organization, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices.
When to Use This Skill: Creating new components or pages, building new features, fetching data, styling, routing, or working with frontend code.
Use Case: A developer looking to optimize their React application could use this Skill to implement best practices for components, data fetching, and routing.

Quick Start

Run the frontend-dev-guidelines skill and follow the detailed instructions to create a new component with TypeScript, lazy loading, and proper styling.

Frequently Asked Questions about frontend-dev-guidelines

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

FAQPage Schema

What are the best practices for React performance optimization using Suspense and lazy loading?▼

React performance optimization using Suspense and lazy loading involves deferring component rendering until data or code is ready. This Skill provides guidelines to implement these patterns alongside useSuspenseQuery for efficient data fetching.

How do I structure a scalable React and TypeScript application with TanStack Router and Query?▼

Structuring scalable React applications with TanStack Router and Query requires proper file organization and routing patterns. This Skill outlines workflows for integrating these libraries to manage component development and data fetching efficiently.

Does this frontend development guideline require prior knowledge of TypeScript and MUI v7?▼

Yes, this frontend development guideline requires existing knowledge of React, TypeScript, and related libraries like MUI v7. It is designed for developers working on complex workflows involving styling, routing, and TypeScript usage.

What is the best way to fetch data in React using TanStack Query and Suspense?▼

The best way to fetch data in React using TanStack Query and Suspense is through the useSuspenseQuery hook. This Skill details how to leverage this approach for streamlined data fetching and component loading states.

How do I create a new React component with TypeScript and MUI v7 styling?▼

Creating a React component with TypeScript and MUI v7 styling involves following specific patterns for file organization and styling implementation. This Skill provides step-by-step instructions to build components with proper lazy loading and TypeScript integration.