Instalação

Instale

npm install @gunkin/uiify react react-dom

Carregue behavior.css

Importe uma vez por aplicação. Ele contém as regras de estado para janelas flutuantes, seções expansíveis e diálogos, sem cores, fontes ou espaçamento.

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

Importe um componente

No código de cliente, importe pela entrada raiz; o tree-shaking remove os componentes não usados.

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

Em um Server Component, importe pela entrada do próprio componente:

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

Veja Server Components

TypeScript

O pacote inclui ESM e arquivos .d.ts. Defina moduleResolution como "bundler" ou "nodenext" e ative verbatimModuleSyntax.

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

Agentes de IA

A skill /uiify fornece ao seu agente receitas de componentes, orientações de UX e padrões de layout. Ela lê apenas o que a página precisa, segue suas rotas e estilos e cria interfaces personalizadas quando nenhuma receita serve. Copie-a para seu projeto:

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

No Claude Code, use .claude no lugar de .agents. Em um monorepo, use o caminho resolvido de node_modules. Execute com uma descrição da página; outros agentes usam sua própria sintaxe de skills:

/uiify Build a responsive product page at /products

Ela reutiliza suas verificações e avisa antes de instalar Playwright ou axe-core.

Componentes · Estilos · Arquitetura