frontend-design
Aperçu
Cette copie d'importation publique regroupe packages/skills-catalog/skills/(design)/frontend-design de https://github.com/tech-leads-club/agent-skills dans la forme éditoriale native d'Omni Skills, sans cacher son origine.
Utilisez-la lorsque l'opérateur a besoin que le workflow amont, les fichiers de support et le contexte du dépôt restent intacts, tandis que le validateur public et l'améliorateur privé poursuivent leur flux normal en aval.
Cette importation conserve les fichiers amont copiés intacts et utilise le bloc external_source dans metadata.json ainsi que ORIGIN.md comme ancrage de provenance pour la revue.
Cette compétence guide la création d'interfaces frontend distinctives et de qualité production qui évitent l'esthétique générique de l'IA ("AI slop"). Implémentez du code fonctionnel réel avec une attention exceptionnelle aux détails esthétiques et aux choix créatifs.
Les sections de source importée qui ne correspondaient pas parfaitement aux titres publics sont conservées ci-dessous ou dans les fichiers de support. Sections importées notables : Direction du Design, Le Test de l'IA Slop.
Quand Utiliser Cette Compétence
Utilisez cette section comme filtre de déclenchement. Elle doit rendre la limite d'activation explicite avant que l'opérateur ne charge des fichiers, n'exécute des commandes ou n'ouvre une pull request.
- Utilisez lorsque la demande correspond clairement à l'intention de la source importée : Créer des interfaces frontend distinctives et de qualité production avec un haut niveau de design. Utilisez cette compétence lorsque l'utilisateur demande de construire des composants web, des pages, des artefacts, des affiches ou des applications. Génère un code créatif et soigné...
- Utilisez lorsque l'opérateur doit préserver les détails du workflow amont plutôt que de réécrire le processus à partir de zéro.
- Utilisez lorsque la provenance doit rester visible dans la réponse, la PR ou le packet de revue.
- Utilisez lorsque les références, exemples ou scripts amont copiés améliorent sensiblement la réponse.
- Utilisez lorsque le workflow doit rester révisable dans le dépôt d'importation publique avant que l'améliorateur privé ne prenne le relais.
Table de Pilotage
| Situation | Commencez ici | Pourquoi c'est important |
|---|---|---|
| Première utilisation | metadata.json | Confirme le dépôt, la branche, le commit et le chemin importé via le bloc external_source avant de toucher au workflow copié |
| Revue de provenance | ORIGIN.md | Donne aux réviseurs une piste d'audit en langage clair pour la source importée |
| Exécution du workflow | references/color-and-contrast.md | Commence par le plus petit fichier copié qui modifie matériellement l'exécution |
| Contexte de support | references/interaction-design.md | Ajoute le prochain fichier source copié le plus pertinent sans charger l'ensemble du paquet |
| Décision de transfert | ## Compétences Connexes | Aide l'opérateur à basculer vers une compétence native plus adaptée lorsque la tâche dévie |
Workflow
Ce workflow est délibérément à la fois éditorial et opérationnel. Il maintient l'utilité de la source importée pour l'opérateur tout en satisfaisant aux normes d'importation publique qui alimentent le flux d'amélioration en aval.
- Confirmer l'objectif de l'utilisateur, le périmètre du workflow importé et si cette compétence est toujours le bon routeur pour la tâche.
- Lire l'aperçu et les fichiers de provenance avant de charger les fichiers de support amont copiés.
- Charger uniquement les références, exemples, invites ou scripts qui modifient matériellement le résultat pour la demande actuelle.
- Exécuter le workflow amont tout en gardant la provenance et les limites de source explicites dans les notes de travail.
- Valider le résultat par rapport aux attentes amont et aux preuves que vous pouvez citer dans les fichiers copiés.
- Escalader ou transférer vers une compétence connexe lorsque le travail sort du centre de gravité de ce workflow importé.
- Avant la fusion ou la clôture, enregistrer ce qui a été utilisé, ce qui a changé et ce que le réviseur doit encore vérifier.
Notes de Workflow Importées
Importé : Direction du Design
Engagez-vous sur une direction esthétique AUDACIEUSE :
- Objectif : Quel problème cette interface résout-elle ? Qui l'utilise ?
- Ton : Choisissez un extrême : brutalement minimal, chaos maximaliste, rétro-futuriste, organique/naturel, luxe/raffiné, ludique/jouet, éditorial/magazine, brutaliste/brut, art déco/géométrique, doux/pastel, industriel/utilitariste, etc. Il existe de nombreuses saveurs parmi lesquelles choisir. Utilisez-les pour vous inspirer mais créez-en une qui soit fidèle à la direction esthétique.
- Contraintes : Exigences techniques (framework, performance, accessibilité).
- Différenciation : Qu'est-ce qui rend cette interface INOUBLIABLE ? Quelle est la chose dont on se souviendra ?
CRITIQUE : Choisissez une direction conceptuelle claire et exécutez-la avec précision. Le maximalisme audacieux et le minimalisme raffiné fonctionnent tous les deux — la clé est l'intentionnalité, pas l'intensité.
Ensuite, implémentez du code fonctionnel qui est :
- De qualité production et fonctionnel
- Visuellement frappant et mémorable
- Cohérent avec un point de vue esthétique clair
- Méticuleusement raffiné dans chaque détail
Exemples
Exemple 1 : Demander le workflow amont directement
Utilisez @frontend-design pour gérer <tâche>. Commencez par le workflow amont copié, chargez uniquement les fichiers qui modifient le résultat, et gardez la provenance visible dans la réponse.
Explication : C'est le point de départ le plus sûr lorsque l'opérateur a besoin du workflow importé, mais pas de l'ensemble du dépôt.
Exemple 2 : Demander une revue basée sur la provenance
Révisez @frontend-design par rapport à metadata.json et ORIGIN.md, puis expliquez quels fichiers amont copiés vous chargeriez en premier et pourquoi.
Explication : Utilisez ceci avant une revue ou un dépannage lorsque vous avez besoin d'une explication précise et vérifiable de l'origine et de la sélection des fichiers.
Exemple 3 : Réduire les fichiers de support copiés avant exécution
Utilisez @frontend-design pour <tâche>. Chargez uniquement les références, exemples ou scripts copiés qui modifient le résultat, et nommez les fichiers explicitement avant de procéder.
Explication : Cela maintient la compétence alignée sur une divulgation progressive au lieu de charger tout le paquet copié par défaut.
Exemple 4 : Créer un packet de revue
Révisez @frontend-design en utilisant les fichiers amont copiés ainsi que la provenance, puis résumez les éventuelles lacunes avant la fusion.
Explication : Utile lorsque la PR attend une revue humaine et que vous souhaitez un packet d'audit reproductible.
Notes d'Utilisation Importées
Importé : Exemples
Exemple 1 : Page d'atterrissage avec une esthétique forte
Utilisateur dit : "Construis une page d'atterrissage pour un produit d'outils de développement, quelque chose qui ne ressemble pas à tous les autres SaaS." Actions : Choisissez une direction audacieuse (par exemple, brutaliste ou éditoriale) ; choisissez un duo typographique distinctif et une palette cohérente ; implémentez avec un espacement fluide et un point focal clair ; évitez les clichés de cartes imbriquées et de métriques héroïques. Résultat : Une mise en page sur une seule page avec une hiérarchie claire, une typographie mémorable, et aucun marqueur générique d'IA (pas de dégradés violets, pas de cartes arrondies avec des bordures épaisses et contrastées).
Exemple 2 : Tableau de bord ou UI d'application
Utilisateur dit : "Crée un tableau de bord pour visualiser des analyses avec un thème sombre." Actions : Engagez-vous sur une esthétique sombre spécifique (par exemple, sombre raffiné avec des neutres teintés, pas le noir brillant par défaut) ; utilisez des requêtes de conteneur pour les panneaux ; ajoutez un moment de mouvement réfléchi (par exemple, chargement de liste échelonné) ; assurez-vous que les états vides sont utiles. Résultat : Tableau de bord fonctionnel qui semble intentionnellement conçu — palette distincte, pas de lueur cyan/violet, hiérarchie de données claire et comportement responsive.
Exemple 3 : Affiche ou artefact marketing
Utilisateur dit : "Fais une affiche pour une conférence sur les performances frontend." Actions : Choisissez un concept typographique ou visuel fort ; utilisez une échelle de type modulaire et une palette limitée ; évitez la mise en page générique photo de stock + titre. Résultat : Une affiche qui pourrait exister en tant qu'artefact conçu — type et composition mémorables, pas un remplissage de modèle.
Meilleures Pratiques
Traitez la compétence publique générée comme une couche d'empaquetage révisable autour du dépôt amont. L'objectif est de garder la provenance explicite et de charger uniquement le matériel source copié qui améliore matériellement l'exécution.
-
Typographie → Consultez la référence typographique pour les échelles, les associations et les stratégies de chargement.
- Choisissez des polices qui sont belles, uniques et intéressantes.
- Associez une police d'affichage distinctive avec une police de corps raffinée.
- À FAIRE : Utilisez une échelle de type modulaire avec une taille fluide (clamp) À FAIRE : Variez les épaisseurs et les tailles de police pour créer une hiérarchie visuelle claire À NE PAS FAIRE : Utilisez des polices surutilisées — Inter, Roboto, Arial, Open Sans, valeurs par défaut du système À NE PAS FAIRE : Utilisez la typographie monospace comme raccourci paresseux pour les vibes "technique/développeur" À NE PAS FAIRE : Mettez de grandes icônes avec des coins arrondis au-dessus de chaque titre — elles ajoutent rarement de la valeur et donnent aux sites un aspect basé sur des modèles ### Couleur & Thème → Consultez la référence couleur pour OKLCH, les palettes et le mode sombre.
- Engagez-vous sur une palette cohérente.
- Les couleurs dominantes avec des accents marqués surpassent les palettes timides et uniformément réparties.
- À FAIRE : Utilisez des fonctions CSS modernes (oklch, color-mix, light-dark) pour des palettes perceptuellement uniformes et maintenables À FAIRE : Teintez vos neutres vers votre teinte de marque — même une subtile indication crée une cohésion subconsciente À NE PAS FAIRE : Utilisez du texte gris sur des fonds colorés — cela semble délavé ; utilisez une nuance de la couleur de fond à la place À NE PAS FAIRE : Utilisez du noir pur (#000) ou du blanc pur (#fff) — teintez toujours ; le noir/blanc pur n'apparaît jamais dans la nature À NE PAS FAIRE : Utilisez la palette de couleurs IA : cyan sur fond sombre, dégradés violet vers bleu, accents néon sur fonds sombres À NE PAS FAIRE : Utilisez du texte en dégradé pour "l'impact" — particulièrement sur les métriques ou les titres ; c'est décoratif plutôt que significatif À NE PAS FAIRE : Utilisez par défaut le mode sombre avec des accents lumineux — cela semble "cool" sans nécessiter de véritables décisions de design ### Mise en Page & Espace → Consultez la référence spatiale pour les grilles, le rythme et les requêtes de conteneur.
Notes de Pilotage Importées
Importé : Directives d'Esthétique Frontend
Typographie
→ Consultez la référence typographique pour les échelles, les associations et les stratégies de chargement.
Choisissez des polices qui sont belles, uniques et intéressantes. Associez une police d'affichage distinctive avec une police de corps raffinée.
À FAIRE : Utilisez une échelle de type modulaire avec une taille fluide (clamp) À FAIRE : Variez les épaisseurs et les tailles de police pour créer une hiérarchie visuelle claire À NE PAS FAIRE : Utilisez des polices surutilisées — Inter, Roboto, Arial, Open Sans, valeurs par défaut du système À NE PAS FAIRE : Utilisez la typographie monospace comme raccourci paresseux pour les vibes "technique/développeur" À NE PAS FAIRE : Mettez de grandes icônes avec des coins arrondis au-dessus de chaque titre — elles ajoutent rarement de la valeur et donnent aux sites un aspect basé sur des modèles
Couleur & Thème
→ Consultez la référence couleur pour OKLCH, les palettes et le mode sombre.
Engagez-vous sur une palette cohérente. Les couleurs dominantes avec des accents marqués surpassent les palettes timides et uniformément réparties.
À FAIRE : Utilisez des fonctions CSS modernes (oklch, color-mix, light-dark) pour des palettes perceptuellement uniformes et maintenables À FAIRE : Teintez vos neutres vers votre teinte de marque — même une subtile indication crée une cohésion subconsciente À NE PAS FAIRE : Utilisez du texte gris sur des fonds colorés — cela semble délavé ; utilisez une nuance de la couleur de fond à la place À NE PAS FAIRE : Utilisez du noir pur (#000) ou du blanc pur (#fff) — teintez toujours ; le noir/blanc pur n'apparaît jamais dans la nature À NE PAS FAIRE : Utilisez la palette de couleurs IA : cyan sur fond sombre, dégradés violet vers bleu, accents néon sur fonds sombres À NE PAS FAIRE : Utilisez du texte en dégradé pour "l'impact" — particulièrement sur les métriques ou les titres ; c'est décoratif plutôt que significatif À NE PAS FAIRE : Utilisez par défaut le mode sombre avec des accents lumineux — cela semble "cool" sans nécessiter de véritables décisions de design
Mise en Page & Espace
→ Consultez la référence spatiale pour les grilles, le rythme et les requêtes de conteneur.
Créez un rythme visuel grâce à un espacement varié — pas le même padding partout. Adoptez l'asymétrie et les compositions inattendues. Brisez la grille intentionnellement pour l'accentuation.
À FAIRE : Créez un rythme visuel grâce à un espacement varié — regroupements serrés, séparations généreuses À FAIRE : Utilisez un espacement fluide avec clamp() qui respire sur les grands écrans À FAIRE : Utilisez l'asymétrie et les compositions inattendues ; brisez la grille intentionnellement pour l'accentuation À NE PAS FAIRE : Mettez tout dans des cartes — tout n'a pas besoin d'un conteneur À NE PAS FAIRE : Imbriquez des cartes dans des cartes — bruit visuel, aplatissez la hiérarchie À NE PAS FAIRE : Utilisez des grilles de cartes identiques — cartes de même taille avec icône + titre + texte, répétées à l'infini À NE PAS FAIRE : Utilisez le modèle de mise en page de métrique héroïque — grand nombre, petite étiquette, statistiques de support, accent dégradé À NE PAS FAIRE : Centrez tout — le texte aligné à gauche avec des mises en page asymétriques semble plus conçu À NE PAS FAIRE : Utilisez le même espacement partout — sans rythme, les mises en page semblent monotones
Détails Visuels
À FAIRE : Utilisez des éléments décoratifs intentionnels et utiles qui renforcent la marque À NE PAS FAIRE : Utilisez le glassmorphisme partout — effets de flou, cartes en verre, bordures lumineuses utilisées de manière décorative plutôt qu'utile À NE PAS FAIRE : Utilisez des éléments arrondis avec une bordure épaisse colorée sur un seul côté — un accent paresseux qui ne semble presque jamais intentionnel À NE PAS FAIRE : Utilisez des sparklines comme décoration — petits graphiques qui semblent sophistiqués mais ne transmettent rien de significatif À NE PAS FAIRE : Utilisez des rectangles arrondis avec des ombres portées génériques — sûr, oubliable, pourrait être n'importe quelle sortie d'IA À NE PAS FAIRE : Utilisez des modales à moins qu'il n'y ait vraiment pas de meilleure alternative — les modales sont paresseuses
Mouvement
→ Consultez la référence de mouvement pour le timing, l'assouplissement et la réduction de mouvement.
Concentrez-vous sur les moments à fort impact : un chargement de page bien orchestré avec des révélations échelonnées crée plus de plaisir que des micro-interactions dispersées.
À FAIRE : Utilisez le mouvement pour transmettre les changements d'état — entrées, sorties, retour d'information À FAIRE : Utilisez un assouplissement exponentiel (ease-out-quart/quint/expo) pour une décélération naturelle À FAIRE : Pour les animations de hauteur, utilisez les transitions grid-template-rows au lieu d'animer la hauteur directement À NE PAS FAIRE : Animez les propriétés de mise en page (largeur, hauteur, padding, marge) — utilisez uniquement transform et opacity À NE PAS FAIRE : Utilisez un assouplissement bondissant ou élastique — ils semblent datés et ringards ; les objets réels décélèrent en douceur
Interaction
→ Consultez la référence d'interaction pour les formulaires, le focus et les modèles de chargement.
Rendez les interactions rapides. Utilisez une UI optimiste — mettez à jour immédiatement, synchronisez plus tard.
À FAIRE : Utilisez la divulgation progressive — commencez simplement, révélez la sophistication par l'interaction (options de base d'abord, avancées derrière des sections extensibles ; ho
… [tronqué pour la traduction]