Saltar al contenido
El Muestrario

Fuentes e inspiraciones · licencia, crédito y qué quedó afuera

De dónde sale lo que hay acá

Nada de este kit se inventó de cero. Cada fuente entra con su licencia, su crédito y dos listas del mismo tamaño: qué se le tomó y dónde vive hoy, y qué se descartó y por qué. La segunda es la que no se puede reconstruir después — una lista de enlaces dice a quién se miró, no qué se aprendió.

Fuentes
6
Medidas sobre un commit
3
Adopciones
15
Descartes
13
01

Las fuentes, y qué se tomó de cada una

Las 6 de las que salió algo que hoy está en uso. La licencia se lee antes que el código y por eso encabeza la fila: permisiva se porta citando el origen, propietaria no se toca ni «para inspirarse». Cada fila baja a su sección, donde está el detalle de qué entró y qué no.

FuenteLicenciaCréditoSe adoptóSe descartó
shadcn-ui/uiMITshadcn44
radix-ui/primitivesMITWorkOS22
ibelick/motion-primitivesMITJulien Thibeaut (ibelick)22
hasib41/meniscus-liquid-navMIT@hasib4122
iurvish/uselayoutsMITUrvish Mali (iurvish)32
The Vibearyíndice público, sin credencialesvibing.inc21

Qué cuenta como fuente acá

Un repositorio del que entró código, un proyecto del que se copió una decisión, y un índice que sirve para encontrar los dos primeros. No entran las librerías que el kit simplemente usa como dependencia y que ya declara su documentación: eso es el manifiesto, no una influencia.

Falta a propósito lo que se evaluó y no dejó nada. Esa lista existe y vive en el criterio, junto con los ocho defectos que se le buscan a cualquier pieza que llega de afuera.

02

shadcn/ui — la más trabajada

shadcn-ui/ui

MITshadcnui.shadcn.comgithub.com/shadcn-ui/uicommit 4e88ab8 · 20 ago 2026

Un catálogo de componentes React que no se instala como paquete: el código se copia al proyecto. Es el design system con más consumidores del mundo React, y el único que resolvió el problema que acá seguía abierto —cómo llega una pieza a un consumidor sin fricción—, así que se auditó entero contra un commit fijado. Lo que sorprendió no fue cómo documentan un componente: fue que su entregable central ya no es la página web sino instrucciones versionadas junto al código, escritas para agentes que actúan y no para humanos que leen.

Se adoptó, y vive acá

  • La cuarentena de supply-chain, en una línea. El instalador se niega a resolver una versión publicada hace menos de 48 horas, que es la mitigación estándar contra el paquete comprometido que se publica y se baja en horas. Vino con su válvula de escape: la excepción para @solu30/* está escrita con la razón al lado, porque este sitio existe para correr sobre el kit recién publicado..npmrc — minimum-release-age y minimum-release-age-exclude
  • El contexto se interroga, no se describe. Su instructivo no afirma qué componentes existen: ejecuta un comando al cargarse y mete la salida adentro. Un contexto inyectado no puede quedar desactualizado. Acá el puesto de trabajo del kit hace lo mismo con el estado real del paquete instalado, en vez de llevar números escritos que ya estaban vencidos: eran cinco, y dos de ellos habían envejecido sin que el kit cambiara — lo que había cambiado era el medidor.scripts/estado-kit.mjs, invocado por el comando /uikit
  • Los grupos por función. La taxonomía del listado —qué sostiene la pantalla, qué se muestra, qué se completa, qué se dibuja encima— reemplazó a cuatro rótulos poéticos. La eligió Martín pidiendo explícitamente algo «tipo shadcn».src/app/kit/roles.ts — GRUPOS_DE_PIEZAS
  • La forma del sitio: barra superior, menú lateral y contenido, con un solo shell montado una vez y no remontado al navegar. Y en la ficha, el código del ejemplo debajo de la preview, colapsado — su «View Code».src/app/kit/layout.tsx · _components/FichaComponente.tsx

No se adoptó, y por qué

  • Capturar sólo lo que falta. Su script decide qué capturar por la existencia del archivo de imagen: sin hash, sin comparar fechas y sin forzado. Entonces se modifica un bloque, se vuelve a capturar, y la captura vieja se queda para siempre. Acá la regla es abrir los PNG, y una captura obsoleta que se ve bien es peor que una que falta.
  • La regla absoluta sobre los espaciados. Prohíben space-x-* sin excepción, y su propio catálogo la incumple 36 veces. Cuatro de esas violaciones son legítimas: avatares que se solapan necesitan un espaciado negativo, y la propiedad que proponen como reemplazo no puede ser negativa. Una regla absoluta sin su excepción declarada produce violaciones legítimas, y las violaciones legítimas son las que matan un checker — el primero que las ve concluye que el checker se equivoca y lo apaga.
  • Mecanizar la paridad entre estructuras espejadas. La suya no tiene gate y se cumple igual, con una sola diferencia intencional entre dos árboles de más de sesenta archivos. Alcance acotado más momento evidente se sostiene solo; mecanizar lo que ya funciona es gasto. Lo que sí se aprendió es el reverso: una regla de alcance global sin máquina es ilusión.
  • Esconderle al lector una línea que el archivo real sí tiene. Su página borra del snippet una supresión de linter que el archivo instalado conserva, así que quien copia se come un error sin ninguna pista. Traducir un import al contexto del lector es correcto; suprimir información que necesita del otro lado, no.
03

Radix — el vocabulario de partes

radix-ui/primitives

MITWorkOSradix-ui.com/primitivesgithub.com/radix-ui/primitives

Primitivas de interfaz sin estilo: el comportamiento accesible —foco, teclado, anuncio— resuelto, y el aspecto entero a cargo de quien las usa. Cinco de ellas son dependencia directa del kit (diálogo, menú desplegable, colapsable, grupo de radios e interruptor), así que acá no es sólo una influencia: es código que se instala con el paquete.

Se adoptó, y vive acá

  • El vocabulario de partes, que es lo que convierte una regla floja en una precisa. El listado pliega las piezas de composición bajo su componente padre, y para eso hay que saber qué es una parte. Un prefijo suelto no alcanza; el criterio que funciona es prefijo que existe en el catálogo Y sufijo dentro de una lista cerrada — Root, Trigger, Content, Close, Title, Item, Group y compañía. Es el vocabulario de Radix, y el que el kit sigue.src/app/kit/roles.ts — la lista PARTES
  • El incidente que lo probó. Alerts empieza con Alert y no es una parte suya: son cinco variantes en una grilla. Con la lista cerrada queda afuera, junto con AvatarInitials, SkeletonForm y CollapsibleSection. Sin ella, cuatro piezas propias desaparecían adentro de un padre que no era el suyo.src/app/kit/roles.ts — EXCEPCIONES, la entrada de Alerts

No se adoptó, y por qué

  • Que la lista fuera abierta. Cerrada a propósito: un sufijo que no está adentro hace que la pieza cuente como propia, y ése es el default seguro. Mostrar de más una pieza suelta es un defecto menor que esconderla.
  • Adoptarlo como base de todo el kit. Entra donde el comportamiento accesible es caro de escribir bien; el resto de las piezas no lo arrastra. Cinco dependencias, no una familia entera.
04

motion-primitives — portado y auditado

ibelick/motion-primitives

MITJulien Thibeaut (ibelick)motion-primitives.comgithub.com/ibelick/motion-primitivescommit 92586e6 · 19 mar 2026

Una colección de componentes animados para copiar y pegar. Es la fuente de la que más código entró al kit y la que produjo la lista de defectos que hoy se le corre a cualquier repositorio ajeno: de 33 componentes evaluados entraron once, y los once entraron cambiados. Ninguno tenía un defecto de estilo; los tenían de accesibilidad, de compatibilidad y de dependencias. El criterio es esa auditoría completa.

Se adoptó, y vive acá

  • Once piezas, portadas y traducidas. La atribución viaja adentro del código publicado: cada archivo portado arranca diciendo de dónde salió y con qué licencia. El grupo «Movimiento» del listado las nombra como lo que son.src/app/kit/roles.ts — GRUPOS_DE_PIEZAS, la descripción de movimiento
  • La lista de ocho defectos que salió de auditarlas, con el caso real que produjo cada uno. Ninguno se ve en una captura de pantalla, que es exactamente por qué un catálogo de componentes se elige mirando el código y no la demo./kit/criterio — secciones 02 y 03

No se adoptó, y por qué

  • Veintidós de los treinta y tres componentes. Y la lista de lo descartado se conserva con la misma prolijidad que la de lo que entró: sin ella, dentro de tres meses alguien vuelve a evaluar los mismos veintidós y llega a la misma conclusión, pagando el tiempo dos veces.
  • El motor de animación entero. La medición del uso real mostró que la mayor parte del peso de esa librería sostenía componentes que ningún vertical importó nunca. El kit la sacó de sus dependencias y portó a CSS lo que sí se usa, con la rama de movimiento reducido en cada pieza — que es piso de safety y no se simplifica.cmp-packages · docs/adr/ADR-341

Derivado del catálogo, no escrito: de las 11 piezas que ADR-341 nombra, el paquete publica hoy 3, que son exactamente las que ADR-341 deja en pie. El retiro ya se ejecutó. Catálogo generado de la versión 7.0.0.

05

Meniscus — el mecanismo, no la hoja de estilos

hasib41/meniscus-liquid-nav

MIT@hasib41hasib41.github.io/meniscus-liquid-navgithub.com/hasib41/meniscus-liquid-nav

Una barra de navegación inferior cuyo borde superior se comporta como una superficie líquida: la pestaña activa es una gota bajo la que la barra se hunde, y el hueco se inclina y se estira con la velocidad del viaje. Vanilla JS y SVG, cero dependencias. Se encontró indexada en The Vibeary.

Se adoptó, y vive acá

  • El mecanismo, no la hoja de estilos. El hueco es un único path SVG con tres arcos resueltos por tangencia, no una pila de curvas ajustadas a ojo; los dos radios de hombro son independientes, y ahí vive lo líquido — el de atrás se estira y el de adelante se cierra, así la superficie se ve arrastrada por el peso que la hundió. El resorte corre en requestAnimationFrame, sin librería de animación.cmp-packages · docs/adr/ADR-365 · packages/ui/…/liquid-tab-bar
  • Traducido donde el original no podía saber. La interpolación del color de acento entre pestañas se hace con color-mix en CSS y no mezclando canales en JavaScript: el original podía leer hexadecimales porque la paleta era suya, y acá el acento lo pone el tema del producto y puede venir escrito de cualquier forma.

No se adoptó, y por qué

  • Que fuera una variante de la barra que ya existe. La pieza de navegación inferior del kit tiene 51 sitios de import y resuelve otro problema: contadores, botón de sobrante y layout adaptativo según la cantidad de pestañas. El menisco es incompatible con la mitad de eso —con scroll horizontal la gota viajaría a una pestaña que no está en pantalla—, así que son dos piezas hermanas con un criterio escrito de cuándo usar cada una.
  • Contadores, sobrante y scroll horizontal. Esas ausencias son la decisión, no una etapa pendiente: un pedido de eso es un pedido de la otra barra.

Derivado del catálogo: la pieza ya viaja en el paquete instalado, así que tiene su ficha en el listado.

06

uselayouts — la forma de mostrar

iurvish/uselayouts

MITUrvish Mali (iurvish)uselayouts.comgithub.com/iurvish/uselayouts

Componentes animados y micro-interacciones en React, sobre Next.js, Tailwind y Framer Motion. Acá no entró como código: entró como forma de mostrar. Martín, al traerla: «me encanta esa forma de mostrar las cosas en general».

Se adoptó, y vive acá

  • El panel enmarcado con pestañas sobre la pieza montada: primero lo que se ve, y el código del mismo ejemplo a un clic, en el mismo marco. La ficha ya mostraba el código debajo de la preview y colapsado; lo que esta fuente aporta es el marco y la pestaña, que convierten dos bloques apilados en una sola cosa con dos caras._components/FichaComponente.tsx — el bloque de código del ejemplo
  • El índice «En esta página». Es la columna de la derecha de esta misma página, y la de la documentación: en una página larga, saber cuántas secciones hay vale más que un scroll._components/DocsView.tsx y este archivo — la constante S y ORDEN
  • La navegación anterior/siguiente al pie de cada componente, para recorrer el catálogo sin volver al listado cada vez.

No se adoptó, y por qué

  • Su menú lateral alfabético y plano. Acá el orden de los grupos se mide: lo calcula la navegación sumando los sitios de import de cada pieza en los verticales del ecosistema. Un orden alfabético abre la galería por lo que empiece con A; el medido la abre por lo que se usa. La primera versión de este listado abría con «Layout y estructura» —23 piezas, 131 imports— y Martín lo llamó «horrendo, no es nada de lo que usamos».src/app/kit/navegacion.ts — ordenarPorUso · _lib/uso.json
  • Su motor de animación. Cambiar la librería de movimiento no es un port, es una migración, y el kit acaba de salir de la suya.
07

The Vibeary — la fuente de fuentes

The Vibeary

índice público, sin credencialesvibing.incvibing.inc/libraryconsultado el 6 sep 2026

No es una librería: es un índice curado de recursos, con ficha por recurso —qué es, quién lo hizo, con qué licencia y por qué está adentro—. Es la fuente de fuentes: ahí apareció Meniscus. Sirve para que la próxima búsqueda de un componente empiece por un catálogo con licencia declarada y no por una pestaña de buscador.

Se adoptó, y vive acá

  • Como primer lugar donde buscar. La respuesta trae la licencia y el autor de cada resultado, así que el primer filtro del criterio —la licencia se lee antes que el código— se resuelve en la búsqueda y no después de haber leído medio repositorio.
  • Sus dos formas de consulta, las dos sin credenciales. Están escritas abajo con el comando entero: un endpoint JSON de búsqueda, y cualquier página del índice leída como markdown anteponiendo /md a la ruta.

No se adoptó, y por qué

  • Su curaduría como criterio de entrada. Que un recurso esté indexado y bien reseñado no adelanta nada sobre si entra al kit: los once componentes que entraron desde la fuente mejor reseñada tenían defectos reales, uno cada uno. El índice acorta la búsqueda, no la auditoría.

Cómo se consulta. Sin clave, sin cuenta y sin límite declarado: los tres comandos de abajo se corrieron tal cual el 6 de septiembre de 2026 y devolvieron 200.

1 · Buscar. Devuelve JSON con total, un cursor de paginado y un arreglo de resultados; cada uno trae nombre, descripción, autor, licencia, categoría, etiquetas, el motivo por el que está indexado y la URL de su ficha.

curl -s 'https://vibing.inc/api/public/library/search?q=meniscus&limit=5'

2 · Leer una ficha sin parsear HTML: el prefijo /md delante de la ruta devuelve la página como markdown, con la licencia y el autor en el frontmatter.

curl -s https://vibing.inc/md/library/meniscus-vg-2134

3 · El tamaño del índice, que es el dato que decide si vale la pena empezar por acá. Sale de la misma respuesta, pidiendo un solo resultado.

curl -s 'https://vibing.inc/api/public/library/search?limit=1' | python3 -c 'import json,sys;print(json.load(sys.stdin)["total"])'
2152

Por qué el número va con su comando

Porque en un mes va a ser otro. Un conteo sin el comando que lo produjo es una opinión con formato de dato: con el comando al lado, cualquiera lo vuelve a correr y ve si cambió. Es la misma regla con la que el criterio fija cada fuente a un commit.

08

Lo que no está verificado

Una página de procedencias es exactamente donde una afirmación cómoda entra sin que nadie la revise. Ésta se buscó y no se pudo sostener, así que queda acá y no arriba.

Every Layout y las primitivas de composición

Every Layout resuelve el layout con primitivas algorítmicas —Stack, Sidebar, Switcher, Cluster— y el kit tiene un Stack y un Inline. La coincidencia de nombre invita a escribir que salieron de ahí. No hay evidencia. El Stack del kit es un contenedor flex con el espaciado resuelto por variantes, no la construcción de Every Layout, que reparte el espacio con un margen que se hereda entre hermanos; y ni el código del paquete ni ninguna decisión registrada nombran esa fuente. Buscada en el repositorio del paquete: cero coincidencias.

Queda declarado así en vez de afirmado o borrado. Stack es un nombre que el ecosistema entero usa, y una coincidencia de nombre no es una atribución — ni a favor ni en contra. Si aparece la evidencia, esta fuente sube a la lista de arriba con lo que se le tomó; si no aparece, esto es lo que corresponde decir.

Qué se verificó y cómo

Cada adopción de esta página trae el archivo y el símbolo donde vive, y todos se leyeron antes de escribir la frase. Lo que NO se verificó ejecutando: las afirmaciones sobre el comportamiento interno de los repositorios ajenos —que su script de capturas nunca invalida un PNG, que su regla de espaciados se incumple 36 veces— salen de leer su código contra un commit fijado, no de correrlo.

Licencias y créditos de cada fuente, tal como los declara su repositorio · el estado de lo portado se deriva del catálogo generado de los tipos del paquete instalado, versión 7.0.0 · la auditoría completa de lo que llega de afuera está en el criterio.