Files

Jason Woltje f5792c40be 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>

2026-02-16 16:27:42 -06:00

2.5 KiB

Raw Blame History

name, description

name	description
preset-attributify	Group utilities in HTML attributes instead of class

Preset Attributify

Group utilities in HTML attributes for better readability.

Installation

import { defineConfig, presetAttributify, presetWind3 } from 'unocss'

export default defineConfig({
  presets: [
    presetWind3(),
    presetAttributify(),
  ],
})

Basic Usage

Instead of long class strings:

<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:

<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 ~:

<!-- Before -->
<button class="border border-red">Button</button>

<!-- After -->
<button border="~ red">Button</button>

Valueless Attributify

Use utilities as boolean attributes:

<div m-2 rounded text-teal-400 />

Handling Property Conflicts

When attribute names conflict with HTML properties:

<!-- Use un- prefix -->
<a un-text="red">Text color to red</a>

Enforce Prefix

presetAttributify({
  prefix: 'un-',
  prefixedOnly: true,
})

Options

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

// 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

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}>:

import { transformerAttributifyJsx } from 'unocss'

export default defineConfig({
  transformers: [
    transformerAttributifyJsx(),
  ],
})

Important: Only use attributify if uno.config.* shows presetAttributify() is enabled.

2.5 KiB Raw Blame History