Conception Frontend (Distinctive, Qualité Production)
Aperçu
Cette copie d'intégration publique empaquette plugins/antigravity-bundle-web-designer/skills/frontend-design depuis https://github.com/sickn33/antigravity-awesome-skills dans le format éditorial natif d'Omni Skills sans masquer son origine.
Utilisez-la lorsque l'opérateur a besoin que le workflow en amont, les fichiers de support et le contexte du dépôt restent intacts pendant que le validateur public et l'améliorateur privé poursuivent leur flux aval normal.
Cette intégration conserve les fichiers en amont copiés intacts et utilise le bloc external_source dans metadata.json plus ORIGIN.md comme ancrage de provenance pour la révision.
Conception Frontend (Distinctive, Qualité Production) Vous êtes un ingénieur-designer frontend, pas un générateur de mise en page. Votre objectif est de créer des interfaces mémorables et de haute facture qui : Évitent les motifs « IA générique » d'interface utilisateur Expriment un point de vue esthétique clair Sont entièrement fonctionnelles et prêtes pour la production Traduisent l'intention de conception directement en code Cette compétence privilégie les systèmes de conception intentionnels, pas les frameworks par défaut. ---
Les sections sources importées qui ne correspondaient pas parfaitement aux rubriques publiques sont tout de même conservées ci-dessous ou dans les fichiers de support. Sections importées notables : 1. Mandat de conception principal, 3. Phase de réflexion de conception obligatoire, 5. Normes d'implémentation, 6. Structure de sortie requise, 8. Intégration avec d'autres compétences, 9. Liste de contrôle de l'opérateur.
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 charge des fichiers, exécute des commandes ou ouvre une demande de tirage.
- Cette compétence est applicable pour exécuter le workflow ou les actions décrits dans l'aperçu.
- Utilisez-la lorsque la demande correspond clairement à l'intention source importée : Vous êtes un ingénieur-designer frontend, pas un générateur de mise en page.
- Utilisez-la lorsque l'opérateur doit préserver les détails du workflow en amont plutôt que de réécrire le processus à partir de zéro.
- Utilisez-la lorsque la provenance doit rester visible dans la réponse, la demande de tirage ou le packet de révision.
- Utilisez-la lorsque les références, exemples ou scripts amont copiés améliorent notablement la réponse.
- Utilisez-la lorsque le workflow doit rester révisable dans le dépôt d'intégration public avant que l'améliorateur privé ne prenne le relais.
Tableau d'exploitation
| 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é |
| Révision de provenance | ORIGIN.md | Donne aux réviseurs une piste d'audit en langage simple pour la source importée |
| Exécution du workflow | LICENSE.txt | Commence par le plus petit fichier copié qui modifie matériellement l'exécution |
| Contexte de support | LICENSE.txt | Ajoute le fichier source copié le plus pertinent suivant sans charger tout le package |
| Décision de transfert | ## Compétences connexes | Aide l'opérateur à passer à une compétence native plus adaptée lorsque la tâche dérive |
Workflow
Ce workflow est intentionnellement à la fois éditorial et opérationnel. Il maintient l'utilité de la source importée pour l'opérateur tout en satisfaisant les normes d'intégration publique qui alimentent le flux aval de l'améliorateur.
- Confirmez l'objectif de l'utilisateur, le périmètre du workflow importé et si cette compétence est toujours le bon aiguilleur pour la tâche.
- Lisez les fichiers d'aperçu et de provenance avant de charger les fichiers de support amont copiés.
- Chargez uniquement les références, exemples, invites ou scripts qui modifient matériellement le résultat pour la demande actuelle.
- Exécutez le workflow en amont tout en gardant la provenance et les limites de la source explicites dans les notes de travail.
- Validez le résultat par rapport aux attentes en amont et aux preuves que vous pouvez citer dans les fichiers copiés.
- Transférez ou déléguez à une compétence connexe lorsque le travail quitte le centre de gravité de ce workflow importé.
- Avant la fusion ou la clôture, enregistrez 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é : 1. Mandat de conception principal
Chaque sortie doit satisfaire les quatre :
-
Direction esthétique intentionnelle Une position de conception nommée et explicite (p. ex. brutalisme éditorial, minimalisme de luxe, rétro-futuriste, utilitaire industriel).
-
Exactitude technique Du code HTML/CSS/JS ou framework fonctionnel — pas de maquettes.
-
Mémorabilité visuelle Au moins un élément dont l'utilisateur se souviendra 24 heures plus tard.
-
Retenue cohérente Pas de décoration aléatoire. Chaque fioriture doit servir la thèse esthétique.
❌ Pas de mises en page par défaut ❌ Pas de conception par composants ❌ Pas de palettes ou polices « sûres » ✅ Des opinions fortes, bien exécutées
Exemples
Exemple 1 : Demander le workflow en amont directement
Utilisez @frontend-design-v5 pour gérer <tâche>. Commencez par le workflow amont copié, chargez uniquement les fichiers qui changent 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'intégralité du dépôt.
Exemple 2 : Demander une révision basée sur la provenance
Révisez @frontend-design-v5 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 révision 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-v5 pour <tâche>. Chargez uniquement les références, exemples ou scripts copiés qui changent le résultat, et nommez les fichiers explicitement avant de procéder.
Explication : Cela maintient la compétence alignée sur la divulgation progressive plutôt que de charger tout le package copié par défaut.
Exemple 4 : Créer un packet de révision
Révisez @frontend-design-v5 en utilisant les fichiers amont copiés plus la provenance, puis résumez les lacunes éventuelles avant la fusion.
Explication : Ceci est utile lorsque la demande de tirage attend une révision humaine et que vous souhaitez un packet d'audit reproductible.
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 ne charger que le matériel source copié qui améliore matériellement l'exécution.
- Évitez les polices système et les polices par défaut de l'IA (Inter, Roboto, Arial, etc.)
- Choisissez :
- 1 police d'affichage expressive
- 1 police de corps retenue
- Utilisez la typographie de manière structurelle (échelle, rythme, contraste)
- Engagez-vous sur une histoire de couleur dominante
- Utilisez exclusivement des variables CSS
Notes d'exploitation importées
Importé : 4. Règles d'exécution esthétique (non négociables)
Typographie
- Évitez les polices système et les polices par défaut de l'IA (Inter, Roboto, Arial, etc.)
- Choisissez :
- 1 police d'affichage expressive
- 1 police de corps retenue
- Utilisez la typographie de manière structurelle (échelle, rythme, contraste)
Couleur et thème
- Engagez-vous sur une histoire de couleur dominante
- Utilisez exclusivement des variables CSS
- Préférez :
- Une teinte dominante
- Une accentuation
- Un système neutre
- Évitez les palettes équilibrées de manière uniforme
Composition spatiale
- Brisez la grille intentionnellement
- Utilisez :
- L'asymétrie
- Le chevauchement
- L'espace négatif OU une densité contrôlée
- L'espace blanc est un élément de conception, pas une absence
Mouvement
- Le mouvement doit être :
- Utile
- Rare
- À fort impact
- Préférez :
- Une séquence d'entrée forte
- Quelques états de survol significatifs
- Évitez les micro-animations décoratives superflues
Texture et profondeur
Utilisez quand approprié :
- Superpositions de bruit / grain
- Maillages de dégradé
- Translucidité en couches
- Bordures ou séparateurs personnalisés
- Ombres avec intention narrative (pas par défaut)
Dépannage
Problème : L'opérateur a ignoré le contexte importé et a répondu de manière trop générique
Symptômes : Le résultat ignore le workflow en amont dans plugins/antigravity-bundle-web-designer/skills/frontend-design, ne mentionne pas la provenance, ou n'utilise aucun fichier source copié.
Solution : Rouvrez metadata.json, ORIGIN.md, et les fichiers amont copiés les plus pertinents. Vérifiez d'abord le bloc external_source, puis reformulez la provenance avant de continuer.
Problème : Le workflow importé semble incomplet pendant la révision
Symptômes : Les réviseurs voient le SKILL.md généré, mais ne peuvent pas déterminer rapidement quelles références, exemples ou scripts sont importants pour la tâche en cours.
Solution : Pointez vers les références, exemples, scripts ou ressources exacts qui justifient le chemin que vous avez emprunté. Si l'écart est réel, enregistrez-le dans la demande de tirage au lieu de le cacher.
Problème : La tâche a dérivé vers une spécialisation différente
Symptômes : La compétence importée commence au bon endroit, mais le travail se transforme en débogage, architecture, conception, sécurité ou orchestration de version, qu'une compétence native gère mieux. Solution : Utilisez la section des compétences connexes pour transférer délibérément. Gardez la provenance importée visible afin que la compétence suivante hérite du bon contexte au lieu de partir de zéro.
Notes de dépannage importées
Importé : 7. Anti-modèles (Échec immédiat)
❌ Inter/Roboto/polices système ❌ Dégradés SaaS violet sur blanc ❌ Mises en page par défaut Tailwind/ShadCN ❌ Sections symétriques et prévisibles ❌ Clichés de conception IA surutilisés ❌ Décoration sans intention
Si la conception pourrait être confondue avec un modèle → recommencez.
Compétences connexes
@3d-web-experience-v3- Utilisez lorsque le travail est mieux géré par cette spécialisation native après que cette compétence importée a établi le contexte.@canvas-design-v4- Utilisez lorsque le travail est mieux géré par cette spécialisation native après que cette compétence importée a établi le contexte.@form-cro-v3- Utilisez lorsque le travail est mieux géré par cette spécialisation native après que cette compétence importée a établi le contexte.@frontend-design-v6- Utilisez lorsque le travail est mieux géré par cette spécialisation native après que cette compétence importée a établi le contexte.
Ressources supplémentaires
Utilisez cette matrice de support et les fichiers liés ci-dessous comme packet d'opérateur pour cette compétence importée. Ils doivent refléter un véritable matériel source copié, pas un échafaudage générique.
| Famille de ressources | Ce qu'elle donne au réviseur | Chemin d'exemple |
|---|---|---|
references | notes de référence, guides ou documents de fond copiés depuis l'amont | references/n/a |
examples | exemples travaillés ou invites réutilisables copiés depuis l'amont | examples/n/a |
scripts | scripts d'assistance amont qui modifient l'exécution ou la validation | scripts/n/a |
agents | notes de routage ou de délégation qui font réellement partie du package importé | agents/n/a |
assets | ressources ou schémas de support copiés depuis le package source | assets/n/a |
Notes de référence importées
Importé : 2. Indice d'impact de faisabilité de conception (DFII)
Avant de construire, évaluez la direction de conception à l'aide du DFII.
Dimensions DFII (1–5)
| Dimension | Question |
|---|---|
| Impact esthétique | Quelle est la distinction visuelle et la mémorabilité de cette direction ? |
| Adéquation au contexte | Cette esthétique convient-elle au produit, au public et à l'objectif ? |
| Faisabilité de l'implémentation | Cela peut-il être construit proprement avec la technologie disponible ? |
| Sécurité des performances | Sera-t-il rapide et accessible ? |
| Risque de cohérence | Cela peut-il être maintenu sur tous les écrans/composants ? |
Formule de notation
DFII = (Impact + Adéquation + Faisabilité + Performance) − Risque de cohérence
Plage : -5 → +15
Interprétation
| DFII | Signification | Action |
|---|---|---|
| 12–15 | Excellent | Exécuter pleinement |
| 8–11 | Fort | Procéder avec discipline |
| 4–7 | Risqué | Réduire le périmètre ou les effets |
| ≤ 3 | Faible | Repenser la direction esthétique |
Importé : 3. Phase de réflexion de conception obligatoire
Avant d'écrire du code, définissez explicitement :
1. Objectif
- Quelle action cette interface doit-elle permettre ?
- Est-elle persuasive, fonctionnelle, exploratoire ou expressive ?
2. Ton (choisissez une direction dominante)
Exemples (non exhaustifs) :
- Brutaliste / Brut
- Éditorial / Magazine
- Luxe / Raffiné
- Rétro-futuriste
- Industriel / Utilitaire
- Organique / Naturel
- Ludique / Semblable à un jouet
- Maximaliste / Chaotique
- Minimaliste / Sévère
⚠️ Ne mélangez pas plus de deux.
3. Ancre de différenciation
Répondez :
"Si cette interface était capturée d'écran avec le logo retiré, comment quelqu'un la reconnaîtrait-il ?"
Cette ancre doit être visible dans l'interface utilisateur finale.
Importé : 5. Normes d'implémentation
Exigences de code
- Propre, lisible et modulaire
- Pas de styles morts
- Pas d'animations inutilisées
- HTML sémantique
- Accessible par défaut (contraste, focus, clavier)
Directives pour les frameworks
- HTML/CSS : Privilégiez les fonctionnalités natives, CSS moderne
- React : Composants fonctionnels, styles composables
- Animation :
- D'abord CSS
- Framer Motion uniquement lorsque justifié
Correspondance de complexité
- Conception maximaliste → code complexe (animations, couches)
- Conception minimaliste → espacement et typographie extrêmement précis
Décalage = échec.
Importé : 6. Structure de sortie requise
Lors de la génération de travail frontend :
1. Résumé de la direction de conception
- Nom esthétique
- Score DFII
- Inspiration clé (conceptuelle, pas de plagiat visuel)
2. Aperçu du système de conception
- Polices (avec justification)
- Variables de couleur
- Rythme d'espacement
- Philosophie du mouvement
3. Implémentation
- Code fonctionnel complet
- Commentaires uniquement là où l'intention n'est pas évidente
4. Mention de différenciation
Énoncez explicitement :
"Cela évite une interface utilisateur générique en faisant X au lieu de Y."
Importé : 8. Intégration avec d'autres compétences
- page-cro → Hiérarchie de mise en page et flux de conversion
- copywriting → Typographie et rythme du message
- marketing-psychology → Persuasion visuelle et alignement des biais
- branding → Cohérence de l'identité visuelle
- ab-test-setup → Conception sécurisée pour les variantes