skills.rest
ollieb89
ollieb89COMMUNITY
Explore all skills by this author →
GitHub

frontend-dev-guidelines

Enforce React and TypeScript frontend standards with TanStack Query, Router, and MUI v7.

Updated Feb 18, 2026
Search Tags:#typescript#best practices#frontend#react#routing#mui#tanstack query
One-click install
npx skills add https://github.com/ollieb89/viflo --skill frontend-dev-guidelines-ollieb89
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/ollieb89/viflo/tree/main/.agent/skills/frontend-dev-guidelines
Command: npx skills add https://github.com/ollieb89/viflo --skill frontend-dev-guidelines-ollieb89

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive set of modern patterns and best practices for developing React and TypeScript frontend applications, ensuring consistency, maintainability, and performance.

Core Features & Use Cases

  • Component Patterns: Standardized structure for React components using React.FC, lazy loading, and Suspense.
  • Data Fetching: Guidelines for useSuspenseQuery and cache-first strategies with TanStack Query.
  • File Organization: Clear structure for features/ and components/ directories.
  • Styling: Best practices for MUI v7, inline vs. separate styles, and theme integration.
  • Routing: TanStack Router implementation with folder-based routing and lazy loading.
  • Loading & Error States: Strategies for handling loading and errors using Suspense and MUI Snackbar.
  • Performance: Memoization (useMemo, useCallback), debouncing, and memory leak prevention.
  • TypeScript: Strict mode, explicit types, and common utility types.
  • Use Case: When starting a new frontend feature, consult this Skill to ensure all components, data fetching, routing, and styling adhere to established project standards, leading to a more robust and scalable application.

Quick Start

Follow the component structure template provided in the SKILL.md for creating a new React component.

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 structuring React components and file organization in TypeScript?▼

React component best practices involve using React.FC, organizing files into features/ and components/ directories, and applying lazy loading with Suspense to ensure maintainability and standardized code architecture.

How do I implement data fetching with TanStack Query and Suspense in React?▼

Data fetching with TanStack Query and Suspense uses the useSuspenseQuery hook alongside cache-first strategies to manage loading states and standardize asynchronous data retrieval in React applications.

Does this Skill support routing and styling with TanStack Router and MUI v7?▼

Yes, the Skill supports routing with TanStack Router using folder-based routing and lazy loading, alongside styling with MUI v7 to integrate themes and manage inline versus separate styles.

What's the best way to optimize React performance and prevent memory leaks?▼

Optimizing React performance involves applying memoization with useMemo and useCallback, implementing debouncing, and adopting specific memory leak prevention techniques to standardize application speed.

How do I handle loading and error states in a React frontend application?▼

Handling loading and error states in React utilizes Suspense for loading boundaries and MUI Snackbar components for error notifications, standardizing user feedback during asynchronous operations.

Related Skills

Explore More Software Engineering Skills→
Doyajin174Doyajin174
1

typescript-strict

Enforce TypeScript strict mode and type-safe patterns in code.

Community
Advanced
marcusgollmarcusgoll

deep-fullstack

Enforce shared API contracts and end-to-end type safety across full-stack development workflows.

Community
Advanced
SandroBeatzSandroBeatz

lint-check

Run ESLint and TypeScript type checking on a codebase.

Community
Intermediate
sametozkalesametozkale

redux

Connect json-render's StateStore interface to Redux stores for React applications.

Community
Basic