skills.rest
MinhHoangDono
MinhHoangDonoCOMMUNITY
Explore all skills by this author →
GitHub

frontend-development

Generate React and TypeScript frontend codebases with TanStack Router, TanStack Query, and MUI v7.

Updated Mar 7, 2026
Search Tags:#typescript#suspense#frontend architecture#react#tanstack query#mui v7#tanstack router
One-click install
npx skills add https://github.com/MinhHoangDono/antigravity-kit --skill frontend-development-minhhoangdono
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-development
Source: https://github.com/MinhHoangDono/antigravity-kit/tree/main/.agent/skills/frontend-development
Command: npx skills add https://github.com/MinhHoangDono/antigravity-kit --skill frontend-development-minhhoangdono

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you create consistent, scalable React and TypeScript frontends by enforcing best practices for routing, data fetching, styling, and performance so you can ship features with fewer regressions.

Core Features & Use Cases

  • Component and feature scaffolding: Organizes code into features/{feature-name}/ with dedicated api/, components/, hooks/, helpers/, and types/ folders.
  • Modern TanStack patterns: Uses TanStack Query with useSuspenseQuery and TanStack Router with lazy-loaded routes.
  • MUI v7 and performance guardrails: Applies MUI v7 styling guidance plus performance rules like memoization and callback stabilization.
  • Operational checklists: Ensures consistent structure (e.g., Suspense boundaries, file size limits, and predictable exports).

Quick Start

Ask the AI to generate a new feature named "billing" with a route, lazy-loaded components, TanStack Query data fetching via useSuspenseQuery, and MUI v7 styling following the 200-line file size rule.

Frequently Asked Questions about frontend-development

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

FAQPage Schema
How do I structure a React frontend with TanStack Router and TanStack Query?▼

Structure your React frontend by organizing code into features/{feature-name}/ directories with dedicated api/, components/, hooks/, helpers/, and types/ folders. Use TanStack Router for lazy-loaded routes and TanStack Query for data fetching to maintain scalable architecture.

What is the best way to use Suspense boundaries with TanStack Query?▼

Use useSuspenseQuery from TanStack Query to enforce Suspense-based rendering in your React application. This approach automatically suspends components while waiting for asynchronous data to resolve, streamlining loading states.

Does this React scaffolding approach work with MUI v7 styling?▼

Yes, this React scaffolding approach works directly with MUI v7. It applies MUI v7 styling guidance alongside performance guardrails like component memoization and callback stabilization to ensure consistent, optimized user interfaces.

How do I scaffold a new feature in a React and TypeScript codebase?▼

Scaffold a new React and TypeScript feature by generating a dedicated route with lazy-loaded components, useSuspenseQuery data fetching, and MUI v7 styling. The generator automatically organizes files into structured api, components, and hooks folders.

What file size limits are enforced for production-ready React components?▼

A 200-line file size limit is enforced for production-ready React components. This operational checklist constraint ensures predictable exports, maintains structural consistency, and significantly reduces regressions when shipping new features.

Related Skills

Explore More Software Engineering Skills→
MadAppGangMadAppGang
278

tanstack-router

Configure type-safe file-based routes for React with TanStack Router.

Official
Intermediate
chef0111chef0111
1

frontend-development

Provide React/TypeScript frontend development guidelines covering components, data fetching, routing, and styling.

Community
Advanced
kaiomaced0kaiomaced0

tanstack-query

Fetch, cache, and update data with TanStack Query hooks.

Community
Intermediate
mweinbachmweinbach
154

native-data-fetching

Handle API requests, caching, and offline support in React Native.

Community
Intermediate