Instala el paquete
npm install @gunkin/uiify react react-domCarga behavior.css
Impórtalo una vez por aplicación. Contiene las reglas de estado de ventanas emergentes, secciones desplegables y diálogos, sin colores, fuentes ni espaciado.
import "@gunkin/uiify/components/behavior.css";Importa un componente
En el código de cliente, importa desde la entrada raíz; tree-shaking elimina los componentes que no usas.
import { Button } from "@gunkin/uiify";En un Server Component, importa desde la entrada específica del componente:
import { Accordion } from "@gunkin/uiify/components/accordion";TypeScript
El paquete incluye archivos ESM y .d.ts. Configura moduleResolution como "bundler" o "nodenext" y activa verbatimModuleSyntax.
{
"compilerOptions": {
"moduleResolution": "bundler",
"verbatimModuleSyntax": true
}
}Agentes de IA
La habilidad /uiify proporciona al agente recetas de componentes, pautas de UX y patrones de distribución. Lee solo lo que necesita cada página, respeta tus rutas y estilos, y crea interfaces a medida cuando ninguna opción encaja. Cópiala en tu proyecto:
mkdir -p .agents/skills/uiify
cp -R node_modules/@gunkin/uiify/skills/uiify/. .agents/skills/uiify/Para Claude Code, usa .claude en lugar de .agents. En un monorepo, usa la ruta resuelta de node_modules. Ejecútala con una descripción de la página; los demás agentes usan su propia sintaxis de habilidades:
/uiify Build a responsive product page at /productsReutiliza tus comprobaciones y avisa antes de instalar Playwright o axe-core.