Files

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

3.3 KiB

Raw Blame History

name, description

name	description
preset-wind3	Tailwind CSS / Windi CSS compatible preset for UnoCSS

Preset Wind3

The Tailwind CSS / Windi CSS compatible preset. Most commonly used preset for UnoCSS.

Installation

import { defineConfig, presetWind3 } from 'unocss'

export default defineConfig({
  presets: [
    presetWind3(),
  ],
})

Note: @unocss/preset-uno and @unocss/preset-wind are deprecated and renamed to @unocss/preset-wind3.

Features

Full Tailwind CSS v3 compatibility
Dark mode (dark:, @dark:)
All responsive variants (sm:, md:, lg:, xl:, 2xl:)
All standard utilities (flex, grid, spacing, colors, typography, etc.)
Animation support (includes Animate.css animations)

Dark Mode

Class-based (default)

<div class="dark:bg-gray-800">

Generates: .dark .dark\:bg-gray-800 { ... }

Media Query Based

presetWind3({
  dark: 'media'
})

Generates: @media (prefers-color-scheme: dark) { ... }

Opt-in Media Query

Use @dark: regardless of config:

<div class="@dark:bg-gray-800">

Options

presetWind3({
  // Dark mode strategy
  dark: 'class', // 'class' | 'media' | { light: '.light', dark: '.dark' }
  
  // Generate pseudo selector as [group=""] instead of .group
  attributifyPseudo: false,
  
  // CSS custom properties prefix
  variablePrefix: 'un-',
  
  // Utils prefix
  prefix: '',
  
  // Generate preflight CSS
  preflight: true, // true | false | 'on-demand'
  
  // Mark all utilities as !important
  important: false, // boolean | string (selector)
})

Important Option

Make all utilities !important:

presetWind3({
  important: true,
})

Or scope with selector to increase specificity without !important:

presetWind3({
  important: '#app',
})

Output: #app :is(.dark .dark\:bg-blue) { ... }

Differences from Tailwind CSS

Quotes Not Supported

Template quotes don't work due to extractor:

<!-- Won't work -->
<div class="before:content-['']">

<!-- Use shortcut instead -->
<div class="before:content-empty">

Background Position

Use position: prefix for custom values:

<!-- Tailwind -->
<div class="bg-[center_top_1rem]">

<!-- UnoCSS -->
<div class="bg-[position:center_top_1rem]">

Animations

UnoCSS integrates Animate.css. Use -alt suffix for Animate.css versions when names conflict:

animate-bounce - Tailwind version
animate-bounce-alt - Animate.css version

Custom animations:

theme: {
  animation: {
    keyframes: {
      custom: '{0%, 100% { opacity: 0; } 50% { opacity: 1; }}',
    },
    durations: {
      custom: '1s',
    },
    timingFns: {
      custom: 'ease-in-out',
    },
    counts: {
      custom: 'infinite',
    },
  }
}

Differences from Windi CSS

Windi CSS	UnoCSS
`<sm:p-1`	`lt-sm:p-1`
`@lg:p-1`	`at-lg:p-1`
`>xl:p-1`	`xl:p-1`

Bracket syntax uses _ instead of ,:

<!-- Windi CSS -->
<div class="grid-cols-[1fr,10px,max-content]">

<!-- UnoCSS -->
<div class="grid-cols-[1fr_10px_max-content]">

Experimental: Media Hover

Addresses sticky hover on touch devices:

<div class="@hover-text-red">

Generates:

@media (hover: hover) and (pointer: fine) {
  .\@hover-text-red:hover { ... }
}

3.3 KiB Raw Blame History