Immersive frontend UI — Awwwards-grade landing pages and motion systems
Un plan rigoureux pour des expériences web premium : séquences d'entrée, architecture hero, récits pilotés par le scroll, micro-interactions, typographie et garde-fous de performance stricts
- Quoi
- Un plan rigoureux pour des expériences web premium : séquences d'entrée, architecture hero, récits pilotés par le scroll, micro-interactions, typographie et garde-fous de performance stricts
- Coût
- Gratuit
- Prérequis
- rien à installer — le skill est une méthodologie que votre agent applique en construisant des expériences frontend ; vous fournissez les librairies d'animation du framework cible (Framer Motion, GSAP, Lenis) quand vous voulez les patterns implémentés
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — un skill de la collection awesome-copilot (par Utkarsh Patrikar, MIT) qui pousse un assistant d'ingénierie IA au-delà du HTML/CSS fonctionnel vers l'architecture d'environnements numériques immersifs. Quand un utilisateur demande une landing page ou un portfolio premium, le skill impose six disciplines : un fondement créatif (s'engager sur une identité visuelle — brutalisme éditorial, fluidité organique, cyber/technique, rythme cinématographique), des exigences structurelles (préchargeurs, architecture hero plein écran avec découpage typographique syntaxique, navigation contextuelle réactive au scroll), un système de motion design (conteneurs épinglés pilotés par le scroll et parcours horizontaux, composants magnétiques, curseurs customs, animations transform-only), typographie et texture premium (échelles de type fluides, fontes variables, grain, verre dépoli), un impératif de performance (propriétés GPU-compositées uniquement, dégradation reduced-motion et tactile, garde-fous stricts), et un écosystème de frameworks (Framer Motion/Lenis/React Three Fiber pour React, GSAP/Lenis/SplitType pour vanilla/Astro). Licence MIT. Bémols honnêtes : il est très chargé en goût et opinions — les résultats reflètent la doctrine esthétique d'un auteur, adaptez l'identité à votre marque ; le motion premium coûte un vrai effort d'ingénierie et peut nuire à l'accessibilité si les règles reduced-motion sont sautées ; les piles d'animation lourdes peuvent peiner sur les appareils bas de gamme. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Découvert via skills.sh.
Version :
Installation
Prérequis : rien à installer — le skill est une méthodologie que votre agent applique en construisant des expériences frontend ; vous fournissez les librairies d'animation du framework cible (Framer Motion, GSAP, Lenis) quand vous voulez les patterns implémentés Installe-moi « UI frontend immersive — landing pages niveau Awwwards et systèmes de mouvement ». Il donne à mon agent le plan awesome-copilot (par Utkarsh Patrikar) pour des expériences web premium : s'engager sur une identité visuelle, construire séquences d'entrée et architecture hero plein écran, concevoir récits pilotés par le scroll et micro-interactions, élever typographie et texture, et faire respecter des garde-fous de performance stricts (transform/opacity uniquement, reduced-motion, dégradation tactile). Licence MIT. Dépôt : https://github.com/github/awesome-copilot/blob/main/skills/premium-frontend-ui/SKILL.md 1. Récupère le fichier SKILL.md (et les fichiers d'aide éventuels) depuis le chemin du dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Vérification de sécurité : examine le SKILL.md et les scripts pour tout contenu suspect (appels réseau inattendus, commandes shell, collecte d'identifiants). Ce dépôt ne devrait contenir aucun secret en dur, les identifiants uniquement via le coffre sécurisé, les hôtes autorisés déclarés dans le SKILL.md. Vérifie que c'est bien le cas ici ; STOP sur tout signal d'alerte et dis-le-moi. 3. Installe-le comme skill : copie le SKILL.md et ses fichiers d'aide dans le répertoire des skills de l'agent, dans un dossier nommé « premium-frontend-ui ». 4. Vérifie sans appels réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (p. ex. rien — c'est une méthodologie ; dites à l'agent de l'appliquer quand vous demandez une landing page premium ou un composant immersif). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrête-toi et demande-moi.
Questions
Comment installer une création ?
Chaque fiche produit contient un prompt d’installation à copier-coller. Collez-le dans votre Muse et il installe la création pour vous — sans configuration manuelle.
Où va mon argent ?
Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.
Que signifie le ✓ à côté du nom d’un créateur ?
Il signifie que nous avons confirmé l’identité de la personne derrière la fiche. Il ne dit rien sur le code lui-même — vérifiez toujours une création avant de l’installer.