skills.rest
gerald-ica
gerald-icaCOMMUNITY
Explore all skills by this author →
GitHub

frontend-dev-guidelines

Guide React/TypeScript frontend development with Suspense, MUI v7, and TanStack Router.

Updated Apr 6, 2026
Search Tags:#best practices#React#TypeScript#development guidelines#front end development
One-click install
npx skills add https://github.com/gerald-ica/dev-tool-configs --skill frontend-dev-guidelines-gerald-ica
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/gerald-ica/dev-tool-configs/tree/main/gemini/skills/frontend-dev-guidelines
Command: npx skills add https://github.com/gerald-ica/dev-tool-configs --skill frontend-dev-guidelines-gerald-ica

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide to modern frontend development with React/TypeScript, addressing common challenges and optimizing workflows.

Core Features & Use Cases

  • Modern Development Patterns: Covers modern React development patterns like Suspense, lazy loading, useSuspenseQuery, and proper file organization.
  • Styling: Offers guidance on MUI v7 styling, TanStack Router, and performance optimization.
  • TypeScript: Emphasizes TypeScript best practices for maintainable and type-safe code.
  • Use Case: Whether you're creating components, pages, features, fetching data, styling, routing, or organizing frontend code, this Skill provides best practices to enhance your development process.

Quick Start

Use the frontend-dev-guidelines skill to generate a new feature structure for your React application, including API services, components, hooks, helpers, and types.

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 React TypeScript frontend development?▼

React TypeScript frontend development best practices involve using Suspense for data fetching, lazy loading, and strict type safety. This guide provides structured patterns for components, hooks, and file organization to streamline your workflow.

How do I structure a React feature with TypeScript and TanStack Router?▼

Structure a React feature by generating directories for API services, components, hooks, helpers, and types. This Skill provides structural generation logic aligned with TanStack Router and TypeScript type safety conventions.

How does Suspense-based data fetching work in modern React applications?▼

Suspense-based data fetching works by allowing components to pause rendering while asynchronous data loads. This guide details using useSuspenseQuery and Suspense boundaries to optimize data fetching in React.

Does this guide support MUI v7 styling and performance optimization?▼

Yes, this guide supports MUI v7 styling and performance optimization. It offers specific guidance on integrating MUI v7 with React and TypeScript to enhance frontend rendering performance.

What is the best way to organize frontend files in a React TypeScript project?▼

The best way to organize frontend files is by following structured patterns for components, pages, and features. This Skill outlines proper file organization to ensure maintainability and scalability in React TypeScript projects.

Related Skills

Explore More Software Engineering Skills→
telum-aitelum-ai
2

project-import

Create a Speck project structure with a skeleton project.md file.

Official
Basic
komlukkomluk
1

github-actions-template

Generate and configure GitHub Actions CI/CD pipelines with SonarQube quality gates.

Community
Advanced
jmanuelrosajmanuelrosa
2

apollo-client

Integrate Apollo Client for GraphQL data fetching across React, Next.js, React Router, and TanStack Start.

Community
Advanced
IvanWeissVanDerPolIvanWeissVanDerPol
1

javascript-typescript

Apply ES6+, TypeScript, and React best practices to JavaScript code.

Community
Intermediate