skills.rest
trungdo9
trungdo9COMMUNITY
Explore all skills by this author →
GitHub

frontend-development

Guide React frontend development with TypeScript, MUI, and TanStack Query.

3|1|Updated Dec 5, 2025
Search Tags:#React#TypeScript#frontend development#MUI#TanStack Query#TanStack Router#React development
One-click install
npx skills add https://github.com/trungdo9/ClauKit --skill frontend-development-trungdo9
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-development
Source: https://github.com/trungdo9/ClauKit/tree/main/skills/software/development/frontend-development
Command: npx skills add https://github.com/trungdo9/ClauKit --skill frontend-development-trungdo9

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill Unit offers guidance for effective frontend development, ensuring high performance and maintainable code within modern React applications.

Core Features & Use Cases

  • Best Practices for Modern React Development: Provides guidelines on modern patterns like Suspense, lazy loading, and TypeScript best practices.
  • Component Patterns: Offers a structured approach to building reusable and efficient React components.
  • Data Fetching: Guides on using useSuspenseQuery for efficient data fetching and caching.
  • File Organization: Explains best practices for organizing code in features/ and components/ directories.
  • Styling: Recommends MUI v7 for styling and how to manage inline vs. separate styles.
  • Routing: Provides instructions on setting up routing with TanStack Router.
  • Loading & Error States: Outlines proper handling of loading and error states to enhance user experience.
  • Performance Optimization: Shares techniques for optimizing performance with useMemo, useCallback, and React.memo.
  • Typescript: Offers TypeScript standards and conventions for type safety.
  • Common Patterns: Covers patterns like authentication, forms, DataGrid, dialogs, and more.

Quick Start

To start a new component, run: create-component ComponentName.

Frequently Asked Questions about frontend-development

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

FAQPage Schema
How do I structure React components and files for better maintainability?▼

Handle loading and error states in React data fetching by using `useSuspenseQuery` from TanStack Query, which manages caching and suspense integration to streamline asynchronous UI rendering without manual state checks.

What is the best way to optimize React performance with hooks?▼

Optimize React performance by applying `useMemo` for expensive calculations, `useCallback` for event handlers, and `React.memo` for components, alongside utilizing Suspense and lazy loading to reduce initial bundle size.

Can I use TanStack Router and MUI for styling in a modern React app?▼

Yes, you can use TanStack Router for routing and MUI v7 for styling in React apps, managing inline versus separate styles while standardizing TypeScript conventions to ensure type-safe routing and UI components.

How do I start building a new React component with this setup?▼

To start building a new React component quickly, run the `create-component ComponentName` command, which scaffolds the file structure and initial TypeScript boilerplate based on the established frontend patterns.

What TypeScript conventions should I follow for modern React development?▼

Follow TypeScript standards that enforce strict type safety across your React application, ensuring properly typed component props, data fetching responses from TanStack Query, and routing contexts from TanStack Router.

Related Skills

Explore More Software Engineering Skills→
januarfontijanuarfonti
10

javascript-typescript

Configure JavaScript/TypeScript projects with ES6+ standards and TypeScript compiler options.

Community
Advanced
botPhUbotPhU

nextjs-expert

Diagnose and fix Next.js App Router routing, hydration, and performance issues.

Community
Advanced
solrac97grsolrac97gr
2

start-project

Create a new React project with Vite, TypeScript, and feature-based architecture.

Community
Advanced
miles990miles990
20

frontend

Guide React, Next.js, and Vue.js development with component patterns and Tailwind CSS.

Community
Intermediate