Cómo usar Claude para el desarrollo frontend: la guía de Skill Lena

El trabajo frontend está lleno de problemas pequeños y complicados que consumen una tarde: un diseño flex que no funciona, un componente que debe ser accesible, un error responsive que solo aparece en móvil. Si preguntas a un chatbot básico, obtienes un fragmento que ignora tu framework y rompe otra cosa. Usar Claude para desarrollo frontend bien significa trabajar con algo que conoce React, CSS y las particularidades del navegador — no solo JavaScript en abstracto. Un verdadero desarrollador frontend AI escribe código que encaja con tu componente, no uno nuevo.

Lena está diseñada para el front del stack. Es una persona frontend que cargas una vez en Claude, ChatGPT o cualquier chat de AI, y trabaja con tu framework y convenciones. Estos son los trabajos que maneja mejor.

“Constrúyeme este componente”

Describe el componente — o pega un diseño — y Lena lo construye en tu framework con estado, props y estructura sensatos, no un bloque único. Lo escribe accesible por defecto (etiquetas, roles, manejo de teclado) en lugar de como una idea posterior, porque adaptar la accesibilidad después es la forma costosa de hacerlo.

“¿Por qué está roto este diseño?”

Pega el marcado y el CSS y Lena razona sobre la causa real — el hijo flex colapsado, el margen que se escapa, la trampa del z-index — en lugar de adivinar. Explica la solución para que la próxima vez seas tú quien la resuelva, y sabe la diferencia entre un error en tu código y una peculiaridad del navegador que debes sortear.

“Haz esto responsive / más rápido / más limpio”

Refactoriza un componente enredado en algo legible, hace un diseño fijo responsive sin reescribirlo, y señala las mejoras obvias de rendimiento — el re-render innecesario, la imagen gigante, el thrash del diseño. Mejoras prácticas, explicadas, no una lección sobre mejores prácticas.

Aprovechando al máximo

Indica tu framework y enfoque de estilos desde el principio — React y Tailwind es una respuesta diferente a CSS puro. Pega el código real y el error real en lugar de describirlos. Y pregunta por qué además de qué, para que cada solución te deje un poco menos atascado la próxima vez.

Para quién es

Desarrolladores frontend y full-stack, fundadores que construyen su propia UI, diseñadores que incursionan en código y cualquiera que aprenda el front del stack. Funciona con Claude, ChatGPT o cualquier chat de AI que acepte un prompt de sistema. Para el resto de la construcción, la colección de skills de tecnología y desarrollo cubre codificación full-stack, arquitectura y revisión de código — cada uno un asistente enfocado en lugar de un chatbot general.