CSS
★ Featured
Animotion CSS
A visual CSS animation generator for creating smooth transitions, keyframe animations, and micro-interactions
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)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
★ Featured
Gradify CSS
A modern CSS gradient generator with real-time preview for creating beautiful linear, radial, and conic gradients
TypeScript
★ Featured
ZodSmith Builder
A powerful visual builder for creating Zod schemas and TypeScript types with drag-and-drop interface
Snippets
(38)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.
typescript
debounce
Limita la frecuencia de ejecución de una función retrasándola hasta que las llamadas se detengan.
typescript
throttle
Limita la ejecución de una función a máximo una vez por intervalo.
typescript
retry
Reintenta una operación asíncrona con backoff exponencial en caso de fallo.
Trucos CSS
(21)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.
CSS
Container Queries
Components that respond to their container's size, not the viewport. Perfect for reusable UI.
CSS
Avoid Universal Selector Resets
Why * { margin: 0 } hurts performance and what to use instead.
CSS
Circle: border-radius vs clip-path
Two ways to make circles, but only clip-path gives you a circular click area.
Links Útiles
(80)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.
Animate.css
Colección de animaciones CSS listas para usar con clases simples.
Framer Motion
Animaciones declarativas para React con gestos, layout y drag integrados.
GSAP
Motor de animación JS con timelines potentes y soporte para SVG y scroll.
Motion One
Librería ligera basada en Web Animations API con sintaxis moderna.
AutoAnimate
Añade animaciones automáticas a cambios en el DOM con una sola línea.
MDN Web Docs
Referencia central para HTML, CSS, JavaScript y APIs web modernas.
TypeScript Docs
Documentación oficial de TypeScript, desde básicos hasta tipos avanzados.
Astro Docs
Guía oficial para crear sitios rápidos y content-driven con Astro.