Files
agent-skills/skills/unocss/references/core-config.md
Jason Woltje f5792c40be feat: Complete fleet — 94 skills across 10+ domains
Pulled ALL skills from 15 source repositories:
- anthropics/skills: 16 (docs, design, MCP, testing)
- obra/superpowers: 14 (TDD, debugging, agents, planning)
- coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth)
- better-auth/skills: 5 (auth patterns)
- vercel-labs/agent-skills: 5 (React, design, Vercel)
- antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo)
- Plus 13 individual skills from various repos

Mosaic Stack is not limited to coding — the Orchestrator and
subagents serve coding, business, design, marketing, writing,
logistics, analysis, and more.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-16 16:27:42 -06:00

2.9 KiB

name, description
name description
unocss-configuration Config file setup and all configuration options for UnoCSS

UnoCSS Configuration

UnoCSS is configured via a dedicated config file in your project root.

Config File

Recommended: Use a dedicated uno.config.ts file for best IDE support and HMR.

// uno.config.ts
import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetWebFonts,
  presetWind3,
  transformerDirectives,
  transformerVariantGroup
} from 'unocss'

export default defineConfig({
  shortcuts: [
    // ...
  ],
  theme: {
    colors: {
      // ...
    }
  },
  presets: [
    presetWind3(),
    presetAttributify(),
    presetIcons(),
    presetTypography(),
    presetWebFonts({
      fonts: {
        // ...
      },
    }),
  ],
  transformers: [
    transformerDirectives(),
    transformerVariantGroup(),
  ],
})

UnoCSS automatically looks for uno.config.{js,ts,mjs,mts} or unocss.config.{js,ts,mjs,mts} in the project root.

Key Configuration Options

rules

Define CSS utility rules. Later entries have higher priority.

rules: [
  ['m-1', { margin: '0.25rem' }],
  [/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
]

shortcuts

Combine multiple rules into a single shorthand.

shortcuts: {
  'btn': 'py-2 px-4 font-semibold rounded-lg shadow-md',
}

theme

Theme object for design tokens shared between rules.

theme: {
  colors: {
    brand: '#942192',
  },
  breakpoints: {
    sm: '640px',
    md: '768px',
  },
}

presets

Predefined configurations bundling rules, variants, and themes.

presets: [
  presetWind3(),
  presetIcons(),
]

transformers

Transform source code to support special syntax.

transformers: [
  transformerDirectives(),
  transformerVariantGroup(),
]

variants

Preprocess selectors with ability to rewrite CSS output.

extractors

Handle source files and extract utility class names.

preflights

Inject raw CSS globally.

layers

Control the order of CSS layers. Default is 0.

layers: {
  'components': -1,
  'default': 1,
  'utilities': 2,
}

safelist

Utilities that are always included in output.

safelist: ['p-1', 'p-2', 'p-3']

blocklist

Utilities that are always excluded.

blocklist: ['p-1', /^p-[2-4]$/]

content

Configure where to extract utilities from.

content: {
  pipeline: {
    include: [/\.(vue|svelte|tsx|html)($|\?)/],
  },
  filesystem: ['src/**/*.php'],
}

separators

Variant separator characters. Default: [':', '-']

outputToCssLayers

Output UnoCSS layers as CSS Cascade Layers.

outputToCssLayers: true

Specifying Config File Location

// vite.config.ts
import UnoCSS from 'unocss/vite'

export default defineConfig({
  plugins: [
    UnoCSS({
      configFile: '../my-uno.config.ts',
    }),
  ],
})