Communitygithub.com

antfu/unocss

UnoCSS 즉시 적용 원자 CSS 엔진, Tailwind CSS의 상위 집합입니다. UnoCSS 구성, 유틸리티 규칙 작성, 단축키(shortcuts) 또는 Wind, Icons, Attributify와 같은 프리셋 작업 시 사용하세요.

unocss란 무엇인가요?

이 스킬은 UnoCSS, 즉 Tailwind CSS의 상위 집합이자 초고속 원자(atomic) CSS 엔진을 구성하고 사용하는 방법을 설명합니다. UnoCSS는 런타임 시점에 유틸리티 클래스를 동적으로 생성하여 기존 Tailwind CSS보다 훨씬 빠른 성능과 작은 번들 크기를 제공합니다. 이 스킬은 규칙(rules), 단축키(shortcuts), 프리셋(presets, 예: Wind, Icons, Attributify)과 같은 주요 개념을 다루며, 사용자 정의 설정부터 기존 설정 확장까지 폭넓게 지원합니다. 주로 웹 프론트엔드 프로젝트에서 사용되며, VS Code, Cursor, 웹팩, Vite 등 다양한 개발 환경과 호환됩니다. 이 지침을 따르면 개발자는 UnoCSS의 즉시 적용 가능한 CSS 생성 방식을 활용하여 생산성을 극대화하고 유지보수성을 높일 수 있습니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/antfu/skills/tree/main/skills/unocss

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

unocss은(는) 무엇을 하나요?

UnoCSS 즉시 적용 원자 CSS 엔진, Tailwind CSS의 상위 집합입니다. UnoCSS 구성, 유틸리티 규칙 작성, 단축키(shortcuts) 또는 Wind, Icons, Attributify와 같은 프리셋 작업 시 사용하세요.

Individual skills in this repo

This repo contains 16 individual skills — each has its own dedicated page.

antfu/antfu

Anthony Fu's opinionated tooling and conventions for JavaScript/TypeScript projects. Use when setting up new projects, configuring ESLint/Prettier alternatives, monorepos, library publishing, or when the user mentions Anthony Fu's preferences.

antfu/nuxt

Nuxt full-stack Vue framework with SSR, auto-imports, and file-based routing. Use when working with Nuxt apps, server routes, useFetch, middleware, or hybrid rendering.

antfu/pinia

Pinia official Vue state management library, type-safe and extensible. Use when defining stores, working with state/getters/actions, or implementing store patterns in Vue apps.

antfu/pnpm

Node.js package manager with strict dependency resolution. Use when running pnpm specific commands, configuring workspaces, or managing dependencies with catalogs, patches, or overrides.

antfu/slidev

Create and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, code walkthroughs, teaching materials, or developer decks.

antfu/tsdown

Bundle TypeScript and JavaScript libraries with blazing-fast speed powered by Rolldown. Use when building libraries, generating type declarations, bundling for multiple formats, or migrating from tsup.

antfu/turborepo

Turborepo monorepo build system guidance. Triggers on: turbo.json, task pipelines, dependsOn, caching, remote cache, the "turbo" CLI, --filter, --affected, CI optimization, environment variables, internal packages, monorepo structure/best practices, and boundaries. Use when user: configures tasks/workflows/pipelines, creates packages, sets up monorepo, shares code between apps, runs changed/affected packages, debugs cache, or has apps/packages directories.

antfu/vite

Vite build tool configuration, plugin API, SSR, and Vite 8 Rolldown migration. Use when working with Vite projects, vite.config.ts, Vite plugins, or building libraries/SSR apps with Vite.

antfu/vitepress

VitePress static site generator powered by Vite and Vue. Use when building documentation sites, configuring themes, or writing Markdown with Vue components.

antfu/vitest

Vitest fast unit testing framework powered by Vite with Jest-compatible API. Use when writing tests, mocking, configuring coverage, or working with test filtering and fixtures.

antfu/vue

Vue 3 Composition API, script setup macros, reactivity system, and built-in components. Use when writing Vue SFCs, defineProps/defineEmits/defineModel, watchers, or using Transition/Teleport/Suspense/KeepAlive.

antfu/vue-best-practices

MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API.

antfu/vue-router-best-practices

Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.

antfu/vue-testing-best-practices

Use for Vue.js testing. Covers Vitest, Vue Test Utils, component testing, mocking, testing patterns, and Playwright for E2E testing.

antfu/vueuse-functions

Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features.

antfu/web-design-guidelines

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

관련 스킬