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>
1.8 KiB
1.8 KiB
name, description
| name | description |
|---|---|
| unocss-safelist-blocklist | Force include or exclude specific utilities |
Safelist and Blocklist
Control which utilities are always included or excluded.
Safelist
Utilities always included, regardless of detection:
export default defineConfig({
safelist: [
'p-1', 'p-2', 'p-3',
// Dynamic generation
...Array.from({ length: 4 }, (_, i) => `p-${i + 1}`),
],
})
Function Form
safelist: [
'p-1',
() => ['m-1', 'm-2'],
(context) => {
const colors = Object.keys(context.theme.colors || {})
return colors.map(c => `bg-${c}-500`)
},
]
Common Use Cases
safelist: [
// Dynamic colors from CMS
() => ['primary', 'secondary'].flatMap(c => [
`bg-${c}`, `text-${c}`, `border-${c}`,
]),
// Component variants
() => {
const variants = ['primary', 'danger']
const sizes = ['sm', 'md', 'lg']
return variants.flatMap(v => sizes.map(s => `btn-${v}-${s}`))
},
]
Blocklist
Utilities never generated:
blocklist: [
'p-1', // Exact match
/^p-[2-4]$/, // Regex
]
With Messages
blocklist: [
['bg-red-500', { message: 'Use bg-red-600 instead' }],
[/^text-xs$/, { message: 'Use text-sm for accessibility' }],
]
Safelist vs Blocklist
| Feature | Safelist | Blocklist |
|---|---|---|
| Purpose | Always include | Always exclude |
| Strings | ✅ | ✅ |
| Regex | ❌ | ✅ |
| Functions | ✅ | ❌ |
Note: Blocklist wins if utility is in both.
Best Practice
Prefer static mappings over safelist:
// Better: UnoCSS extracts automatically
const sizes = {
sm: 'text-sm p-2',
md: 'text-base p-4',
}
// Avoid: Large safelist
safelist: ['text-sm', 'text-base', 'p-2', 'p-4']