How does this skill handle Tailwind CSS syntax?

Since UnoCSS is a superset of Tailwind, this skill can utilize your existing Tailwind knowledge while offering additional flexibility and custom presets.

What is Attributify mode?

Attributify mode allows you to group CSS utilities into HTML attributes instead of long class strings, making your markup cleaner and more readable.

Does it support icons?

Yes, it provides full support for Preset Icons, allowing you to use any Iconify icon set as pure CSS classes.

How does the skill know my project settings?

Claude is instructed to check for uno.config.js or unocss.config.js files to align its suggestions with your specific project rules and shortcuts.

Can I use this with Vite or Nuxt?

Yes, the skill includes specific documentation and best practices for integrating UnoCSS with both Vite and Nuxt environments.

UnoCSS Framework Specialist

Name: UnoCSS Framework Specialist
Author: pleaseai

bypleaseai

•

设计工具

Optimizes frontend development by implementing high-performance atomic CSS utilities and presets using the UnoCSS engine.

This skill equips Claude with deep technical knowledge of UnoCSS, the instant atomic CSS engine that acts as a flexible and extensible superset of Tailwind CSS. It enables Claude to configure custom rules, shortcuts, and themes while leveraging powerful presets like Wind, Icons, and Attributify. By understanding project-specific configurations found in config files, this skill ensures precise application of CSS utilities, transformer directives like @apply, and seamless integration with modern build tools like Vite and Nuxt.

主要功能

01Apply advanced CSS transformers like variant grouping and attributify mode

02Implement Tailwind-compatible styling with Preset Wind

03Manage design tokens and theming for responsive, dark-mode ready interfaces

04Utilize pure CSS icons via Iconify integration

053 GitHub stars

06Configure custom atomic CSS rules and dynamic shortcuts

使用场景

01Creating custom design systems with reusable CSS shortcuts and theme tokens

02Migrating Tailwind CSS projects to a more flexible, preset-based architecture

03Building high-performance web applications with minimal CSS bundle sizes

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add pleaseai/claude-code-plugins unocss

For use in Claude.ai and ChatGPT

Download Skill