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:
Jason Woltje
2026-02-16 16:27:42 -06:00
parent 861b28b965
commit f5792c40be
1262 changed files with 212048 additions and 61 deletions

View File

@@ -0,0 +1,142 @@
---
name: preset-attributify
description: Group utilities in HTML attributes instead of class
---
# Preset Attributify
Group utilities in HTML attributes for better readability.
## Installation
```ts
import { defineConfig, presetAttributify, presetWind3 } from 'unocss'
export default defineConfig({
presets: [
presetWind3(),
presetAttributify(),
],
})
```
## Basic Usage
Instead of long class strings:
```html
<button class="bg-blue-400 hover:bg-blue-500 text-sm text-white font-mono font-light py-2 px-4 rounded border-2 border-blue-200">
Button
</button>
```
Group by prefix in attributes:
```html
<button
bg="blue-400 hover:blue-500"
text="sm white"
font="mono light"
p="y-2 x-4"
border="2 rounded blue-200"
>
Button
</button>
```
## Prefix Self-Referencing
For utilities matching their prefix (`flex`, `grid`, `border`), use `~`:
```html
<!-- Before -->
<button class="border border-red">Button</button>
<!-- After -->
<button border="~ red">Button</button>
```
## Valueless Attributify
Use utilities as boolean attributes:
```html
<div m-2 rounded text-teal-400 />
```
## Handling Property Conflicts
When attribute names conflict with HTML properties:
```html
<!-- Use un- prefix -->
<a un-text="red">Text color to red</a>
```
### Enforce Prefix
```ts
presetAttributify({
prefix: 'un-',
prefixedOnly: true,
})
```
## Options
```ts
presetAttributify({
strict: false, // Only generate CSS for attributify
prefix: 'un-', // Attribute prefix
prefixedOnly: false, // Require prefix for all
nonValuedAttribute: true, // Support valueless attributes
ignoreAttributes: [], // Attributes to ignore
trueToNonValued: false, // Treat value="true" as valueless
})
```
## TypeScript Support
### Vue 3
```ts
// html.d.ts
declare module '@vue/runtime-dom' {
interface HTMLAttributes { [key: string]: any }
}
declare module '@vue/runtime-core' {
interface AllowedComponentProps { [key: string]: any }
}
export {}
```
### React
```ts
import type { AttributifyAttributes } from '@unocss/preset-attributify'
declare module 'react' {
interface HTMLAttributes<T> extends AttributifyAttributes {}
}
```
## JSX Support
For JSX where `<div foo>` becomes `<div foo={true}>`:
```ts
import { transformerAttributifyJsx } from 'unocss'
export default defineConfig({
transformers: [
transformerAttributifyJsx(),
],
})
```
**Important:** Only use attributify if `uno.config.*` shows `presetAttributify()` is enabled.
<!--
Source references:
- https://unocss.dev/presets/attributify
-->