frontend-dev-guidelines

SKILL.md

Comprehensive guide for modern React development, emphasizing Suspense-based data fetching, lazy loading, proper file organization, and performance optimization.

| @/ | 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' |

| Create a component | component-patterns.md | | Fetch data | data-fetching.md | | Organize files/folders | file-organization.md | | Style components | styling-guide.md | | Set up routing | routing-guide.md | | Handle loading/errors | loading-and-error-states.md | | Optimize performance | performance.md | | TypeScript types | typescript-standards.md |

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. Source: jackspace/claudeskillz.

View raw