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

1.9 KiB

Raw Blame History

name, description

name	description
unocss-shortcuts	Combine multiple utility rules into single shorthand classes

UnoCSS Shortcuts

Shortcuts combine multiple rules into a single shorthand, inspired by Windi CSS.

Static Shortcuts

Define as an object mapping shortcut names to utility combinations:

shortcuts: {
  // Multiple utilities combined
  'btn': 'py-2 px-4 font-semibold rounded-lg shadow-md',
  'btn-green': 'text-white bg-green-500 hover:bg-green-700',
  // Single utility alias
  'red': 'text-red-100',
}

Usage:

<button class="btn btn-green">Click me</button>

Dynamic Shortcuts

Use RegExp matcher with function, similar to dynamic rules:

shortcuts: [
  // Static shortcuts can be in array too
  {
    btn: 'py-2 px-4 font-semibold rounded-lg shadow-md',
  },
  // Dynamic shortcut
  [/^btn-(.*)$/, ([, c]) => `bg-${c}-400 text-${c}-100 py-2 px-4 rounded-lg`],
]

Now btn-green and btn-red generate:

.btn-green {
  padding: 0.5rem 1rem;
  --un-bg-opacity: 1;
  background-color: rgb(74 222 128 / var(--un-bg-opacity));
  border-radius: 0.5rem;
  --un-text-opacity: 1;
  color: rgb(220 252 231 / var(--un-text-opacity));
}

Accessing Theme in Shortcuts

Dynamic shortcuts receive context with theme access:

shortcuts: [
  [/^badge-(.*)$/, ([, c], { theme }) => {
    if (Object.keys(theme.colors).includes(c))
      return `bg-${c}4:10 text-${c}5 rounded`
  }],
]

Shortcuts Layer

Shortcuts are output to the shortcuts layer by default. Configure with:

shortcutsLayer: 'my-shortcuts-layer'

Key Points

Later shortcuts have higher priority
Shortcuts can reference other shortcuts
Dynamic shortcuts work like dynamic rules
Shortcuts are expanded at build time, not runtime
All variants work with shortcuts (hover:btn, dark:btn, etc.)

1.9 KiB Raw Blame History