Communitygithub.com

brainzcode/premium-landing

Créez une page d'atterrissage premium complète, soit en reproduisant une capture d'écran ou une URL de référence, soit en suivant un brief écrit, en HTML, React, Next.js ou Astro. Utilisez-la pour construire, concevoir, répliquer ou cloner une landing page, une page marketing ou un site one-page.

Qu'est-ce que premium-landing ?

Cette compétence permet de générer des pages d'atterrissage premium de haute qualité, que ce soit à partir d'une référence visuelle (capture d'écran, PDF, URL) ou d'un brief textuel. Elle couvre tous les aspects essentiels : tokenisation du design, motifs de sections, pièges de mise en page silencieux, et vérification par captures d'écran de 320px à 1920px. L'outil est conçu pour être utilisé avec des modèles HTML, React, Next.js ou Astro, et met l'accent sur la précision, la fluidité du type, les animations optimisées (transform/opacity) et l'absence de débordements horizontaux. Le processus est rigoureux : il impose une vérification finale obligatoire, une séquence de finition (smooth scroll, menu mobile premium, favicons, README, .gitignore, déploiement) et une gestion des traps de grille, marquee, SVG et images full-bleed. La compétence encourage à poser très peu de questions : le stack, la marque, la locale et les sections suffisent, le reste ayant des valeurs par défaut défendables.

Compatible avec✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/brainzcode/premium-landing/tree/HEAD/plugins/premium-landing/skills/landing-page
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

Page d'atterrissage premium

Une page d'atterrissage est terminée lorsqu'elle passe trois vérifications : elle correspond à sa référence ou à son brief, elle tient ensemble à toutes les largeurs de 320 à 1920, et rien n'y est accidentel. La majeure partie du travail est la troisième.

Choisir le mode en premier

Mode référence — l'utilisateur a fourni une capture d'écran, un PDF, une URL, ou "reproduis ça". La précision est l'objectif et "assez proche" est un échec. Mesurez la référence numériquement avant d'écrire du CSS. Chargez reference-replication.

Mode brief — l'utilisateur a décrit une entreprise, un public ou une sensation, sans image. La composition vous appartient ; les règles maison et la bibliothèque de sections fixent le plancher de qualité.

Si les deux sont présents, la référence l'emporte pour tout ce qu'elle couvre et le brief comble les lacunes. Si aucun n'est clair, demandez — une page d'atterrissage construite pour le mauvais mode est du travail perdu.

Ne demander que ce qui modifie la construction

N'interrogez pas. Quatre choses modifient réellement le résultat :

  1. Stack — HTML / React / Next / Astro. Générer à partir de templates/<stack>/.
  2. Basiques de la marque — nom, et soit une palette soit "extrais-la de la référence".
  3. Locale — dirige la devise, le format de date, l'orthographe UK vs US. Demandez une fois, restez cohérent.
  4. Sections — seulement si ni une référence ni un type de page évident ne les implique.

Tout le reste a une valeur par défaut défendable. Utilisez-la et dites ce que vous avez supposé.

Ordre de construction

Travailler dans le désordre provoque des reprises, car la hauteur du héros contraint tout ce qui est au-dessus de la ligne de flottaison et les tokens de design contraignent chaque section.

  1. Tokens — surfaces, encre, lignes, accent, rayons, easing, une échelle de type fluide. references/design-system.md.
  2. Hero — l'élément le plus corrigé de chaque construction. 100svh, rythme en vh. references/house-rules.md.
  3. Sections, dans l'ordre de la référence. references/sections.md. Tout emplacement nécessitant une photographie : sourcez-la maintenant, ne laissez pas de boîte grise — ../stock-imagery/SKILL.md.
  4. Footer, puis la séquence de finition ci-dessous.
  5. Vérifier. Non optionnel — voir ci-dessous.

Les pièges

Lisez references/traps.md avant d'écrire du code pour grille, marquee, icônes SVG ou image plein écran. Six échecs y sont silencieux : CSS valide, pas d'erreur, mauvaise mise en page ailleurs. Ils coûtent des heures la première fois et des minutes avec la référence ouverte.

La vérification fait partie de la construction

Une page d'atterrissage qui n'a pas été capturée en capture d'écran aux largeurs réelles n'est pas terminée. Exécutez le harnais fourni :

scripts/verify.sh <url> --sweep          # débordement 320→1920 + ajustement du héros
scripts/verify.sh <url> --shot 390x844   # une seule fenêtre

Il gère la limitation de fenêtre macOS 500px qui fausse silencieusement chaque capture d'écran mobile. Détails et solution de secours manuelle : references/verification.md.

Trois vérifications doivent passer :

  • Aucun débordement horizontal à toutes les largeurs de 320 à 1920.
  • Le héros tient sur un écran à 390×844, 414×896 et 1600×900, ou croît délibérément.
  • Mouvement réduit affiche toujours chaque section — aucun élément laissé en milieu d'animation.

Séquence de finition

Demandée sur chaque construction réelle. C'est la définition de "fini", pas un bonus :

  1. lenis-smooth-scroll
  2. premium-mobile-menu
  3. social-share-favicons
  4. build-credit
  5. README.md à propos de la page — ses sections, tokens, breakpoints, étapes de déploiement — pas sur l'outillage qui l'a créée
  6. .gitignore ; message de commit sans ligne de co-auteur IA sauf demande
  7. Notes de déploiement (GitHub Pages nécessite .nojekyll lorsque tout chemin commence par _)

Ce que "premium" signifie vraiment ici

Ce n'est pas des dégradés et du verre. C'est : une typographie qui évolue fluidement au lieu de sauter aux points de rupture ; des animations qui ne touchent que transform et opacity ; un espacement mesuré par rapport à l'axe sur lequel il vit ; pas de bandes mortes ; et une mise en page mobile qui a été conçue plutôt qu'héritée de la version desktop. Chacun de ces points est vérifiable, c'est pourquoi ils sont la norme.

Références

FichierLisez-le quand
references/house-rules.mdtoujours — les corrections qui reviennent sur chaque construction
references/traps.mdavant grille, marquee, icônes SVG, images plein écran
references/design-system.mdmise en place des tokens et de l'échelle typographique
references/sections.mdconstruction du héros, marquee, accordéon, rail de cartes, footer
references/verification.mdvérification, ou une capture d'écran semble erronée
../reference-replication/SKILL.mdune image de référence ou une URL a été fournie
../stock-imagery/SKILL.mdla page a besoin de photographies et aucune n'a été fournie

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.

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