init from /create-docs skill

Author: devdumpling

.agents/skills/create-docs/SKILL.md

@@ -0,0 +1,222 @@
+# MDC Components Reference
+
+Docus uses Nuxt UI components with MDC syntax.
+
+**CRITICAL: Always use the `u-` prefix for Nuxt UI components in MDC:**
+
+```markdown
+::u-page-hero      ✅ Correct (resolves to UPageHero)
+::page-hero        ❌ Wrong (fails to resolve)
+```
+
+---
+
+## Documentation Sources
+
+**Components:**
+- Component list: https://ui.nuxt.com/llms.txt
+- Raw docs: `https://ui.nuxt.com/raw/docs/components/[component].md`
+
+**Typography/Prose:**
+- Introduction: https://ui.nuxt.com/raw/docs/typography.md
+- Headers and text: https://ui.nuxt.com/raw/docs/typography/headers-and-text.md
+- Lists and tables: https://ui.nuxt.com/raw/docs/typography/lists-and-tables.md
+- Code blocks: https://ui.nuxt.com/raw/docs/typography/code-blocks.md
+- Callouts: https://ui.nuxt.com/raw/docs/typography/callouts.md
+- Accordion: https://ui.nuxt.com/raw/docs/typography/accordion.md
+- Tabs: https://ui.nuxt.com/raw/docs/typography/tabs.md
+
+---
+
+## Page Layout Components
+
+Most used components for documentation sites:
+
+| Component | Raw Docs | Use For |
+|-----------|----------|---------|
+| `u-page-hero` | [page-hero.md](https://ui.nuxt.com/raw/docs/components/page-hero.md) | Landing page hero |
+| `u-page-section` | [page-section.md](https://ui.nuxt.com/raw/docs/components/page-section.md) | Content sections |
+| `u-page-grid` | [page-grid.md](https://ui.nuxt.com/raw/docs/components/page-grid.md) | Responsive grid layout |
+| `u-page-card` | [page-card.md](https://ui.nuxt.com/raw/docs/components/page-card.md) | Rich content cards |
+| `u-page-feature` | [page-feature.md](https://ui.nuxt.com/raw/docs/components/page-feature.md) | Feature showcase |
+| `u-page-cta` | [page-cta.md](https://ui.nuxt.com/raw/docs/components/page-cta.md) | Call to action |
+| `u-page-header` | [page-header.md](https://ui.nuxt.com/raw/docs/components/page-header.md) | Page headers |
+
+---
+
+## Quick Syntax Examples
+
+### Hero with Buttons
+
+```markdown
+::u-page-hero
+#title
+Project Name
+
+#description
+Short description
+
+#headline
+  :::u-button{size="sm" to="/changelog" variant="outline"}
+  v1.0.0 →
+  :::
+
+#links
+  :::u-button{color="neutral" size="xl" to="/getting-started" trailing-icon="i-lucide-arrow-right"}
+  Get Started
+  :::
+
+  :::u-button{color="neutral" size="xl" to="https://github.com/..." target="_blank" variant="outline" icon="i-simple-icons-github"}
+  GitHub
+  :::
+::
+```
+
+### Grid with Cards
+
+```markdown
+::u-page-section
+  :::u-page-grid
+    ::::u-page-card{spotlight class="col-span-2 lg:col-span-1" to="/feature"}
+    #title
+    Feature Title
+
+    #description
+    Feature description
+    ::::
+
+    ::::u-page-card{spotlight class="col-span-2"}
+      :::::u-color-mode-image{alt="Screenshot" class="w-full rounded-lg" dark="/images/dark.png" light="/images/light.png"}
+      :::::
+
+    #title
+    Visual Feature
+
+    #description
+    With light/dark mode images
+    ::::
+  :::
+::
+```
+
+### Card with Code Block
+
+```markdown
+::::u-page-card{spotlight class="col-span-2 md:col-span-1"}
+  :::::div{.bg-elevated.rounded-lg.p-3}
+  ```ts [config.ts]
+  export default {
+    option: 'value'
+  }
+  ```
+  :::::
+
+#title
+Configuration
+
+#description
+Easy to configure
+::::
+```
+
+---
+
+## Content Components
+
+| Component | Raw Docs | Use For |
+|-----------|----------|---------|
+| `code-group` | N/A (Nuxt Content) | Multi-tab code blocks |
+| `steps` | N/A (Nuxt Content) | Step-by-step guides |
+| `tabs` | [tabs.md](https://ui.nuxt.com/raw/docs/components/tabs.md) | Tabbed content |
+| `accordion` | [accordion.md](https://ui.nuxt.com/raw/docs/components/accordion.md) | Collapsible sections |
+
+### Code Group (Nuxt Content)
+
+```markdown
+::code-group
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({})
+```
+
+```ts [app.config.ts]
+export default defineAppConfig({})
+```
+::
+```
+
+### Steps (Nuxt Content)
+
+```markdown
+::steps
+### Install
+
+Run the install command.
+
+### Configure
+
+Add your configuration.
+
+### Use
+
+Start using the feature.
+::
+```
+
+---
+
+## Callout Components
+
+| Component | Use For |
+|-----------|---------|
+| `::note` | Additional information |
+| `::tip` | Helpful suggestions |
+| `::warning` | Important cautions |
+| `::caution` | Critical warnings |
+
+```markdown
+::note{title="Custom Title"}
+Additional context here.
+::
+
+::tip
+Pro tip content.
+::
+
+::warning
+Be careful with this.
+::
+
+::caution
+This action cannot be undone.
+::
+```
+
+---
+
+## Images
+
+### Color Mode Image
+
+```markdown
+:u-color-mode-image{alt="Feature" dark="/images/dark.png" light="/images/light.png" class="rounded-lg" width="859" height="400"}
+```
+
+---
+
+## Grid Classes Reference
+
+| Class | Usage |
+|-------|-------|
+| `col-span-2` | Full width |
+| `col-span-2 lg:col-span-1` | Full mobile, half desktop |
+| `col-span-2 md:col-span-1` | Full mobile, half tablet+ |
+
+---
+
+## Full Documentation Reference
+
+- **All components**: https://ui.nuxt.com/llms.txt
+- **Full docs (for LLMs)**: https://ui.nuxt.com/llms-full.txt
+- **Typography introduction**: https://ui.nuxt.com/raw/docs/typography.md
+- **Content integration**: https://ui.nuxt.com/raw/docs/getting-started/integrations/content.md
+- **Theme customization**: https://ui.nuxt.com/raw/docs/getting-started/theme/components.md