Maz-UI v4 - Modern Vue & Nuxt component library with 50+ standalone components, composables, directives, theming, i18n, and SSR support. Use when building Vue/Nuxt applications with forms, dialogs, tables, animations, or need responsive design system with dark mode.
Installs just this skill. Get the whole plugin for auto-invocation.
⚡ How it fires
How this skill gets triggered: by you, by Claude, or both.
Fires itselfClaude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/maz-ui
👁️ Context preview
The summary Claude sees to decide when to auto-load this skill.
Maz-UI v4 - Modern Vue & Nuxt component library with 50+ standalone components, composables, directives, theming, i18n, and SSR support. Use when building Vue/Nuxt applications with forms, dialogs, tables, animations, or need responsive design system with dark mode.
📊 Stats
Stars194
Forks29
LanguageTypeScript
LicenseMIT
📦 Ships with claude-skills
</> SKILL.md
maz-ui.SKILL.md
---name: maz-ui
description: Maz-UI v4 - Modern Vue & Nuxt component library with 50+ standalone components, composables, directives, theming, i18n, and SSR support. Use when building Vue/Nuxt applications with forms, dialogs, tables, animations, or need responsive design system with dark mode.
license: MIT
---# Maz-UI v4 - Vue & Nuxt Component Library
Maz-UI is a comprehensive, standalone component library for Vue 3 and Nuxt 3 applications, offering 50+ production-ready components, powerful theming, internationalization, and exceptional developer experience.
**Latest Version**: 4.3.3 (as of 2025-12-29)
**Package**: `maz-ui` | `@maz-ui/nuxt` | `@maz-ui/themes` | `@maz-ui/translations` | `@maz-ui/icons`
## Quick Start
### Vue 3 Installation
```bash
# Install core packages
pnpm add maz-ui @maz-ui/themes
# Or with npm
npm install maz-ui @maz-ui/themes
```
**Setup** in `main.ts`:
```typescript
import { createApp } from 'vue'
import { MazUi } from 'maz-ui/plugins/maz-ui'
import { mazUi } from '@maz-ui/themes'
import { en } from '@maz-ui/translations'
import 'maz-ui/styles'
import App from './App.vue'
**Learn More**: Load `references/translations.md` for comprehensive i18n setup, lazy loading strategies, and production patterns.
## Tree-Shaking Best Practices
**Direct Imports** (Most Optimized):
```typescript
// ✅✅✅ Best - smallest bundle
import MazBtn from 'maz-ui/components/MazBtn'
import { useToast } from 'maz-ui/composables/useToast'
import { vClickOutside } from 'maz-ui/directives/vClickOutside'
```
**Index Imports** (Good):
```typescript
// ✅ Good - tree-shakable
import { MazBtn, MazInput } from 'maz-ui/components'
import { useToast, useTheme } from 'maz-ui/composables'
```
**Avoid** (Not Tree-Shakable):
```typescript
// ❌ Imports everything
import * as MazUI from 'maz-ui'
```
## Advanced Topics
### Performance Optimization
Maz-UI can be optimized from ~300KB to ~15KB through strategic imports and tree-shaking. Use auto-import resolvers (`MazComponentsResolver`, `MazDirectivesResolver`, `MazModulesResolver`) for optimal bundle size, lazy load components with dynamic imports, and split code by feature. Load **`performance.md`** for comprehensive bundle optimization strategies.
### SSR & SSG
Full server-side rendering and static site generation support with three theme strategies: **hybrid** (critical CSS injection, no FOUC), **buildtime** (smallest bundle, static themes), and **runtime** (full theme switching, larger bundle). Prevent hydration mismatches by wrapping client-only components in `<ClientOnly>`. Load **`ssr-ssg.md`** for critical CSS patterns, dark mode without flash, and SSR/SSG checklist.
### Accessibility
All Maz-UI components are WCAG 2.1 AA compliant with proper ARIA attributes, keyboard navigation, focus management, and screen reader support. Components include semantic HTML, color contrast ratios >4.5:1, and accessible form validation. Load **`accessibility.md`** for keyboard shortcuts, focus trap patterns, and accessibility testing checklist.
### Form Validation
The `useFormValidator()` composable integrates with Valibot for type-safe schema validation with full TypeScript inference. Supports 5 validation modes (lazy, aggressive, eager, blur, progressive), async validation, custom validators, and real-time error messages. Load **`form-validation.md`** for comprehensive validation patterns and real-world examples.
### Auto-Import Resolvers
**Critical for tree-shaking**: Use `unplugin-vue-components` and `unplugin-auto-import` with Maz-UI resolvers to import only what you use. Reduces bundle size by 60-90% compared to global imports. Configure prefix handling to avoid naming conflicts with other libraries. Load **`resolvers.md`** for complete resolver configuration and troubleshooting.
## Progressive Disclosure Summary
This SKILL.md provides:
1. **Quick Start** - Get running in <5 minutes
2. **Core Capabilities** - Overview of all features
3. **Error Prevention** - Top 5 common issues solved
For detailed implementation:
- Load **reference files** based on your current task (see "When to Load References" above)
- Each reference contains comprehensive guides, code examples, and advanced configurations
- References are organized by domain (components, setup, theming, etc.) for easy navigation
## Package Ecosystem
- **maz-ui** - Core component library
- **@maz-ui/nuxt** - Nuxt 3 module with auto-imports
- **@maz-ui/themes** - Theming system and presets
- **@maz-ui/translations** - i18n support (8 built-in languages: en, fr, es, de, it, pt, ja, zh-CN)
