senior-frontend
Crie aplicações web modernas com React e Next.js
또한 다음에서 사용할 수 있습니다: davila7
O desenvolvimento frontend requer gerenciamento de arquitetura de componentes, otimização de performance e organização de código em escala. Esta habilidade fornece ferramentas automatizadas e melhores práticas para construir aplicações React prontas para produção com TypeScript, Next.js e Tailwind CSS.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"senior-frontend" 사용 중입니다. Create a Button component with variants
예상 결과:
- Gera Button.tsx com interfaces TypeScript para props
- Adiciona atributos de acessibilidade (aria-label, disabled)
- Usa classes Tailwind CSS para variantes primary, secondary, danger
- Inclui tratamento de estados de loading e erro
- Exporta componente com nome adequado
"senior-frontend" 사용 중입니다. Analyze my Next.js app bundle
예상 결과:
- Reporta tamanho do bundle por chunk com visual breakdown
- Identifica grandes dependências (lodash, moment, styled-components)
- Sugere dynamic imports para componentes pesados
- Recomenda estratégias de code splitting
- Fornece economia estimada para cada otimização
"senior-frontend" 사용 중입니다. Set up a new project
예상 결과:
- Cria estrutura de projeto Next.js + TypeScript + Tailwind
- Gera pasta de componentes com organização atômica
- Adiciona configuração de ESLint e Prettier
- Configura Jest e React Testing Library
- Cria componentes de exemplo demonstrando padrões
보안 감사
안전All 137 static findings are false positives. The static analyzer misidentified markdown code fences as shell backtick execution, YAML frontmatter delimiters as cryptographic algorithms, and section headings as system reconnaissance. The three Python scripts are legitimate CLI utilities that perform standard file I/O for generating reports and documentation. No network access, no credential handling, no command injection vectors detected.
위험 요인
품질 점수
만들 수 있는 것
Scaffold de componentes React
Gera novos componentes React com TypeScript, props adequadas e estilização seguindo melhores práticas
Otimizar tamanho do bundle
Analisa bundles frontend e identifica grandes dependências para otimização de tree-shaking
Aplicar padrões de código
Gera padrões de componentes consistentes em toda a base de código do time com documentação
이 프롬프트를 사용해 보세요
Crie um novo componente React chamado Button em TypeScript. Inclua interfaces TypeScript adequadas para props, trate estados de loading e erro, e use Tailwind CSS para variantes de estilização.
Analise o tamanho do bundle da minha aplicação Next.js. Identifique as maiores dependências e sugira otimizações de code splitting para reduzir o tempo de carregamento inicial.
Configure um novo projeto Next.js com TypeScript, Tailwind CSS e estrutura de pastas adequada seguindo padrões React modernos e melhores práticas.
Revise meu componente React e refatore-o para usar hooks adequados, memoização e separar lógica de negócio da apresentação para melhor performance.
모범 사례
- Use interfaces TypeScript para todas as props de componentes para garantir segurança de tipos em toda a aplicação
- Separe lógica de negócio da apresentação usando custom hooks para gerenciamento de estado reutilizável
- Otimize o tamanho do bundle fazendo lazy loading de rotas e usando dynamic imports para componentes pesados
피하기
- Evite prop drilling através de múltiplas camadas de componentes; use context ou gerenciamento de estado
- Não coloque todo estado em useState; prefira useReducer para lógica de estado complexa
- Evite definições de funções inline no JSX render para prevenir re-renderizações desnecessárias