Communitygithub.com

marnixGeerkens/rocketlauncher-claude-code

Habilidade abrangente de desenvolvimento frontend para construir aplicações web modernas e de alto desempenho usando ReactJS, NextJS, TypeScript e Tailwind CSS. Inclui scaffolding de componentes, otimização de performance, análise de bundle e boas práticas de UI. Use ao desenvolver funcionalidades frontend, otimizar performance, implementar designs UI/UX, gerenciar estado ou revisar código frontend.

O que é rocketlauncher-claude-code?

Esta habilidade, projetada para agentes de IA como Claude Code, fornece um kit de ferramentas completo para desenvolvimento frontend sênior. Ela automatiza tarefas-chave por meio de três scripts principais: um gerador de componentes para scaffolding de componentes React com boas práticas integradas, um analisador de bundle para análise profunda e otimização de performance, e um scaffolder frontend para configuração de projetos. A habilidade também inclui documentação de referência sobre padrões React, otimização Next.js e boas práticas frontend, cobrindo um stack de tecnologia abrangente (TypeScript, React, Node.js, PostgreSQL, Docker, AWS). É útil para desenvolvedores que desejam acelerar o desenvolvimento frontend, garantir qualidade de código, otimizar performance e manter uma base de código consistente usando ferramentas automatizadas e padrões recomendados. Suporta plataformas como Claude Code, Cursor, Codex e outros agentes de IA que executam scripts Python e comandos de terminal.

Funciona com✓Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/marnixGeerkens/rocketlauncher-claude-code/tree/HEAD/components/skills/development/senior-frontend
Ver original→Navegar por todas as habilidades

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

Frontend Sênior

Kit de ferramentas completo para frontend sênior com ferramentas modernas e melhores práticas.

Início Rápido

Principais Capacidades

Esta habilidade fornece três capacidades principais por meio de scripts automatizados:

# Script 1: Gerador de Componentes
python scripts/component_generator.py [opções]

# Script 2: Analisador de Bundle
python scripts/bundle_analyzer.py [opções]

# Script 3: Scaffolder Frontend
python scripts/frontend_scaffolder.py [opções]

Capacidades Principais

1. Gerador de Componentes

Ferramenta automatizada para tarefas de geração de componentes.

Funcionalidades:

  • Scaffolding automatizado
  • Melhores práticas incorporadas
  • Modelos configuráveis
  • Verificações de qualidade

Uso:

python scripts/component_generator.py <caminho-do-projeto> [opções]

2. Analisador de Bundle

Ferramenta abrangente de análise e otimização.

Funcionalidades:

  • Análise aprofundada
  • Métricas de desempenho
  • Recomendações
  • Correções automatizadas

Uso:

python scripts/bundle_analyzer.py <caminho-alvo> [--verbose]

3. Scaffolder Frontend

Ferramenta avançada para tarefas especializadas.

Funcionalidades:

  • Automação de nível especialista
  • Configurações personalizadas
  • Pronto para integração
  • Saída de nível de produção

Uso:

python scripts/frontend_scaffolder.py [argumentos] [opções]

Documentação de Referência

Padrões React

Guia abrangente disponível em references/react_patterns.md:

  • Padrões e práticas detalhados
  • Exemplos de código
  • Melhores práticas
  • Antipadrões a evitar
  • Cenários do mundo real

Guia de Otimização Nextjs

Documentação completa do fluxo de trabalho em references/nextjs_optimization_guide.md:

  • Processos passo a passo
  • Estratégias de otimização
  • Integrações de ferramentas
  • Ajuste de desempenho
  • Guia de solução de problemas

Melhores Práticas Frontend

Guia de referência técnica em references/frontend_best_practices.md:

  • Detalhes do stack de tecnologia
  • Exemplos de configuração
  • Padrões de integração
  • Considerações de segurança
  • Diretrizes de escalabilidade

Stack de Tecnologia

Linguagens: TypeScript, JavaScript, Python, Go, Swift, Kotlin Frontend: React, Next.js, React Native, Flutter Backend: Node.js, Express, GraphQL, REST APIs Banco de Dados: PostgreSQL, Prisma, NeonDB, Supabase DevOps: Docker, Kubernetes, Terraform, GitHub Actions, CircleCI Cloud: AWS, GCP, Azure

Fluxo de Trabalho de Desenvolvimento

1. Configuração e Preparação

# Instalar dependências
npm install
# ou
pip install -r requirements.txt

# Configurar ambiente
cp .env.example .env

2. Executar Verificações de Qualidade

# Usar o script de análise
python scripts/bundle_analyzer.py .

# Revisar recomendações
# Aplicar correções

3. Implementar Melhores Práticas

Siga os padrões e práticas documentados em:

  • references/react_patterns.md
  • references/nextjs_optimization_guide.md
  • references/frontend_best_practices.md

Resumo de Melhores Práticas

Qualidade do Código

  • Siga padrões estabelecidos
  • Escreva testes abrangentes
  • Documente decisões
  • Revise regularmente

Desempenho

  • Meça antes de otimizar
  • Use cache apropriado
  • Otimize caminhos críticos
  • Monitore em produção

Segurança

  • Valide todas as entradas
  • Use consultas parametrizadas
  • Implemente autenticação adequada
  • Mantenha dependências atualizadas

Manutenibilidade

  • Escreva código claro
  • Use nomenclatura consistente
  • Adicione comentários úteis
  • Mantenha a simplicidade

Comandos Comuns

# Desenvolvimento
npm run dev
npm run build
npm run test
npm run lint

# Análise
python scripts/bundle_analyzer.py .
python scripts/frontend_scaffolder.py --analyze

# Implantação
docker build -t app:latest .
docker-compose up -d
kubectl apply -f k8s/

Solução de Problemas

Problemas Comuns

Consulte a seção abrangente de solução de problemas em references/frontend_best_practices.md.

Obtendo Ajuda

  • Revise a documentação de referência
  • Verifique as mensagens de saída dos scripts
  • Consulte a documentação do stack de tecnologia
  • Revise os logs de erro

Recursos

  • Referência de Padrões: references/react_patterns.md
  • Guia de Fluxo de Trabalho: references/nextjs_optimization_guide.md
  • Guia Técnico: references/frontend_best_practices.md
  • Scripts de Ferramentas: diretório scripts/

Individual skills in this repo

This repo contains 13 individual skills — each has its own dedicated page.

marnixGeerkens/rocketlauncher-claude-code

When the user wants to optimize, improve, or increase conversions on any marketing page — including homepage, landing pages, pricing pages, feature pages, or blog posts. Also use when the user says "CRO," "conversion rate optimization," "this page isn't converting," "improve conversions," or "why isn't this page working." For signup/registration flows, see signup-flow-cro. For post-signup activation, see onboarding-cro. For forms outside of signup, see form-cro. For popups/modals, see popup-cro.

marnixGeerkens/rocketlauncher-claude-code

Balance visual design with ATS compatibility for creative roles. Use when the user is in design, art, writing, marketing creative, or any visual/creative field and needs a resume that looks distinctive but still parses.

marnixGeerkens/rocketlauncher-claude-code

Transform resume bullets into detailed portfolio case studies with context, action, and outcome. Use when the user mentions portfolio, case study, project write-up, or expanding a resume bullet into a longer narrative.

marnixGeerkens/rocketlauncher-claude-code

Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences. Covers developer portfolios, designer portfolios, creative portfolios, and portfolios that convert visitors into opportunities. Use when: portfolio, personal website, showcase work, developer portfolio, designer portfolio.

marnixGeerkens/rocketlauncher-claude-code

Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.

marnixGeerkens/rocketlauncher-claude-code

Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.

marnixGeerkens/rocketlauncher-claude-code

Frontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code.

marnixGeerkens/rocketlauncher-claude-code

Next.js App Router principles. Server Components, data fetching, routing patterns.

marnixGeerkens/rocketlauncher-claude-code

Expert integration of Supabase Auth with Next.js App Router Use when: supabase auth next, authentication next.js, login supabase, auth middleware, protected route.

marnixGeerkens/rocketlauncher-claude-code

Create API handoff documentation for frontend developers. Use when backend work is complete and needs to be documented for frontend integration, or user says 'create handoff', 'document API', 'frontend handoff', or 'API documentation'.

marnixGeerkens/rocketlauncher-claude-code

Document frontend data needs for backend developers. Use when frontend needs to communicate API requirements to backend, or user says 'backend requirements', 'what data do I need', 'API requirements', or is describing data needs for a UI.

marnixGeerkens/rocketlauncher-claude-code

Comprehensive Python library for astronomy and astrophysics. This skill should be used when working with astronomical data including celestial coordinates, physical units, FITS files, cosmological calculations, time systems, tables, world coordinate systems (WCS), and astronomical data analysis. Use when tasks involve coordinate transformations, unit conversions, FITS file manipulation, cosmological distance calculations, time scale conversions, or astronomical data processing.

marnixGeerkens/rocketlauncher-claude-code

Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.

Habilidades Relacionadas

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community