skills.rest
locdinh209
locdinh209COMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/locdinh209/curation-skills --skill frontend-dev-guidelines-locdinh209
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
zuzu59zuzu59

convex-quickstart

Automate Convex project setup across React, Next.js, Vue, and Svelte.

Community
Intermediate
howdeployhowdeploy
15

canary

Monitor live production apps for console errors and performance regressions.

Community
Advanced
greyhaven-aigreyhaven-ai
29

React TanStack Testing Skill

Generate test suites for TanStack React apps with Vitest and MSW.

Community
Intermediate
TW-NLPTW-NLP
91

web-artifacts-builder

Create interactive HTML artifacts from React projects with Tailwind CSS and shadcn/ui.

Community
Advanced