Communitygithub.com

brainzcode/premium-landing

Baue eine vollständige Premium-Landingpage, entweder nach einem Referenz-Screenshot/URL oder nach einer schriftlichen Aufgabenstellung, in HTML, React, Next.js oder Astro.

Was ist premium-landing?

Dieses Skill dient zum Erstellen hochwertiger Landingpages, die sowohl visuell als auch technisch höchsten Ansprüchen genügen. Es eignet sich für Szenarien, in denen ein Screenshot, eine URL oder eine detaillierte Beschreibung vorliegt, und unterstützt die Stacks HTML, React, Next.js und Astro. Der Fokus liegt nicht nur auf dem Nachbauen, sondern auf einer gründlichen Prüfung: Die Seite muss auf allen Bildschirmbreiten von 320 bis 1920 Pixeln ohne horizontale Überläufe funktionieren, die Hero-Sektion muss exakt in den Viewport passen und es darf keine unbeabsichtigten Layout-Elemente geben – alles, was nicht bewusst gestaltet ist, gilt als Fehler. Das Skill enthält Referenzen für Gestaltungs-Tokens, typische Layout-Fallen (z. B. Grids, Marquee-Elemente, SVG-Icons) und eine automatisierte Verifizierung mittels eines Skripts. Es definiert eine klare Bauordnung (zuerst Tokens, dann Hero, dann Sektionen, dann Footer) und eine Abschlusssequenz mit Smooth-Scrolling, mobilem Menü, Social-Share-Favicons und einer aussagekräftigen README.

Funktioniert mit✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/brainzcode/premium-landing/tree/HEAD/plugins/premium-landing/skills/landing-page
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Premium Landingpage

Eine Landingpage ist fertig, wenn sie drei Prüfungen besteht: Sie stimmt mit ihrer Referenz oder Aufgabenstellung überein, sie hält bei jeder Breite von 320 bis 1920 zusammen und nichts an ihr ist zufällig. Der meiste Aufwand steckt in der dritten Prüfung.

Zuerst den Modus festlegen

Referenzmodus — der Benutzer hat einen Screenshot, ein PDF, eine URL oder die Anweisung „Das bitte nachbauen“ mitgeliefert. Genauigkeit ist das Ziel und „ungefähr richtig“ ist ein Fehler. Miss die Referenz numerisch aus, bevor du CSS schreibst. Lade reference-replication.

Briefmodus — der Benutzer hat ein Unternehmen, eine Zielgruppe oder ein Gefühl beschrieben, aber kein Bild. Die Komposition liegt bei dir; die Hausregeln und die Sektionsbibliothek setzen die Qualitätsuntergrenze.

Wenn beides vorliegt, gewinnt die Referenz bei allem, was sie abdeckt, und der Brief füllt die Lücken. Wenn keines klar ist, frage nach — eine für den falschen Modus gebaute Landingpage ist verschwendet.

Nur fragen, was den Bau verändert

Kein Verhör. Vier Dinge beeinflussen tatsächlich das Ergebnis:

  1. Stack — HTML / React / Next / Astro. Gerüst aus templates/<stack>/.
  2. Brand-Basics — Name und entweder eine Palette oder „aus der Referenz übernehmen".
  3. Locale — bestimmt Währung, Datumsformat, UK- vs. US-Schreibweise. Einmal fragen, konsequent bleiben.
  4. Sektionen — nur, wenn weder eine Referenz noch ein offensichtlicher Seitentyp sie impliziert.

Alles andere hat einen vertretbaren Standard. Verwende ihn und sag, was du angenommen hast.

Bauordnung

Arbeiten in falscher Reihenfolge verursacht Nacharbeit, weil die Höhe des Heroes alles oberhalb des Foldes und die Design-Tokens jede Sektion einschränken.

  1. Tokens — Oberflächen, Tinte, Linien, Akzent, Radien, Easing, eine fließende Schriftgrößenskala. references/design-system.md.
  2. Hero — das am häufigsten korrigierte Element in jedem Bau. 100svh, Rhythmus in vh. references/house-rules.md.
  3. Sektionen in der Reihenfolge der Referenz. references/sections.md. Jeder Slot, der ein Foto braucht: jetzt besorgen, keine graue Box lassen — ../stock-imagery/SKILL.md.
  4. Footer, dann die Abschlusssequenz (siehe unten).
  5. Verifizieren. Nicht optional — siehe unten.

Die Fallen

Lies references/traps.md, bevor du Grid-, Marquee-, SVG-Icon- oder randlose-Bild-Codes schreibst. Sechs Fehler darin sind still: gültiges CSS, kein Fehler, nur falsches Layout an anderer Stelle. Sie kosten beim ersten Mal Stunden und mit offener Referenz Minuten.

Verifikation ist Teil des Baus

Eine Landingpage, die nicht in echten Breiten als Screenshot aufgenommen wurde, ist nicht fertig. Führe das gebündelte Skript aus:

scripts/verify.sh <url> --sweep          # Überlauf 320→1920 + Hero-Passung
scripts/verify.sh <url> --shot 390x844   # einzelner Viewport

Es behandelt die macOS-500px-Fenstereinschränkung, die stillschweigend jeden mobilen Screenshot fälscht. Details und manuelles Vorgehen: references/verification.md.

Drei Prüfungen müssen bestehen:

  • Kein horizontaler Überlauf bei keiner Breite von 320 bis 1920.
  • Hero passt auf einen Bildschirm bei 390×844, 414×896 und 1600×900, oder wächst bewusst.
  • Reduzierte Bewegung zeigt trotzdem jede Sektion — kein Element bleibt in der Mitte der Animation stehen.

Abschlusssequenz

Wird bei jedem echten Bau angefordert. Das ist die Definition von „fertig", kein Nice-to-have:

  1. lenis-smooth-scroll
  2. premium-mobile-menu
  3. social-share-favicons
  4. build-credit
  5. README.md über die Seite — ihre Sektionen, Tokens, Breakpoints, Deployment-Schritte — nicht über das Tooling, das sie erstellt hat
  6. .gitignore; Commit-Nachricht ohne AI-Co-Author-Zeile, außer wenn gewünscht
  7. Deployment-Hinweise (GitHub Pages braucht .nojekyll, wenn ein Pfad mit _ beginnt)

Was „Premium" hier wirklich bedeutet

Es sind nicht Verläufe und Glas. Es ist: Schrift, die fließend skaliert statt bei Breakpoints zu springen; Bewegung, die nur transform und opacity berührt; Abstände, die an der Achse gemessen werden, auf der sie liegen; keine toten Bänder; und ein mobiles Layout, das entworfen und nicht vom Desktop geerbt wurde. Jeder dieser Punkte ist überprüfbar — deshalb sind sie der Standard.

Referenzen

DateiWann lesen
references/house-rules.mdimmer — die Korrekturen, die bei jedem Bau wiederkehren
references/traps.mdvor Grid, Marquee, SVG-Icons, randlosen Bildern
references/design-system.mdbeim Einrichten von Tokens und der Schriftgrößenskala
references/sections.mdbeim Bau von Hero, Marquee, Accordion, Kartenreihe, Footer
references/verification.mdbeim Verifizieren oder wenn ein Screenshot falsch aussieht
../reference-replication/SKILL.mdwenn ein Referenzbild oder eine URL mitgeliefert wurde
../stock-imagery/SKILL.mdwenn die Seite Fotografie braucht und keine mitgeliefert wurde

Individual skills in this repo

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

brainzcode/premium-landing

Add a studio or agency build credit to a website footer — "Site by <Studio>" linking to the studio's site. Use when finishing or shipping a site, adding a footer, or when asked for an agency credit, build credit, designed-by line, or attribution. Covers wording, placement opposite the client's copyright, markup for each stack, styling from the host site's tokens, and the sitewide-footer-link SEO footprint when the same credit runs across many client sites.

brainzcode/premium-landing

Add Lenis smooth scrolling to a site correctly — setup, anchor offsets for sticky headers, scroll locking for modals and menus, reduced-motion handling. Use when asked for smooth scroll, Lenis, momentum/eased scrolling, or when smooth scroll broke a sticky header, a modal lock, or anchor links. Includes the sticky-position trap that only appears at non-zero scroll.

brainzcode/premium-landing

Build true Apple-style liquid glass in the browser — real refraction via SVG displacement maps, chromatic dispersion, specular edges. Use when asked for liquid glass, glassmorphism, frosted/glass cards, glass navbars, or when a blur-based "glass" effect looks flat. Includes the performance trap that makes backdrop-filter stutter on scroll and the contrast trap that makes text unreadable on glass.

brainzcode/premium-landing

Build a premium mobile nav — a hamburger button that morphs into a close X, a full-screen overlay panel with staggered link reveal, scroll lock, focus trap, and reduced-motion handling. Use when asked for a mobile menu, hamburger/burger button, nav drawer, off-canvas menu, or when a menu loses scroll position, still scrolls behind on iOS, leaks Tab focus to the page underneath, or the close button stops responding. Includes the z-index trap that swallows the close button and the iOS rubber-band trap.

brainzcode/premium-landing

Rebuild a design accurately from a supplied reference — a screenshot, PDF page, mockup or live URL — by measuring it numerically instead of eyeballing it. Use when asked to replicate, clone, match or rebuild a design "exactly", "1 to 1" or "with no mistakes", or when a build drifts from its reference. Covers extracting the true content box from a padded screenshot, deriving element positions as percentages, solving object-fit framing, and knowing when a reference cannot be matched.

brainzcode/premium-landing

Ship link previews and favicons that actually work - Open Graph and Twitter card tags, a correctly framed 1200x630 share image, and a full favicon set (SVG, ICO, apple-touch, maskable manifest icons). Use when asked for social sharing, OG image, open graph, twitter card, link preview, share image, favicon, app icon, apple touch icon, or web manifest. Also use when a shared link previews blank, shows the wrong image, or a favicon will not appear. Includes the absolute-URL trap that silently blanks every preview and the font trap that breaks SVG favicons on other machines.

brainzcode/premium-landing

Source free, licence-clear photography for a site from Unsplash — searching by mood rather than noun, sizing and cropping for the slot, honouring the API's hotlink and download-tracking requirements, and writing real alt text. Use when a page needs a hero image, section photography, avatars or card art and none was supplied; when placeholder greys need replacing with real imagery; or when asked to find, pick or swap photos for a design.

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