frontend-dev-guidelines

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

5|Updated Mar 9, 2026

Search Tags:#React #TypeScript #lazy loading #MUI #Suspense

Ready to run

npx skills add https://github.com/STier-Ai/stier --skill frontend-dev-guidelines-stier-ai

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/STier-Ai/stier/tree/main/.gemini/skills/frontend-dev-guidelines
Command: npx skills add https://github.com/STier-Ai/stier --skill frontend-dev-guidelines-stier-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides a comprehensive set of guidelines for building modern, scalable, and maintainable React applications, addressing common challenges in frontend development.

Core Features & Use Cases

Architectural Standards: Defines best practices for code organization, architecture, and performance.
Data Fetching: Implements Suspense-first data fetching and cache-first strategies.
Routing: Utilizes folder-based routing with lazy loading for performance.
Styling: Adheres to MUI v7 styling conventions for consistency.
Error Handling: Incorporates robust error handling and user feedback mechanisms.
Use Case: Suitable for any React developer looking to improve the quality and efficiency of their frontend codebase.

Quick Start

Use the frontend-dev-guidelines skill to check the feasibility of a new component or feature.

Frequently Asked Questions about frontend-dev-guidelines

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

FAQPage Schema

How do I implement Suspense-first data fetching in a React application?▼

Suspense-first data fetching in React uses cache-first strategies to manage asynchronous states. This approach integrates with TanStack React Query to handle loading states declaratively, ensuring robust error handling and user feedback mechanisms during component rendering.

What is the best way to structure a scalable React project for maintainability?▼

A scalable React project uses a feature-based architecture to organize code by domain rather than file type. This architectural standard ensures maintainability by isolating components, routing, and logic, making the codebase easier to navigate and update.

How do I configure lazy loading and folder-based routing with TanStack Router?▼

Lazy loading with TanStack Router utilizes folder-based routing to split code into smaller chunks. This routing method delays loading route components until they are needed, significantly improving initial load performance for React applications.

Can I use MUI v7 styling conventions with an existing TypeScript codebase?▼

Yes, MUI v7 styling conventions can be applied to a TypeScript codebase to ensure visual consistency. The guidelines adhere to these conventions to standardize component styling, allowing you to maintain a unified design system across your application.

Do I need TanStack React Query to follow these React development guidelines?▼

Yes, TanStack React Query is a required dependency for these guidelines. It provides the foundational cache-first data fetching and state management infrastructure needed to implement the specified Suspense-first patterns and performance-safe defaults.

Why does my React feature-based architecture suffer from performance bottlenecks?▼

Performance bottlenecks often occur without performance-safe defaults like lazy loading and Suspense-first data fetching. Applying these architectural standards ensures components are only loaded when rendered, preventing unnecessary execution and improving application responsiveness.