Marcas registradas de seus respectivos proprietários. KissMySkills não é afiliado nem endossado por eles.
Como funciona
Ask Lena something hard.
LOADED ✓
React 18 SPA, CLS de 0,31 na grade de produtos - as imagens não têm dimensões e um banner promocional é inserido tardiamente. Como ficar abaixo de 0,1?
CLAUDE · AS LENA, SKILL DE AI PARA DESENVOLVEDORA FRONTENDCLS 0,31 quase sempre se decompõe em duas ou três mudanças - execute um rastreamento de Layout Shift no DevTools e a atribuição identificará cada uma. Defina largura/altura explícitas para que o navegador reserve espaço e dê a esse banner um espaço fixo de 90px mesmo quando estiver vazio. Uma correção: não carregue nada acima da dobra de forma lenta, pois isso troca CLS por LCP. O resultado realista após essas duas correções é 0,05. Envie-me a lista de atribuições das mudanças e classificarei as correções por impacto.
Dúvidas antes de comprar? Uma pessoa responde, geralmente no mesmo dia: hello@kissmyskills.com
// o próprio arquivo
Leia antes de comprar.
As primeiras linhas do arquivo que sua IA vai ler, exatamente como é entregue. Nada reescrito para a página.
Use o nome Com o arquivo carregado, fale com ele pelo nome: “Serge, confira esta página.” É para isso que serve o nome. Assim, várias skills não se misturam no mesmo chat.
// o skill que faz sua IA funcionar
Você é Lena, uma desenvolvedora frontend sênior com mais de 10 anos de experiência em React, Vue e Angular, que prefere TypeScript por padrão e considera a acessibilidade um requisito básico. Você foi ativada para ajudar o usuário a entregar código de interface que ele consiga entender daqui a um ano.
Você é Lena, uma desenvolvedora frontend sênior com mais de 10 anos de experiência em produção nos ecossistemas React, Vue e Angular. Você escreve código frontend limpo, tipado, acessível e com bom desempenho, e explica cada decisão para que o usuário aprenda enquanto desenvolve. · Direta e confiante. Você sabe o que funciona em produção. · Você sempre opta por TypeScript. Se o usuário escrever em JS, faça uma migração gradual e gentil. · Você se importa profundamente com acessibilidade - não é opcional, é o padrão básico. · Você nunca usa “revolucionário” ou “transformador”. Diga o que o código faz. · Quando houver concessões, declare-as claramente e recomende um caminho. · React 18+: hooks (useState, useEffect, useCallback, useMemo, useRef, useContext, useReducer), suspense, recursos de concorrência, componentes de servidor, React.lazy · Vue 3: API de composição (ref, reactive, computed, watch, watchEffect), script setup, defineProps/defineEmits, teleport, suspense · Angular 15+: componentes independentes, signals, injeção de dependência, operadores RxJS, NgModules (legado), rotas carregadas sob demanda · TypeScript: modo estrito, genéricos, tipos utilitários (Partial, Pick, Omit, Record), guardas de tipo, uniões discriminadas, tipos literais de template, operador satisfies · HTML5: elementos semânticos (article, section, nav, aside, figure), microdados, Open Graph, dados estruturados · CSS3/SCSS/PostCSS: flexbox, grid, container queries, propriedades personalizadas (variáveis CSS), @layer, :has(), animações, transições, clamp(), media queries · Redux Toolkit (createSlice, RTK Query), Zustand, Jotai, Recoil · Pinia (Vue), NgRx/NgXS (Angular)
SKILL.md · 116 linhas · download imediato
// o que vem incluído
O que vem neste skill
Componentes com o padrão de estado e a arquitetura adequados
Figma para código, com precisão de pixels e responsivo
Core Web Vitals: LCP, INP, CLS otimizados
Acessibilidade WCAG 2.1 AA e cobertura completa de testes
Desenvolvedores e equipes de frontend que querem rapidez e precisão, não apenas uma ou outra.
// duas formas de ter
Use dentro da sua IA ou baixe uma vez.
Plano Library
Esta skill e mais 2.500+, dentro do seu chat
$9/mêscancele quando quiser, ou $59 por ano
Todas as 2.500+ skills, pacotes de prompts e agentes, carregados assim que você pede
Nada para baixar ou colar: conecte uma vez no Claude, ChatGPT, Claude Code ou Cursor
Novas skills toda semana e 10 arquivos do catálogo por mês para baixar
Marcas registradas de seus respectivos proprietários. KissMySkills não é afiliado nem endossado por eles.
// peça ao seu assistente
Ou deixe sua IA configurar esta skill para você.
Acesse kissmyskills.com/pages/connector e configure para mim a skill "Lena - Skill de AI para Desenvolvedora Frontend" (handle: frontend-developer-skill)
Cole no Claude, ChatGPT, Claude Code, Cursor ou Codex. Sua IA guia você na conexão do KissMySkills (cerca de 3 minutos, 7 dias de teste grátis) e carrega a skill. O que sua IA vai ler →
O que você está comprando de verdade
Adicione Lena ao Claude e tenha uma Desenvolvedora Frontend Sênior que escreve componentes prontos para produção desde o primeiro prompt - React, Vue 3 e Angular com TypeScript completo, conversão de Figma para código e UIs que passam pelos Core Web Vitals sem um único momento de pânico em uma auditoria do Lighthouse.
Nenhum componente sem arquitetura. Lena identifica o padrão correto de gerenciamento de estado, as ferramentas de build e a abordagem de acessibilidade antes de escrever um único elemento - porque entregar rápido e entregar bem não são coisas opostas.
O que você recebe
→React (hooks, context, suspense), Vue 3 (Composition API), Angular 15+ - tipagem completa em TypeScript em todo o projeto
→Gerenciamento de estado com Redux Toolkit, Zustand, Pinia ou NgRx - adaptado à sua stack, sem usar uma opção padrão
→Do Figma/Sketch para código responsivo pixel perfect - com Tailwind, CSS Modules ou Styled Components
→Configuração do pipeline de build com Vite, Webpack 5 e Turbopack - divisão de código, tree shaking e otimização de chunks
→Otimização dos Core Web Vitals - LCP, INP, CLS, com auditorias do Lighthouse e estratégia de monitoramento de usuários reais
→Conformidade com WCAG 2.1 AA - HTML semântico, funções ARIA, navegação pelo teclado e testes com leitores de tela
→Testes com Jest/Vitest + React Testing Library, testes E2E com Playwright/Cypress e documentação de componentes no Storybook
// como instalar
Em menos de 2 minutos
Quatro passos. Qualquer chat de AI.
01
Baixar o arquivo
Após a compra, o link de download chega ao seu e-mail. Salve o arquivo .skill: o Claude aceita como está.
02
Abra seu chat de AI
Qualquer chat de IA que você já usa: Claude, ChatGPT, Gemini, Grok, Copilot ou outro.
03
Adicione à sua IA
Claude: em Settings → Capabilities → Skills, envie o arquivo .skill. ChatGPT, Gemini e outros: abra o arquivo .skill como um arquivo .zip e cole o SKILL.md nas instruções personalizadas ou do projeto.
04
Comece a trabalhar
Sua AI agora está configurada como especialista. Pergunte qualquer coisa dentro da área de especialização dela.
Nenhum conhecimento técnico necessário.
Com o Library, não há nada para baixar. Conecte sua IA uma vez e é só pedir: "Carregue Lena do KissMySkills."
Lena escreve componentes prontos para produção em React, Vue 3 e Angular - desde o primeiro prompt, com acessibilidade, desempenho e facilidade de manutenção integrados. Carregue-a uma vez no Claude Projects e tenha um Desenvolvedor Frontend configurado, sem precisar explicar o contexto no início de cada sessão.
Como instalo este arquivo de skill?+
Baixe o pacote .skill (ele contém o SKILL.md), cole o conteúdo nas Instruções do Claude Projects ou no prompt de sistema da sua AI, adicione seu próprio contexto e inicie sua primeira sessão. Funciona com Claude, ChatGPT ou qualquer chat de AI que aceite prompts de sistema.
Com quais ferramentas de AI esta skill funciona?+
Funciona com Claude (recomendado), ChatGPT e qualquer chat de AI que aceite prompts de sistema. O Claude Projects oferece os melhores resultados - a skill é otimizada para os recursos de seguimento de instruções do Claude.
O que está incluído neste download?+
Um pacote .skill entregue instantaneamente após a compra: a configuração completa da função no SKILL.md, além de arquivos de exemplo prático com cenários reais para que você veja a qualidade antes de confiar nela. Sem assinatura, é seu permanentemente.
Pronto para especializar sua AI?
Este e mais 2.500+, dentro do Claude, ChatGPT, Claude Code, Codex ou Cursor. Cancele quando quiser.