diff --git a/.gitignore b/.gitignore index b03003bb56..2e18ee4264 100644 --- a/.gitignore +++ b/.gitignore @@ -36,3 +36,6 @@ playgrounds/repl/auto-imports.d.ts playgrounds/repl/components.d.ts playgrounds/repl/public/nuxt-ui.* playgrounds/repl/dist/ + +# VSC +.history diff --git a/skills/nuxt-ui/SKILL.md b/skills/nuxt-ui/SKILL.md index 44525fe827..037e494658 100644 --- a/skills/nuxt-ui/SKILL.md +++ b/skills/nuxt-ui/SKILL.md @@ -83,6 +83,7 @@ Based on the task, load the relevant reference files **before writing any code** | Add a modal, slideover, or drawer | conventions, component-selection, overlays | | Build site navigation | conventions, component-selection, navigation | | Build a documentation site | conventions, docs | +| Render markdown | component-selection, components, docs | | Add a rich text editor | conventions, editor | | General UI work | conventions, component-selection | diff --git a/skills/nuxt-ui/references/components.md b/skills/nuxt-ui/references/components.md index 0eea10321a..4d34ef4a33 100644 --- a/skills/nuxt-ui/references/components.md +++ b/skills/nuxt-ui/references/components.md @@ -153,6 +153,51 @@ Quick-reference index of all 125+ components. For full API docs (props, slots, e | `UPricingPlan` | Individual pricing plan card | | `UPricingTable` | Feature comparison table | +## Prose — Base Typography + +Standard Markdown elements auto-resolved by Comark/Content/MDC. No `::` prefix needed — they map directly from markdown syntax (`# Heading` → `ProseH1`, `**bold**` → `ProseStrong`, etc.). Themed via `appConfig.ui.prose.`. + +| Component | Renders | Notable | +|---|---|---| +| `H1` `H2` `H3` `H4` | Headings | H1–H3 get anchor links + TOC entries | +| `P` | Paragraph | | +| `A` | Link | External links get target/rel handling | +| `Strong` | Bold | | +| `Em` | Italic | | +| `Blockquote` | Blockquote | | +| `Hr` | Horizontal rule | | +| `Ul` `Ol` `Li` | Lists | Supports nesting and mixed lists | +| `Table` `Thead` `Tbody` `Tr` `Th` `Td` | Tables | | +| `Img` | Image | Zoom on click (`:zoom="false"` to disable), `@nuxt/image` support | +| `Pre` | Code block | Copy button, filename + icon, line highlighting (`{2,4-6}`), diff | +| `Code` | Inline code | `color` and `lang` props | + +## Prose — Feature Components + +Nuxt UI-specific Prose components. In markdown files they are used **without the `Prose` prefix** (e.g. `::callout`, `::steps`). In Vue they are referenced as `ProseCallout`, `ProseSteps`, etc. Comark resolves them automatically when `@nuxt/ui` is installed. + +Nuxt UI also registers shorthand aliases for `Callout`: `::note`, `::tip`, `::warning`, `::caution` (preset `color` + `icon`). + +| Component | Purpose | +|---|---| +| `Callout` | Highlighted note/warning/tip (`color`, `icon`, `to`) | +| `Badge` | Inline badge/tag | +| `Kbd` | Keyboard key | +| `Icon` | Inline Iconify icon | +| `Prompt` | Terminal prompt block | +| `Card` `CardGroup` | Content card and card grid | +| `Steps` | Numbered step list (`level` prop sets heading depth) | +| `Tabs` `TabsItem` | Tabbed content (`sync` for localStorage, `hash` for scroll-on-change) | +| `Accordion` `AccordionItem` | Collapsible accordion sections | +| `Collapsible` | Single collapsible section | +| `Field` `FieldGroup` | Form field display | +| `CodeGroup` | Tabbed code blocks | +| `CodeCollapse` | Collapsible code block | +| `CodeIcon` | File-type icon in code headers | +| `CodePreview` | Code + live rendered preview side by side | +| `CodeTree` | File tree display | +| `Script` | Script injection | + ## Content (Nuxt Content) | Component | Purpose | diff --git a/skills/nuxt-ui/references/guidelines/component-selection.md b/skills/nuxt-ui/references/guidelines/component-selection.md index e52041716a..142a7a752f 100644 --- a/skills/nuxt-ui/references/guidelines/component-selection.md +++ b/skills/nuxt-ui/references/guidelines/component-selection.md @@ -83,6 +83,24 @@ Decision matrices for choosing the right component. When in doubt, use the MCP ` - Use `UBanner` for site-wide messages (maintenance, new feature) - Never use a toast for information the user needs to act on — use an alert or modal instead +## Markdown + +When rendering Markdown (for instance with Comark), **prefer Prose components** — they are styled and tuned for Markdown contexts. Generic Nuxt UI components can also be used. `` (or ``) auto-resolves `ProseX` components when `@nuxt/ui` is installed. In Markdown, the `Prose` prefix can be omitted (`::callout`, `::steps`, etc.). + +| Need | Use | Not | +|---|---|---| +| Note / warning / tip | `Callout` | `UAlert` | +| Tabbed content | `Tabs` + `TabsItem` | `UTabs` | +| Step-by-step list | `Steps` | custom list | +| Content card grid | `Card` + `CardGroup` | `UCard` | +| Collapsible section | `Collapsible` / `Accordion` | `UCollapsible` / `UAccordion` | +| Tabbed code blocks | `CodeGroup` | manual tabs | + +### Rules +- Prose components use native Vue slots — Comark maps named `#slot` blocks directly to `` +- Theme via `appConfig.ui.prose.` using the same override pattern as other Nuxt UI components +- `Callout` colors: `neutral` (default), `primary`, `secondary`, `info`, `success`, `warning`, `error` + ## Layout containers | Need | Component | Why |