frontend-dev-guidelines

Provide React/TypeScript frontend development guidelines for performance and maintainability.

1|Updated Feb 2, 2026

Search Tags:#React #TypeScript #performance optimization #code organization #frontend development

Ready to run

npx skills add https://github.com/samChang72/custom-skills --skill frontend-dev-guidelines-samchang72

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/samChang72/custom-skills/tree/main/gemini/skills/frontend-dev-guidelines
Command: npx skills add https://github.com/samChang72/custom-skills --skill frontend-dev-guidelines-samchang72

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill unit provides comprehensive guidelines and best practices for frontend development with React and TypeScript, focusing on modern patterns, performance optimization, and maintainability.

Core Features & Use Cases

Modern Patterns: Implements Suspense, lazy loading, useSuspenseQuery, proper file organization, MUI v7 styling, TanStack Router, and TypeScript best practices.
Performance Optimization: Offers techniques for optimizing React components and applications, including memoization, debouncing, and preventing layout shifts.
TypeScript Best Practices: Emphasizes type safety, strict mode, and type imports for clarity and maintainability.
Use Case: Suitable for developers who want to create modern, performant, and maintainable React/TypeScript applications.

Quick Start

Run the following command to install the skill and explore its features:

cp -r gemini/skills/frontend-dev-guidelines path/to/your/project/.gemini/skills/

Frequently Asked Questions about frontend-dev-guidelines

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

FAQPage Schema

How do I optimize React performance using lazy loading and Suspense?▼

TypeScript strict mode enforces type safety using explicit type imports and strict compiler configurations. This mechanism prevents runtime type errors and clarifies component prop interfaces for maintainable React codebases.

What is the best way to organize files in a scalable React and TypeScript application?▼

Proper file organization structures React and TypeScript projects by grouping modules by feature and domain. This pattern ensures scalable and maintainable codebases by keeping related components, hooks, and types co-located.

How do I prevent layout shifts when implementing lazy loading in React?▼

Preventing layout shifts during lazy loading requires defining explicit dimensions and fallback UI within Suspense boundaries. This technique reserves visual space before content renders, avoiding cumulative layout shift penalties.

Can I use TanStack Router with modern React patterns like useSuspenseQuery?▼

TanStack Router integrates with modern React patterns by supporting useSuspenseQuery for data fetching. This combination enables type-safe routing and asynchronous data loading directly within Suspense boundaries.