{"id":"166bc768-001d-4575-a37a-1951b15474be","shortId":"TrNzBt","kind":"skill","title":"unocss","tagline":"UnoCSS instant atomic CSS engine, superset of Tailwind CSS. Use when configuring UnoCSS, writing utility rules, shortcuts, or working with presets like Wind, Icons, Attributify.","description":"UnoCSS is an instant atomic CSS engine designed to be flexible and extensible. The core is un-opinionated - all CSS utilities are provided via presets. It's a superset of Tailwind CSS, so you can reuse your Tailwind knowledge for basic syntax usage.\n\n**Important:** Before writing UnoCSS code, agents should check for `uno.config.*` or `unocss.config.*` files in the project root to understand what presets, rules, and shortcuts are available. If the project setup is unclear, avoid using attributify mode and other advanced features - stick to basic `class` usage.\n\n> The skill is based on UnoCSS 66.x, generated at 2026-01-28.\n\n## Core\n\n| Topic | Description | Reference |\n|-------|-------------|-----------|\n| Configuration | Config file setup and all configuration options | [core-config](references/core-config.md) |\n| Rules | Static and dynamic rules for generating CSS utilities | [core-rules](references/core-rules.md) |\n| Shortcuts | Combine multiple rules into single shorthands | [core-shortcuts](references/core-shortcuts.md) |\n| Theme | Theming system for colors, breakpoints, and design tokens | [core-theme](references/core-theme.md) |\n| Variants | Apply variations like hover:, dark:, responsive to rules | [core-variants](references/core-variants.md) |\n| Extracting | How UnoCSS extracts utilities from source code | [core-extracting](references/core-extracting.md) |\n| Safelist & Blocklist | Force include or exclude specific utilities | [core-safelist](references/core-safelist.md) |\n| Layers & Preflights | CSS layer ordering and raw CSS injection | [core-layers](references/core-layers.md) |\n\n## Presets\n\n### Main Presets\n\n| Topic | Description | Reference |\n|-------|-------------|-----------|\n| Preset Wind3 | Tailwind CSS v3 / Windi CSS compatible preset (most common) | [preset-wind3](references/preset-wind3.md) |\n| Preset Wind4 | Tailwind CSS v4 compatible preset with modern CSS features | [preset-wind4](references/preset-wind4.md) |\n| Preset Mini | Minimal preset with essential utilities for custom builds | [preset-mini](references/preset-mini.md) |\n\n### Feature Presets\n\n| Topic | Description | Reference |\n|-------|-------------|-----------|\n| Preset Icons | Pure CSS icons using Iconify with any icon set | [preset-icons](references/preset-icons.md) |\n| Preset Attributify | Group utilities in HTML attributes instead of class | [preset-attributify](references/preset-attributify.md) |\n| Preset Typography | Prose classes for typographic defaults | [preset-typography](references/preset-typography.md) |\n| Preset Web Fonts | Easy Google Fonts and other web fonts integration | [preset-web-fonts](references/preset-web-fonts.md) |\n| Preset Tagify | Use utilities as HTML tag names | [preset-tagify](references/preset-tagify.md) |\n| Preset Rem to Px | Convert rem units to px for utilities | [preset-rem-to-px](references/preset-rem-to-px.md) |\n\n## Transformers\n\n| Topic | Description | Reference |\n|-------|-------------|-----------|\n| Variant Group | Shorthand for grouping utilities with common prefixes | [transformer-variant-group](references/transformer-variant-group.md) |\n| Directives | CSS directives: @apply, @screen, theme(), icon() | [transformer-directives](references/transformer-directives.md) |\n| Compile Class | Compile multiple classes into one hashed class | [transformer-compile-class](references/transformer-compile-class.md) |\n| Attributify JSX | Support valueless attributify in JSX/TSX | [transformer-attributify-jsx](references/transformer-attributify-jsx.md) |\n\n## Integrations\n\n| Topic | Description | Reference |\n|-------|-------------|-----------|\n| Vite Integration | Setting up UnoCSS with Vite and framework-specific tips | [integrations-vite](references/integrations-vite.md) |\n| Nuxt Integration | UnoCSS module for Nuxt applications | [integrations-nuxt](references/integrations-nuxt.md) |","tags":["unocss","skills","antfu","agent-skills"],"capabilities":["skill","source-antfu","skill-unocss","topic-agent-skills","topic-skills"],"categories":["skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/antfu/skills/unocss","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add antfu/skills","source_repo":"https://github.com/antfu/skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 4987 github stars · SKILL.md body (3,857 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T18:52:45.953Z","embedding":null,"createdAt":"2026-04-18T20:25:10.615Z","updatedAt":"2026-05-18T18:52:45.953Z","lastSeenAt":"2026-05-18T18:52:45.953Z","tsv":"'-01':127 '-28':128 '2026':126 '66':122 'advanc':109 'agent':76 'appli':183,393 'applic':453 'atom':4,31 'attribut':308 'attributifi':26,105,303,314,415,419,424 'avail':96 'avoid':103 'base':119 'basic':68,113 'blocklist':208 'breakpoint':174 'build':277 'check':78 'class':114,311,319,402,405,409,413 'code':75,202 'color':173 'combin':159 'common':248,383 'compat':245,258 'compil':401,403,412 'config':134,143 'configur':13,133,139 'convert':359 'core':41,129,142,155,166,179,192,204,216,229 'core-config':141 'core-extract':203 'core-lay':228 'core-rul':154 'core-safelist':215 'core-shortcut':165 'core-them':178 'core-vari':191 'css':5,10,32,47,59,152,221,226,241,244,256,262,290,391 'custom':276 'dark':187 'default':322 'descript':131,236,285,374,429 'design':34,176 'direct':390,392,399 'dynam':148 'easi':330 'engin':6,33 'essenti':273 'exclud':212 'extens':39 'extract':195,198,205 'featur':110,263,282 'file':83,135 'flexibl':37 'font':329,332,336,341 'forc':209 'framework':440 'framework-specif':439 'generat':124,151 'googl':331 'group':304,377,380,388 'hash':408 'hover':186 'html':307,348 'icon':25,288,291,296,300,396 'iconifi':293 'import':71 'includ':210 'inject':227 'instant':3,30 'instead':309 'integr':337,427,432,444,448,455 'integrations-nuxt':454 'integrations-vit':443 'jsx':416,425 'jsx/tsx':421 'knowledg':66 'layer':219,222,230 'like':23,185 'main':233 'mini':269,280 'minim':270 'mode':106 'modern':261 'modul':450 'multipl':160,404 'name':350 'nuxt':447,452,456 'one':407 'opinion':45 'option':140 'order':223 'prefix':384 'preflight':220 'preset':22,52,91,232,234,238,246,250,253,259,265,268,271,279,283,287,299,302,313,316,324,327,339,343,352,355,367 'preset-attributifi':312 'preset-icon':298 'preset-mini':278 'preset-rem-to-px':366 'preset-tagifi':351 'preset-typographi':323 'preset-web-font':338 'preset-wind3':249 'preset-wind4':264 'project':86,99 'prose':318 'provid':50 'pure':289 'px':358,363,370 'raw':225 'refer':132,237,286,375,430 'references/core-config.md':144 'references/core-extracting.md':206 'references/core-layers.md':231 'references/core-rules.md':157 'references/core-safelist.md':218 'references/core-shortcuts.md':168 'references/core-theme.md':181 'references/core-variants.md':194 'references/integrations-nuxt.md':457 'references/integrations-vite.md':446 'references/preset-attributify.md':315 'references/preset-icons.md':301 'references/preset-mini.md':281 'references/preset-rem-to-px.md':371 'references/preset-tagify.md':354 'references/preset-typography.md':326 'references/preset-web-fonts.md':342 'references/preset-wind3.md':252 'references/preset-wind4.md':267 'references/transformer-attributify-jsx.md':426 'references/transformer-compile-class.md':414 'references/transformer-directives.md':400 'references/transformer-variant-group.md':389 'rem':356,360,368 'respons':188 'reus':63 'root':87 'rule':17,92,145,149,156,161,190 'safelist':207,217 'screen':394 'set':297,433 'setup':100,136 'shortcut':18,94,158,167 'shorthand':164,378 'singl':163 'skill':117 'skill-unocss' 'sourc':201 'source-antfu' 'specif':213,441 'static':146 'stick':111 'superset':7,56 'support':417 'syntax':69 'system':171 'tag':349 'tagifi':344,353 'tailwind':9,58,65,240,255 'theme':169,170,180,395 'tip':442 'token':177 'topic':130,235,284,373,428 'topic-agent-skills' 'topic-skills' 'transform':372,386,398,411,423 'transformer-attributify-jsx':422 'transformer-compile-class':410 'transformer-direct':397 'transformer-variant-group':385 'typograph':321 'typographi':317,325 'un':44 'un-opinion':43 'unclear':102 'understand':89 'unit':361 'uno.config':80 'unocss':1,2,14,27,74,121,197,435,449 'unocss.config':82 'usag':70,115 'use':11,104,292,345 'util':16,48,153,199,214,274,305,346,365,381 'v3':242 'v4':257 'valueless':418 'variant':182,193,376,387 'variat':184 'via':51 'vite':431,437,445 'web':328,335,340 'wind':24 'wind3':239,251 'wind4':254,266 'windi':243 'work':20 'write':15,73 'x':123","prices":[{"id":"09336c3a-0b0b-49a9-971d-d580c8c6f674","listingId":"166bc768-001d-4575-a37a-1951b15474be","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"antfu","category":"skills","install_from":"skills.sh"},"createdAt":"2026-04-18T20:25:10.615Z"}],"sources":[{"listingId":"166bc768-001d-4575-a37a-1951b15474be","source":"github","sourceId":"antfu/skills/unocss","sourceUrl":"https://github.com/antfu/skills/tree/main/skills/unocss","isPrimary":false,"firstSeenAt":"2026-04-18T21:53:51.068Z","lastSeenAt":"2026-05-18T18:52:45.953Z"},{"listingId":"166bc768-001d-4575-a37a-1951b15474be","source":"skills_sh","sourceId":"antfu/skills/unocss","sourceUrl":"https://skills.sh/antfu/skills/unocss","isPrimary":true,"firstSeenAt":"2026-04-18T20:25:10.615Z","lastSeenAt":"2026-05-07T22:40:16.430Z"}],"details":{"listingId":"166bc768-001d-4575-a37a-1951b15474be","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"antfu","slug":"unocss","github":{"repo":"antfu/skills","stars":4987,"topics":["agent-skills","skills"],"license":"mit","html_url":"https://github.com/antfu/skills","pushed_at":"2026-05-01T16:46:24Z","description":"Anthony Fu's curated collection of agent skills.","skill_md_sha":"d87365f9efebeeefef8217425b15a8c2a1404712","skill_md_path":"skills/unocss/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/antfu/skills/tree/main/skills/unocss"},"layout":"multi","source":"github","category":"skills","frontmatter":{"name":"unocss","description":"UnoCSS instant atomic CSS engine, superset of Tailwind CSS. Use when configuring UnoCSS, writing utility rules, shortcuts, or working with presets like Wind, Icons, Attributify."},"skills_sh_url":"https://skills.sh/antfu/skills/unocss"},"updatedAt":"2026-05-18T18:52:45.953Z"}}