# Vunor
> Use when working with Vunor, the Vue 3 + UnoCSS design system and component library. Covers presetVunor, vunorShortcuts/defineShortcuts/mergeVunorShortcuts, VunorVueResolver, Nuxt module, Vu-prefixed components, semantic UnoCSS classes (scope-*, layer-*, surface-*, current-*, c8-*, i8-*, card, fingertip, spacing, typography), public composition primitives (btn, menu-item, popup-card, i8-bare, disabled-soft), palette/theme tuning, and shortcut override patterns. Imports: vunor, vunor/theme, vunor/utils, vunor/vite, vunor/nuxt.
- Skill: `mav-rik/vunor` (Agent Skill, multi-file: 10 files)
- Install (CLI): `npx skillmds@latest add mav-rik/vunor`
- Raw SKILL.md: https://api.skillmd.com/api/skills/mav-rik/vunor/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: mav-rik (https://skillmd.com/u/mav-rik)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/mav-rik/vunor
---
# Vunor
Vunor is two things in one package:
1. **A UnoCSS design-system preset (`presetVunor`)** that derives a complete theme — perceptual color palette, golden-ratio typography/spacing, layered backgrounds, font-aware margin correction — from a few mathematical knobs.
2. **A Vue 3 component library** of 30+ accessible components built on Reka UI, styled entirely through UnoCSS classes (zero CSS files, no scoped styles).
The two halves are independent: the preset works without the components, and the components are skinnable through the same shortcut system you'd use for your own code.
## Mental model
Three layers stack on top of each other. Read top-down to understand any class:
```
SEMANTIC CLASSES scope-primary, layer-0, surface-100, c8-filled, i8-filled, card
↓ expand to (UnoCSS shortcuts, deep-merged from defineShortcuts() objects)
LOW-LEVEL UTILITIES bg-current, current-bg-scope-color-500, h-fingertip, p-$m
↓ resolve to (UnoCSS rules from presetVunor)
CSS CUSTOM PROPERTIES --scope-color-500, --current-bg, --v-fingertip, --card-spacing
```
**Everything that paints, sizes, or themes flows through CSS variables.** Set `scope-primary` once high in the tree → every descendant `bg-current`, `c8-filled`, `surface-100` etc. picks up the primary palette. Change `scope-error` on a subtree → that subtree turns red, no other classes change.
## Required foundation: scope
`scope-{name}` declares which palette is active for a subtree. **Without an active scope, the color-aware classes have no values to render.** Vunor preflights install `scope-neutral` on `:root` automatically, so things work out of the box and incidental UI (default borders, layer backgrounds, idle text/icons) reads as a calm neutral.
**The recommended pattern is to keep `scope-neutral` as the page default and *only* opt into a stronger scope on accent elements:**
- Brand-colored interactive elements (primary buttons, focused inputs, active tabs, brand banners) → `scope-primary` (or `scope-secondary` for an alternate accent).
- State-bearing elements (error inputs, destructive buttons, validation messages) → `scope-error`. For warnings → `scope-warn`. For success → `scope-good`.
That way the page chrome stays neutral and the eye is drawn to the elements that genuinely need attention.
```html
…
```
Valid names: `primary`, `secondary`, `good`, `warn`, `error`, `grey`, `neutral`.
## Quick start
```ts
// uno.config.ts
import { defineConfig } from 'unocss'
import { presetVunor, vunorShortcuts } from 'vunor/theme'
export default defineConfig({
presets: [presetVunor({ palette: { colors: { primary: '#6B4EFF' } } })],
shortcuts: [vunorShortcuts()],
})
```
```ts
// vite.config.ts — add VunorVueResolver for auto-import of
import Components from 'unplugin-vue-components/vite'
import { VunorVueResolver } from 'vunor/vite'
plugins: [vue(), UnoCSS(), Components({ resolvers: [VunorVueResolver] })]
// OR, for Nuxt 3
modules: ['vunor/nuxt']
```
```html
HelloSave
```
See [references/setup.md](references/setup.md) for the full setup.
## How to use this skill
Load only the reference file you need. Each file is self-contained.
| File | Load when... |
|------|--------------|
| [references/setup.md](references/setup.md) | Installing Vunor, configuring Vite or Nuxt, listing package exports |
| [references/colors.md](references/colors.md) | Using `scope-*`, `layer-*`, `surface-*`, `current-*`, `bg-current`; understanding light/dark behavior |
| [references/theme.md](references/theme.md) | Tuning palette (vividness, saturation, flatness, layersDepth, lightest/darkest), defining custom surfaces, configuring fingertip, baseRadius, typography, animations |
| [references/typography.md](references/typography.md) | Choosing typography utilities, using golden-ratio spacing tokens, applying `text-mt-*` / `text-mb-*` margin correction, sizing touch targets with `fingertip-*` |
| [references/cards.md](references/cards.md) | Building cards: ``, `card` shortcut, `card-{level}` rule, `--card-spacing`, density, rounded corners, header levels |
| [references/shortcuts.md](references/shortcuts.md) | Customizing or overriding component styles, understanding c8 (clickable) and i8 (input) systems, using `defineShortcuts` / `mergeVunorShortcuts` / `vunorShortcuts` |
| [references/rules.md](references/rules.md) | Looking up a specific UnoCSS rule pattern provided by Vunor (`scope-*`, `current-*`, `card-*`, `fingertip-*`, `i8-*`, `icon-*`, `text-m*-*`) |
| [references/components.md](references/components.md) | Using non-form components: VuCard, VuButton, VuDialog, VuTabs, VuMenu, VuPopover, VuAppLayout, VuAppToasts, VuIcon, VuLoadingIndicator, VuPagination, VuProgressBar |
| [references/forms.md](references/forms.md) | Using form components: VuInput, VuSelect, VuCombobox, VuCheckbox, VuRadioGroup, VuSlider, VuDatePicker |
## Quick reference
```ts
// Preset & shortcuts
import { presetVunor, vunorShortcuts, defineShortcuts,
mergeVunorShortcuts, toUnoShortcut } from 'vunor/theme'
import type { TVunorPaletteOptions, TVunorPaletteColor,
TVunorMainPaletteAdvanced, TVunorLayerPaletteAdvanced,
TVunorSurfaceConfig, TVunorTheme,
TVunorShortcut } from 'vunor/theme'
// PI composables (provide/inject)
import { useInputPi, useInputProps, useInputBaseProps,
useCardPI } from 'vunor'
import { useProvideInject } from 'vunor/utils'
// Vue / Nuxt integration
import { VunorVueResolver } from 'vunor/vite' // unplugin-vue-components resolver
// nuxt.config: modules: ['vunor/nuxt']
// Components (auto-imported when resolver/module is set up)
// , , , , , ,
// , , , , ,
// , , , , ,
// , , ,
// , , , , ,
// , , ,
```
### Cheatsheet of semantic classes
```html