Frontend Studio: premium UI, cinematic motion, AI-generated assets, persuasive copy
Construire des landing pages, sites marketing et dashboards complets — cadrans de design + règles anti-slop, matrice de choix d'outils de motion, scripts de génération de médias IA, copywriting AIDA/PAS/FAB, art génératif, quality gates strictes
- Quoi
- Construire des landing pages, sites marketing et dashboards complets — cadrans de design + règles anti-slop, matrice de choix d'outils de motion, scripts de génération de médias IA, copywriting AIDA/PAS/FAB, art génératif, quality gates strictes
- Coût
- Gratuit
- Prérequis
- un projet frontend à construire ; une clé API MiniMax (MINIMAX_API_KEY) uniquement si on utilise les scripts de génération d'assets IA — la génération est facturée, la budgéter d'abord ; le reste du skill (design, motion, copy, art) fonctionne sans elle
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — le skill « Frontend Studio » de @minimax-ai pour construire des pages web complètes et visuellement marquantes. Cinq capacités orchestrées : design engineering (cadrans de design — variance/intensité/densité — plus règles anti-slop tranchées : jamais Inter, jamais violet/bleu IA, jamais de héros centré à haute variance, jamais d'emojis, jamais de cartes génériques à haute densité), systèmes de motion (matrice de choix d'outils — Framer Motion, GSAP ScrollTrigger, Lottie, Three.js, CSS — avec règles de conflit obligatoires et propriétés d'animation GPU-only), assets médias générés par IA (scripts de génération image, vidéo, musique et TTS, jamais d'URLs placeholder, assets sauvegardés localement), copywriting persuasif (frameworks AIDA, PAS, FAB, formules de headlines, CTAs, traitement des objections), et art génératif (modes statique et interactif p5.js, philosophie d'abord). Structures de projet par framework (HTML pur, React/Next.js, Vue/Nuxt, Svelte/SvelteKit, Astro), palettes brand-override, et quality gates strictes — accessibilité incluse (prefers-reduced-motion, pas de flash > 3Hz, focus rings, aria-live). Bémols honnêtes : les scripts de génération d'assets exigent une clé API MiniMax (usage réel = coûts réels — budgéter avant de générer) ; les prompts d'assets doivent être confirmés par l'utilisateur avant génération ; les opinions design/motion sont fortes et prescriptives (anti-emoji, anti-Inter) — les suivre ou les surcharger délibérément ; sources et docs tierces reconnues (taste-skill, canvas-design/algorithmic-art d'Anthropic, Framer, GSAP, Tailwind). Licence MIT. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Découvert via skills.sh.
Version :
Installation
Prérequis : un projet frontend à construire ; une clé API MiniMax (MINIMAX_API_KEY) uniquement si on utilise les scripts de génération d'assets IA — la génération est facturée, la budgéter d'abord ; le reste du skill (design, motion, copy, art) fonctionne sans elle Installe-moi « Frontend Studio : UI premium, motion cinématique, assets générés par IA, copy persuasif ». Il donne à mon agent le workflow Frontend Studio de @minimax-ai : fixer les cadrans de design et suivre les règles anti-slop, choisir les outils d'animation via la matrice de sélection avec règles de conflit obligatoires, générer de vrais assets médias localement (prompts confirmés par l'utilisateur, API MiniMax), écrire du copy de conversion avec AIDA/PAS/FAB, construire des projets corrects par framework (React/Next.js, Vue/Nuxt, Svelte/SvelteKit, Astro, HTML pur), et passer les quality gates strictes incluant l'accessibilité. Licence MIT. Dépôt : https://github.com/minimax-ai/skills/blob/main/skills/frontend-dev/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é « frontend-dev ». 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. confirmer les prompts de génération d'assets avant exécution ; fournir une clé API MiniMax (sauvegardée dans le coffre, usage facturé) si je veux des médias générés par IA ; choisir ou surcharger les cadrans de design). 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.
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.