Frontend Developer
Construa aplicações modernas em React e Next.js
O desenvolvimento frontend requer profunda experiência em React, otimização de performance e padrões de acessibilidade. Esta skill fornece orientação pronta para produção para construir aplicações web escaláveis com ferramentas modernas e melhores práticas.
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「Frontend Developer」を使用しています。 Crie um componente modal de diálogo acessível
期待される結果:
- Componente Modal com foco preso e navegação por teclado
- Atributos ARIA para compatibilidade com leitores de tela
- Tratamento de clique no backdrop e fechamento com tecla Escape
- Interface TypeScript para props e configuração do modal
「Frontend Developer」を使用しています。 Otimize uma lista de produtos com renderização lenta
期待される結果:
- Implementação de virtual scrolling para grandes conjuntos de dados
- Componentes de card de produto memoizados com React.memo
- Handlers de busca e filtro com debounce
- Code splitting para componentes com muitas imagens
セキュリティ監査
安全This is a prompt-only skill containing only instructional text in SKILL.md. Static analysis scanned 0 files with 0 lines of executable code and detected no security patterns. The skill provides frontend development guidance for React and Next.js without any code execution, network access, or file system operations. No malicious patterns or prompt injection attempts detected.
品質スコア
作れるもの
Desenvolvimento de Componentes React
Construa componentes React prontos para produção com TypeScript, uso adequado de hooks e padrões de renderização otimizados para aplicações escaláveis.
Arquitetura de Aplicações Next.js
Projete aplicações full-stack Next.js com Server Components, Server Actions e estratégias ideais de busca de dados.
Otimização de Performance
Analise e melhore a performance frontend através de code splitting, lazy loading e técnicas de otimização de Core Web Vitals.
これらのプロンプトを試す
Crie um componente React de botão reutilizável com props TypeScript, suportando variantes (primário, secundário), tamanhos e estado desabilitado. Inclua classes Tailwind CSS e atributos de acessibilidade adequados.
Construa um Server Component Next.js 15 que busca dados de produtos de uma API, implementa limites Suspense para streaming e trata estados de carregamento e erro adequadamente.
Implemente um formulário de contato usando Next.js Server Actions com validação Zod, atualizações otimistas usando useOptimistic e tratamento de erro adequado com feedback ao usuário.
Analise este componente React quanto a problemas de performance. Identifique re-renders desnecessários, sugira estratégias de memoização e forneça código otimizado com useMemo, useCallback e React.memo onde apropriado.
ベストプラクティス
- Sempre inclua tipos TypeScript para props, state e respostas de API para detectar erros cedo
- Implemente estados de carregamento adequados e error boundaries para todas operações assíncronas
- Use elementos HTML semânticos e atributos ARIA para garantir conformidade de acessibilidade
回避
- Evite usar useEffect para busca de dados quando React Query ou Server Components estão disponíveis
- Não armazene estado de servidor no state do React quando bibliotecas dedicadas de busca de dados existirem
- Nunca pule testes de acessibilidade ou assuma que comportamento HTML padrão é suficiente