frontend-dev-guidelines_skill

Overview

This skill provides practical frontend development guidelines for React + TypeScript applications focused on modern patterns like Suspense-based data fetching, lazy loading, and feature-based file organization. It prescribes conventions for routing (TanStack Router), styling (MUI v7 with sx), performance patterns, and TypeScript standards to keep code consistent and performant. Use it as a checklist and pattern reference when adding components, pages, or features.

How this skill works

The guidelines describe concrete patterns and files to create: feature directories with api/components/hooks/helpers/types, Suspense boundaries with useSuspenseQuery, and lazy-loaded routes and components. It specifies import aliases, MUI v7 styling rules (inline vs separate styles), TanStack Router conventions, and performance hooks (useMemo, useCallback, React.memo). Follow the checklists to scaffold components, features, and routes that align with the project’s architecture.

When to use it

• Creating new components or pages
• Building a new feature or domain module
• Fetching data with TanStack Query using Suspense
• Setting up routing with TanStack Router and lazy-loaded routes
• Styling components with MUI v7 and deciding inline vs separate styles
• Optimizing performance or enforcing TypeScript standards

Best practices

• Organize code by feature: features/{name}/api,components,hooks,helpers,types
• Use React.lazy + SuspenseLoader for heavy components and routes to prevent layout shift
• Prefer useSuspenseQuery for data fetching inside Suspense boundaries; avoid early-return spinners
• Keep styles inline if under ~100 lines; move to .styles.ts if larger and use SxProps<Theme>
• Use strict TypeScript: no any, explicit returns, and type-only imports
• Optimize with useMemo/useCallback/React.memo and debounce user input when needed

Example use cases

• Add a new feature: scaffold features/my-feature with api, components, hooks, types and lazy-load its route
• Create a data-driven page: useSuspenseQuery inside a SuspenseLoader and handle errors via useMuiSnackbar
• Refactor a large component: extract styles to .styles.ts and wrap heavy subcomponents with React.lazy
• Implement routing: create routes/my-route/index.tsx using createFileRoute and lazy-loaded component
• Improve list performance: memoize expensive filters, debounce search, and cache queries with TanStack Query