Caja de herramientas
Habilidades en capas
Organizadas por área para que encuentres rápido lo que tu proyecto necesita. Elige una pestaña o recórrelas con las flechas del teclado.
Frontend
Interfaces rápidas, accesibles y responsive, construidas sobre HTML semántico.
HTML y CSS modernos
Layouts con grid y container queries, variables de diseño y estados de foco visibles.
- Semántica
- Responsive
JavaScript y TypeScript
Lógica de interfaz clara, sin dependencias innecesarias y con tipos donde aportan.
- ES2023
- Tipado
Astro
Sitios de contenido con HTML estático por defecto y JavaScript solo donde hace falta.
- SSG
- Islas
React
Componentes reutilizables para interfaces con mucho estado, como configuradores o paneles.
- Componentes
- Estado
Accesibilidad
Navegación por teclado, contraste AA y textos alternativos desde el primer día.
- WCAG AA
- Teclado
3D y motion
Profundidad y movimiento al servicio del mensaje, siempre con respaldo para equipos modestos.
Three.js
Escenas en tiempo real, materiales de cristal y cámaras que acompañan la lectura.
- WebGL
- PBR
GSAP
Secuencias con aceleración natural, entradas escalonadas y animación ligada al scroll.
- Timelines
- Scroll
Optimización 3D
Modelos comprimidos, texturas bajo demanda y pausas cuando la escena no está a la vista.
- Rendimiento
Movimiento reducido
Cada animación tiene versión estática para quien lo prefiere en su sistema.
- Accesibilidad
APIs y backend
El motor que conecta tu web con el resto del negocio.
APIs REST
Endpoints claros, documentados y versionados, con validación de entradas.
- REST
- OpenAPI
Node.js y Python
Servicios ligeros para automatizar tareas repetitivas del negocio.
- Node
- Python
Bases de datos
Modelos de datos simples y consultas que siguen siendo rápidas cuando crece el negocio.
- PostgreSQL
- SQL
Integraciones
Pagos, mensajería y correo transaccional con reintentos y registros.
- Pagos
- Webhooks
Diseño UI/UX
Primero el problema, después los píxeles.
Figma
Prototipos navegables, componentes con variantes y variables conectadas al código.
- Prototipos
- Variables
Sistemas de diseño
Tokens de color, tipografía y espaciado para que todo sea de la misma familia.
- Tokens
Jerarquía y contenido
Una acción principal por bloque y textos que dicen lo que hace cada botón.
- UX writing
Heurísticas
Revisión de interfaces con las heurísticas de Nielsen y pruebas rápidas con usuarios.
- Auditoría
Calidad y seguridad
Una web bonita que se cae o filtra datos no es una buena web.
Rendimiento
Core Web Vitals, imágenes modernas y carga diferida de lo que no se ve.
- Lighthouse
- CWV
Seguridad web
Cabeceras, validación de formularios, dependencias al día y secretos fuera del código.
- OWASP
- CSP
SEO técnico
Metadatos, estructura de encabezados y rutas limpias para cada sección.
- Metadatos
Herramientas
El taller del día a día.
Git y GitHub
Ramas por tarea, commits descriptivos y revisiones antes de publicar.
- Control de versiones
IA aplicada
Asistentes de código y generación de imágenes con dirección de arte, nunca en piloto automático.
- Claude
- Higgsfield
Despliegue
Publicación continua con vistas previas por cambio y dominios propios.
- Vercel
- CI/CD
Aprendiendo ahora
Siempre en beta
Dedico tiempo cada semana a aprender algo nuevo y lo aplico primero en proyectos propios.
- Shaders con GLSL
- Animación avanzada con GSAP
- Pruebas de seguridad con Burp Suite
Ajusta esta lista a tu experiencia real: aquí no hay niveles ni porcentajes inventados.