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
parent 861b28b965
commit f5792c40be
1262 changed files with 212048 additions and 61 deletions
--- a/skills/unocss/references/preset-wind4.md
+++ b/skills/unocss/references/preset-wind4.md
@@ -0,0 +1,247 @@
+---
+name: preset-wind4
+description: Tailwind CSS v4 compatible preset with enhanced features
+---
+
+# Preset Wind4
+
+The Tailwind CSS v4 compatible preset. Enhances preset-wind3 with modern CSS features.
+
+## Installation
+
+```ts
+import { defineConfig, presetWind4 } from 'unocss'
+
+export default defineConfig({
+  presets: [
+    presetWind4(),
+  ],
+})
+```
+
+## Key Differences from Wind3
+
+### Built-in CSS Reset
+
+No need for `@unocss/reset` - reset is built-in:
+
+```ts
+// Remove these imports
+import '@unocss/reset/tailwind.css' // ❌ Not needed
+import '@unocss/reset/tailwind-compat.css' // ❌ Not needed
+
+// Enable in config
+presetWind4({
+  preflights: {
+    reset: true,
+  },
+})
+```
+
+### OKLCH Color Model
+
+Uses `oklch` for better color perception and contrast. Not compatible with `presetLegacyCompat`.
+
+### Theme CSS Variables
+
+Automatically generates CSS variables from theme:
+
+```css
+:root, :host {
+  --spacing: 0.25rem;
+  --font-sans: ui-sans-serif, system-ui, sans-serif;
+  --colors-black: #000;
+  --colors-white: #fff;
+  /* ... */
+}
+```
+
+### @property CSS Rules
+
+Uses `@property` for better browser optimization:
+
+```css
+@property --un-text-opacity {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 100%;
+}
+```
+
+### Theme Key Changes
+
+| preset-wind3 | preset-wind4 |
+|--------------|--------------|
+| `fontFamily` | `font` |
+| `fontSize` | `text.fontSize` |
+| `lineHeight` | `text.lineHeight` or `leading` |
+| `letterSpacing` | `text.letterSpacing` or `tracking` |
+| `borderRadius` | `radius` |
+| `easing` | `ease` |
+| `breakpoints` | `breakpoint` |
+| `verticalBreakpoints` | `verticalBreakpoint` |
+| `boxShadow` | `shadow` |
+| `transitionProperty` | `property` |
+| `container.maxWidth` | `containers.maxWidth` |
+| Size properties (`width`, `height`, etc.) | Unified to `spacing` |
+
+## Options
+
+```ts
+presetWind4({
+  preflights: {
+    // Built-in reset styles
+    reset: true,
+    
+    // Theme CSS variables generation
+    theme: 'on-demand', // true | false | 'on-demand'
+    
+    // @property CSS rules
+    property: true,
+  },
+})
+```
+
+### Theme Variable Processing
+
+Convert rem to px for theme variables:
+
+```ts
+import { createRemToPxProcessor } from '@unocss/preset-wind4/utils'
+
+presetWind4({
+  preflights: {
+    theme: {
+      mode: 'on-demand',
+      process: createRemToPxProcessor(),
+    }
+  },
+})
+
+// Also apply to utilities
+export default defineConfig({
+  postprocess: [createRemToPxProcessor()],
+})
+```
+
+### Property Layer Customization
+
+```ts
+presetWind4({
+  preflights: {
+    property: {
+      // Custom parent wrapper
+      parent: '@layer custom-properties',
+      // Custom selector
+      selector: ':where(*, ::before, ::after)',
+    },
+  },
+})
+```
+
+Remove `@supports` wrapper:
+
+```ts
+presetWind4({
+  preflights: {
+    property: {
+      parent: false,
+    },
+  },
+})
+```
+
+## Generated Layers
+
+| Layer | Description | Order |
+|-------|-------------|-------|
+| `properties` | CSS `@property` rules | -200 |
+| `theme` | Theme CSS variables | -150 |
+| `base` | Reset/preflight styles | -100 |
+
+## Theme.defaults
+
+Global default configuration for reset styles:
+
+```ts
+import type { Theme } from '@unocss/preset-wind4/theme'
+
+const defaults: Theme['default'] = {
+  transition: {
+    duration: '150ms',
+    timingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
+  },
+  font: {
+    family: 'var(--font-sans)',
+    featureSettings: 'var(--font-sans--font-feature-settings)',
+    variationSettings: 'var(--font-sans--font-variation-settings)',
+  },
+  monoFont: {
+    family: 'var(--font-mono)',
+    // ...
+  },
+}
+```
+
+## Compatibility Notes
+
+### presetRemToPx
+
+Not needed - use built-in processor instead:
+
+```ts
+presetWind4({
+  preflights: {
+    theme: {
+      process: createRemToPxProcessor(),
+    }
+  },
+})
+```
+
+### presetLegacyCompat
+
+**Not compatible** with preset-wind4 due to `oklch` color model.
+
+## Migration from Wind3
+
+1. Update theme keys according to the table above
+2. Remove `@unocss/reset` imports
+3. Enable `preflights.reset: true`
+4. Test color outputs (oklch vs rgb)
+5. Update any custom theme extensions
+
+```ts
+// Before (wind3)
+theme: {
+  fontFamily: { sans: 'Roboto' },
+  fontSize: { lg: '1.125rem' },
+  breakpoints: { sm: '640px' },
+}
+
+// After (wind4)
+theme: {
+  font: { sans: 'Roboto' },
+  text: { lg: { fontSize: '1.125rem' } },
+  breakpoint: { sm: '640px' },
+}
+```
+
+## When to Use Wind4
+
+Choose **preset-wind4** when:
+- Starting a new project
+- Targeting modern browsers
+- Want built-in reset and CSS variables
+- Following Tailwind v4 conventions
+
+Choose **preset-wind3** when:
+- Need legacy browser support
+- Migrating from Tailwind v3
+- Using presetLegacyCompat
+- Want stable, proven preset
+
+<!-- 
+Source references:
+- https://unocss.dev/presets/wind4
+-->