frontend-dev-guidelines_skill

Overview

This skill provides pragmatic frontend development guidelines for React + TypeScript apps, focusing on modern patterns like Suspense, lazy loading, and useSuspenseQuery. It covers feature-based file organization, styling options, routing, performance techniques, and TypeScript best practices to produce maintainable, high-performance code.

How this skill works

The guidelines prescribe a feature-first project structure that groups components, hooks, and api logic per feature. It recommends Suspense-enabled data fetching, route and component lazy loading, and a mix of Tailwind, CSS Modules, or CSS-in-JS for styling. Performance sections show memoization, code splitting, and virtual lists while state management covers local state, TanStack Query for server state, and lightweight global state (Zustand or Context).

When to use it

• When starting a new React + TypeScript feature or application.
• When organizing code into scalable feature directories.
• When implementing data fetching with Suspense or TanStack Query.
• When optimizing performance for large lists or heavy components.
• When defining consistent styling patterns across the app.

Best practices

• Use a features/ directory to colocate components, hooks, and api per feature.
• Prefer functional components with typed Props and default values.
• Use Suspense + useSuspenseQuery for declarative loading states and lazy routes for code splitting.
• Use TanStack Query for server state and invalidate queries on successful mutations.
• Apply memoization (useMemo, useCallback, memo) only where it reduces re-renders or expensive recomputations.
• Favor Tailwind for utility-driven styles, fallback to CSS Modules or Emotion for complex scoping or theming.

Example use cases

• Build a dashboard with route-based lazy loading and Suspense fallbacks for each page.
• Create a feature folder for 'auth' with local components, hooks, and api wrappers.
• Use TanStack Query to fetch user data and useMutation to update and invalidate the users list.
• Render thousands of rows with a virtualized list using @tanstack/react-virtual.
• Write tested components and hooks with React Testing Library and renderHook for hooks.