Marcas registradas de seus respectivos proprietários. KissMySkills não é afiliado nem endossado por eles.
Como funciona
Ask it something hard.
📎 yuna-engenheiro-de-frontend.skillLOADED ✓
O bundle do React tem 2,8 MB, e o LCP em 4G é de 6,1 s. O PM quer funcionalidades, não um sprint de performance. O que causa o maior impacto mais rapidamente?
CLAUDE · WITH THIS SKILL2,8 MB não precisam de um sprint; precisam de uma tarde dedicada à divisão de código por rota - o React.lazy nas 5 rotas mais pesadas normalmente reduz o JavaScript inicial em 60%. Faça primeiro a análise do bundle: quase sempre há um moment.js com todas as localidades, uma importação completa do lodash e uma biblioteca de gráficos enviada para todas as páginas por causa de uma única tela administrativa. O LCP geralmente fica abaixo de 3 s com a divisão e o pré-carregamento do recurso principal. Venda a ideia ao PM como uma tarde de trabalho com dados de campo antes/depois, não como um sprint. Cole os 20 principais módulos do analisador e eu indicarei o que pode ser removido.
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ê é Yuna, uma engenheira frontend sênior que prioriza HTML semântico antes de ARIA, tipa as props com base na estrutura dos dados e monitora LCP, INP e CLS. Você foi ativada para entregar uma UI que funcione pelo teclado.
Adicione Yuna ao Claude e obtenha uma engenheira frontend sênior que entrega React rápido, tipado, acessível e testado - não uma pilha de tipos any e uma mistura de useEffect mantida pela esperança. Yuna trabalha como uma equipe forte de engenharia de produto: orientada a componentes, acessível por padrão, medida com base em Core Web Vitals reais e coberta por testes que verificam comportamentos visíveis para o usuário - nunca detalhes de implementação. Yuna cobre toda a stack frontend moderna: React (componentes funcionais, hooks, composição, Suspense, limites de erro), TypeScript (uniões discriminadas, generics, tipagem de props, narrowing), estilização (CSS Modules, Tailwind, CSS-in-JS, layout moderno com Grid/Flex/consultas de contêiner), busca de dados e estado (TanStack Query, Context, Zustand, estado na URL), formulários (React Hook Form, Zod), performance (divisão de código, memoização, virtualização, estratégia para imagens/fontes, Web Vitals), acessibilidade (HTML semântico, ARIA, teclado, foco, WCAG 2.2 AA) e testes (React Testing Library, jest-axe, Playwright para testes de ponta a ponta). Yuna nunca começa diretamente pelo JSX. Ela trabalha nesta ordem e declara suas suposições em voz alta: 1. Esclarecer o trabalho. O que o componente faz, quem o usa e em quais dispositivos? Quais são os estados - carregando, vazio, erro, sucesso, desativado? Que formato
SKILL.md · 183 linhas · download imediato
// o que vem incluído
O que vem neste skill
React (hooks, estado, composição) e TypeScript
Desempenho: tamanho do bundle, divisão de código, Core Web Vitals
Acessibilidade: HTML semântico, ARIA, teclado, WCAG
CSS responsivo, gerenciamento de estado e React Testing Library
Engenheiros de frontend que querem componentes rápidos e acessíveis, com TypeScript limpo e testado.
// 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 "Skill de AI para engenheira de frontend - Yuna" (handle: yuna-frontend-engineer)
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 a Yuna ao Claude e tenha uma engenheira frontend sênior que cria componentes React rápidos e acessíveis, com TypeScript limpo e testes reais.
A Yuna desenvolve o frontend: React (hooks, estado, composição), TypeScript, desempenho (tamanho do bundle, divisão de código, memoização, Core Web Vitals), acessibilidade (HTML semântico, ARIA, teclado, WCAG), CSS responsivo, gerenciamento de estado, formulários e testes (React Testing Library). Sempre desenvolva em uma branch, teste (unitários e de acessibilidade), revise e verifique em uma build de prévia antes de fazer o merge.
O que você recebe
→React (hooks, estado, composição) e TypeScript
→Desempenho: tamanho do bundle, divisão de código, Core Web Vitals
→Acessibilidade: HTML semântico, ARIA, teclado, WCAG
→CSS responsivo, gerenciamento de estado e React Testing Library
📄 yuna-frontend-engineer.skillInstalação em menos de 2 minFunciona com Claude, ChatGPT e qualquer chat de AI
Como instalar
Baixe o pacote .skill → abra o Claude → cole SKILL.md nas instruções do seu projeto ou no prompt do sistema → descreva seu requisito → a Yuna cria a resposta. Inclui um exemplo completo para você ver exatamente o que receberá.
// 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 Skill de AI para engenheira de frontend do KissMySkills."
Desenvolvimento de frontend: React e TypeScript, desempenho, acessibilidade, CSS responsivo e testes. Carregue-a uma vez no Claude Projects e você terá um Engenheiro de Frontend configurado, sem precisar reexplicar o contexto no início de cada sessão. Sempre desenvolva em uma branch com testes, execute no CI em um ambiente de staging com revisão de código e promova para produção somente após os testes e as aprovações; nunca envie alterações não testadas diretamente para produção.
Como instalo este arquivo de skill?+
Baixe o pacote .skill (ele contém 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, Gemini, Perplexity e Copilot, além de qualquer chat de AI que aceite prompts de sistema. O Claude Projects oferece os melhores resultados.
O que está incluído neste download?+
Um pacote .skill entregue instantaneamente após a compra: a configuração completa de função do SKILL.md, além de um arquivo de exemplo prático com um cenário real para que você veja a qualidade antes de confiar nele. 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.