frontend-dev-guidelines

What problem does it solve?

This Skill provides a comprehensive guide to modern React development, solving the problem of inconsistent codebases, slow performance, and complex state management. It ensures developers follow best practices for building scalable, maintainable, and high-performing frontend applications.

Core Features & Use Cases

• Suspense-Based Data Fetching: Guides on using useSuspenseQuery with Suspense boundaries to eliminate isLoading checks and provide a smoother user experience.
• Modern Component Patterns: Covers lazy loading, React.FC<Props>, useCallback, useMemo, and proper component organization to optimize rendering and bundle size.
• Performance Optimization: Best practices for preventing unnecessary re-renders, debouncing, and memory leak prevention.
• Use Case: When you're tasked with creating a new feature in a React/TypeScript application, use this Skill to ensure every component, data fetch, and styling choice adheres to the latest patterns, from file organization to error handling, guaranteeing a consistent and performant implementation.

Quick Start

Generate a new React component following the modern component template, including useSuspenseQuery for data fetching and useCallback for event handlers, and explain how to wrap it in a SuspenseLoader.