skills.rest
Khaledaun
KhaledaunCOMMUNITY
Explore all skills by this author →
GitHub

frontend-dev-guidelines

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

Updated Sep 6, 2025
Search Tags:#typescript#best practices#performance#frontend#react#guidelines#mui
One-click install
npx skills add https://github.com/Khaledaun/Yalla-london --skill frontend-dev-guidelines-khaledaun
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/Khaledaun/Yalla-london/tree/main/.claude/skills/frontend-dev-guidelines
Command: npx skills add https://github.com/Khaledaun/Yalla-london --skill frontend-dev-guidelines-khaledaun

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive set of guidelines and best practices for developing modern React/TypeScript applications, ensuring consistency, performance, and maintainability.

Core Features & Use Cases

  • Component Development: Guidance on creating reusable and performant React components.
  • Data Fetching: Best practices for using useSuspenseQuery and structuring API services.
  • File Organization: Standardized directory structures for features and components.
  • Routing: Implementing routing with TanStack Router and lazy loading.
  • Styling: Guidelines for styling with MUI v7, including inline vs. separate styles.
  • Performance Optimization: Techniques like useMemo, useCallback, and lazy loading.
  • TypeScript Best Practices: Ensuring type safety and code quality.
  • Use Case: When starting a new feature, follow the "New Feature Checklist" to ensure proper setup of API services, components, routing, and types, adhering to the established project structure.

Quick Start

When creating a new component, follow the "New Component Checklist" to ensure all modern React patterns are applied.

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 data fetching in React using Suspense?▼

Data fetching with React Suspense involves using `useSuspenseQuery` and structuring API services to ensure type safety. This approach standardizes asynchronous data loading to maintain application performance and consistency across feature development.

How do I structure files and directories for a new React feature?▼

Standardized file organization for React features involves following a specific directory structure for components and API services. Adhering to a new feature checklist ensures proper setup of types, routing, and project standards for maintainability.

How should I apply styling with MUI v7 in a TypeScript project?▼

Styling with MUI v7 involves applying specific guidelines for inline versus separate styles within React components. This ensures visual consistency while maintaining TypeScript type safety and component performance.

Does TanStack Router support lazy loading and performance optimization?▼

TanStack Router supports lazy loading to optimize routing performance. Combined with techniques like `useMemo` and `useCallback`, it ensures React components remain performant and maintainable during complex feature development.

When should I use useMemo and useCallback for React performance optimization?▼

React performance optimization techniques like `useMemo` and `useCallback` should be used to prevent unnecessary re-renders in complex components. Following established development guidelines ensures these patterns are applied correctly for maintainability.

Related Skills

Explore More Software Engineering Skills→
devrelaicomdevrelaicom
37

compact-core:compact-init-project

Scaffold a Midnight Compact project and compile contract artifacts.

Official
Intermediate
zenbuappszenbuapps

aibdd.auto.ts.it.starter

Initialize a React integration test scaffold with Vitest, React Testing Library, and MSW.

Official
Intermediate
chef0111chef0111
1

frontend-development

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

Community
Advanced
HsnSaboorHsnSaboor

frontend-development

Provide frontend development guidelines for React, Vue 3, Svelte 5, and Angular.

Community
Advanced