skills.rest
samChang72
samChang72COMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/samChang72/custom-skills --skill frontend-dev-guidelines-samchang72
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
linnefromicelinnefromice

frontend-patterns

Standardize React/Next.js frontend architecture with reusable TypeScript patterns.

Community
Intermediate
koralliskorallis
90

performance-optimization

Analyze performance metrics and implement code splitting, lazy loading, and caching strategies.

Community
Advanced
miethemiethe

frontend-dev-guidelines

Codify React/TypeScript guidelines for components, data fetching, routing, and styling.

Community
Intermediate
stratagastrataga

vercel-react-best-practices

Identify performance patterns and optimization opportunities in React/Next.js projects.

Community
Advanced