Frank Gaspar

JavaScript Developer | Web Developer. 🚀

[Miguel Ángel Durán @midudev]

¡Esta librería para React es una maravilla!
Sube el nivel de las animaciones de tu web o app.

Se llama Amicro y es de código abierto, tiene:
Loaders, efectos hover, botones y transiciones.

→ https://t.co/upBUPqmR2V

[Miguel Ángel Durán @midudev]

He construido una colección de recursos gratuitos para programadores que suelo utilizar.

Modelos de IA, APIs, Hosting, Analytics, Bases de Datos, Auth, CDN, Emails y mucho más:

¡Espero que te guste y te sirva!
→ https://t.co/fS156M7m9P

[Miguel Ángel Durán @midudev]

¡Deja de usar loaders aburridos para tu app o web!
Este componente lleva tu diseño a otro nivel

✓ Modo claro y oscuro
✓ 6 tipos de loaders distintos
✓ Optimizados para diferentes tamaños

Lo mejor: 0 dependencias

→ https://t.co/afVKqI12bX

[Miguel Ángel Durán @midudev]

Crea vídeos con HTML, CSS y JS. ¿Cómo?
Instalando una sola Agent Skill.

Se llama HyperFrames, es de código abierto y funciona con cualquier IA. El resultado es tremendo.

→ https://t.co/A5xNvGG9qt

[Miguel Ángel Durán @midudev]

¡Espectacular nueva biblioteca de iconos Open Source!
Pixel-perfect y en formato SVG.

Con paquetes para React, Vue, Svelte y Figma.

Tiene más de 2600 iconos disponibles:
→ https://t.co/At5xMLgazv

[Miguel Ángel Durán @midudev]

¡Nuevo en CSS! text-fit: grow

Escala el tamaño de la fuente del texto para que se ajusten perfectamente al ancho de su contenedor.

Por ahora sólo disponible en Chrome, Brave y Edge:

[Miguel Ángel Durán @midudev]

¿Tienes que maquetar emails? ¡NO uses tablas!
React Email es la biblioteca que necesitas:

✓ Componentes de UI listos
✓ Previsualiza cómo se verá el correo
✓ Compatible con Gmail, Outlook y más
✓ Diseños preparados para copiar y pegar

→ npx create-email

[Fazt @FaztTech]

Según el creador de Claude Code, los roles tradicionales de engineering, product y design se están derritiendo, así que en el futuro veremos más estos 5 arquetipos:

✅ Prototyper → ideas nuevas sin parar
✅ Builder → convierte prototipos en producto real
✅ Sweeper → limpia, simplifica y optimiza
✅ Grower → mejora el Product-Market Fit
✅ Maintainer → mantiene sistemas maduros a escala

Es decir, los equipos del futuro no se organizarán por "cargo", sino por estas capacidades. Así que básicamente da a entender que ahora se necesitan más personas multidisciplinarias en lugar de un profesional especializado, volviendo al mismo tema de siempre de especializarse contra saber un poco de todo.

¿Ustedes qué creen? 👇

[Miguel Ángel Durán @midudev]

¡Brutal Extensión SEO para Programadores Web!
Encuentra errores en tu página, detecta enlaces rotos y te dice qué mejorar:
→ https://t.co/AkAQ2jSTgd

[Miguel Ángel Durán @midudev]

¡Claude Code ahora también puede editar vídeos!
Esta SKILL es 100% gratis y de código abierto.

✓ Crea animaciones automáticamente
✓ Genera subtítulos con diferentes estilos
✓ Elimina silencios, errores y palabras de relleno

→ https://t.co/1SVpXY3BSG

[Miguel Ángel Durán @midudev]

Si eres Programador Web y usas IA... ¡Instala esto!
Agent Skills de Addy Osmani (de Google) para:

✓ Rendimiento Web
✓ Mejores prácticas
✓ Accesibilidad
✓ SEO

Para React, Vue, Angular, Astro o lo que uses.
$ npx add-skill addyosmani/web-quality-skills

[Miguel Ángel Durán @midudev]

¡Aprovecha Claude Fable al máximo con esto!

Este comando me parece una idea brutal.

/improve usa el modelo más caro para analizar proyecto y preparar un plan de mejora.

Y luego lo implementas con un modelo más barato.

Se instala así:

[Miguel Ángel Durán @midudev]

¡Histórico! Nueva página web de Express.js, el framework web más importante de Node.

Hecha con Astro, nueva documentación y en Español.

→ https://t.co/C1RqfVhzqZ

[Miguel Ángel Durán @midudev]

¡Mañana curso de OpenCode desde cero!
El mejor agente de IA de código abierto.

Horario por países:
18H 🇪🇸 17H 🇮🇨
13H 🇺🇾 🇦🇷 🇵🇾
12H 🇨🇱 🇹🇹 🇧🇴 🇻🇪 🇩🇴 🇨🇺 🇵🇷
11H 🇨🇴 🇵🇪 🇪🇨 🇵🇦
10H 🇲🇽 🇨🇷 🇳🇮 🇸🇻 🇭🇳 🇬🇹

[Fazt @FaztTech]

Muchos usan shadcn/ui pero pocos saben todo lo que puedes hacer con él hoy.

Y es que no es solo "copy-paste de componentes", sino que ahora tienes IA, constructor visual de temas, temas completos creados por la comunidad, integraciones con servicios como ElevenLabs, MapLibre y hasta kits de Figma oficiales. Te dejo mis recursos favoritos del ecosistema 👇

🔹 The Gridcn — tema Tron https://t.co/jfmrYekgmp
Un tema inspirado en Tron: Ares con 6 variantes (Tron, Ares, Clu, Athena, Aphrodite, Poseidon), efectos 3D con Three.js, glows neón y 50+ componentes. Perfecto para proyectos con identidad fuerte.

🔹 Glitchcn/ui — estética cyberpunk/hacker https://t.co/asI9qdifYH
Componentes con scanlines animados, bordes que emiten luz cyan/emerald y tipografía monospace. Ideal para portfolios dev, dashboards técnicos o cualquier cosa que quiera verse como un terminal hackeado.

🔹 ElevenLabs UI — componentes para apps con IA y audio https://t.co/h1blrQAShK
Si estás construyendo chats tipo ChatGPT, voice agents o interfaces de audio: acá tienes waveforms en tiempo real, agent orbs con estados (idle/listening/talking), voice fill, reproductores. Open source y basado en shadcn.

🔹 UI TripleD — shadcn + Framer Motion https://t.co/ymKIvALN7E
100+ bloques y páginas completas con animaciones listas. Incluye un Builder drag-and-drop para armar landings visualmente antes de copiar el código. Muy útil para prototipar MVPs.

🔹 mapcn — mapas estilo shadcn https://t.co/IVGSLbNfGo
Componentes de mapa para React construidos sobre MapLibre y estilizados con Tailwind. Se sienten parte del mismo design system. Si alguna vez peleaste con Google Maps en un dashboard, esto te va a gustar.

🔹 shadcn/ui kit de Figma (shadcndesign) https://t.co/mLidTdXFN6
Kit de Figma pixel-perfect + plugin que convierte diseños de Figma a código shadcn/ui real. Incluso tiene Agent Skills para que Claude, Cursor o Codex generen componentes desde un frame de Figma. El propio shadcn lo endorsó.

🔹 tweakcn — editor visual de temas https://t.co/8oYSK8uycE
El problema clásico: "todas las apps con shadcn se ven igual". tweakcn lo soluciona.
Es un editor no-code donde customizas colores, tipografía, border radius, sombras y transiciones con preview en tiempo real, y exporta las variables CSS listas para Tailwind v3 o v4. Viene con presets hermosos para arrancar rápido y son Open source.

shadcn dejó de ser una librería y se convirtió en una plataforma de distribución de código. Entre registries de terceros, MCP servers, builder visual y kits de diseño, hoy puedes armar una app completa sin salir del ecosistema.

¿Cuál me falta? Dejen sus favoritos 👇

[Claude @claudeai]

Introducing Claude Design by Anthropic Labs: make prototypes, slides, and one-pagers by talking to Claude.

Powered by Claude Opus 4.7, our most capable vision model. Available in research preview on the Pro, Max, Team, and Enterprise plans, rolling out throughout the day.

[Miguel Ángel Durán @midudev]

¿Quieres mejorar en SQL? ¡Necesitas esta herramienta!
Crea diagramas interactivos y diseña tus bases de datos

✓ Gratis y de código abierto
✓ Importa y exporta código SQL
✓ Sin instalaciones ni registros

→ drawdb․app

[Miguel Ángel Durán @midudev]

¡Mega colección de Agent Skills para mejorar tu IA!

Son paquetes de conocimiento en formato Markdown que le enseñan a hacer mejor tareas específicas

✓ +60.000 skills disponibles
✓ Claude Code, Visual Studio Code, Antigravity...

→ https://t.co/40k8HPFZRL

[Miguel Ángel Durán @midudev]

CLI para crear una apps FullStack con las tecnologías que tu quieras con miles de combinaciones:

✓ TypeScript, Rust, Go y Python
✓ Un montón de frameworks disponibles
✓ Base de datos, auth, pagos, email, analytics

$ pnpm create better-fullstack@latest

[Miguel Ángel Durán @midudev]

Truco para ahorrar disco duro y tiempo al clonar repositorios de GitHub