unocss

antfu/skills · Agent Skill

Руководство по двигателю атомарных CSS UnoCSS для правил, сокращений и пресетов, таких как Wind, Icons и Attributify.

Обзор

Автор	antfuСообщество
Репозиторий	antfu/skills ↗
Папка скилла	`unocss`
Звёзды	6 011
Форки	338
Файлы	26
Лицензия	MIT
Обновлён	23 октября 2026 г.
Ссылки	Исходник скилла ↗ · Репозиторий ↗

Проверка Mozgi

Что мы нашли в файлах скилла. Подробности — по подписке.

Безопасность

низкий риск · явных рисков не найдено — полный отчёт покажет детали

Совместимость

только инструкции — подходит большинству агентов

Похожие скиллы

найдено 139 похожих скиллов

Ещё в подписке

Установка

Скилл — это папка с файлом SKILL.md. Выберите своего агента и скопируйте команды в терминал (macOS, Linux или Git Bash на Windows) в корне проекта.

Скопируйте промпт и вставьте в Claude, Codex или другого ассистента: он сам проверит скилл и подключит его.

Установи мне скилл «unocss» с mozgi.io (https://mozgi.io/skills/antfu-unocss/).

1. Скачай архив: https://mozgi.io/skills/antfu-unocss/download
   Если не скачивается — возьми папку скилла из исходника: https://github.com/antfu/skills/tree/main/skills/unocss
2. Прочитай SKILL.md и остальные файлы. Проверь, что скилл безопасен: нет скрытых команд, отправки данных наружу или скриптов, которые делают не то, что описано. Если что-то подозрительно — остановись и скажи мне.
3. Положи папку «unocss» в папку скиллов своего агента: .claude/skills/ для Claude Code, .agents/skills/ для Codex, .cursor/skills/ для Cursor, .gemini/skills/ для Gemini CLI. В проекте — внутри проекта, иначе в домашней папке (~/.claude/skills/ и т. п.).
4. Убедись, что получилось <папка скиллов>/unocss/SKILL.md.
5. Коротко расскажи, что умеет этот скилл, и предложи попробовать его на моей задаче.

Если какой-то шаг не можешь сделать сам — подскажи, что нажать или ввести.

git clone --depth 1 --branch main https://github.com/antfu/skills.git /tmp/skills
mkdir -p .claude/skills
cp -r /tmp/skills/skills/unocss .claude/skills/unocss

Перезапустите Claude Code — скилл появится в списке, вызвать вручную: /unocss. Для всех проектов сразу — папка ~/.claude/skills.

git clone --depth 1 --branch main https://github.com/antfu/skills.git /tmp/skills
mkdir -p .agents/skills
cp -r /tmp/skills/skills/unocss .agents/skills/unocss

Codex ищет скиллы в .agents/skills от текущей папки до корня репозитория; вызвать вручную — /skills или $unocss. Для всех проектов — ~/.agents/skills.

git clone --depth 1 --branch main https://github.com/antfu/skills.git /tmp/skills
mkdir -p .cursor/skills
cp -r /tmp/skills/skills/unocss .cursor/skills/unocss

Cursor подхватит скилл при запуске; вызвать вручную — «/» в чате агента. Cursor также читает .claude/skills и .agents/skills. Для всех проектов — ~/.cursor/skills.

git clone --depth 1 --branch main https://github.com/antfu/skills.git /tmp/skills
mkdir -p .gemini/skills
cp -r /tmp/skills/skills/unocss .gemini/skills/unocss

Gemini CLI сам предложит включить скилл, когда задача подходит, — вы подтверждаете. Для всех проектов — ~/.gemini/skills.

Файлы скилла

26 файлов Скачать ZIP

Просмотрите SKILL.md и сопутствующие файлы перед установкой. Клик по файлу — предпросмотр.

Содержимое SKILL.md

Оригинальный текст автора · только чтение

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 v66.10.5, generated at 2026-09-25.

Core

| 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 ↗ |

| Processors | Transform generated CSS layers (incl. Lightning CSS) | core-processors ↗ |

Presets

Main Presets

| 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 ↗ |

Feature Presets

| 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 ↗ |

Transformers

| 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 ↗ |

Integrations

| 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 ↗ |

Вопросы и ответы

Что делает скилл unocss?

Руководство по двигателю атомарных CSS UnoCSS для правил, сокращений и пресетов, таких как Wind, Icons и Attributify.

Как установить unocss?

Откройте блок «Установка» на этой странице и выберите своего агента — Claude Code, Codex, Cursor или Gemini CLI: там готовые команды, которые копируют папку скилла в нужное место. Либо скопируйте промпт из вкладки «Через ассистента» — ассистент сам проверит и подключит скилл.

С какими нейросетями работает unocss?

Скиллы — это обычные инструкции в Markdown (формат Agent Skills), поэтому unocss подходит любому агенту, который читает SKILL.md: Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode и другие. Модель загружает инструкции только когда задача подходит под описание скилла.

Скилл unocss бесплатный?

Скилл опубликован автором antfu в открытом доступе под лицензией MIT. Сам скилл ничего не стоит — вы платите только своему провайдеру нейросети за использованные токены.

Безопасно ли устанавливать скиллы?

Скилл — это инструкции, которые агент будет выполнять, поэтому перед установкой прочитайте SKILL.md и сопутствующие файлы. Скрипты из папки скилла запускаются только если их запустит агент — следите за тем, что он делает, и не давайте лишних прав.

Чем скилл отличается от MCP-сервера или плагина?

MCP-сервер и плагин дают модели новые инструменты — код, который выполняется и возвращает результат. Скилл даёт знания и порядок действий: как подходить к задаче, какие шаги делать и как выглядит хороший результат. Ему не нужен сервер или ключ API.