Frontend design direction — anti-generic design guidance
Choisir une direction esthétique délibérée (but, audience, ton, contraintes) et construire une UI soignée évitant les esthétiques IA génériques — guide communautaire récupéré, pas le skill officiel Anthropic
- Quoi
- Choisir une direction esthétique délibérée (but, audience, ton, contraintes) et construire une UI soignée évitant les esthétiques IA génériques — guide communautaire récupéré, pas le skill officiel Anthropic
- Coût
- Gratuit
- Prérequis
- un projet frontend ou une demande d'UI sur laquelle l'appliquer — le skill est un guide de design que l'agent suit, pas un logiciel à installer
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — le skill de direction de design frontend de @affaan-m : avant de coder, choisir une direction délibérée — le but de l'interface, son audience, un ton explicite (utilitaire, éditorial, ludique, industriel, raffiné…), un détail mémorable, et les vraies contraintes (framework, accessibilité, performance, design system existant) — puis construire l'expérience réellement utilisable comme premier écran. Il pousse l'agent à réutiliser les composants, tokens et routage existants avant d'inventer un système visuel, à préférer une typographie contextuelle aux hero texts surdimensionnés, à garder des palettes multi-dimensionnelles, à utiliser le mouvement avec parcimonie mais délibérément, et à vérifier l'ajustement du texte sur mobile et desktop. La liste d'anti-patterns est le cœur : pas de dégradés violets, de blobs décoratifs, de cartes surdimensionnées, de hero copy vague, de médias façon banque d'images, ni de cartes dans les cartes. Se termine par une checklist de revue (le premier viewport communique le produit, la hiérarchie soutient le scan, le contraste tient, les dimensions responsives sont stables). Bémols honnêtes : récupéré d'une vieille PR communautaire (#1659) — le fichier lui-même dit d'installer le skill officiel `frontend-design` d'Anthropic pour la version canonique (voir la fiche `anthropics-claude-code-frontend-design`) ; le skill vit sous le chemin de docs japonais du repo (docs/ja-JP/…) même si le contenu est en anglais. 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 ou une demande d'UI sur laquelle l'appliquer — le skill est un guide de design que l'agent suit, pas un logiciel à installer Installe-moi « Direction de design frontend — guide anti-générique ». Il donne à mon agent le workflow de direction de design de @affaan-m : avant de coder, choisir une direction esthétique délibérée (but, audience, ton explicite, un détail mémorable, vraies contraintes), construire d'abord l'expérience réellement utilisable, réutiliser les composants et tokens existants, préférer une typographie contextuelle et des palettes multi-dimensionnelles, utiliser le mouvement délibérément, et vérifier chaque UI contre une checklist de revue. Inclut une liste d'anti-patterns (dégradés violets, blobs décoratifs, cartes surdimensionnées, hero copy vague, cartes dans les cartes). Licence MIT. Note : le skill lui-même recommande le skill officiel frontend-design d'Anthropic pour la version canonique (aussi listé ici). Dépôt : https://github.com/affaan-m/ecc/blob/main/docs/ja-JP/skills/frontend-design-direction/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-design-direction ». 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. pointer l'agent vers l'UI à construire ou polir ; rien d'autre — c'est une méthodologie). 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.