steveoon fast-rag .cursorrules file for TypeScript

You are an expert in TypeScript, React, Node.js, Next.js App Router, Zustand, Shadcn UI, Radix UI, Tailwind, Drizzle ORM, and Vercel AI SDK.
Also you are very familiar with Deploy Next.js APP to Vercel platform or Use Docker to deploy to AWS or Google Cloud.

Code Style and Structure

- Write concise, technical TypeScript code following book Effective TypesScript's instruction and principles.
- Prefer iteration and modularization over code duplication.
- Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
- Structure files: exported component, subcomponents, helpers, static content.

Book Effective TypesScript principles:

1. **Explain how TypeScript relates to JavaScript and why understanding JavaScript is crucial for mastering TypeScript.**
2. **Give reasons to avoid using the `any` type in TypeScript and provide safer alternatives.**
3. **Explain why type annotations (e.g., `:number`) are preferred over type assertions (e.g., `as number`) in TypeScript.**
4. **Describe the importance of using more specific types in TypeScript, and provide examples of using literal types (e.g., `'left' | 'right'` instead of `string`).**
5. **Explain the concept of types as sets in TypeScript, and discuss how union (`|`) and intersection (`&`) types work.**
6. **Why should we avoid creating overly complex union types, and what are the consequences of doing so in terms of readability and flexibility?**
7. **What are extra property checks in TypeScript object types, and how can these checks be bypassed when necessary?**
8. **Discuss the difference between `any` and `unknown` in TypeScript, and explain why `unknown` is the safer choice when working with uncertain types.**
9. **Provide reasons to prefer using interfaces over type aliases for object types in TypeScript, and explain when type aliases might be a better choice.**
10. **Explain the benefits of using `readonly` in TypeScript to prevent accidental modification of data, and show how to apply it to objects or arrays.**
11. **Describe how to use utility types like `Partial`, `Readonly`, and `Pick` in TypeScript, and explain how they help avoid redundant code.**
12. **Why should you prefer interface extension (`extends`) over repeating fields in TypeScript, and how does this reduce redundancy?**
13. **Demonstrate how `keyof` and mapped types can be used to dynamically create types, reducing the need for repetitive type definitions.**
14. **Discuss the potential pitfalls of using enums (`enum`) in TypeScript, and suggest alternative approaches such as using union types or constants.**
15. **Explain the purpose of the `strictNullChecks` option in TypeScript and how enabling it leads to better handling of `null` and `undefined`.**
16. **How can you distinguish between synchronous return types (e.g., `T`) and asynchronous return types (e.g., `Promise<T>`), and why is it important to make this distinction in TypeScript?**

Naming Conventions

- Use lowercase with dashes for directories (e.g., components/auth-wizard).
- Favor named exports for components.

React Best Practices

- Use functional components with prop-types for type checking.
- Use the "function" keyword for component definitions.
- Implement hooks correctly (useState, useEffect, useContext, useReducer, useMemo, useCallback).
- Follow the Rules of Hooks (only call hooks at the top level, only call hooks from React functions).
- Create custom hooks to extract reusable component logic.
- Use React.memo() for component memoization when appropriate.
- Implement useCallback for memoizing functions passed as props.
- Use useMemo for expensive computations.
- Avoid inline function definitions in render to prevent unnecessary re-renders.
- Prefer composition over inheritance.
- Use children prop and render props pattern for flexible, reusable components.
- Implement React.lazy() and Suspense for code splitting.
- Use refs sparingly and mainly for DOM access.
- Prefer controlled components over uncontrolled components.
- Implement error boundaries to catch and handle errors gracefully.
- Use cleanup functions in useEffect to prevent memory leaks.
- Use short-circuit evaluation and ternary operators for conditional rendering.

State Management

- Use Zustand for global state management.
- Lift state up when needed to share state between components.
- Use context for intermediate state sharing when prop drilling becomes cumbersome.

UI and Styling

- Use Shadcn UI and Radix UI for component foundations.
- Implement responsive design with Tailwind CSS; use a mobile-first approach.
- Use Tailwind for utility classes and rapid prototyping.

Performance Optimization(Next.js Features)

- Minimize 'use client', 'useEffect', and 'useState'; favor React Server Components (RSC).
- Wrap client components in Suspense with fallback.
- Use dynamic loading for non-critical components.
- Optimize images: use WebP format, include size data, implement lazy loading.
- Implement route-based code splitting in Next.js.

Forms and Validation

- Use controlled components for form inputs.
- Implement form validation (client-side and server-side).
- Consider using libraries like react-hook-form for complex forms.
- Use Zod or Joi for schema validation.

Error Handling and Validation

- Prioritize error handling and edge cases.
- Handle errors and edge cases at the beginning of functions.
- Use early returns for error conditions to avoid deeply nested if statements.
- Place the happy path last in the function for improved readability.
- Avoid unnecessary else statements; use if-return pattern instead.
- Use guard clauses to handle preconditions and invalid states early.
- Implement proper error logging and user-friendly error messages.
- Model expected errors as return values in Server Actions.

Accessibility (a11y)

- Use semantic HTML elements.
- Implement proper ARIA attributes.
- Ensure keyboard navigation support.

Testing(when needed)

- Write unit tests for components using Jest and React Testing Library.
- Implement integration tests for critical user flows.
- Use snapshot testing judiciously.

Security

- Sanitize user inputs to prevent XSS attacks.
- Use dangerouslySetInnerHTML sparingly and only with sanitized content.

Internationalization (i18n)

- Use libraries like next-intl for internationalization.

Key Conventions

- Use 'nuqs' for URL search parameter state management.
- Optimize Web Vitals (LCP, CLS, FID).
- Limit 'use client':
  - Favor server components and Next.js SSR.
  - Use only for Web API access in small components.
  - Avoid for data fetching or state management.

Follow Next.js docs for Data Fetching, Rendering, and Routing.