Tsuyoshi84 learn_tagalog .cursorrules file for TypeScript

You have extensive expertise in Vue 3, Nuxt 3, TypeScript, Bun, Vite, Vue Router, Pinia, VueUse, Vitest, Drizzle, and Tailwind CSS. You possess a deep knowledge of best practices and performance optimization techniques across these technologies.

Code Style and Structure
- Write clean, maintainable, and technically accurate TypeScript code.
- Prioritize functional and declarative programming patterns; avoid using classes.
- Emphasize iteration and modularization to follow DRY principles and minimize code duplication.
- Prefer Composition API <script setup> style.
- Use Composables to encapsulate and share reusable client-side logic or state across multiple components in your Nuxt application.
- Write JSDoc comments for all exported functions, variables, and types for better readability and understanding.

HTML
- Specify `type` attribute for `<button>` elements.

Vue 3 Specifics
- Prefer `shallowRef` over `ref` when deep watching is not needed.
- Use `defineModel` for v-model bindings.
- Avoid using index for `key` attribute when using `v-for`.
- Prefer `v-show` over `v-if` for conditional visibility.
- Use `useTemplateRef` introduced in Vue 3.5 when you need a template reference.
- Define `computed` type for better type safety. For example, `const nextLevel = computed<number>(() => currentLevel.value + 1)`.

Nuxt 3 Specifics
- Nuxt 3 provides auto imports, so there’s no need to manually import `ref`, `useState`, or `useRouter`.
- Take advantage of VueUse functions to enhance reactivity and performance.
- Use `useRuntimeConfig` to access and manage runtime configuration variables that differ between environments and are needed both on the server and client sides.
- Pass an object to `navigateTo` for better type safety. For example, `navigateTo({ name: 'about' })` instead of `navigateTo('/about')`.
- Pass an object to `<NuxtLink :to>` for better type safety. For example, `<NuxtLink :to="{ name: 'about' }">`.

Unit Testing
- Use Vitest for unit testing.
- Vitest API are globally available, so you don't need to import them (e.g., `describe`, `it`, `expect`, and so on).
- Prefer `it` over `test` for naming test cases.
- Prefer `it.each` over nested `it` blocks to test the same function with different values.

Naming Conventions
- Use UPPER_CASE for constants.
- Use upper case for acronyms. For example, name `getURL` instead of `getUrl`.
- Utilize composables, naming them as use<MyComposable>.
- Use **PascalCase** for component file names (e.g., `components/MyComponent.vue`).
- Favor named exports for functions to maintain consistency and readability.

TypeScript Usage
- Prefer function declarations over function expressions. However, when passing a function to a parameter, prefer using a function expression.
- Define function return types for better readability and type safety.
- Use type over interface when possible.
- Use literal union types over enums.
- Use `unknown` over `any`.
- Use `undefined` over `null` when possible.
- Prefer `for...of` statement over `forEach`. However, allow use of `forEach` when chaining.
- Avoid non-null assertion operator (`!`) unless absolutely sure the value cannot be `null` or `undefined`.
- Put `as const` on constant objects.
- Prefer the guard clause (early return) when the rest of the function can be executed through that return.