Communitygithub.com

marnixGeerkens/rocketlauncher-claude-code

Compétence complète de développement frontend pour construire des applications web modernes et performantes avec ReactJS, NextJS, TypeScript et Tailwind CSS. Inclut l'échafaudage de composants, l'optimisation des performances, l'analyse des bundles et les meilleures pratiques UI. À utiliser lors du développement de fonctionnalités frontend, de l'optimisation des performances, de l'implémentation de designs UI/UX, de la gestion d'état ou de la révision de code frontend.

Qu'est-ce que rocketlauncher-claude-code ?

Cette compétence est un kit d'outils complet pour le développement frontend senior, axé sur ReactJS, NextJS, TypeScript et Tailwind CSS. Elle automatise trois tâches clés : la génération de composants avec échafaudage et vérification de qualité, l'analyse de bundle avec métriques de performance et correctifs automatisés, et l'échafaudage de projets frontend prêts pour la production. Elle est conçue pour les assistants IA comme Claude Code, Cursor ou Codex, leur permettant d'exécuter des scripts Python directement pour améliorer la productivité et la qualité du code. La compétence s'appuie sur une documentation de référence détaillée (patterns React, optimisation Next.js, bonnes pratiques frontend) pour guider les développeurs et les agents IA dans l'implémentation de solutions robustes et performantes.

Compatible avec✓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
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Frontend Senior

Kit d'outils complet pour le développement frontend senior avec des outils modernes et les meilleures pratiques.

Démarrage Rapide

Capacités Principales

Cette compétence fournit trois capacités principales via des scripts automatisés :

# Script 1 : Générateur de Composants
python scripts/component_generator.py [options]

# Script 2 : Analyseur de Bundle
python scripts/bundle_analyzer.py [options]

# Script 3 : Échafaudeur Frontend
python scripts/frontend_scaffolder.py [options]

Capacités Principales

1. Générateur de Composants

Outil automatisé pour les tâches de génération de composants.

Fonctionnalités :

  • Échafaudage automatisé
  • Meilleures pratiques intégrées
  • Modèles configurables
  • Contrôles de qualité

Utilisation :

python scripts/component_generator.py <chemin-du-projet> [options]

2. Analyseur de Bundle

Outil complet d'analyse et d'optimisation.

Fonctionnalités :

  • Analyse approfondie
  • Métriques de performance
  • Recommandations
  • Correctifs automatisés

Utilisation :

python scripts/bundle_analyzer.py <chemin-cible> [--verbose]

3. Échafaudeur Frontend

Outillage avancé pour des tâches spécialisées.

Fonctionnalités :

  • Automatisation experte
  • Configurations personnalisées
  • Prêt pour l'intégration
  • Sortie de qualité production

Utilisation :

python scripts/frontend_scaffolder.py [arguments] [options]

Documentation de Référence

Patterns React

Guide complet disponible dans references/react_patterns.md :

  • Patterns et pratiques détaillés
  • Exemples de code
  • Meilleures pratiques
  • Anti-patrons à éviter
  • Scénarios réels

Guide d'Optimisation Next.js

Documentation complète du flux de travail dans references/nextjs_optimization_guide.md :

  • Processus étape par étape
  • Stratégies d'optimisation
  • Intégrations d'outils
  • Réglage des performances
  • Guide de dépannage

Meilleures Pratiques Frontend

Guide de référence technique dans references/frontend_best_practices.md :

  • Détails de la pile technologique
  • Exemples de configuration
  • Patterns d'intégration
  • Considérations de sécurité
  • Directives d'évolutivité

Pile Technologique

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

Flux de Développement

1. Configuration et Installation

# Installer les dépendances
npm install
# ou
pip install -r requirements.txt

# Configurer l'environnement
cp .env.example .env

2. Exécuter les Contrôles de Qualité

# Utiliser le script d'analyse
python scripts/bundle_analyzer.py .

# Examiner les recommandations
# Appliquer les correctifs

3. Implémenter les Meilleures Pratiques

Suivre les patterns et pratiques documentés dans :

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

Résumé des Meilleures Pratiques

Qualité du Code

  • Suivre les patterns établis
  • Écrire des tests complets
  • Documenter les décisions
  • Réviser régulièrement

Performance

  • Mesurer avant d'optimiser
  • Utiliser la mise en cache appropriée
  • Optimiser les chemins critiques
  • Surveiller en production

Sécurité

  • Valider toutes les entrées
  • Utiliser des requêtes paramétrées
  • Implémenter une authentification correcte
  • Maintenir les dépendances à jour

Maintenabilité

  • Écrire un code clair
  • Utiliser une nomenclature cohérente
  • Ajouter des commentaires utiles
  • Rester simple

Commandes Courantes

# Développement
npm run dev
npm run build
npm run test
npm run lint

# Analyse
python scripts/bundle_analyzer.py .
python scripts/frontend_scaffolder.py --analyze

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

Dépannage

Problèmes Courants

Consultez la section complète de dépannage dans references/frontend_best_practices.md.

Obtenir de l'Aide

  • Consulter la documentation de référence
  • Vérifier les messages de sortie des scripts
  • Consulter la documentation de la pile technologique
  • Examiner les journaux d'erreurs

Ressources

  • Référence des Patterns : references/react_patterns.md
  • Guide du Flux de Travail : references/nextjs_optimization_guide.md
  • Guide Technique : references/frontend_best_practices.md
  • Scripts d'Outils : répertoire 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 associés

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