Unocss

What it does

This skill enables AI agents to utilize Unocss, a lightweight and flexible CSS-in-JS engine that allows for rapid prototyping and customization of styles without relying on traditional preprocessors. It's designed to be highly extensible and offers a superset of Tailwind CSS functionality, making it familiar to those with existing Tailwind knowledge. The agent can generate CSS utilities based on project configurations and presets.

When to use it

• When needing to quickly prototype user interfaces or components.
• For projects requiring custom CSS styling beyond standard frameworks.
• If a project already uses Unocss, allowing the agent to contribute to existing styles.
• To leverage Tailwind CSS knowledge for basic syntax usage within an Unocss environment.

Key capabilities

• Atomic CSS Generation: Creates small, reusable CSS utilities.
• Preset Support: Utilizes various presets like preset-wind3 (Tailwind v3 compatible), preset-mini, and others to provide pre-defined utility sets.
• Configuration Awareness: Checks for uno.config.* or unocss.config.* files to understand project-specific configurations, rules, and shortcuts.
• Feature Presets: Supports feature presets like icons, attributify, typography, web fonts, tagify, and rem-to-px conversion.
• Transformer Support: Can leverage transformers for variant grouping, directives, class compilation, and JSX support.

Example prompts

• "Generate a CSS utility to make this button blue with rounded corners."
• "Apply the preset-icons to include icon utilities in my project."
• "Create a style based on the preset-wind3 for a responsive layout."

Tips & gotchas

• Configuration is Key: Always check for existing configuration files (uno.config.*, unocss.config.*) before using Unocss to ensure compatibility with project settings.
• Avoid Advanced Features Initially: If the project setup isn't clear, stick to basic class usage and avoid advanced features like attributify mode.
• Tailwind Knowledge Helpful: Familiarity with Tailwind CSS syntax will be beneficial for understanding and utilizing Unocss.