Instalación

Instala el paquete

npm install @gunkin/uiify react react-dom

Carga 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";

Consulta Server Components

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 /products

Reutiliza tus comprobaciones y avisa antes de instalar Playwright o axe-core.

Componentes · Estilos · Arquitectura