unocss

antfu/skills · Agent Skill

UnoCSS 的原子 CSS 引擎指南，涵蓋規則、縮寫和預設設定，如 Wind、Icons 和 Attributify。

前往安裝 ↓

總覽

發布者antfu社群
儲存庫antfu/skills ↗
技能資料夾unocss
星6,011
分支338
附帶檔案26
授權MIT
最近更新2026年10月23日
連結技能原始碼 ↗ · 儲存庫 ↗

Mozgi 檢查

我們在技能檔案中發現的內容。詳細資訊需訂閱。

安全性
低風險 · 未發現明顯風險 — 完整報告會顯示細節
相容性
僅含說明 — 適用於多數代理
相似技能
找到 139 個相似技能
訂閱另含

安裝

技能就是一個含 SKILL.md 的資料夾。選擇你的代理，在專案根目錄的終端機（macOS、Linux 或 Windows 的 Git Bash）執行指令。

把提示貼到 Claude、Codex 或其他助理：它會自行檢查並安裝技能。

Install the “unocss” skill from mozgi.io (https://mozgi.io/skills/antfu-unocss/) for me.

1. Download the archive: https://mozgi.io/skills/antfu-unocss/download
   If it fails, take the skill folder from the source: https://github.com/antfu/skills/tree/main/skills/unocss
2. Read SKILL.md and the other files. Check the skill is safe: no hidden commands, no sending data elsewhere, no scripts doing something other than described. If anything looks suspicious, stop and tell me.
3. Put the “unocss” folder into your agent's skills folder: .claude/skills/ for Claude Code, .agents/skills/ for Codex, .cursor/skills/ for Cursor, .gemini/skills/ for Gemini CLI. Inside the project if we are in one, otherwise in the home folder (~/.claude/skills/ etc.).
4. Make sure <skills folder>/unocss/SKILL.md exists.
5. Briefly tell me what this skill does and offer to try it on my task.

If you cannot do a step yourself, tell me what to click or type.

技能檔案

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 技能有什麼用途？

UnoCSS 的原子 CSS 引擎指南，涵蓋規則、縮寫和預設設定，如 Wind、Icons 和 Attributify。

如何安裝 unocss？

打開本頁的「安裝」區塊並選擇你的代理 — Claude Code、Codex、Cursor 或 Gemini CLI：那裡有把技能資料夾複製到正確位置的現成指令。也可以複製「透過助理」分頁中的提示，讓助理自行檢查並安裝技能。

unocss 適用哪些 AI 模型？

技能是純 Markdown 指示（Agent Skills 格式），因此 unocss 適用任何讀取 SKILL.md 的代理：Claude Code、Codex、Cursor、Gemini CLI、GitHub Copilot、OpenCode 等。只有在任務符合技能描述時，模型才會載入指示。

unocss 是免費的嗎？

此技能由 antfu 公開發布，採用 MIT 授權。技能本身免費 — 你只需向 AI 供應商支付實際使用的 token 費用。

安裝技能安全嗎？

技能是代理會遵循的指示，安裝前請閱讀 SKILL.md 及相關檔案。技能資料夾中的腳本只有在代理執行時才會運行 — 留意它的動作，不要授予多餘權限。

技能和 MCP 伺服器或外掛有何不同？

MCP 伺服器或外掛為模型提供新工具 — 會執行並回傳結果的程式碼。技能提供的是知識與流程：如何處理任務、要遵循哪些步驟、好的成果長什麼樣子。它不需要伺服器或 API 金鑰。

相關技能

所有技能 →
nitro Nitro 是一個與框架無關的伺服器工具（供 Nuxt 使用），可用於在任何地方建構和部署網頁伺服器。使用 Nitro 時，需與 nitro.config、伺服器路由/事件處理器、路由規則、快取、儲存、工作、網頁套接字或 Node/Bun/Deno/Cloudflare/Vercel 部署等功能進行合作。 antfu6k vue Vue 3 Composition API 與 SFC、script setup 宏及內建元件的反應性建議 antfu6k antfu-design 按照antfu的設計風格，擴充套件了UnoCSS-first的類別語義令牌，具有雙重亮暗模式的工具和開發者介面，另外還有設計的打磨、抗滑和微互動的登陸頁和產品表面，適用於使用UnoCSS建構或重建任何介面 antfu84 prototype 建立單次原型以快速回答設計問題或邏輯問題。 mattpocock304k design-philosophy 應用VS Code設計理念，使用價值觀、原則和行動而非畫素來證明UI的合理性。有助於視覺元素的設計、審查和提供反饋。 microsoft192k canvas-design 創造原創的視覺設計和藝術作品於數位畫布上，使用設計哲學，關注形狀、空間和顏色。 anthropics184k