Porygon

Porygon es un paquete desarrollado por Envision, en el que se incluye varios componentes React diseñados inicialmente para gestionar la lógica y el manejo de formularios y tablas. Esto nos permite trabajar con un stack tecnológico moderno y sencillo. Estos componentes cumplen con los siguientes criterios:

• Personalizables: Vienen con un estilo predeterminado, pero se pueden integrar fácilmente con otros estilos visuales. Esto se puede lograr mediante el uso de tokens, que permiten una customización flexible de colores, tamaños y otros atributos visuales sin alterar el código base.

• Rendimiento: Están optimizados para un renderizado eficiente y de alto rendimiento, lo que minimiza el tiempo de carga y el consumo de recursos en aplicaciones grandes. Por ejemplo, incorporan técnicas como la virtualización en tablas para manejar grandes conjuntos de datos sin ralentizar la interfaz, y evitan re-renderizados innecesarios mediante memoización y optimizaciones internas.

• Accesibilidad: Cumplen con las directrices WCAG 2.1 (Web Content Accessibility Guidelines 2.1), que son un conjunto de estándares internacionales desarrollados por el W3C para hacer que el contenido web sea más accesible para personas con discapacidades. Un ejemplo es el soporte para lectores de pantalla, donde los componentes incluyen atributos ARIA adecuados para describir elementos como botones o campos de formulario, permitiendo una navegación por teclado intuitiva y alternativas textuales para imágenes.

Instalación

Porygon es compatible con React 17, 18 y 19. Instala el paquete con pnpm:

pnpm add @grupoenvision/porygon

Configuración inicial

Los componentes de Porygon utilizan CSS-in-JS. Esta técnica requiere un renderizador de estilos que inserte CSS en el DOM cuando sea necesario. Se utiliza el contexto de React para proporcionar este renderizador de estilos. Como los componentes se encuentran basados en Fluent 2, se debe utilzar el componente <FluentProvider /> en la raíz de tu aplicación y pasar un tema al prop theme:

import React from 'react';
import { createRoot } from 'react-dom/client';
import { FluentProvider, webLightTheme } from '@fluentui/react-components';

import App from './App';

const root = createRoot(document.getElementById('root'));

root.render(
	<FluentProvider theme={webLightTheme}>
		<App />
	</FluentProvider>,
);

Listo, ahora puedes utilizar cualquier componete de @envisiongroup/porygon dentro de tu componente App. Revisa la sección react-components del menú lateral de esta página. Los componentes se encuentran organizados siguiendo la estructura jerárquica especificada.

Opciones de tema y customización

Porygon soporta los temas que Fluent tiene por defecto:

• webLightTheme - Tema claro para aplicaciones web
• webDarkTheme - Tema oscuro para aplicaciones web
• teamsLightTheme - Tema claro compatible con Microsoft Teams
• teamsDarkTheme - Tema oscuro compatible with Microsoft Teams

Sin embargo, es probable que prefieras usar un tema personalizado. Para esto, puedes crear uno mediante el generador de temas de Fluent. Una vez que lo hayas creado, se guarda en un archivo JSON, que luego puedes importar y utilizar en tu aplicación.

import {
	FluentProvider,
	webLightTheme,
	webDarkTheme,
} from '@fluentui/react-components';
import customTheme from '../themes/customTheme.json';

// Ejemplo con tema customizado
root.render(
	<FluentProvider theme={customTheme}>
		<App />
	</FluentProvider>,
);

Skill para agentes IA: porygon-components

Porygon publica una Agent Skill llamada porygon-components para que los asistentes de código (Claude Code, Codex, Cursor, opencode, pi, etc.) sepan consumir correctamente la librería mientras escriben tu código: elegir el componente adecuado, conectar props, decidir estado controlado vs no-controlado, validación, callbacks y ejemplos copiables.

La skill funciona como un router: aplica reglas globales de uso y luego carga solo el archivo de referencia de la familia que necesites.

| Familia | Qué cubre | | ------- | -------------------------------------------------------------------------------------------- | | Buttons | Acciones con estado async (loading / success / error), drawers laterales y grupos de botones | | Fields | Campos sueltos: texto, número, área de texto, switch, tags, fecha y adjuntos | | Forms | Formularios declarativos: validación, layout grid, lógica entre campos y control imperativo | | Tables | Columnas derivadas de fields, CRUD, filtros, sorting, selección y overlays | | i18n | Provider global, presets ES / EN / PT_BR y override de textos |

Entre las reglas de oro que aplica automáticamente: no mezclar controlado y no-controlado, guardar siempre el rawValue de onChange, declarar fields tipados con as const satisfies EFWFormFieldProps[], mantener identidad estable de fields/filas, traducir textos vía contexto i18n y preferir handlers/controller hooks por sobre useEffect.

Sigue el estándar Agent Skills, por lo que funciona en cualquier herramienta compatible. Se distribuye desde el repositorio público envisionlatam/skills (skill porygon-components).

Instalación

# Con skills.sh (CLI universal, recomendada)
npx skills add envisionlatam/skills --skill porygon-components

# Fijar una versión concreta (recomendado para equipos)
npx skills add envisionlatam/skills#porygon-components-v1.0.1 --skill porygon-components

# Con el agente pi
pi install git:github.com/envisionlatam/skills

Uso

No hay que invocarla manualmente: el agente la activa sola cuando detecta que tu tarea importa o usa EFWButton, EFW*Field, EFWForm, useFormController, EFWTable, useTableController, PorygonI18nProvider, etc. En pi además queda disponible como comando /skill:porygon-components.