Initial commit

skills/nuxt/references/nuxt-modules.md

@@ -0,0 +1,161 @@
+# Nuxt Modules Reference
+
+Check package.json for installed modules before suggesting module-specific features.
+
+## Image Optimization (@nuxt/image)
+
+**Check:** `@nuxt/image` in package.json
+
+Provides optimized image components with automatic format conversion and responsive images. For comprehensive guidance, see `references/nuxt-image.md`.
+
+## Content Management (@nuxt/content)
+
+**Check:** `@nuxt/content` in package.json
+
+File-based CMS for Nuxt with markdown, YAML, and JSON support. For comprehensive guidance including queries, components, and content navigation, see `references/nuxt-content.md`.
+
+## Icon Management (@nuxt/icon)
+
+**Check:** `@nuxt/icon` in package.json
+
+### Icon Component
+
+```vue
+<Icon name="heroicons:home" size="24" />
+<Icon name="mdi:github" class="text-2xl" />
+```
+
+## UI Components (@nuxt/ui)
+
+**Check:** `@nuxt/ui` in package.json
+
+Provides pre-built components with Tailwind CSS. For comprehensive Nuxt UI guidance including setup, v3/v4 differences, and migration, see `references/nuxt-ui.md`.
+
+## SEO (@nuxtjs/seo)
+
+**Check:** `@nuxtjs/seo` in package.json
+
+Provides SEO utilities including sitemap, robots.txt, and OG images.
+
+```typescript
+// Auto-generates sitemap
+// Configure in nuxt.config.ts
+export default defineNuxtConfig({
+  site: {
+    url: "https://example.com",
+    name: "My Site",
+  },
+})
+```
+
+## Internationalization (@nuxtjs/i18n)
+
+**Check:** `@nuxtjs/i18n` in package.json
+
+Provides internationalization with auto-imports, locale routing, and SEO support. For comprehensive guidance including setup, translations, and routing, see `references/nuxt-i18n.md`.
+
+## Tailwind CSS (@nuxtjs/tailwindcss)
+
+**Check:** `@nuxtjs/tailwindcss` in package.json
+
+Auto-configured Tailwind CSS integration. For comprehensive guidance including setup, configuration, dark mode, and best practices, see `references/tailwind.md`.
+
+## Color Mode (@nuxtjs/color-mode)
+
+**Check:** `@nuxtjs/color-mode` in package.json
+
+### Toggle Dark Mode
+
+```vue
+<script setup lang="ts">
+const colorMode = useColorMode()
+
+function toggleDark() {
+  colorMode.preference = colorMode.value === "dark" ? "light" : "dark"
+}
+</script>
+
+<template>
+  <button @click="toggleDark">
+    {{ colorMode.value === "dark" ? "🌞" : "🌙" }}
+  </button>
+</template>
+```
+
+## ESLint (@nuxt/eslint)
+
+**Check:** `@nuxt/eslint` in package.json
+
+Provides auto-configured ESLint with Nuxt-specific rules. Configuration in `eslint.config.mjs`:
+
+```javascript
+import { createConfigForNuxt } from "@nuxt/eslint-config/flat"
+
+export default createConfigForNuxt({
+  features: {
+    stylistic: true,
+  },
+})
+```
+
+## Security (nuxt-security)
+
+**Check:** `nuxt-security` in package.json
+
+### Security Headers
+
+Automatically applies security headers. Configure in nuxt.config.ts:
+
+```typescript
+export default defineNuxtConfig({
+  security: {
+    headers: {
+      contentSecurityPolicy: {
+        "img-src": ["'self'", "https:", "data:"],
+      },
+    },
+    rateLimiter: {
+      tokensPerInterval: 150,
+      interval: "hour",
+    },
+  },
+})
+```
+
+## Fonts (@nuxt/fonts)
+
+**Check:** `@nuxt/fonts` in package.json
+
+Automatically optimizes and loads fonts:
+
+```typescript
+// nuxt.config.ts
+export default defineNuxtConfig({
+  fonts: {
+    families: [{ name: "Inter", provider: "google" }],
+  },
+})
+```
+
+```vue
+<style>
+.text {
+  font-family: "Inter", sans-serif;
+}
+</style>
+```
+
+## Scripts (@nuxt/scripts)
+
+**Check:** `@nuxt/scripts` in package.json
+
+Load third-party scripts efficiently:
+
+```vue
+<script setup lang="ts">
+useScript({
+  src: "https://www.googletagmanager.com/gtag/js",
+  async: true,
+})
+</script>
+```