Configure UnoCSS and style interfaces with utility classes, small reusable styling instructions. Use project settings to define custom rules, shortcuts, themes, and presets for features such as icons, typography, and attribute-based styling.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
UnoCSS instant atomic CSS engine, superset of Tailwind CSS. Use when configuring UnoCSS, writing utility rules, shortcuts, or working with presets like Wind, Icons, Attributify.
설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
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.
| 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 |
| 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 |
아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
Set up JavaScript and TypeScript projects using Anthony Fu’s conventions for code organization, development tools, and package publishing. Establish shared checks for formatting, types, unused code, and tests before committing changes.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Create a GitHub pull request from the current branch with a structured title, a clear explanation of behavior changes, and recorded check results. For UI changes, attach before-and-after screenshots so reviewers can assess the visual differences.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Build and configure web servers with Nitro, including request handlers, caching, storage, and scheduled tasks. The skill also guides deployment to supported runtimes and platforms, plus migration from Nitro v2 to v3.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Develop Vue web applications with Nuxt, covering pages, data fetching, shared state, and server API routes. Configure rendering on the server or in the browser, and prepare deployment settings for supported platforms.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Organize shared data and update logic in Vue apps using Pinia stores, containers for application state. The skill guides store definitions, reactive data access, communication between stores, testing, and integration with Nuxt and server-side rendering.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Manage Node.js dependencies with pnpm, from installing packages to coordinating multiple projects in one workspace. The skill covers shared version settings, third-party package patches, dependency overrides, and consistent installation procedures for automated build environments.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.