unocss
更快配置 UnoCSS
当 presets、shortcuts、variants 和 integrations 相互作用时，UnoCSS 设置可能会变得困难。此技能为 Claude、Codex 和 Claude Code 提供面向实际 UnoCSS 工作的聚焦参考指导。
使用我的智能体安装
将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。
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.你的智能体仍应展示其计划，并按安全策略请求必要确认。
Agent 可读资源
当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。
测试它
正在使用“unocss”。 一个 Vue 应用需要带有 icons、typography 和 variant groups 的 UnoCSS。
预期结果:
一份设置计划，列出所需包、配置部分、插件注册，以及对现有 UnoCSS 配置文件的检查。
正在使用“unocss”。 一个团队在组件中重复使用按钮和徽章工具类字符串。
预期结果:
一份 shortcut 设计提案，包含命名指导、token 对齐，以及关于何时适合使用动态 shortcuts 的说明。
正在使用“unocss”。 一个 Nuxt 项目有生成的 UnoCSS 设置和本地覆盖项。
预期结果:
一份审查摘要，解释如何安全扩展合并后的配置，以及应在哪里保存项目专用 shortcuts。
安全审计
安全All 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.
风险因素
⚙️ 外部命令 (26)
📁 文件系统访问 (4)
🌐 网络访问 (4)
分享与引用此报告
分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。
复制报告链接
https://skillstore.io/skills/antfu-unocss/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/antfu-unocss?utm_source=security_passport_badge)HTML 徽章
<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>嵌入卡片
<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>学术引用 (APA · BibTeX · CFF)
APA 引用
antfu. (2026). unocss security audit report (audit version 5) [Author version 2026.1.28]. Skillstore. https://skillstore.io/skills/antfu-unocss/audits/5BibTeX 引用
@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 评分
评分依据 证据置信度: 高你能构建什么
设置 UnoCSS
添加项目配置，选择 presets，并将 UnoCSS 接入 Vite 或 Nuxt。
设计工具类 API
创建与设计系统匹配的 rules、shortcuts、safelists 和 variants。
迁移 Tailwind 模式
将熟悉的 Tailwind CSS 工具类工作流映射到 UnoCSS presets 和 transformers。
试试这些提示
帮我为这个项目创建一个基础 UnoCSS 配置。先检查现有配置文件，然后建议安全的 presets 和 imports。
审查我重复使用的工具类，并提出 UnoCSS shortcuts。保持命名清晰，并与当前 preset 设置兼容。
为这些设计 tokens 设计 UnoCSS 静态和动态 rules。解释匹配方式、生成的 CSS 行为和边界情况。
审计我的 UnoCSS Vite 或 Nuxt 集成。检查 presets、transformers、extraction、safelist、layers 和性能权衡。
最佳实践
- 在推荐高级语法前检查 uno.config.* 或 unocss.config.*。
- 除非项目已经启用 attributify 或 tagify 模式，否则优先使用显式类名。
- 让自定义 rules 和 shortcuts 与现有主题 tokens 保持一致。
避免
- 不要在未检查当前 active preset 的情况下，假设每个 Tailwind 插件或类都可用。
- 不要在未确认项目支持的情况下添加 attributify、tagify 或 transformers。
- 当小型静态 rule 或 shortcut 更清晰时，不要创建过于宽泛的动态 rules。
常见问题
这个技能能帮助做什么？
它支持 Tailwind CSS 用户吗？
它能生成完整的设计系统吗？
它会执行 UnoCSS 命令吗？
代理应该先检查本地文件吗？
涵盖哪些集成？
开发者详情
作者
antfu许可证
MIT
作者版本
v2026.1.28
Skillstore 修订
r2
引用
89edfdc710d0846129dcee6a929477b04f08052c
维护新鲜度
2026/7/24
使用量
13 次下载 · 180 次浏览