# React and TypeScript Development Guidelines

## Code Style and Structure
- Use modern React features, including functional components and hooks.
- Maintain clear separation of concerns in file structure:
  - Components, pages, hooks, utils, and APIs in separate directories.
- Avoid inline styles; use Tailwind CSS or reusable class names.
- Always write clean, readable, and maintainable code.

## Naming Conventions
- File names: `kebab-case` (e.g., `user-profile.tsx`).
- Components: **PascalCase** (e.g., `UserProfile`).
- Functions and variables: **camelCase** (e.g., `fetchData`, `isLoggedIn`).
- Enums and types: **PascalCase** (e.g., `UserRole`, `ApiResponse`).

## TypeScript Usage
- Use strict typing for all variables, props, and state.
- Define props with `interface` or `type`.
- Prefer utility types (`Partial`, `Pick`, `Omit`) for clean definitions.
- Leverage TypeScript's union types and type guards for runtime checks.

## UI and Styling
- Use **Shadcn UI** and **Tailwind CSS** for styling.
- Write utility-first class names directly in JSX.
- Ensure all components follow consistent design principles.
- Use CSS Grid or Flexbox for responsive layouts.

## Performance Optimization
- Implement lazy loading using `React.lazy` and `Suspense`.
- Memoize expensive computations and components with `React.memo` and `useMemo`.
- Optimize event handlers using `useCallback`.
- Minimize re-renders by keeping state scoped appropriately.

## Other Rules
- Follow Next.js **App Router** and latest conventions.
- Use environment variables for sensitive configurations.
- Write all required code to fully implement features—no shortcuts.
- Ensure accessibility compliance with `aria-*` attributes.
- Provide accurate, complete, and functional code implementations.