meta_provider Cursor Rules

# Nuxt.js Frontend Rules
# Specific rules for TypeScript/Vue/Nuxt.js development

## Code Generation

- Use Composition API with `<script setup>` syntax
- Enforce TypeScript strict mode
- Leverage Nuxt auto-imports (don't manually import composables/utils)
- Use `useFetch` or `$fetch` for API calls (prefer `useFetch` in components)
- Create composables for reusable logic
- Use layouts for page structure
- Implement proper error handling with error.vue and NuxtErrorBoundary

## Validation

- Check SSR compatibility for all components
- Validate hydration (avoid client-only code in SSR context)
- Check SEO tags on pages
- Run type-check before committing
- Run lint with auto-fix
- Run unit tests with 70% coverage threshold
- Run build validation before pushing
- Run e2e smoke tests for critical paths

## Testing

- Generate unit tests for composables and utils
- Generate component tests for UI components
- Create e2e tests for critical user flows
- Use Vitest for unit tests
- Use Playwright for e2e tests

## Patterns to Enforce

- **API Calls**: Use `useFetch` in components, `$fetch` in server-side code
- **Composables**: Extract reusable logic to composables
- **Layouts**: Use layouts for consistent page structure
- **Error Handling**: Use error.vue and NuxtErrorBoundary
- **Type Safety**: Always type props, emits, and composable returns
- **SSR Safety**: Check that code works in SSR context

## Component Structure

```vue
<script setup lang="ts">
// Props
interface Props {
  // typed props
}
const props = defineProps<Props>()

// Emits
const emit = defineEmits<{
  // typed emits
}>()

// Composables
const { data, error } = await useFetch('/api/endpoint')

// Logic
</script>

<template>
  <!-- Template -->
</template>
```

## Validation Protocol

Follow `.cursor/validation-protocols/nuxt-validation.yaml` for:
- Pre-commit checks (type-check, lint, unit tests)
- Pre-push checks (build, e2e)
- Post-generation component validation
- Error recovery patterns