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.1 KiB

Raw Permalink Blame History

name, description

name	description
unocss-extracting	How UnoCSS extracts utilities from source code

Extracting

UnoCSS searches for utility usages in your codebase and generates CSS on-demand.

Content Sources

Pipeline Extraction (Vite/Webpack)

Most efficient - extracts from build tool pipeline.

Default file types: .jsx, .tsx, .vue, .md, .html, .svelte, .astro, .marko

Not included by default: .js, .ts

export default defineConfig({
  content: {
    pipeline: {
      include: [
        /\.(vue|svelte|[jt]sx|mdx?|astro|html)($|\?)/,
        'src/**/*.{js,ts}', // Add js/ts
      ],
    },
  },
})

Filesystem Extraction

For files not in build pipeline:

export default defineConfig({
  content: {
    filesystem: [
      'src/**/*.php',
      'public/*.html',
    ],
  },
})

Inline Text Extraction

export default defineConfig({
  content: {
    inline: [
      '<div class="p-4 text-red">Some text</div>',
      async () => (await fetch('https://example.com')).text(),
    ],
  },
})

Magic Comments

@unocss-include

Force scan a file:

// @unocss-include
export const classes = {
  active: 'bg-primary text-white',
}

@unocss-ignore

Skip entire file:

// @unocss-ignore

@unocss-skip-start / @unocss-skip-end

Skip specific blocks:

<p class="text-green">Extracted</p>
<!-- @unocss-skip-start -->
<p class="text-red">NOT extracted</p>
<!-- @unocss-skip-end -->

Limitations

UnoCSS works at build time - dynamic classes don't work:

<!-- Won't work! -->
<div class="p-${size}"></div>

Solutions

1. Safelist - Pre-generate known values:

safelist: ['p-1', 'p-2', 'p-3', 'p-4']

2. Static mapping - List combinations statically:

const colors = {
  red: 'text-red border-red',
  blue: 'text-blue border-blue',
}

3. Runtime - Use @unocss/runtime for true runtime generation.

Custom Extractors

extractors: [
  {
    name: 'my-extractor',
    extract({ code }) {
      return code.match(/class:[\w-]+/g) || []
    },
  },
]

2.1 KiB Raw Permalink Blame History