senior-frontend
Construa Aplicações Frontend Modernas com React
Également disponible depuis: alirezarezvani
Construir aplicações frontend complexas requer profundo conhecimento em padrões React, otimização de desempenho e gerenciamento de estado. Esta skill fornece orientação de nível sênior para arquitetura de componentes, otimização de bundle e implementação de sistemas de UI prontos para produção usando as melhores práticas da indústria.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "senior-frontend". Crie um componente Button com estado de loading
Résultat attendu:
- Estrutura de componente com interface TypeScript adequada
- Tratamento de estado de loading com integração de spinner
- Atributos de acessibilidade (aria-disabled, navegação por teclado)
- Classes Tailwind CSS para variantes (primary, secondary, outline)
- Declaração de export e recomendação de atualização de barrel file
Utilisation de "senior-frontend". Como reduzo o tamanho do bundle do meu Next.js?
Résultat attendu:
- Identificar dependências grandes usando bundle analyzer
- Implementar dynamic imports para code splitting baseado em rotas
- Configurar next/image para otimização automática de imagens
- Usar React.lazy() para lazy loading em nível de componente
- Habilitar tree shaking usando módulos ES
Utilisation de "senior-frontend". Quais são anti-padrões comuns do React a evitar?
Résultat attendu:
- Prop drilling através de muitas camadas - use context ao invés
- Lógica de negócio em componentes - extraia para custom hooks
- Componentes monolíticos grandes - divida por funcionalidade
- Falta de error boundaries - envolva componentes com ErrorBoundary
- Mutação direta de estado - sempre use setState ou gerenciadores de estado
Audit de sécurité
Risque faibleThis skill consists of 3 Python CLI scripts for frontend development tasks and 3 reference guides. All static findings are FALSE POSITIVES caused by pattern-matching errors. The scanner misidentified markdown code block delimiters as Ruby backtick execution, section numbers as weak crypto algorithms, and standard dev workflow documentation as credential access. No actual code execution, network access, or credential handling exists in this skill.
Facteurs de risque
⚡ Contient des scripts (3)
📁 Accès au système de fichiers (3)
Score de qualité
Ce que vous pouvez construire
Arquitetura de Componentes
Projete e estruture componentes React com tipos TypeScript adequados, hooks e estrutura de pastas.
Otimização de Bundle
Analise o tamanho do bundle e identifique oportunidades para reduzir a carga de JavaScript para melhor desempenho.
Guia de Revisão de Código
Aplique padrões frontend consistentes e identifique anti-padrões durante revisões de código.
Essayez ces prompts
Crie um componente React para [component name] usando TypeScript. Inclua interface de props adequada, tratamento de erros e siga padrões modernos de hooks. Use Tailwind CSS para estilização.
Analise o tamanho do bundle da minha aplicação React e identifique dependências grandes. Sugira estratégias de code splitting e abordagens de lazy loading para reduzir o tempo de carregamento inicial.
Ajude-me a implementar [specific pattern] para gerenciar estado global no React. Compare React Context, Zustand e Jotai para este caso de uso e explique os trade-offs.
Configure Next.js com App Router para meu projeto. Inclua configuração adequada de SSR, otimização de imagem e explique quando usar server components versus client components.
Bonnes pratiques
- Use TypeScript para todos os componentes para capturar erros em tempo de compilação
- Implemente error boundaries adequados para prevenir crashes da aplicação
- Faça lazy load de rotas e componentes pesados para reduzir o tamanho do bundle inicial
Éviter
- Evite prop drilling através de muitas camadas; use context ou gerenciamento de estado
- Não coloque lógica de negócio diretamente em componentes; extraia para custom hooks
- Evite componentes monolíticos grandes; divida por funcionalidade e responsabilidade