Communitygithub.com

marnixGeerkens/rocketlauncher-claude-code

Habilidad de desarrollo frontend integral para construir aplicaciones web modernas y de alto rendimiento con ReactJS, NextJS, TypeScript y Tailwind CSS. Incluye scaffolding de componentes, optimización de rendimiento, análisis de bundles y mejores prácticas de UI. Úsala al desarrollar funcionalidades frontend, optimizar rendimiento, implementar diseños UI/UX, gestionar estado o revisar código frontend.

¿Qué es rocketlauncher-claude-code?

Esta habilidad proporciona un conjunto completo de herramientas y guías de referencia para desarrolladores frontend senior que trabajan con tecnologías modernas como React JS, Next JS, TypeScript y Tailwind CSS. Está diseñada para agilizar el desarrollo mediante scripts de automatización: un generador de componentes, un analizador de bundles y un scaffold para proyectos frontend. También incluye documentación detallada sobre patrones de React, optimización de Next.js y mejores prácticas generales de frontend. Es compatible con editores como Claude Code, Cursor y Codex, y ofrece flujos de trabajo para configuración, pruebas de calidad, implementación de mejores prácticas y resolución de problemas comunes.

Compatible con✓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→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

Frontend Senior

Kit completo para frontend senior con herramientas modernas y mejores prácticas.

Inicio Rápido

Capacidades Principales

Esta habilidad proporciona tres capacidades principales mediante scripts automatizados:

# Script 1: Generador de Componentes
python scripts/component_generator.py [opciones]

# Script 2: Analizador de Bundles
python scripts/bundle_analyzer.py [opciones]

# Script 3: Scaffolder Frontend
python scripts/frontend_scaffolder.py [opciones]

Capacidades Principales

1. Generador de Componentes

Herramienta automatizada para tareas de generación de componentes.

Características:

  • Scaffolding automatizado
  • Mejores prácticas integradas
  • Plantillas configurables
  • Controles de calidad

Uso:

python scripts/component_generator.py <ruta-del-proyecto> [opciones]

2. Analizador de Bundles

Herramienta integral de análisis y optimización.

Características:

  • Análisis profundo
  • Métricas de rendimiento
  • Recomendaciones
  • Correcciones automatizadas

Uso:

python scripts/bundle_analyzer.py <ruta-objetivo> [--verbose]

3. Scaffolder Frontend

Herramienta avanzada para tareas especializadas.

Características:

  • Automatización de nivel experto
  • Configuraciones personalizadas
  • Listo para integración
  • Resultado de calidad de producción

Uso:

python scripts/frontend_scaffolder.py [argumentos] [opciones]

Documentación de Referencia

Patrones de React

Guía completa disponible en references/react_patterns.md:

  • Patrones y prácticas detallados
  • Ejemplos de código
  • Mejores prácticas
  • Antipatrones que evitar
  • Escenarios del mundo real

Guía de Optimización de Next.js

Documentación completa del flujo de trabajo en references/nextjs_optimization_guide.md:

  • Procesos paso a paso
  • Estrategias de optimización
  • Integraciones de herramientas
  • Ajuste de rendimiento
  • Guía de solución de problemas

Mejores Prácticas de Frontend

Guía de referencia técnica en references/frontend_best_practices.md:

  • Detalles del stack tecnológico
  • Ejemplos de configuración
  • Patrones de integración
  • Consideraciones de seguridad
  • Directrices de escalabilidad

Stack Tecnológico

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

Flujo de Trabajo de Desarrollo

1. Configuración e Instalación

# Instalar dependencias
npm install
# o
pip install -r requirements.txt

# Configurar entorno
cp .env.example .env

2. Ejecutar Controles de Calidad

# Usar el script de análisis
python scripts/bundle_analyzer.py .

# Revisar recomendaciones
# Aplicar correcciones

3. Implementar Mejores Prácticas

Sigue los patrones y prácticas documentados en:

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

Resumen de Mejores Prácticas

Calidad del Código

  • Sigue los patrones establecidos
  • Escribe pruebas exhaustivas
  • Documenta las decisiones
  • Revisa regularmente

Rendimiento

  • Mide antes de optimizar
  • Usa almacenamiento en caché adecuado
  • Optimiza rutas críticas
  • Supervisa en producción

Seguridad

  • Valida todas las entradas
  • Usa consultas parametrizadas
  • Implementa autenticación adecuada
  • Mantén las dependencias actualizadas

Mantenibilidad

  • Escribe código claro
  • Usa nomenclatura consistente
  • Añade comentarios útiles
  • Mantenlo simple

Comandos Comunes

# Desarrollo
npm run dev
npm run build
npm run test
npm run lint

# Análisis
python scripts/bundle_analyzer.py .
python scripts/frontend_scaffolder.py --analizar

# Despliegue
docker build -t app:latest .
docker-compose up -d
kubectl apply -f k8s/

Solución de Problemas

Problemas Comunes

Consulta la sección exhaustiva de solución de problemas en references/frontend_best_practices.md.

Obtener Ayuda

  • Revisa la documentación de referencia
  • Verifica los mensajes de salida de los scripts
  • Consulta la documentación del stack tecnológico
  • Revisa los registros de errores

Recursos

  • Referencia de Patrones: references/react_patterns.md
  • Guía de Flujo de Trabajo: references/nextjs_optimization_guide.md
  • Guía Técnica: references/frontend_best_practices.md
  • Scripts de Herramientas: directorio 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.

Skills relacionados

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