Files
agent-skills/skills/unocss/references/core-layers.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

1.6 KiB

name, description
name description
unocss-layers-preflights CSS layer ordering and raw CSS injection

Layers and Preflights

Control CSS output order and inject global CSS.

Layers

Set layer on rules:

rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` }), { layer: 'utilities' }],
  ['btn', { padding: '4px' }], // default layer
]

Layer Ordering

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

Import Layers Separately

import 'uno:components.css'
import 'uno.css'
import './my-custom.css'
import 'uno:utilities.css'

CSS Cascade Layers

outputToCssLayers: true

// Or with custom names
outputToCssLayers: {
  cssLayerName: (layer) => {
    if (layer === 'default') return 'utilities'
    if (layer === 'shortcuts') return 'utilities.shortcuts'
  }
}

Layer Variants

<!-- UnoCSS layer -->
<p class="uno-layer-my-layer:text-xl">

<!-- CSS @layer -->
<p class="layer-my-layer:text-xl">

Preflights

Inject raw CSS globally:

preflights: [
  {
    getCSS: ({ theme }) => `
      * {
        color: ${theme.colors.gray?.[700] ?? '#333'};
        margin: 0;
      }
    `,
  },
]

With layer:

preflights: [
  {
    layer: 'base',
    getCSS: () => `html { font-family: system-ui; }`,
  },
]

preset-wind4 Layers

Layer Description Order
properties CSS @property rules -200
theme Theme CSS variables -150
base Reset styles -100