awwwards
Bâtir un site web de calibre primé à partir d'un brief d'une ligne : concept, direction artistique, typographie, mouvement et WebGL quand le concept le mérite, construit avec Next.js ou Astro,...
- Quoi
- Bâtir un site web de calibre primé à partir d'un brief d'une ligne : concept, direction artistique, typographie, mouvement et WebGL quand le concept le mérite, construit avec Next.js ou Astro,...
- Coût
- Gratuit
- Prérequis
- Avant de commencer : lis ce prompt d'installation au complet, dis-moi en quelques lignes ce que ce skill fait et ce que son installation implique, et attends mon feu vert avant de faire quoi que ce soit d'autre.
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Bâtir un site web de calibre primé à partir d'un brief d'une ligne : concept, direction artistique, typographie, mouvement et WebGL quand le concept le mérite, construit avec Next.js ou Astro, puis une boucle de QA visuelle en vrai navigateur (captures, mesures, accessibilité, audit SEO) contre un build de production local, avec déploiement seulement après la confirmation de l'utilisateur.
Version :
Installation
Copiez le dossier d’installation ci-dessous, puis collez-le dans Muse📌 Version épinglée : commit f193f67Le prompt d'installation ci-dessous inclut déjà les étapes de vérification : votre agent suit la checklist communautaire avant d'installer tout ce qui contient du code exécutable. Vous en voulez plus ?
Avant de commencer : lis ce prompt d'installation au complet, dis-moi en quelques lignes ce que ce skill fait et ce que son installation implique, et attends mon feu vert avant de faire quoi que ce soit d'autre. Prérequis : aucun pour l'installation elle-même : aucun compte, aucune clé API, aucun service payant, rien à installer d'abord. Utiliser le skill ensuite demande Node 20 ou plus récent sur la machine. Quand le skill bâtit un site, il travaille dans un de mes projets et installe les dépendances npm de ce projet (le framework, gsap, lenis, et Playwright avec axe-core en dépendances de développement) ; si aucun Chromium n'est disponible, il en télécharge un avec npx playwright install chromium. Tout ça arrive à l'usage, dans le projet, jamais pendant cette installation. Installe-moi « awwwards ». C'est un skill de construction de sites web : à partir d'un brief d'une ligne, il dirige et bâtit un site complet (concept, direction artistique, typographie, mouvement, WebGL quand le concept le mérite, contenu réel), puis roule une boucle de QA visuelle dans un vrai navigateur contre un build de production local et ne déploie qu'après ma confirmation. Dépôt : https://github.com/juliobsz/skills (le skill est tout le dossier awwwards/ au commit épinglé : SKILL.md, references/ et scripts/) Version épinglée : installe le code au commit f193f6745aae738e9d54a0ca28792822e4777a63 exactement. Ne substitue pas une version plus récente. Si ce commit est inaccessible, arrête-toi et dis-le-moi. 1. Clone https://github.com/juliobsz/skills dans un dossier temporaire, place-toi au commit f193f6745aae738e9d54a0ca28792822e4777a63, et copie le dossier awwwards/ de ce checkout. Compare ensuite chaque fichier du dossier aux empreintes enregistrées pour cette fiche le 2026-10-19 : [FINGERPRINTS] - SKILL.md: SHA-256 87f9e001615cbe13188025c1c7f534ed797ea48be86335cf809ee5cbc34bf9aa - references/anatomy.md: SHA-256 89e60c7581bc0b664589c1d4411b9c3a9a9ea5424e61687d112831e3c06d982e - references/art-direction.md: SHA-256 646266e21e3b656cbf31a8ca89bc810d9644c1eb6538b0933c529d50d5f78ca0 - references/astro.md: SHA-256 aeeaf41c3152876f6d5da37f5b36468a1781af752ea7f87fb62f1c8c755d43d3 - references/concepts.md: SHA-256 af5b3b401cbde5af858670fc7160409cecccc49f27058e0f66c11c8cf0a82099 - references/content.md: SHA-256 eefb2bf14948e7cf3c21b8875bb0827723095968a4d6067b25864ecaf7bc2c32 - references/engine.md: SHA-256 dc5b1b6704cb797afe9a08e76cf1bd4dec46e56ae25084715b0377146ae1faf8 - references/layout.md: SHA-256 d5528281738cfa34f4b7b2fc6f317aae85448c35e0876a12f081311a49a48b80 - references/motion.md: SHA-256 c0485886f69b4dc19a67e38dbfd3b3c4ae0816593d4228071d9c2d0da2b07a0f - references/nextjs.md: SHA-256 2a6598eb48617ffac934c2556875da6cf75fa19c3a4a0510b5888d2f4406baaf - references/patterns.md: SHA-256 ba09fd0cbf2898bd06349d7ac4779ec8ad3f5ae0265815755b0d0d83c29cd169 - references/quality-bar.md: SHA-256 cdc6de8aa3d5869c827dd894ad49d594e9d60a03154f5949297ffafd857eb523 - references/quality.md: SHA-256 fadd5d7124004d35a73ae67856ad9023a389e3886696a3c54fb83cfda186ee00 - references/ship.md: SHA-256 c05a1c10ae396745e220edf391de214dbf3a2ff7e0a2260fb59c7d7028c41e15 - references/typography.md: SHA-256 270286daae65407bd8953c9fae68a1632c42e9af4b0493f0397d4b8c46ac34ed - references/webgl.md: SHA-256 37815f066dac2d3ca9115fb88912e6ea4aed442ce07660d786baeadb05b396e8 - scripts/audit.mjs: SHA-256 6cc274074d1089deffbd8ce80b5d784961642191feb612dcf14f177adef66c22 - scripts/browser.mjs: SHA-256 929964a5877af03964bacecf41c8778445454efed2c646e0efb6432233727c6c - scripts/font.mjs: SHA-256 46c50b5a57a0c2517f5149b3e372d27f041430ed91edd88ce5dca0a8bc51a1de - scripts/og.mjs: SHA-256 180676b62a480a1c5d4385ba724ce9764b8204ce58727a63e67a25209ea7f65c - scripts/photos.mjs: SHA-256 3512275dc8b1ccfba378961425a6867ac14396772d522002b5745886365698d0 - scripts/serve.mjs: SHA-256 9750897e412f15fdb2062b097460627719659dd0ecb05801036f872caaea58fd - scripts/shoot.mjs: SHA-256 b30e485207b05774f7505e918ab086a521979724daab198ede7d4890e7b748fd Si un fichier ne correspond pas, il a changé depuis la préparation de la fiche : ne l'installe pas encore, dis-moi ce que tu as trouvé et laisse-moi décider. 2. Lis SKILL.md au complet, parcours les fichiers de référence, et lis les sept scripts dans scripts/, puis dis-moi en mots simples : ce que le skill fait quand on l'utilise, à quels services il se connecte, s'il lit ou envoie des informations personnelles ou des clés, et tout ce qui semble inhabituel. Arrête-toi sur tout signal d'alerte et dis-le-moi avant d'aller plus loin. Confirme ces points à partir des fichiers : - Le dossier du skill contient 23 fichiers : SKILL.md (la méthode : brief, concept, direction artistique, build, boucle QA, livraison), 15 documents de référence dans references/ (la grille d'évaluation, les adaptateurs Next.js et Astro, le moteur de mouvement, WebGL, typographie, contenu et guides de livraison), et 7 scripts Node simples et lisibles dans scripts/ (aucune étape de build, rien d'obscurci) : audit.mjs (va chercher l'URL du site lui-même et vérifie SEO, meta, accessibilité et poids), browser.mjs (localise ou lance Chromium via Playwright), font.mjs (télécharge les fichiers de polices), og.mjs (capture la page d'accueil du site en image OG), photos.mjs (bâtit des planches de photos temporaires), serve.mjs (un petit serveur statique local) et shoot.mjs (le harnais de captures et de mesures). - Rien n'est envoyé nulle part pendant l'installation elle-même ; le seul téléchargement à l'installation est le dossier awwwards depuis GitHub au commit épinglé. Les fichiers ne nomment aucun compte, aucune clé API et aucune télémétrie. - À l'usage, les contacts réseau sont des téléchargements et des requêtes pour le site en construction, tous divulgués dans SKILL.md ou visibles dans les scripts : l'échafaudage et les dépendances depuis le registre npm (la CLI du framework, gsap, lenis, ogl quand il sert, et -D playwright axe-core dans le projet), un téléchargement Chromium via npx playwright install chromium si aucun n'est présent, les fichiers de polices depuis Fontshare (api.fontshare.com) ou Google Fonts (fonts.googleapis.com) via scripts/font.mjs, des photos temporaires depuis picsum.photos via scripts/photos.mjs (le texte de SKILL.md dit Unsplash ; le script livré va en fait chercher sur picsum.photos, et toute photo utilisée est un placeholder marqué à remplacer, crédité dans un colophon), et axe-core depuis cdn.jsdelivr.net en recours dans shoot.mjs. Les scripts d'audit et de captures ne vont sinon chercher que l'URL du site en construction ou en révision, servi localement (127.0.0.1) par défaut. - Le skill écrit seulement dans le projet qu'il bâtit : DESIGN.md (brief, concept, système de design), le code du site et son fichier de contenu, et les preuves QA sous .shots/. Déployer est une étape séparée que SKILL.md n'autorise qu'après ma confirmation. - Le dépôt contient un deuxième skill, jury/, plus tests/ et des métadonnées de plugin ; rien de tout ça ne fait partie de cette installation. 3. Quand je dis « yes, install », installe-le comme skill : copie tout le dossier awwwards dans le répertoire des skills de l'agent, dans un dossier nommé « awwwards », en gardant les 23 fichiers. Les routes amont, npx skills add juliobsz/skills -g --skill awwwards ou la marketplace de plugins Claude Code (plugin « awwwards » de la marketplace juliobsz/skills), installent le même dossier ; l'une ou l'autre route convient tant que chaque fichier correspond aux empreintes. 4. Vérifie sans appels réseau : frontmatter valide, les 23 fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (par exemple : avoir Node 20 ou plus récent disponible avant le premier usage, et démarrer moi-même un build avec un brief d'une ligne ; utiliser le skill est une étape séparée qui ne commence que quand je le demande, et les téléchargements à l'usage divulgués ci-dessus arrivent seulement à ce moment-là, dans le projet en construction). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne jamais l'exiger sauf s'il figure dans les prérequis ci-dessus. 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.
Enregistré dans vos installs récentes. Retrouvez-le à tout moment sur /connect.
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.