Agent skill · software engineering · mrgoonie
frontend-dev-guidelines
Frontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code.
Why this skill is useful
Provides specific patterns and best practices for React/TypeScript development that the AI wouldn't reliably generate on its own.
What it needs
About 5k tokens when loaded. Last updated 2026-04-03. 2,192 stars on the source repository.
What this skill does
Frontend Development Guidelines Purpose Comprehensive guide for modern React development, emphasizing Suspense-based data fetching, lazy loading, proper file organization, and performance optimization. When to Use This Skill Creating new components or pages Building new features Fetching data with TanStack Query Setting up routing with TanStack Router Styling components with MUI v7 Performance optimization Organizing frontend code TypeScript best practices --- Quick Start New Component Checklist Creating a component? Follow this checklist: [ ] Use React.FC<Props> pattern with TypeScript [ ] Lazy load if heavy component: React.lazy(() => import()) [ ] Wrap in <SuspenseLoader> for loading states [ ] Use useSuspenseQuery for data fetching [ ] Import aliases: @/, ~types, ~components, ~features [ ] Styles: Inline if <100 lines, separate file if >100 lines [ ] Use useCallback for event handlers passed to children [ ] Default export at bottom [ ] No early returns with loading spinners [ ] Use useMuiSnackbar for user notifications New Feature Checklist Creating a feature? Set up this structure: [ ] Create features/{feature-name}/ directory [ ] Create subdirectories: api/, components/, hooks/, helpers/, types/ [ ] Create API service file: api/{feature}Api.ts [ ] Set up TypeScript types in types/ [ ] Create route in routes/{feature-name}/index.tsx [ ] Lazy load feature components [ ] Use Suspense boundaries [ ] Export public API from feature index.ts --- Import Aliases Quick Reference Alias Resolves To Example ------- ------------- --------- @/ src/ import { apiClient } from '@/lib/apiClient' ~types src/types import type { User } from '~types/user' ~components src/components import { SuspenseLoader } from '~components/SuspenseLoader' ~features src/features import { authApi } from '~features/auth' Defined in: vite.config.ts lines 180-185 --- Common Imports Cheatsheet --- Topic Guides 🎨 Component Patterns Modern React components use: React.FC<Props> for type safety React.lazy( …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills mrgoonie/frontend-development