unocss
Configure UnoCSS With Confidence
UnoCSS projects often fail when generated utilities ignore the active presets and configuration. This skill grounds recommendations in project settings and focused UnoCSS references.
Install with my Agent
Copy this request to your Agent. It includes the canonical Skill page and manifest.
Review the Skillstore skill "unocss" from https://skillstore.io/skills/antfu-unocss.md and its manifest at https://skillstore.io/api/skills/antfu-unocss/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Your Agent should still show its plan and request any confirmation required by the security policy.
Agent-readable resources
Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.
Test it
Using "unocss". Help me add UnoCSS to this Vite project.
Expected outcome:
A setup plan identifies the existing framework, selects a compatible preset, lists required configuration changes, and confirms the stylesheet import location.
Using "unocss". Create reusable button styles from our theme colors.
Expected outcome:
A shortcut strategy maps approved theme colors to button variants, includes focus and disabled states, and avoids utilities unavailable in the project.
Using "unocss". Why are my dynamic utility classes missing?
Expected outcome:
The diagnosis checks extraction boundaries, explains why constructed class names are invisible at build time, and recommends static mappings or a focused safelist.
Security Audit
SafeAll 50 static findings are false positives in documentation examples or ordinary prose. The skill contains no executable scripts, prompt injection, credential access, command execution, or covert network behavior.
Risk Factors
⚙️ External commands (26)
📁 Filesystem access (4)
🌐 Network access (4)
⚡ Contains scripts (2)
Share & cite this report
Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.
Copy report link
https://skillstore.io/skills/antfu-unocss/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown badge
[](https://skillstore.io/skills/antfu-unocss?utm_source=security_passport_badge)HTML badge
<a href="https://skillstore.io/skills/antfu-unocss?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/antfu-unocss/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Embed card
<iframe src="https://skillstore.io/embed/skills/antfu-unocss.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Academic citations (APA · BibTeX · CFF)
APA citation
antfu. (2026). unocss security audit report (audit version 5) [Author version 2026.1.28]. Skillstore. https://skillstore.io/skills/antfu-unocss/audits/5BibTeX citation
@techreport{antfu-antfu-unocss-2026,
author = {antfu},
title = {unocss security audit report (audit version 5)},
institution = {Skillstore},
year = {2026},
number = {5},
url = {https://skillstore.io/skills/antfu-unocss/audits/5},
note = {Author version 2026.1.28}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "unocss security audit report (audit version 5)"
version: "2026.1.28"
type: report
authors:
- name: "antfu"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/antfu-unocss/audits/5"
identifiers:
- type: other
value: "skillstore:antfu-unocss:audit:5"
description: "Skillstore immutable audit report identifier"
Skillstore Score
Why this score Evidence Confidence: HighWhat You Can Build
Set Up a Frontend Project
Create a project-aware UnoCSS setup with suitable presets, imports, and content extraction.
Build Reusable Design Utilities
Define theme tokens, dynamic rules, shortcuts, variants, and responsive behavior for a shared interface system.
Integrate UnoCSS With Nuxt
Configure the Nuxt module, merge layer settings, add presets, and locate the development inspector.
Try These Prompts
Inspect this project and configure UnoCSS with the simplest suitable preset. Preserve existing conventions and explain each changed file.
Create UnoCSS theme tokens and reusable shortcuts for this interface. Use the existing configuration and avoid unsupported utilities.
Add UnoCSS Icons and Typography presets to this Vite application. Include accessible usage examples and required imports.
Design dynamic rules, variants, extraction sources, and layer ordering for these requirements. Assess conflicts with current presets and transformers.
Best Practices
- Inspect the project configuration before selecting utilities, presets, or advanced syntax.
- Prefer static class names or explicit safelists so build-time extraction can discover every utility.
- Keep theme units consistent and verify preset-specific token names before extending defaults.
Avoid
- Do not assume Tailwind compatibility covers every preset, transformer, or theme key.
- Do not construct class names dynamically when UnoCSS must extract them at build time.
- Do not enable Attributify or experimental modes without confirming project support.
Frequently Asked Questions
Which UnoCSS version does this skill cover?
Does it support Tailwind CSS syntax?
Can it configure Vite and Nuxt projects?
Can it create custom rules and shortcuts?
Why should the existing configuration be inspected first?
Does the skill run UnoCSS or install packages?
Developer Details
Author
antfuLicense
MIT
Author version
v2026.1.28
Skillstore revision
r2
Ref
89edfdc710d0846129dcee6a929477b04f08052c
Maintenance freshness
7/24/2026
Usage
13 downloads · 180 views
File structure