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:
142
skills/unocss/references/preset-attributify.md
Normal file
142
skills/unocss/references/preset-attributify.md
Normal 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
|
||||
-->
|
||||
Reference in New Issue
Block a user