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:
128
skills/unocss/references/transformer-compile-class.md
Normal file
128
skills/unocss/references/transformer-compile-class.md
Normal file
@@ -0,0 +1,128 @@
|
||||
---
|
||||
name: transformer-compile-class
|
||||
description: Compile multiple classes into one hashed class
|
||||
---
|
||||
|
||||
# Transformer Compile Class
|
||||
|
||||
Compiles multiple utility classes into a single hashed class for smaller HTML.
|
||||
|
||||
## Installation
|
||||
|
||||
```ts
|
||||
import { defineConfig, transformerCompileClass } from 'unocss'
|
||||
|
||||
export default defineConfig({
|
||||
transformers: [
|
||||
transformerCompileClass(),
|
||||
],
|
||||
})
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
Add `:uno:` prefix to mark classes for compilation:
|
||||
|
||||
```html
|
||||
<!-- Before -->
|
||||
<div class=":uno: text-center sm:text-left">
|
||||
<div class=":uno: text-sm font-bold hover:text-red" />
|
||||
</div>
|
||||
|
||||
<!-- After -->
|
||||
<div class="uno-qlmcrp">
|
||||
<div class="uno-0qw2gr" />
|
||||
</div>
|
||||
```
|
||||
|
||||
## Generated CSS
|
||||
|
||||
```css
|
||||
.uno-qlmcrp {
|
||||
text-align: center;
|
||||
}
|
||||
.uno-0qw2gr {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.uno-0qw2gr:hover {
|
||||
--un-text-opacity: 1;
|
||||
color: rgb(248 113 113 / var(--un-text-opacity));
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.uno-qlmcrp {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
```ts
|
||||
transformerCompileClass({
|
||||
// Custom trigger string (default: ':uno:')
|
||||
trigger: ':uno:',
|
||||
|
||||
// Custom class prefix (default: 'uno-')
|
||||
classPrefix: 'uno-',
|
||||
|
||||
// Hash function for class names
|
||||
hashFn: (str) => /* custom hash */,
|
||||
|
||||
// Keep original classes alongside compiled
|
||||
keepOriginal: false,
|
||||
})
|
||||
```
|
||||
|
||||
## Use Cases
|
||||
|
||||
- **Smaller HTML** - Reduce repetitive class strings
|
||||
- **Obfuscation** - Hide utility class names in production
|
||||
- **Performance** - Fewer class attributes to parse
|
||||
|
||||
## ESLint Integration
|
||||
|
||||
Enforce compile class usage across project:
|
||||
|
||||
```json
|
||||
{
|
||||
"rules": {
|
||||
"@unocss/enforce-class-compile": "warn"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This rule:
|
||||
- Warns when class attribute doesn't start with `:uno:`
|
||||
- Auto-fixes by adding the prefix
|
||||
|
||||
Options:
|
||||
|
||||
```json
|
||||
{
|
||||
"rules": {
|
||||
"@unocss/enforce-class-compile": ["warn", {
|
||||
"prefix": ":uno:",
|
||||
"enableFix": true
|
||||
}]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Combining with Other Transformers
|
||||
|
||||
```ts
|
||||
export default defineConfig({
|
||||
transformers: [
|
||||
transformerVariantGroup(), // Process variant groups first
|
||||
transformerDirectives(), // Then directives
|
||||
transformerCompileClass(), // Compile last
|
||||
],
|
||||
})
|
||||
```
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://unocss.dev/transformers/compile-class
|
||||
-->
|
||||
Reference in New Issue
Block a user