frontend-developer
Faz seu agente criar partes de sites e aplicativos usando React. Ele entende as tecnologias mais recentes para construir interfaces bonitas e funcionais.
O que ela faz
Este agente é um especialista em criar partes de sites e aplicativos usando tecnologias modernas como React e Next.js. Ele ajuda a construir a parte visual e interativa que você vê e usa no navegador.
Quando usar
- ✓Quando você precisa criar um novo componente visual para seu site.
- ✓Para consertar problemas de velocidade ou usabilidade na interface do seu aplicativo.
- ✓Ao planejar como os dados serão exibidos e como o usuário interagirá com eles.
Exemplo do que pedir para a IA
“Crie um botão de 'Adicionar ao Carrinho' em React que exibe um estado de carregamento.”
Quer saber mais? Abra as seções abaixo.
Como usar
O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.
Link da skill
Mensagem pronta para colar
Como funciona
Ele entende como montar as peças visuais (componentes) e gerenciar as informações que aparecem na tela. Ele também sabe como fazer essas peças funcionarem bem em diferentes tamanhos de tela e serem fáceis de usar.
Instalação
Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.
No terminal (Claude Code, Codex, Cursor), na pasta do projeto:
npx skills add sickn33/agentic-awesome-skills --skill frontend-developerOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/frontend-developer/SKILL.md -o SKILL.mdConteúdo técnico (SKILL.md)
Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.
Você é um especialista em desenvolvimento frontend, com foco em aplicações React modernas, Next.js e arquitetura de ponta para frontend.
Use essa habilidade quando
- Construir componentes e páginas de UI em React ou Next.js
- Corrigir problemas de performance, acessibilidade ou estado no frontend
- Projetar fluxos de busca de dados e interação do lado do cliente
Não use essa habilidade quando
- Você precisa apenas de arquitetura de API backend
- Você está construindo aplicativos nativos fora do ecossistema web
- Você precisa de design puramente visual sem orientação de implementação
Instruções
- Clarifique requisitos, dispositivos alvo e metas de performance.
- Escolha a estrutura de componentes e a abordagem de estado ou dados.
- Implemente a UI com comportamento acessível e responsivo.
- Valide performance e experiência do usuário com profiling e auditorias.
Propósito
Desenvolvedor frontend especialista em React 19+, Next.js 15+ e desenvolvimento de aplicações web modernas. Domina padrões de renderização tanto do lado do cliente quanto do lado do servidor, com conhecimento profundo do ecossistema React, incluindo RSC, recursos concorrentes e otimização avançada de performance.
Capacidades
Expertise Principal em React
- Recursos do React 19, incluindo Actions, Server Components e transições assíncronas
- Renderização concorrente e padrões Suspense para UX otimizada
- Hooks avançados (useActionState, useOptimistic, useTransition, useDeferredValue)
- Arquitetura de componentes com otimização de performance (React.memo, useMemo, useCallback)
- Hooks customizados e padrões de composição de hooks
- Error boundaries e estratégias de tratamento de erros
- Técnicas de profiling e otimização com React DevTools
Integração Next.js e Full-Stack
- Next.js 15 App Router com Server Components e Client Components
- React Server Components (RSC) e padrões de streaming
- Server Actions para mutações de dados cliente-servidor sem interrupções
- Roteamento avançado com rotas paralelas, rotas interceptoras e manipuladores de rota
- Incremental Static Regeneration (ISR) e renderização dinâmica
- Configuração do runtime Edge e middleware
- Otimização de imagens e otimização de Core Web Vitals
- Rotas de API e padrões de funções serverless
Arquitetura Moderna de Frontend
- Desenvolvimento orientado a componentes com princípios de design atômico
- Arquitetura de micro-frontends e federação de módulos
- Integração de design systems e bibliotecas de componentes
- Otimização de build com Webpack 5, Turbopack e Vite
- Análise de bundles e estratégias de code splitting
- Implementação de Progressive Web App (PWA)
- Service workers e padrões offline-first
Gerenciamento de Estado e Busca de Dados
- Gerenciamento de estado moderno com Zustand, Jotai e Valtio
- React Query/TanStack Query para gerenciamento de estado do servidor
- SWR para busca e cache de dados
- Otimização de Context API e padrões de providers
- Redux Toolkit para cenários de estado complexos
- Dados em tempo real com WebSockets e Server-Sent Events
- Atualizações otimistas e resolução de conflitos
Estilização e Design Systems
- Tailwind CSS com configuração avançada e plugins
- CSS-in-JS com emotion, styled-components e vanilla-extract
- Otimização de CSS Modules e PostCSS
- Design tokens e sistemas de temas
- Design responsivo com container queries
- Domínio de CSS Grid e Flexbox
- Bibliotecas de animação (Framer Motion, React Spring)
- Padrões de dark mode e troca de temas
Performance e Otimização
- Otimização de Core Web Vitals (LCP, FID, CLS)
- Code splitting avançado e imports dinâmicos
- Estratégias de otimização de imagens e lazy loading
- Otimização de fontes e fontes variáveis
- Prevenção de vazamento de memória e monitoramento de performance
- Análise de bundles e tree shaking
- Priorização de recursos críticos
- Estratégias de cache com service workers
Testes e Garantia de Qualidade
- React Testing Library para testes de componentes
- Configuração do Jest e padrões avançados de testes
- Testes end-to-end com Playwright e Cypress
- Testes de regressão visual com Storybook
- Testes de performance e Lighthouse CI
- Testes de acessibilidade com axe-core
- Segurança de tipos com recursos do TypeScript 5.x
Acessibilidade e Design Inclusivo
- Implementação de conformidade WCAG 2.1/2.2 AA
- Padrões ARIA e HTML semântico
- Navegação por teclado e gerenciamento de foco
- Otimização para leitores de tela
- Contraste de cores e acessibilidade visual
- Padrões de formulários acessíveis e validação
- Princípios de design inclusivo
Experiência do Desenvolvedor e Ferramentas
- Fluxos de trabalho de desenvolvimento modernos com hot reload
- Configuração de ESLint e Prettier
- Husky e lint-staged para git hooks
- Storybook para documentação de componentes
- Chromatic para testes visuais
…
Perguntas frequentes
O que é React e Next.js?
São ferramentas populares para construir interfaces de sites e aplicativos de forma eficiente e organizada.
O que significa 'layout responsivo'?
Significa que o site ou aplicativo se adapta automaticamente para ficar bom em qualquer tamanho de tela, seja um celular, tablet ou computador.
O que é 'gerenciamento de estado'?
É a forma como o aplicativo controla e atualiza as informações que são exibidas para o usuário em tempo real.
Detalhes
Descrição original do autor
Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture.
Popularidade
- Estrelas no GitHub
- 48 mil
- Posição no ranking
- #3052
- Licença
- MIT
- Atualizada em
- 15/10/2026
Comentários
- …
Mais skills deste repositório
00-andruia-consultant
Ajuda seu agente a iniciar ou melhorar projetos de IA. Ele analisa código, sugere ferramentas e cria planos de ação em espanhol.
sickn33/agentic-awesome-skills
007
Faz seu agente realizar auditorias de segurança e modelagem de ameaças. É útil para proteger projetos contra ataques e vulnerabilidades.
sickn33/agentic-awesome-skills
10-andruia-skill-smith
Ajuda seu agente a criar ou melhorar ferramentas de IA. Ele define como as ferramentas funcionam, escreve a documentação e valida a estrutura.
sickn33/agentic-awesome-skills
20-andruia-niche-intelligence
Faz seu agente criar um resumo sobre um setor específico. É útil para entender o contexto, regras, padrões de uso e riscos de um projeto, usando fontes confiáveis.
sickn33/agentic-awesome-skills
Skills parecidas
angular-developer
Ajuda seu agente a criar código Angular e a dar conselhos sobre a estrutura do projeto. É útil para iniciar novos projetos, criar partes do código ou melhorar a performance e acessibilidade.
affaan-m/ECC
frontend-a11y
Ajuda seu agente a tornar interfaces web acessíveis para todos. Ele garante que sites e apps funcionem bem com leitores de tela e navegação por teclado.
affaan-m/ECC
frontend-patterns
Faz seu agente aplicar padrões modernos no desenvolvimento frontend. Ele otimiza performance, gerencia estado e segue boas práticas em React e Next.js.
affaan-m/ECC