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>
This commit is contained in:
105
skills/unocss/references/core-safelist.md
Normal file
105
skills/unocss/references/core-safelist.md
Normal file
@@ -0,0 +1,105 @@
|
||||
---
|
||||
name: unocss-safelist-blocklist
|
||||
description: Force include or exclude specific utilities
|
||||
---
|
||||
|
||||
# Safelist and Blocklist
|
||||
|
||||
Control which utilities are always included or excluded.
|
||||
|
||||
## Safelist
|
||||
|
||||
Utilities always included, regardless of detection:
|
||||
|
||||
```ts
|
||||
export default defineConfig({
|
||||
safelist: [
|
||||
'p-1', 'p-2', 'p-3',
|
||||
// Dynamic generation
|
||||
...Array.from({ length: 4 }, (_, i) => `p-${i + 1}`),
|
||||
],
|
||||
})
|
||||
```
|
||||
|
||||
### Function Form
|
||||
|
||||
```ts
|
||||
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
|
||||
|
||||
```ts
|
||||
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:
|
||||
|
||||
```ts
|
||||
blocklist: [
|
||||
'p-1', // Exact match
|
||||
/^p-[2-4]$/, // Regex
|
||||
]
|
||||
```
|
||||
|
||||
### With Messages
|
||||
|
||||
```ts
|
||||
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:
|
||||
|
||||
```ts
|
||||
// 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']
|
||||
```
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://unocss.dev/config/safelist
|
||||
- https://unocss.dev/guide/extracting
|
||||
-->
|
||||
Reference in New Issue
Block a user