design-arsenal

Design Arsenal — الأداة الموحدة لتصميم الواجهات

Un outil. Un point d'entrée. Onze modules. Ceci est une compétence unique — tout s'exécute à travers ce fichier. Sept outils amont de renommée mondiale et quatre modules originaux ne sont plus des compétences séparées ; ce sont désormais des modules internes, chacun documenté dans un MANUAL.md que vous lisez depuis le disque lorsque la tâche l'exige.

EXTRACTION  →  GOUT  →  CONSTRUCTION  →  MOUVEMENT  →  POLISSAGE  →  VERIFICATION
 extract       gout      code           gsap /        impeccable     playwright-cli
 + design-tokens                react-bits    transitions
rtl-arabic (couche contextuelle — tout contenu arabe)
a11y (contrôle chaque étape)        web-vitals (budgets à chaque étape)

نظام أداة واحدة: تُنصَّب هذه المهارة مرة واحدة كأداة واحدة باسم design-arsenal، وكل ما تفعله يمر عبر هذا الملف. الأدوات السبع السابقة أصبحت وحدات داخلية (مع 4 وحدات أصلية: rtl-arabic وa11y وdesign-tokens وweb-vitals) — لا تُنصَّب منفردة ولا تظهر كأدوات مستقلة، بل تُقرأ أدلة استخدامها (MANUAL.md) من القرص عند الحاجة فقط.

---

🧭 Répartition des modules — lisez ce tableau en premier

Identifiez UN module à partir de la tâche, lisez son MANUAL.md depuis le disque (chemins relatifs au répertoire de ce fichier), puis suivez-le. Ne chargez jamais plus de deux modules pour une seule tâche.

#	Signal de tâche (ce que demande l'utilisateur)	Module	Lire depuis le disque
1	Copier le design d'un site : "extraire le design de stripe.com", "quels tokens/couleurs/polices ce site utilise-t-il", "transformer cette URL en thème Tailwind"	extract (designlang)	skills/extract-design/MANUAL.md
2	Direction artistique & anti-slop avant construction : "construire une page d'accueil", "un design qui n'a pas l'air d'un template", "choisir une palette/une direction typographique"	taste (taste-skill v2)	skills/taste/MANUAL.md
3	Raffiner, réviser ou renforcer une UI existante : "polir", "auditer", "critiquer", "plus audacieux", "plus discret", "composer", "coloriser", "durcir", "distiller"	polish (impeccable, 24 commandes)	skills/impeccable/MANUAL.md
4	Animation programmatique avancée : "GSAP", "animation de défilement", "timeline", "ScrollTrigger", "stagger", "pinning"	motion/gsap (8 modules)	skills/gsap/gsap-<module>/MANUAL.md
5	Composants React animés prêts à l'emploi : "hero animé", "effet de texte", "fond animé", "survol brillant", "écran partagé"	components (react-bits, 218)	skills/react-bits/CATALOG.md
6	Micro-interactions & mouvement UI en CSS : "transition de fenêtre modale", "toast", "badge de notification", "squelette de chargement", "coche de succès", "état de réflexion IA"	motion/transitions (43+ extraits)	skills/transitions/transitions-dev/MANUAL.md
7	Vérifier ou automatiser : "tester dans le navigateur", "capture d'écran", "vérifier que le flux fonctionne", "enregistrer une vidéo", "parcourir le flux"	verify (playwright-cli)	skills/playwright-cli/MANUAL.md
8	Interface arabe/RTL : "UI arabe", "RTL", "عربي", "right-to-left", "bidi", tout contenu contenant de l'arabe	rtl-arabic (original)	skills/rtl-arabic/MANUAL.md
9	Accessibilité : "a11y", "accessible", "WCAG", "contraste", "aria", "lecteur d'écran", "clavier"	a11y (original)	skills/a11y/MANUAL.md
10	Tokens de conception : "design tokens", "DTCG", "theme tokens", "variables CSS thème", "convertir palette en Tailwind", "architecture de tokens"	tokens (original)	skills/design-tokens/MANUAL.md
11	Performances : "page lente", "lighthouse", "core web vitals", "LCP", "INP", "CLS", "budget de perf", "render-blocking", "أداء", "بطيء", "سرعة"	web-vitals (original)	skills/web-vitals/MANUAL.md

Chevauchements → règles de départage :

• Construire quelque chose de nouveau → taste en premier (direction), puis react-bits ou gsap pendant l'implémentation.
• Redessiner quelque chose d'existant → polish audit/critique en premier, puis taste si une nouvelle direction est nécessaire.
• Pure micro-interaction (un élément, état ouvert/fermé) → transitions (CSS, peu coûteux). Chorégraphie complète de scène, défilement ou physique → gsap.
• Tokens lisibles par machine (fichiers JSON/DTCG) → tokens. Résumé de conception en prose depuis un site en direct → extract. Capture d'écran → tokens → tokens directement.
• Tout contenu arabe → lire rtl-arabic avant de styliser, quel que soit le module principal.
• Mouvement + question d'accessibilité → les règles a11y de mouvement réduit l'emportent toujours sur la richesse du mouvement.
• Mouvement + question de performance → le budget de thread principal web-vitals l'emporte ; les animations ne sont livrées que sur transform/opacity.
• "La page est lente" → web-vitals lint statique d'abord (causes structurelles), puis mesure (§8 de son manuel) — ne devinez jamais une métrique.
• Après TOUT changement d'UI → proposer de vérifier avec verify (capture d'écran du résultat).

---

🌳 Arbre de décision — orientez-vous en quatre questions

Posez, dans l'ordre, et arrêtez-vous à la première correspondance :

1. Le contenu contient-il de l'arabe (ou une autre écriture RTL) ? → ajoutez rtl-arabic comme couche contextuelle, puis continuez ci-dessous.
2. L'entrée est-elle un design existant à consommer ? URL → extract ; capture d'écran/maquette → tokens ; fichier de palette → tokens.
3. La tâche crée-t-elle quelque chose de nouveau, ou modifie-t-elle quelque chose qui existe ? Nouveau → taste → construire (puiser dans react-bits/gsap/transitions au besoin). Existant → audit polish d'abord (/impeccable audit), puis taste seulement si une nouvelle direction est nécessaire.
4. Par quoi la tâche se termine-t-elle ? Livraison d'UI → exécuter les contrôles a11y + lint web-vitals + captures d'écran verify. Production d'un fichier de thème/token → exports tokens + audit d'accessibilité des paires.

Lisez au maximum deux fichiers MANUAL.md par tâche ; les quatre modules originaux peuvent s'empiler avec un module amont (par exemple rtl-arabic + taste).

---

🚫 Registre des anti-patrons — ne livrez jamais ces éléments

Interdictions inter-modules recueillies dans les manuels. Si votre sortie en contient une, la tâche n'est pas terminée :

• Un <div onClick> qui fait office de bouton (a11y §3) — mort pour le clavier, invisible pour le lecteur d'écran.
• Texte gris sur fond coloré, ou toute paire fg/bg en dessous de 4.5:1 (a11y §2, interdiction impeccable) — exécutez le script de contraste au lieu de deviner.
• outline: none sans anneau de focus de remplacement (a11y §5).
• Animation sans garde prefers-reduced-motion (a11y §7, règle transitions) — la règle la plus stricte l'emporte.
• letter-spacing sur du texte arabe (rtl-arabic §3) — cela casse l'écriture connectée.
• Propriétés CSS physiques left/right dans une page RTL (rtl-arabic §1) — utilisez des propriétés logiques.
• Hex/px codés en dur dans les composants lorsqu'un fichier de tokens existe (tokens §7) — seuls les fichiers de tokens contiennent des valeurs brutes.
• GSAP pour un survol d'un seul élément (utilisez transitions) ou transitions CSS pour une scène chorégraphiée au défilement (utilisez gsap).
• Un nom de composant react-bits qui n'est pas dans catalog.json — n'en inventez jamais.
• Cartes imbriquées dans des cartes, easing rebond sur l'UI, et autres signes de slop impeccable — /impeccable audit les attrape.
• loading="lazy" sur l'image hero/LCP (web-vitals §2) — le navigateur découvre la requête seulement après le layout.
• Une <img> ou <iframe> sans width/height explicites (web-vitals §3) — décalage de mise en page garanti.
• Un <script src> classique dans <head> sans defer/async, ou tout document.write (web-vitals §7).
• Un @font-face sans font-display, ou une feuille de style Google-Fonts sans preconnect vers fonts.gstatic.com (web-vitals §6).

---

📦 Ce qu'il y a à l'intérieur

design-arsenal/                  ← UNE compétence, installée une fois
├── SKILL.md                     ← le point d'entrée unique (ce fichier)
├── index.json                   ← index des modules lisible par machine
├── install.sh                   ← installateur en une commande (toutes plates-formes)
├── ATTRIBUTION.md               ← sources et licences
├── README.md                    ← الدليل الكامل بالعربية
├── demo/index.html              ← démo fonctionnelle de la pile de mouvement
├── examples/gsap/               ← exemples de démarrage GSAP (react/vue/nuxt/vanilla)
└── skills/                      ← modules internes (manuels de référence uniquement)
    ├── extract-design/          ← designlang : URL → système de design complet (17+ fichiers)
    ├── taste/                   ← taste-skill v2 : 13 règles anti-slop + bibliothèque + inspecteur
    ├── impeccable/              ← impeccable : 24 commandes + 60+ règles de détection + scripts
    ├── gsap/                    ← 8 modules GSAP : core/timeline/scrolltrigger/react/plugins/…
    ├── react-bits/              ← 218 composants React animés (TS-CSS + TS-Tailwind) + catalogue
    ├── transitions/             ← transitions.dev : 18 références de transition + tokens
    ├── playwright-cli/          ← module d'automatisation de navigateur + 10 références
    ├── rtl-arabic/              ← original : interfaces arabes/RTL (propriétés logiques, typographie, audit en 10 points)
    ├── a11y/                    ← original : contrôles WCAG 2.2 AA + script de contraste sans dépendance
    ├── design-tokens/           ← original : architecture DTCG + convertisseur multi-cibles
    └── web-vitals/              ← original : guide Core Web Vitals + linter HTML statique

Chaque répertoire de module contient un MANUAL.md (anciennement son propre SKILL.md). Parce que seul ce SKILL.md racine existe, votre agent enregistre et charge exactement un outil — pas de prolifération de compétences, pas de déclencheurs en double, pas d'encombrement contextuel dû à sept compétences installées.

---

🚀 Démarrages rapides

Zéro-à-page-d'accueil (le pipeline complet) :

1. (Reconnaissance optionnelle) extract sur 1 à 2 URL de concurrents → tokens + motifs.
2. taste → lire le brief, déduire la direction (type/palette/famille de mise en page), appliquer les interdictions.
3. Construire. Tirer le mouvement de transitions, les composants prêts de react-bits, le travail de scène de gsap.
4. polish → /impeccable polish + /impeccable audit avant livraison.
5. verify → capture d'écran desktop + largeurs mobiles, confirmer que rien n'est cassé.

Juste réparer une UI moche ? → polish seul (commencer : /impeccable audit <cible>). Juste animer ? → transitions pour le micro, gsap pour les scènes, jamais les deux sur le même élément. Page lente / échec des vitals ? → web-vitals : linter le balisage, appliquer le guide LCP/CLS/INP, puis mesurer (§8).

---

⚙️ Notes d'environnement ponctuelles

• extract nécessite Node 20+ et Playwright (npx designlang <url> gère l'installation au premier lancement).
• Les scripts polish sont des binaires autonomes dans skills/impeccable/scripts/ ; sur Windows sans sh utilisez impeccable.cmd.
• Les scripts taste sont des Node sans dépendance (node skills/taste/scripts/lint.mjs src/).
• Le linter web-vitals est un Node 18+ sans dépendance (node skills/web-vitals/scripts/webvitals.mjs page.html).
• verify nécessite npm install -g @playwright/cli + playwright-cli install-browser chromium.
• Les sources locales components sont des fichiers simples — copiez depuis ts-tailwind/ (projets Tailwind) ou ts-default/ (projets CSS), ou utilisez le registre en direct : {"registries":{"@react-bits":"https://reactbits.dev/r/{name}.json"}} dans components.json.
• Les exemples GSAP se trouvent dans examples/gsap/{vanilla,react,vue,nuxt}.

🧠 Règles pour l'agent

1. Un outil, un point d'entrée. Toutes les requêtes passent par ce fichier. Si une tâche correspond au pipeline, travaillez module par module dans l'ordre du pipeline — ne cherchez pas les modules en tant que compétences distinctes installées ; ils sont internes à celle-ci.
2. Lire depuis le disque. Les chemins des modules sont relatifs au répertoire de ce fichier. Lisez le MANUAL.md du module en entier avant d'agir.
3. Correspondre, ne pas mélanger. Une tâche → un module principal. N'empilez les modules que dans l'ordre du pipeline ci-dessus.
4. Respecter chaque interdiction de module. taste interdit les look templates ; impeccable interdit le gris sur fond coloré, les cartes imbriquées, l'easing rebond ; transitions et a11y exigent les gardes prefers-reduced-motion ; rtl-arabic interdit l'espacement des lettres sur l'arabe et les left/right physiques dans les pages RTL ; web-vitals interdit les heroes paresseux, les médias sans dimensions et les scripts bloquant le rendu. En cas de conflit de règles, la règle la plus stricte l'emporte — et les règles de sécurité a11y priment sur toute préférence esthétique.
5. N'inventez jamais de noms de composants. Pour react-bits, utilisez uniquement les noms présents dans skills/react-bits/catalog.json ; sinon, construisez à partir de zéro selon les règles taste.
6. Mesurer, ne pas juger à l'œil. Les affirmations de contraste proviennent de node skills/a11y/scripts/contrast.mjs ; les exports de tokens de node skills/design-tokens/scripts/convert.mjs ; les affirmations de performance structurelles de node skills/web-vitals/scripts/webvitals.mjs. Si les scripts contredisent votre œil, les scripts gagnent.
7. Le contenu arabe passe par rtl-arabic. Dès qu'une tâche contient du contenu arabe ou RTL, lisez skills/rtl-arabic/MANUAL.md avant d'écrire du CSS — même si un autre module est principal.
8. Attribution. Les sept modules amont proviennent de projets open source indépendants — conservez leurs licences intactes (voir ATTRIBUTION.md). Les quatre modules originaux (rtl-arabic, a11y, design-tokens, web-vitals) font partie de cet ensemble.