UnoCSS, el motor de CSS atómico instantáneo, superconjunto de Tailwind CSS. Úsalo para configurar UnoCSS, escribir reglas de utilidades, shortcuts o presets como Wind, Icons, Attributify.
Reemplaza a: Tailwind CSS (para sintaxis básica reutilizable)
en todo el repo
0–100, la ruta de este skill
último commit aquí
últimos 90 días
44 tok en reposo
64 KB
Funciona con cualquier agente que lea SKILL.md
npx -y skills add antfu/skills --skill unocss --agent claude-codeSe instala solo en este repositorio.
Di cualquiera de estas frases y el agente debería cargar este skill.
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.
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.
| Topic | Description | Reference |
|---|---|---|
| Configuration | Config file setup and all configuration options | core-config |
| Rules | Static and dynamic rules for generating CSS utilities | core-rules |
| Shortcuts | Combine multiple rules into single shorthands | core-shortcuts |
| Theme | Theming system for colors, breakpoints, and design tokens | core-theme |
| Variants | Apply variations like hover:, dark:, responsive to rules | core-variants |
| Extracting | How UnoCSS extracts utilities from source code | core-extracting |
| Safelist & Blocklist | Force include or exclude specific utilities | core-safelist |
| Layers & Preflights | CSS layer ordering and raw CSS injection | core-layers |
| Topic | Description | Reference |
|---|---|---|
| Preset Wind3 | Tailwind CSS v3 / Windi CSS compatible preset (most common) | preset-wind3 |
| Preset Wind4 | Tailwind CSS v4 compatible preset with modern CSS features | preset-wind4 |
| Preset Mini | Minimal preset with essential utilities for custom builds | preset-mini |
| Topic | Description | Reference |
|---|---|---|
| Preset Icons | Pure CSS icons using Iconify with any icon set | preset-icons |
| Preset Attributify | Group utilities in HTML attributes instead of class | preset-attributify |
| Preset Typography | Prose classes for typographic defaults | preset-typography |
| Preset Web Fonts | Easy Google Fonts and other web fonts integration | preset-web-fonts |
| Preset Tagify | Use utilities as HTML tag names | preset-tagify |
| Preset Rem to Px | Convert rem units to px for utilities | preset-rem-to-px |
| Topic | Description | Reference |
|---|---|---|
| Variant Group | Shorthand for grouping utilities with common prefixes | transformer-variant-group |
| Directives | CSS directives: @apply, @screen, theme(), icon() | transformer-directives |
| Compile Class | Compile multiple classes into one hashed class | transformer-compile-class |
| Attributify JSX | Support valueless attributify in JSX/TSX | transformer-attributify-jsx |
| Topic | Description | Reference |
|---|---|---|
| Vite Integration | Setting up UnoCSS with Vite and framework-specific tips | integrations-vite |
| Nuxt Integration | UnoCSS module for Nuxt applications | integrations-nuxt |
Reproducido de antfu/skills bajo licencia MIT. Leer esta página en markdown.
25 archivos en el paquete. Solo se lee SKILL.md al activarse — las referencias se cargan si el skill decide que las necesita.
Revisar si existe un archivo uno.config.* o unocss.config.* en el proyecto antes de usar funciones avanzadas.
Este repo incluye 19 skills. Si instalas uno, normalmente ya tienes los demás. Ver el pack skills entero y su comando de instalación
Herramientas y convenciones de Anthony Fu para proyectos JavaScript/TypeScript: configuración de ESLint, monorepos y publicación de librerías.
Convenciones de diseño estilo antfu: tokens semánticos basados en clases con UnoCSS para light/dark, más reglas anti-slop y de micro-interacción para devtools y landing pages.
Nitro es el toolkit de servidor agnóstico de framework (usado por Nuxt) para construir y desplegar servidores web en cualquier lugar: routing, config, caching, tasks, websockets y despliegue en Node/Bun/Deno/Cloudflare/Vercel.
Framework full-stack Vue con SSR, auto-imports y routing basado en archivos. Úsalo para apps Nuxt, server routes, useFetch, middleware o hybrid rendering.
Gestor de paquetes de Node.js con resolución estricta de dependencias. Úsalo para comandos de pnpm, pnpm-workspace.yaml, catalogs, patches, overrides, config dependencies o el global virtual store.
Crea y presenta slidedecks web para desarrolladores con Slidev, usando Markdown, componentes Vue, resaltado de código, animaciones y funciones interactivas.
Convenciones de diseño estilo antfu: tokens semánticos basados en clases con UnoCSS para light/dark, más reglas anti-slop y de micro-interacción para devtools y landing pages.
Revisa código de UI para verificar el cumplimiento de las Web Interface Guidelines de accesibilidad y buenas prácticas.
Guía para diseñar APIs e interfaces estables. Úsalo al diseñar APIs, límites entre módulos, endpoints REST o GraphQL, o contratos de tipos entre frontend y backend.
