Goodies

Recursos, utilidades y snippets para devs

En esta sección junto cosas que uso todos los días: tools, snippets, pequeñas ideas de CSS y una lista de links que vale la pena tener a mano. No es teoría ni cursos largos, sino recursos concretos para resolver problemas de frontend más rápido y con mejor code.

Herramientas

3 items

Ver Todas las Herramientas

Pequeñas tools pensadas para el día a día de desarrollo: generadores, helpers y utilidades que simplifican tareas repetitivas. Si algo me ahorra tiempo o reduce errores al escribir code, termina convertido en una herramienta y lo dejo publicado acá.

CSS ★

Animotion CSS

A visual CSS animation generator for creating smooth transitions, keyframe animations, and micro-interactions

Ir al Sitio Ver Código
CSS ★

Gradify CSS

A modern CSS gradient generator with real-time preview for creating beautiful linear, radial, and conic gradients

Ir al Sitio Ver Código
TypeScript ★

ZodSmith Builder

A powerful visual builder for creating Zod schemas and TypeScript types with drag-and-drop interface

Ir al Sitio Ver Código

Snippets

38 items

Ver Todos los Snippets

Fragmentos de code listos para copiar, adaptar y pegar: patrones de React, utilidades de TypeScript, lógica de frontend y funciones que uso una y otra vez. La idea es tener un lugar ordenado donde encontrar soluciones rápidas sin reinventar la rueda cada vez.

typescript

chunk

Divide un array en arrays más pequeños de un tamaño específico.
typescript

uniqueBy

Elimina duplicados de un array basándose en una función selectora de clave.
typescript

groupBy

Agrupa elementos de un array por una clave en un objeto de arrays.

Trucos CSS

21 items

Ver Todos los Trucos CSS

Pequeños trucos de CSS para resolver detalles de interfaz: layouts, efectos sutiles, animaciones simples y microinteracciones. Son ejemplos pensados para entender rápido el patrón, adaptarlo a tu diseño y mantener el code visual limpio y consistente.

CSS

Fluid Sizing with clamp()

Smooth responsive sizes without media queries. One line of CSS that scales between min and max values.
CSS

Animate Height with Grid

Finally animate to auto height! Use grid-template-rows from 0fr to 1fr for smooth accordion animations.
CSS

Motion Path Animation

Animate elements along custom curves and SVG paths without JavaScript.

Links Útiles

80 items

Ver Todos los Links

Una selección curada de links que realmente uso: documentación clara, referencias de diseño, recursos de frontend y herramientas online que facilitan el trabajo diario. Menos ruido, más sitios que aportan valor cuando estás construyendo algo en serio.

Awesome AI Devtools

Lista curada de herramientas IA para acelerar tu flujo de desarrollo.

OpenAI Cookbook

Ejemplos prácticos para integrar modelos de OpenAI en tus proyectos.

Awesome Cursor Rules

Colección de .cursorrules para tunear Cursor como copiloto de código.

Cursor Rules Repo

Reglas avanzadas para Cursor centradas en agentes, TypeScript y flujos IA.