skills.rest
ngocp-0847
ngocp-0847COMMUNITY
Explore all skills by this author →
GitHub

frontend-dev-guidelines

Guide React development with Suspense, TanStack Query, and MUI v7.

1|Updated Dec 15, 2025
Search Tags:#typescript#suspense#frontend#react#tanstack#router
Ready to run
npx skills add https://github.com/ngocp-0847/agent-kit --skill frontend-dev-guidelines-ngocp-0847
💬 Prompt for ChatGPT / Claude Chat▼
Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/ngocp-0847/agent-kit/tree/main/templates/skills/frontend-development
Command: npx skills add https://github.com/ngocp-0847/agent-kit --skill frontend-dev-guidelines-ngocp-0847

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a comprehensive guide for modern React development, focusing on Suspense-based data fetching, lazy loading, proper file organization, routing, styling with MUI v7, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code.

Core Features & Use Cases

  • Data fetching patterns: UseSuspenseQuery with TanStack Query for clean, loading-free components.
  • File organization & routing: Features directory structure, import aliases, and TanStack Router setup.
  • Styling & performance: MUI v7 styling rules and TypeScript best practices.

Quick Start

Create a new component or page following the guidelines and wire it into your app using Suspense boundaries, TanStack Query, and TanStack Router.