senior-frontend
Construa Aplicações Frontend Modernas com React
Auch verfügbar von: 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.
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "senior-frontend". Crie um componente Button com estado de loading
Erwartetes Ergebnis:
- 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
Verwendung von "senior-frontend". Como reduzo o tamanho do bundle do meu Next.js?
Erwartetes Ergebnis:
- 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
Verwendung von "senior-frontend". Quais são anti-padrões comuns do React a evitar?
Erwartetes Ergebnis:
- 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
Sicherheitsaudit
Niedriges RisikoThis 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.
Risikofaktoren
Qualitätsbewertung
Was du bauen kannst
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.
Probiere diese 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.
Bewährte Verfahren
- 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
Vermeiden
- 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