Configure UnoCSS atomic CSS engine with presets, rules, shortcuts, and transformers.
npx skills add https://github.com/jeje-it/template-projet --skill unocss-jeje-it
Please help me install this Agent Skill. Skill: unocss Source: https://github.com/jeje-it/template-projet/tree/main/.agents/skills/unocss Command: npx skills add https://github.com/jeje-it/template-projet --skill unocss-jeje-it
uno.config.ts with rules, shortcuts, theme tokens, variants, safelist/blocklist, layers, and preflights. - Preset Selection: Covers Wind3 (Tailwind v3 compatible), Wind4 (Tailwind v4 compatible), Mini, Icons, Attributify, Typography, Web Fonts, Tagify, and Rem-to-Px presets. - Transformers & Integrations: Explains variant groups, directives (@apply, @screen, theme(), icon()), compile-class, attributify-jsx, plus Vite and Nuxt integration setups. - Use Case: When migrating a Vue 3 + Vite project from Tailwind to UnoCSS, the assistant can check the existing config, enable presetWind3 with dark mode, add presetIcons for Iconify icons, and configure extraction for dynamic classes. ## Quick Start Ask the assistant to review the project's uno.config.ts and add presetWind3 with class-based dark mode and presetIcons configured for the mdi icon collection.High-intent search queries and answers about installing and using this skill.
Install unocss, add the UnoCSS plugin from 'unocss/vite' to vite.config.ts, create an uno.config.ts with defineConfig and your presets, then import 'virtual:uno.css' in your entry file. The config file is auto-discovered from the project root.
preset-wind3 is Tailwind CSS v3 compatible and stable for legacy browser support. preset-wind4 targets Tailwind v4 conventions with a built-in reset, oklch colors, theme CSS variables, and @property rules, but uses different theme keys like font, text, and breakpoint.
UnoCSS extracts utilities at build time, so template-literal classes like `p-${size}` are not detected. Use a safelist to pre-generate known values, map classes statically in an object, or use @unocss/runtime for true runtime generation.
Yes, preset-wind3 provides Tailwind CSS v3 compatible utilities including responsive variants, dark mode, and pseudo-classes. Some syntax differs, such as lt-sm: instead of <sm: and underscores instead of commas inside bracket values.
Install @unocss/preset-icons plus an Iconify collection such as @iconify-json/mdi, then enable presetIcons() in your config. Use classes like i-mdi-alarm or i-ph:anchor-simple-thin, and combine with color or size utilities.
Only use attributify mode when presetAttributify() is explicitly enabled in the project's uno.config file. In JSX frameworks you also need transformerAttributifyJsx, since valueless attributes compile to foo={true} and break extraction.
otoshekConfigure Tailwind CSS and shadcn/ui for React frontends with Django backends.
nextlevelbuilderBuild responsive UI with shadcn/ui components and Tailwind CSS styling.
Avi977Audit web UI for accessibility and design consistency across HTML/CSS/JS projects.
Ahnd6474Style React components with Accelint Design Foundation tokens and CSS modules.