Communitygithub.com

JairoBg03/skills

Erstellt professionelle Landingpages mit individuellem Design, Animationen und Effekten auf Agenturniveau – inklusive vollständigem Workflow: Briefing, Designrichtung, Bau, Audit und Deployment. Vermeidet den generischen KI-Vorlagen-Look.

Was ist skills?

Diese Skill für KI-Agenten (z. B. Claude Code) ermöglicht die Erstellung von hochwertigen, individuellen Landingpages mit einem professionellen, agenturähnlichen Look – ganz ohne generische KI-Vorlagen. Der Workflow ist strikt vorgegeben: Vom Ausfüllen eines detaillierten Briefing-Templates über die Festlegung einer einzigartigen Designrichtung (Persönlichkeit, Typografie, Farbe, Layout, visuelle Signatur) bis hin zum Bau mit dem optimierten Technologie-Stack aus Astro 5, Tailwind CSS v4, GSAP (mit ScrollTrigger und SplitText) und Lenis für sanftes Scrollen. Die Skill legt großen Wert auf Mobile-First-Entwicklung, exzellente Performance (≥95 Lighthouse Punkte), Barrierefreiheit (AA-Kontrast, Tastaturnavigation) und eine einzige, klare Handlungsaufforderung (CTA). Animierte Eintritte werden stets mit `gsap.from()` umgesetzt, um die LCP (Largest Contentful Paint) nicht zu beeinträchtigen, und respektieren die `prefers-reduced-motion`-Präferenz. UI-Komponentenbibliotheken sind verboten – jedes Design ist ein Unikat. Am Ende steht ein statischer Build, der auf Netlify, Cloudflare Pages oder Vercel deployed wird.

Funktioniert mit~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/JairoBg03/skills/tree/HEAD/landing-pages
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Wann verwenden

  • Der Benutzer wünscht eine neue Landingpage (für Produkt, Dienstleistung, Event, Portfolio, Warteliste)
  • Er möchte eine bestehende Landingpage überarbeiten, damit sie professionell und einzigartig aussieht
  • Er bittet um Animationen, Scrolleffekte oder Mikrointeraktionen auf einer Marketingseite
  • Er befindet sich in der Planungsphase: Welche Abschnitte, welche Botschaft, welche Struktur

Stack (und warum)

KomponenteWahlWarumVerworfene Alternative
FrameworkAstro 5Standardmäßig statisch (0 JS Basis), Komponenten, astro:assets für Bilder, Deployment = dist/ hochladenNext.js (Overkill für Landingpages, komplexeres Deployment), reines HTML (keine Komponenten, keine Optimierung)
StylingTailwind CSS v4Eigene Tokens via @theme in CSS, keine JS Konfiguration, automatische BereinigungUI-Kits (shadcn/DaisyUI/Flowbite → generischer Look), reines CSS (langsam für Iterationen)
AnimationGSAP 3.13+ (ScrollTrigger, SplitText)Branchenstandard für Scroll/Timeline; ab v3.13 sind ALLE Plugins kostenlosFramer Motion (an React gebunden), AOS (limitiert, wirkt wie eine Vorlage)
Smooth ScrollLenisLeicht (~4kb), dokumentierte Integration mit ScrollTriggerLocomotive Scroll (schwerer, weniger gewartet)
DeploymentNetlify / Cloudflare Pages / VercelRepository verbinden → Push → Deployment; statischer Output ohne ServerVPS (unnötig für statische Seiten)

Harte Regel: Keine UI-Komponentenbibliotheken installieren. Das Design ist eigenständig – genau das unterscheidet diese Skill von einer Vorlage.

Arbeitsablauf (obligatorisch, in dieser Reihenfolge)

Beginne NIE mit dem Code. Eine Landingpage ohne Briefing ist eine Vorlage mit einem anderen Namen.

  1. Briefing — fülle assets/brief-template.md MIT dem Benutzer aus. Fehlen Ziel, Zielgruppe oder CTA: FRAGE, bevor du fortfährst.
  2. Designrichtung — folge references/design-direction.md: Persönlichkeit → Typografie → Farbe → Layout → visuelle Signatur. Setze sie in assets/design-tokens.css um.
  3. Abschnittsarchitektur — definiere den narrativen Bogen (Tabelle unten) und die Copy der Überschriften vor dem Layout.
  4. Bau — Abschnitt für Abschnitt, Mobile-First (zuerst mit 390px). Animationen gemäß references/animation-recipes.md.
  5. Audit — Übergabe-Checkliste (unten). Keine Übergabe ohne Bestehen.
  6. Deployment — statischer Build + Hosting (Befehle unten).

Narrativer Bogen (Basisstruktur)

#AbschnittAufgabe
1HeroWertversprechen in <5s verständlich + primärer CTA
2Problem / KontextNennt den Schmerz, den der Besucher erkennt
3Lösung / VorteileWie du es löst – Vorteile, nicht Funktionen
4Sozialer BeweisEchte Testimonials, Logos, Metriken
5Wie es funktioniertSchritte, Demo, Screenshots
6EinwändeFAQ, Garantie, Preise
7Finaler CTAWiederholt die GLEICHE eindeutige Aktion des Hero

Passe Abschnitte an, verschmelze oder entferne sie je nach Briefing – nicht jede Landingpage benötigt alle 7.

Kritische Muster

  • Eine einzige Conversion: Die gesamte Seite drängt auf EINE Aktion. Zwei verschiedene CTAs = schlecht gemachtes Briefing.
  • Wirklich Mobile-First: Design und Bau erfolgen zuerst bei 390px; Desktop ist die Weiterentwicklung, nicht umgekehrt.
  • LCP unantastbar: Das LCP-Element (Überschrift oder Bild des Hero) wird nie auf opacity: 0 in CSS gesetzt. Eintritte erfolgen mit gsap.from() (ohne JS wird die Seite vollständig angezeigt) und dauern insgesamt ≤ 1s.
  • prefers-reduced-motion: JEDE Animation lebt innerhalb von gsap.matchMedia(). Keine Ausnahmen.
  • Minimale Inseln: JS nur dort, wo echte Interaktion stattfindet. Ein FAQ-Akkordeon ist <details>, keine hydrierte Komponente.
  • Bilder: Immer astro:assets (<Image>), AVIF/WebP, explizite Dimensionen, loading="lazy" außer beim Hero.
  • Schriftarten: Selbst gehostet (lokales woff2 oder Fontsource), font-display: swap, maximal 2 Familien, Preload der Display-Schrift.

Checkliste vor der Übergabe

  • Lighthouse Mobile ≥ 95 bei Performance, Accessibility und SEO
  • CLS = 0 (Dimensionen bei Bildern, Schrift-Fallback angepasst)
  • Animationen deaktiviert mit prefers-reduced-motion: reduce
  • Kontrast AA: 4,5:1 Text, 3:1 große UI
  • Tastaturnavigation, Fokus sichtbar, nur ein h1
  • Meta Description, OG Tags, Favicon, eindeutiger Titel
  • Getestet bei 390px, 768px und 1440px
  • Markentest: Wird das Logo abgedeckt, könnte die Seite von einem anderen Unternehmen stammen? Wenn ja → zurück zu Phase 2

Befehle

# Projekt erstellen
pnpm create astro@latest meine-landing -- --template minimal --typescript strict
cd meine-landing
pnpm astro add tailwind
pnpm add gsap lenis

# Entwicklung und Build
pnpm dev
pnpm build && pnpm preview

# Deployment (wähle eines; bei Netlify/Vercel/Cloudflare: build "pnpm build", output "dist")
npx wrangler pages deploy dist        # Cloudflare Pages direkt
npx netlify deploy --prod --dir=dist  # Netlify direkt

Ressourcen

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