Generate atomic CSS utilities from class-based presets in UnoCSS projects.
npx skills add https://github.com/boomNDS/new_portfolio --skill unocss-boomnds
Please help me install this Agent Skill. Skill: unocss Source: https://github.com/boomNDS/new_portfolio/tree/main/.agents/skills/unocss Command: npx skills add https://github.com/boomNDS/new_portfolio --skill unocss-boomnds
UnoCSS solves the challenge of writing consistent, scalable CSS by generating atomic utilities from presets. It is un-opinionated, providing CSS through configurable presets (Wind, Icons, Attributify). It is a superset of Tailwind CSS, so you can reuse Tailwind concepts with a different, on-demand approach.
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.
The skill is based on UnoCSS 66.x, generated at 2026-01-28.
Install UnoCSS in your project and start writing simple class-based utilities to style your UI.
High-intent search queries and answers about installing and using this skill.
To generate atomic CSS utilities, configure UnoCSS in your Vite or Nuxt project using a uno.config file. The engine scans your HTML and automatically generates on-demand atomic CSS rules from presets like Wind, Icons, and Attributify.
UnoCSS is an un-opinionated, on-demand atomic CSS engine that acts as a superset of Tailwind CSS. It allows you to reuse Tailwind concepts but generates utilities dynamically through configurable presets rather than shipping a static stylesheet.
UnoCSS supports attributify mode through its presets. Before using it, check your project root for a uno.config file to verify if the Attributify preset is enabled. If your setup is unclear, stick to basic class usage to avoid styling conflicts.
You can configure custom rules, variants, and theming by defining them inside your uno.config file. This allows you to extend core presets like Wind or Icons and create predictable, context-loaded utility classes tailored to your project.
You should avoid using advanced UnoCSS features like attributify mode if your project setup is unclear. Always check for an existing uno.config file first to understand available presets, and rely on basic class-based utilities to ensure safe implementation.
Yes, UnoCSS is designed to quickly apply consistent design tokens and responsive utilities across a project. By leveraging configurable presets and theming in your configuration file, you ensure scalable and predictable styling throughout your application.
uni-helperGenerate atomic CSS utilities on demand via UnoCSS presets and configuration.
belos-streetGenerate on-demand atomic CSS for used utility classes in frontend projects.
bjorkgardManages shadcn/ui components including adding, searching, debugging, styling, and composing UI elements within a project context.
o2b3kStandardize Tailwind CSS utility classes and v4 syntax in HTML components.
