Communitygithub.com

marnixGeerkens/rocketlauncher-claude-code

Umfassende Frontend-Entwicklungs-Skill zum Erstellen moderner, leistungsstarker Webanwendungen mit ReactJS, NextJS, TypeScript und Tailwind CSS. Enthält Komponenten-Gerüstbau, Leistungsoptimierung, Bundle-Analyse und UI-Best Practices. Verwenden Sie diesen Skill bei der Entwicklung von Frontend-Funktionen, der Optimierung der Leistung, der Umsetzung von UI/UX-Designs, der Zustandsverwaltung oder der Überprüfung von Frontend-Code.

Was ist rocketlauncher-claude-code?

Diese AI-Agent-Skill ('Senior Frontend') bietet ein komplettes Toolkit für die moderne Frontend-Entwicklung mit React, Next.js, TypeScript und Tailwind CSS. Sie automatisiert zentrale Aufgaben wie das Erstellen von Komponenten, die Bundle-Analyse und das Gerüstbauen kompletter Frontend-Projekte über drei Python-Skripte (`component_generator.py`, `bundle_analyzer.py`, `frontend_scaffolder.py`). Die Skill ist besonders nützlich für Entwickler, die konsistente Best Practices durchsetzen, die Performance ihrer Anwendungen verbessern und die Code-Qualität sicherstellen möchten. Sie unterstützt gängige Plattformen wie Claude Code, Cursor und Codex, indem sie eine strukturierte Referenzdokumentation zu React-Patterns, Next.js-Optimierung und allgemeinen Frontend-Best Practices bereitstellt. Die enthaltenen Skripte führen automatisierte Qualitätsprüfungen durch, generieren optimierte Komponenten und liefern Empfehlungen zur Leistungssteigerung – direkt aus der IDE oder CLI heraus.

Funktioniert mit✓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
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Senior Frontend

Komplettes Toolkit für erfahrene Frontend-Entwickler mit modernen Tools und Best Practices.

Schnellstart

Hauptfunktionen

Diese Skill bietet drei Kernfunktionen über automatisierte Skripte:

# Skript 1: Komponenten-Generator
python scripts/component_generator.py [optionen]

# Skript 2: Bundle-Analyzer
python scripts/bundle_analyzer.py [optionen]

# Skript 3: Frontend-Gerüstbauer
python scripts/frontend_scaffolder.py [optionen]

Kernfunktionen

1. Komponenten-Generator

Automatisiertes Werkzeug für das Erstellen von Komponenten.

Funktionen:

  • Automatischer Gerüstbau
  • Integrierte Best Practices
  • Konfigurierbare Vorlagen
  • Qualitätsprüfungen

Verwendung:

python scripts/component_generator.py <projekt-pfad> [optionen]

2. Bundle-Analyzer

Umfassendes Analyse- und Optimierungswerkzeug.

Funktionen:

  • Tiefgehende Analyse
  • Leistungskennzahlen
  • Empfehlungen
  • Automatisierte Korrekturen

Verwendung:

python scripts/bundle_analyzer.py <ziel-pfad> [--verbose]

3. Frontend-Gerüstbauer

Fortschrittliches Werkzeug für spezialisierte Aufgaben.

Funktionen:

  • Experten-Level-Automatisierung
  • Benutzerdefinierte Konfigurationen
  • Integrationsbereit
  • Produktionsreife Ausgabe

Verwendung:

python scripts/frontend_scaffolder.py [argumente] [optionen]

Referenzdokumentation

React Patterns

Umfassender Leitfaden verfügbar in references/react_patterns.md:

  • Detaillierte Muster und Praktiken
  • Code-Beispiele
  • Best Practices
  • Anti-Patterns zu vermeiden
  • Praxisnahe Szenarien

Nextjs Optimierungsleitfaden

Vollständige Workflow-Dokumentation in references/nextjs_optimization_guide.md:

  • Schritt-für-Schritt-Prozesse
  • Optimierungsstrategien
  • Tool-Integrationen
  • Leistungsoptimierung
  • Fehlerbehebungsleitfaden

Frontend Best Practices

Technische Referenz in references/frontend_best_practices.md:

  • Details zum Technologie-Stack
  • Konfigurationsbeispiele
  • Integrationsmuster
  • Sicherheitsüberlegungen
  • Skalierbarkeitsrichtlinien

Technologie-Stack

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

Entwicklungs-Workflow

1. Einrichtung und Konfiguration

# Abhängigkeiten installieren
npm install
# oder
pip install -r requirements.txt

# Umgebung konfigurieren
cp .env.example .env

2. Qualitätsprüfungen durchführen

# Das Analyzer-Skript verwenden
python scripts/bundle_analyzer.py .

# Empfehlungen überprüfen
# Korrekturen anwenden

3. Best Practices umsetzen

Folgen Sie den in folgenden Dokumentationen beschriebenen Mustern und Praktiken:

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

Zusammenfassung der Best Practices

Code-Qualität

  • Etablierte Muster befolgen
  • Umfassende Tests schreiben
  • Entscheidungen dokumentieren
  • Regelmäßig überprüfen

Leistung

  • Vor der Optimierung messen
  • Angemessenes Caching verwenden
  • Kritische Pfade optimieren
  • In der Produktion überwachen

Sicherheit

  • Alle Eingaben validieren
  • Parametrisierte Abfragen verwenden
  • Ordnungsgemäße Authentifizierung implementieren
  • Abhängigkeiten aktuell halten

Wartbarkeit

  • Klaren Code schreiben
  • Einheitliche Namensgebung verwenden
  • Hilfreiche Kommentare hinzufügen
  • Einfach halten

Häufige Befehle

# Entwicklung
npm run dev
npm run build
npm run test
npm run lint

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

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

Fehlerbehebung

Häufige Probleme

Lesen Sie den umfassenden Fehlerbehebungsabschnitt in references/frontend_best_practices.md.

Hilfe erhalten

  • Referenzdokumentation überprüfen
  • Skript-Ausgabemeldungen prüfen
  • Technologie-Stack-Dokumentation konsultieren
  • Fehlerprotokolle überprüfen

Ressourcen

  • Musterreferenz: references/react_patterns.md
  • Workflow-Leitfaden: references/nextjs_optimization_guide.md
  • Technischer Leitfaden: references/frontend_best_practices.md
  • Tool-Skripte: scripts/-Verzeichnis

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.

Verwandte Skills

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