frontend-dev-guidelines

Guide React and TypeScript app development with Suspense-based data fetching and MUI v7 patterns.

Updated Aug 23, 2026

Search Tags:#typescript #frontend #react #routing #styling #data-fetching

Ready to run

npx skills add https://github.com/TUAN130294/erablue-app --skill frontend-dev-guidelines-tuan130294

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/TUAN130294/erablue-app/tree/main/.claude/skills/frontend-development
Command: npx skills add https://github.com/TUAN130294/erablue-app --skill frontend-dev-guidelines-tuan130294

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend projects often suffer from inconsistent patterns and boilerplate across components, data fetching, routing, and styling. This Skill provides a concise, modern guide for building React + TypeScript apps with Suspense-based data fetching, lazy loading, feature-based file organization, and MUI v7 styling patterns to reduce complexity and speed up delivery.

Core Features & Use Cases

Clear patterns for component architecture, data fetching with TanStack Query, and TanStack Router-based routing
Guidance on frontend file organization (features vs. reusable components) and TypeScript best practices
Performance-oriented tips (Suspense, memoization, and stable import aliases)
Use when creating new components, pages, or features, and when refactoring frontend code for consistency

Quick Start

Create a new React component following these guidelines to ensure maintainable, scalable, and performant UI.