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
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "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.
عوامل الخطر
⚡ يحتوي على سكربتات (3)
درجة الجودة
ماذا يمكنك بناءه
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