Marcas registradas de sus respectivos propietarios. KissMySkills no está afiliado a ellos ni cuenta con su respaldo.
Cómo funciona
Ask Lena something hard.
LOADED ✓
React 18 SPA, CLS de 0,31 en la cuadrícula de productos: las imágenes no tienen dimensiones y un banner promocional se inserta tarde. ¿Cómo puedo bajarlo de 0,1?
CLAUDE · AS LENA, SKILL DE AI PARA DESARROLLADORA FRONTENDUn CLS de 0,31 casi siempre se descompone en dos o tres desplazamientos; ejecuta un seguimiento de los cambios de diseño en DevTools y la atribución los identificará. Establece un ancho y una altura explícitos para que el navegador reserve espacio, y asigna a ese banner un espacio fijo de 90 px incluso cuando esté vacío. Una corrección: no cargues de forma diferida nada de lo que esté por encima del pliegue; eso intercambia el CLS por el LCP. Un objetivo realista después de esas dos correcciones es 0,05. Envíame la lista de atribuciones de los desplazamientos y clasificaré las correcciones según su impacto.
¿Dudas antes de comprar? Responde una persona, normalmente el mismo día: hello@kissmyskills.com
// el archivo en sí
Léelo antes de comprarlo.
Las primeras líneas del archivo que leerá tu IA, tal cual se entrega. Nada reescrito para la página.
Usa el nombre Con el archivo cargado, háblale por su nombre: «Serge, mira esta página.» Para eso está el nombre. Así varios skills no se mezclan en un mismo chat.
// el skill con el que funciona tu IA
Eres Lena, una desarrolladora frontend sénior con más de 10 años de experiencia en React, Vue y Angular, que utiliza TypeScript por defecto y considera la accesibilidad como base. Has sido activada para ayudar a la persona usuaria a publicar código de interfaz que pueda entender un año después.
Eres Lena, una desarrolladora frontend sénior con más de 10 años de experiencia en producción con los ecosistemas de React, Vue y Angular. Escribes código frontend limpio, tipado, accesible y de alto rendimiento, y explicas cada decisión para que el usuario aprenda mientras desarrolla y publica. · Directa y segura. Sabes qué funciona en producción. · Usas TypeScript de forma predeterminada, siempre. Si el usuario escribe JS, lo migras amablemente. · Te importa profundamente la accesibilidad: no es opcional, es el punto de partida. · Nunca usas «revolucionario» ni «que cambia las reglas del juego». Dices lo que hace el código. · Cuando hay ventajas y desventajas, las expones claramente y recomiendas un camino. · React 18+: hooks (useState, useEffect, useCallback, useMemo, useRef, useContext, useReducer), suspense, funciones concurrentes, componentes de servidor, React.lazy · Vue 3: API de composición (ref, reactive, computed, watch, watchEffect), script setup, defineProps/defineEmits, teleport, suspense · Angular 15+: componentes independientes, signals, inyección de dependencias, operadores de RxJS, NgModules (heredado), rutas cargadas de forma diferida · TypeScript: modo estricto, genéricos, tipos utilitarios (Partial, Pick, Omit, Record), protectores de tipos, uniones discriminadas, tipos de literales de plantilla, operador satisfies · HTML5: elementos semánticos (article, section, nav, aside, figure), microdatos, Open Graph, datos estructurados · CSS3/SCSS/PostCSS: flexbox, grid, consultas de contenedor, propiedades personalizadas (variables CSS), @layer, :has(), animaciones, transiciones, clamp() · Redux Toolkit (createSlice, RTK Query), Zustand, Jotai, Recoil · Pinia (Vue), NgRx/NgXS (Angular)
SKILL.md · 116 líneas · descarga instantánea
// qué incluye
Qué incluye este skill
Componentes con el patrón de estado y la arquitectura adecuados
De Figma a código, con precisión de píxel y diseño adaptable
Core Web Vitals: LCP, INP y CLS optimizados
Accesibilidad WCAG 2.1 AA y cobertura completa de pruebas
Desarrolladores y equipos de frontend que quieren rapidez y precisión, no una cosa o la otra.
// dos formas de conseguirlo
Úsalo dentro de tu IA o descárgalo una vez.
Plan Library
Este skill y 2.500+ más, dentro de tu chat
$9/mescancela cuando quieras, o $59 al año
Los 2.500+ skills, packs de prompts y agentes, cargados en cuanto los pides
Nada que descargar ni pegar: conecta una vez en Claude, ChatGPT, Claude Code o Cursor
Skills nuevos cada semana y 10 archivos del catálogo al mes para descargar
Marcas registradas de sus respectivos propietarios. KissMySkills no está afiliado a ellos ni cuenta con su respaldo.
// pídeselo a tu asistente
O deja que tu IA configure este skill por ti.
Ve a kissmyskills.com/pages/connector y configúrame el skill "Lena - Skill de AI para desarrolladora frontend" (handle: frontend-developer-skill)
Pégalo en Claude, ChatGPT, Claude Code, Cursor o Codex. Tu IA te guía para conectar KissMySkills (unos 3 minutos, prueba gratis de 7 días) y carga el skill. Lo que leerá tu IA →
Lo que compras de verdad
Añade a Lena a Claude y obtén una Desarrolladora Frontend Senior que escribe componentes listos para producción desde el primer prompt: React, Vue 3 y Angular con TypeScript completo, conversión de Figma a código e interfaces que superan Core Web Vitals sin entrar en pánico ante una sola auditoría de Lighthouse.
Ningún componente sin arquitectura. Lena identifica el patrón adecuado de gestión de estado, las herramientas de compilación y el enfoque de accesibilidad antes de escribir un solo elemento, porque desarrollar rápido y desarrollar bien no son opuestos.
Qué obtienes
→React (hooks, context, suspense), Vue 3 (Composition API), Angular 15+: tipado completo con TypeScript en todo el código
→Gestión de estado con Redux Toolkit, Zustand, Pinia o NgRx, adaptada a tu stack, sin asumir una opción predeterminada
→De Figma/Sketch a código adaptable y con precisión de píxel, con Tailwind, CSS Modules o Styled Components
→Configuración de pipelines de compilación con Vite, Webpack 5 y Turbopack: división de código, tree shaking y optimización de fragmentos
→Optimización de Core Web Vitals: LCP, INP y CLS, con auditorías de Lighthouse y estrategia de monitoreo de usuarios reales
→Cumplimiento de WCAG 2.1 AA: HTML semántico, roles ARIA, navegación con teclado y pruebas con lectores de pantalla
→Pruebas con Jest/Vitest + React Testing Library, pruebas E2E con Playwright/Cypress y documentación de componentes con Storybook
// cómo instalar
En menos de 2 minutos
Cuatro pasos. Cualquier chat de AI.
01
Descarga el archivo
Tras la compra, el enlace de descarga llega a tu correo. Guarda el archivo .skill: Claude lo acepta tal cual.
02
Abre tu chat de AI
Cualquier chat de IA que ya uses: Claude, ChatGPT, Gemini, Grok, Copilot u otro.
03
Añádelo a tu IA
Claude: en Settings → Capabilities → Skills, sube el archivo .skill. ChatGPT, Gemini y otros: abre el archivo .skill como un archivo .zip y pega SKILL.md en las instrucciones personalizadas o del proyecto.
04
Empieza a trabajar
Tu AI ahora está configurada como especialista. Pregúntale cualquier cosa dentro de su ámbito.
No se requieren conocimientos técnicos.
Con Library no hay nada que descargar. Conecta tu IA una vez y pide: «Carga a Lena de KissMySkills».
Lena escribe componentes listos para producción en React, Vue 3 y Angular, desde el primer prompt, con accesibilidad, rendimiento y facilidad de mantenimiento integrados. Cárgala una vez en Claude Projects y obtén un desarrollador frontend configurado sin tener que explicar el contexto al inicio de cada sesión.
¿Cómo instalo este archivo de skill?+
Descarga el paquete .skill (contiene SKILL.md), pega el contenido en las instrucciones de Claude Projects o en el prompt del sistema de tu AI, añade tu propio contexto y comienza tu primera sesión. Funciona con Claude, ChatGPT o cualquier chat de AI que acepte prompts del sistema.
¿Con qué herramientas de AI funciona esta skill?+
Funciona con Claude (recomendado), ChatGPT y cualquier chat de AI que acepte prompts del sistema. Claude Projects ofrece los mejores resultados: la skill está optimizada para las capacidades de Claude de seguir instrucciones.
¿Qué incluye esta descarga?+
Un paquete .skill que se entrega al instante después de la compra: la configuración completa del rol en SKILL.md, además de archivos con ejemplos prácticos y situaciones reales para que puedas comprobar la calidad antes de confiar en ella. Sin suscripción; es tuyo permanentemente.
¿Listo para especializar tu AI?
Este y 2.500+ más, dentro de Claude, ChatGPT, Claude Code, Codex o Cursor. Cancela cuando quieras.