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

2.3 KiB

Raw Permalink Blame History

name, description

name	description
transformer-directives	CSS directives @apply, @screen, theme(), and icon()

Transformer Directives

Enables @apply, @screen, theme(), and icon() directives in CSS.

Installation

import { defineConfig, transformerDirectives } from 'unocss'

export default defineConfig({
  transformers: [
    transformerDirectives(),
  ],
})

@apply

Apply utility classes in CSS:

.custom-btn {
  @apply py-2 px-4 font-semibold rounded-lg;
}

/* With variants - use quotes */
.custom-btn {
  @apply 'hover:bg-blue-600 focus:ring-2';
}

CSS Custom Property Alternative

For vanilla CSS compatibility:

.custom-div {
  --at-apply: text-center my-0 font-medium;
}

Supported aliases: --at-apply, --uno-apply, --uno

Configure aliases:

transformerDirectives({
  applyVariable: ['--at-apply', '--uno-apply', '--uno'],
  // or disable: applyVariable: false
})

@screen

Create breakpoint media queries:

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

@screen sm {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@screen lg {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

Breakpoint Variants

/* Less than breakpoint */
@screen lt-sm {
  .item { display: none; }
}

/* At specific breakpoint only */
@screen at-md {
  .item { width: 50%; }
}

theme()

Access theme values in CSS:

.btn-blue {
  background-color: theme('colors.blue.500');
  padding: theme('spacing.4');
  border-radius: theme('borderRadius.lg');
}

Dot notation paths into your theme config.

icon()

Convert icon utility to SVG (requires preset-icons):

.icon-sun {
  background-image: icon('i-carbon-sun');
}

/* With custom color */
.icon-moon {
  background-image: icon('i-carbon-moon', '#fff');
}

/* Using theme color */
.icon-alert {
  background-image: icon('i-carbon-warning', 'theme("colors.red.500")');
}

Complete Example

.card {
  @apply rounded-lg shadow-md p-4;
  background-color: theme('colors.white');
}

.card-header {
  @apply 'font-bold text-lg border-b';
  padding-bottom: theme('spacing.2');
}

@screen md {
  .card {
    @apply flex gap-4;
  }
}

.card-icon {
  background-image: icon('i-carbon-document');
  @apply w-6 h-6;
}

2.3 KiB Raw Permalink Blame History