Unocss
Configure UnoCSS in a solo builder’s frontend repo with presets, shortcuts, theme tokens, and bundler integration.
Overview
unocss is an agent skill for the Build phase that configures UnoCSS via uno.config.ts—rules, presets, transformers, theme, and bundler integrations—for atomic utility CSS in frontend projects.
Install
npx skills add https://github.com/antfu/skills --skill unocssWhat is this skill?
- Scaffolds uno.config.ts with defineConfig and presets (Wind3, Attributify, Icons, Typography, WebFonts)
- Documents rules, shortcuts, safelist, blocklist, variants, layers, theme, preflights, and content pipeline options
- Covers transformers: directives, variant groups, compile/class, and attributify JSX mode
- Lists integrations: @unocss/vite, webpack, postcss, CLI, Astro, Nuxt, SvelteKit, and runtime CDN
- Explains config precedence, autocomplete exclusions, and warn/layer ordering for custom utilities
- Documents 10+ core config sections including rules, shortcuts, safelist, variants, presets, transformers, layers, theme,
- Lists 6+ first-class integrations (Vite, Webpack, PostCSS, CLI, Astro, Nuxt, SvelteKit, plus runtime CDN)
Adoption & trust: 12k installs on skills.sh; 5.2k GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You want fast, Tailwind-like utilities but lack a clear UnoCSS config file, preset stack, and correct Vite or PostCSS hookup.
Who is it for?
Solo builders shipping React, Vue, Svelte, or Astro apps who prefer configurable atomic CSS and already use Vite or a supported bundler.
Skip if: Teams that want zero build-step CSS, only plain CSS modules with no utility framework, or backend-only repos with no frontend pipeline.
When should I use this skill?
When configuring UnoCSS, creating or editing uno.config.ts, or integrating UnoCSS with Vite, Webpack, PostCSS, or framework modules.
What do I get? / Deliverables
You get a documented uno.config.ts plus the right integration plugin so utilities generate reliably and you can extend theme and shortcuts without fighting precedence or content scanning.
- uno.config.ts (or unocss.config.*) with presets, theme, and optional shortcuts
- Bundler or PostCSS integration entry for @unocss/vite, webpack, or postcss plugin
Recommended Skills
Journey fit
UnoCSS is applied while building the product UI—wiring atomic CSS generation, presets, and build-tool plugins before shipping styled pages. Canonical shelf is frontend because the skill covers uno.config.ts, utility rules, and Vite/Webpack/PostCSS integrations rather than backend or ops work.
How it compares
Use this skill for UnoCSS config and integrations—not as a substitute for component design systems or full UI kit documentation.
Common Questions / FAQ
Who is unocss for?
It is for solo and indie builders and small teams wiring UnoCSS into a web frontend—especially when using TypeScript config, Wind3-compatible utilities, and Vite or PostCSS.
When should I use unocss?
Use it during Build while setting up or refactoring styling: creating uno.config.ts, adding presets and transformers, fixing missing classes via safelist/content pipeline, or choosing between build-time and runtime UnoCSS.
Is unocss safe to install?
Treat it like any third-party agent skill: review the Security Audits panel on this Prism page and inspect the skill package in your repo before granting shell or network access to your project.
SKILL.md
READMESKILL.md - Unocss
# Generation Info - **Source:** `sources/unocss` - **Git SHA:** `2f7f267d0cc0c43d44357208aabb35b049359a08` - **Generated:** 2026-01-28 --- name: unocss-configuration description: Config file setup and all configuration options for UnoCSS --- # UnoCSS Configuration UnoCSS is configured via a dedicated config file in your project root. ## Config File **Recommended:** Use a dedicated `uno.config.ts` file for best IDE support and HMR. ```ts // uno.config.ts import { defineConfig, presetAttributify, presetIcons, presetTypography, presetWebFonts, presetWind3, transformerDirectives, transformerVariantGroup } from 'unocss' export default defineConfig({ shortcuts: [ // ... ], theme: { colors: { // ... } }, presets: [ presetWind3(), presetAttributify(), presetIcons(), presetTypography(), presetWebFonts({ fonts: { // ... }, }), ], transformers: [ transformerDirectives(), transformerVariantGroup(), ], }) ``` UnoCSS automatically looks for `uno.config.{js,ts,mjs,mts}` or `unocss.config.{js,ts,mjs,mts}` in the project root. ## Key Configuration Options ### rules Define CSS utility rules. Later entries have higher priority. ```ts rules: [ ['m-1', { margin: '0.25rem' }], [/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })], ] ``` ### shortcuts Combine multiple rules into a single shorthand. ```ts shortcuts: { 'btn': 'py-2 px-4 font-semibold rounded-lg shadow-md', } ``` ### theme Theme object for design tokens shared between rules. ```ts theme: { colors: { brand: '#942192', }, breakpoints: { sm: '640px', md: '768px', }, } ``` ### presets Predefined configurations bundling rules, variants, and themes. ```ts presets: [ presetWind3(), presetIcons(), ] ``` ### transformers Transform source code to support special syntax. ```ts transformers: [ transformerDirectives(), transformerVariantGroup(), ] ``` ### variants Preprocess selectors with ability to rewrite CSS output. ### extractors Handle source files and extract utility class names. ### preflights Inject raw CSS globally. ### layers Control the order of CSS layers. Default is `0`. ```ts layers: { 'components': -1, 'default': 1, 'utilities': 2, } ``` ### safelist Utilities that are always included in output. ```ts safelist: ['p-1', 'p-2', 'p-3'] ``` ### blocklist Utilities that are always excluded. ```ts blocklist: ['p-1', /^p-[2-4]$/] ``` ### content Configure where to extract utilities from. ```ts content: { pipeline: { include: [/\.(vue|svelte|tsx|html)($|\?)/], }, filesystem: ['src/**/*.php'], } ``` ### separators Variant separator characters. Default: `[':', '-']` ### outputToCssLayers Output UnoCSS layers as CSS Cascade Layers. ```ts outputToCssLayers: true ``` ## Specifying Config File Location ```ts // vite.config.ts import UnoCSS from 'unocss/vite' export default defineConfig({ plugins: [ UnoCSS({ configFile: '../my-uno.config.ts', }), ], }) ``` <!-- Source references: - https://unocss.dev/guide/config-file - https://unocss.dev/config/ --> --- name: unocss-extracting description: How UnoCSS extracts utilities from source code --- # Extracting UnoCSS searches for utility usages in your codebase and generates CSS on-demand. ## Content Sources ### Pipeline Extraction (Vite/Webpack) Most efficient - extracts from build tool pipeline. **Default file types:** `.jsx`, `.tsx`, `.vue`, `.md`, `.html`, `.svelte`, `.astro`, `.marko` **Not included by default:** `.js`, `.ts` ```ts export default defineConfig({ content: { pipeline: { include: [ /\.(vue|svelte|[jt]sx|mdx?|astro|html)($|\?)/, 'src/**/*.{js,ts}', // Add js/ts ], }, }, }) ``` ### Filesystem Extraction For files not in build pipeline: ```ts export default defineConfig({ content: { filesystem: [ 'src/**/*.php', 'public/*.html', ], }, }) ``` ### Inline Text