安装 · uiify

安装

npm install @gunkin/uiify react react-dom

每个应用导入一次。它包含弹出层、details和对话框的状态规则，不包含颜色、字体或间距。

import "@gunkin/uiify/components/behavior.css";

客户端代码从根入口导入；tree-shaking会移除未使用的组件。

import { Button } from "@gunkin/uiify";

在Server Component中，从组件自身的入口导入：

import { Accordion } from "@gunkin/uiify/components/accordion";

包中包含ESM和.d.ts文件。将moduleResolution设为"bundler"或"nodenext"，并启用verbatimModuleSyntax。

{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "verbatimModuleSyntax": true
  }
}

/uiify技能为智能体提供组件用法、UX指导和布局模式。它只读取页面所需的内容，遵循现有路由和样式；没有合适组件时，会构建自定义UI。将其复制到项目中：

mkdir -p .agents/skills/uiify
cp -R node_modules/@gunkin/uiify/skills/uiify/. .agents/skills/uiify/

Claude Code使用.claude，而非.agents。在monorepo中，使用解析后的node_modules路径。提供页面需求来运行该技能；其他智能体使用各自的技能语法：

/uiify Build a responsive product page at /products

它会复用现有检查，并在安装Playwright或axe-core之前先行告知。