Установка

Установка

npm install @gunkin/uiify react react-dom

Подключите behavior.css

Импортируйте её один раз на приложение. Она содержит правила состояния для всплывающих блоков, details и диалогов, без цветов, шрифтов и отступов.

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

Импортируйте компонент

В клиентском коде импортируйте из корневой точки входа; tree-shaking удалит неиспользуемые компоненты.

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

В Server Component импортируйте из отдельной точки входа компонента:

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

См. Server Component

TypeScript

Пакет содержит ESM и файлы .d.ts. Установите moduleResolution в "bundler" или "nodenext" и включите verbatimModuleSyntax.

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

ИИ-агенты

Навык /uiify предоставляет агенту рецепты компонентов, рекомендации по UX и шаблоны компоновки. Он читает только то, что нужно странице, учитывает ваши маршруты и оформление и создаёт собственный интерфейс там, где готового решения нет. Скопируйте его в проект:

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

Для Claude Code используйте .claude вместо .agents. В монорепозитории используйте фактический путь к node_modules. Запустите навык с заданием на страницу; у других агентов свой синтаксис навыков:

/uiify Build a responsive product page at /products

Он использует ваши проверки и заранее сообщает об установке Playwright или axe-core.

Компоненты · Оформление · Архитектура