# Unocss

> UnoCSS is an instant, on-demand atomic CSS engine with the best performance. It provides fully...

- Skill: `newkub/unocss` (Agent Skill, multi-file: 77 files)
- Install (CLI): `npx skillmds@latest add newkub/unocss`
- Raw SKILL.md: https://api.skillmd.com/api/skills/newkub/unocss/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: newkub (https://skillmd.com/u/newkub)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/newkub/unocss

---

## Goal

ใช้ UnoCSS สำหรับ atomic CSS engine ที่ generate ทันที ด้วย performance สูงและ fully customizable


## Scope

ใช้สำหรับ atomic CSS styling ด้วย UnoCSS engine


## Execute

- ติดตั้ง UnoCSS ด้วย `bun add -D unocss`
- อ่าน `guide/installation.md` สำหรับการติดตั้งและ setup
- อ่าน `guide/quick-start.md` สำหรับเริ่มต้นใช้งาน
- อ่าน `guide/key-concept.md` สำหรับแนวคิดหลัก
- อ่าน `guide/how-it-works.md` สำหรับวิธีการทำงาน
- อ่าน `key-concepts/` สำหรับแนวคิดเฉพาะทาง
  - `presets.md` - Preset system และ custom presets
  - `rules.md` - Atomic CSS rules
  - `shortcuts.md` - Utility shortcuts
  - `theme-system.md` - Theme และ design tokens
  - `transformers.md` - CSS transformers
  - `extractors.md` - Utility extraction
  - `layers.md` - CSS layer system
  - `safelist.md` - Utilities safelist
  - `compilation-mode.md` - Class compilation
  - `variants.md` - Pseudo-class variants
- อ่าน `guide/configuration.md` สำหรับการตั้งค่า
- อ่าน `references/configuration.md` สำหรับ configuration reference
- ตั้งค่า UnoCSS configuration
- อ่าน `guide/features.md` สำหรับ features ที่มี
- อ่าน `guide/patterns.md` สำหรับ patterns ทั่วไป
- ใช้ atomic CSS utilities
- อ่าน `guide/integration.md` สำหรับ preset integration
- ใช้ presets สำหรับ extend functionality
  - `guide/preset-wind4.md` - Tailwind v4 compatibility
  - `guide/preset-tagify.md` - Tag-based CSS
  - `guide/preset-rem-to-px.md` - Rem to px conversion
  - `guide/preset-typography.md` - Typography presets
  - `guide/preset-web-fonts.md` - Web fonts integration
- ใช้ shortcuts สำหรับ custom utilities
- อ่าน `guide/best-practices.md` สำหรับ best practices
- ใช้ icon system ที่มี 100+ collections
- อ่าน `guide/architecture.md` สำหรับ system architecture
- อ่าน `guide/structure.md` สำหรับ project structure
- อ่าน `guide/troubleshooting.md` สำหรับปัญหาทั่วไป
- อ่าน `guide/transformer-attributify-jsx.md` สำหรับ JSX attributify mode
- อ่าน `guide/inspector.md` สำหรับ CSS generation inspector
- อ่าน `guide/playground.md` สำหรับ online playground


## Rules

- ใช้ `bun add -D unocss` สำหรับ installation
- ใช้ backticks สำหรับ utilities, commands
- ใช้ code blocks สำหรับ examples
- ใช้ ansi markdown diagrams สำหรับ flow และ architecture
- ใช้ atomic CSS utilities
- ใช้ presets สำหรับ extend functionality
- ใช้ shortcuts สำหรับ custom utilities
- ใช้ icon system อย่างเหมาะสม


## Expected Outcome

- CSS ที่ generate ทันที
- Performance สูงด้วย on-demand engine
- Utilities ที่ fully customizable
- Icon system ที่ comprehensive