Ajit-ApTech/premium-liquid-glass

Verre Liquide Premium

Objectif : une interface qui semble calme, spatiale et chère. Le verre est un matériau pour les contrôles qui flottent au-dessus du contenu. Ce n'est pas un style à appliquer partout. Test de succès : les utilisateurs disent "c'est propre et en couches", jamais "quelqu'un a ajouté du flou partout".

Cette compétence contrôle le matériau, la hiérarchie, la profondeur, le mouvement et l'accessibilité sur Android (Compose), iOS (SwiftUI), Flutter et Web (CSS / Tailwind). La marque du projet contrôle l'identité, la palette et le texte. Les tokens de marque par défaut se trouvent dans assets/tokens.json.

0. Sécurité et périmètre

• Travaillez uniquement à l'intérieur du projet sélectionné par l'utilisateur. Ne lisez pas de secrets, de clés ou de variables d'environnement. N'effectuez pas de requêtes réseau et n'installez pas de paquets ; si une bibliothèque est nécessaire, nommez-la et laissez l'utilisateur décider.
• Proposez les modifications avant de modifier le code d'application existant.
• Utilisez uniquement des exemples de contenu fictif.
• N'utilisez jamais les polices Apple (San Francisco) ou les symboles SF sur les plates-formes non Apple. Utilisez Inter, Roboto ou des polices adaptées à la plate-forme avec des icônes de style Material Symbols/Lucide. Sur iOS (SwiftUI), les symboles SF natifs et les polices système sont la norme.
• Les faits marqués (VERIFIER) peuvent vieillir avec les versions des API ; confirmez toujours en fonction des dépendances du projet.

1. Les cinq règles absolues

1. Le contenu n'est jamais en verre. Les cartes, les lignes de listes, les formulaires, les arrière-plans de page et les médias restent opaques ou avec une surface douce.
2. Le verre uniquement sur la couche flottante : pilule de navigation inférieure, barre supérieure sur du contenu défilant, bouton d'action flottant, feuilles et menus inférieurs, champ de recherche, toasts/snackbars et petites puces flottantes.
3. Jamais de verre sur du verre. À l'intérieur d'une surface vitrée, séparez les éléments avec des remplissages solides, des séparateurs subtils ou des différences d'opacité.
4. La lisibilité prime sur l'apparence. Le texte du corps nécessite un contraste de 4,5:1 (grand texte et icônes 3:1) sur l'arrière-plan le plus défavorable. Exécutez scripts/contrast_check.py.
5. Chaque surface vitrée a une solution de repli solide (versions d'OS plus anciennes, paramètre d'accessibilité Transparence réduite, économiseur de batterie, faible capacité GPU ou navigateurs dépourvus de backdrop-filter).

Question préalable avant d'appliquer le verre à un élément : "Quel rôle fonctionnel ce matériau communique-t-il ?" Réponses valides : il flotte au-dessus du contenu défilant ; il est temporaire ou contextuel ; il doit rester accessible pendant que le contenu se déplace en dessous. Pas de réponse = pas de verre.

2. Flux de travail universel

1. Inspecter : Plate-forme cible (Android Compose, iOS SwiftUI, Flutter, Web), limites de version d'OS, tokens de thème existants, structure de navigation, exigences d'accessibilité et objectifs de performance.
2. Carte des couches (avant tout code) : Tableau des éléments -> couche (contenu / structure / flottant) -> verre oui/non -> niveau -> raison. Présentez-la avec le plan.
3. Tokens : Partez de assets/tokens.json ; ajustez les couleurs de la marque ; ré-exécutez python scripts/contrast_check.py --tokens assets/tokens.json pour chaque niveau dans les deux modes.
4. Construire avec les modèles de plate-forme :
   • Android : assets/GlassTheme.kt & references/compose-implementation.md
   • iOS (SwiftUI) : assets/GlassView.swift & references/swiftui-implementation.md
   • Flutter : assets/glass_theme.dart & references/flutter-implementation.md
   • Web (CSS/Tailwind) : assets/glass.css, assets/tailwind-glass.config.js & references/web-implementation.md
5. Vérifier : Utilisez references/review-checklist.md et scripts/audit_compose.py (Android). Rapportez les preuves (rapports de contraste, nombre de couches de verre par écran, rendu de repli).

3. Niveaux de matériau (valeurs de départ)

Niveau	Utilisation	Flou	Remplissage (sombre)	Remplissage (clair)
aucun	contenu, cartes, listes, arrière-plans	-	Surface opaque	Surface opaque
fin	contrôles à icône seule ou à grande étiquette, puces	16 dp/px	encre @ 0,55	blanc @ 0,55
régulier	pilule de navigation, barre supérieure, champ de recherche, FAB, toasts	24 dp/px	encre @ 0,66	blanc @ 0,70
épais	feuilles, menus, dialogues, superpositions textuelles	32 dp/px	encre @ 0,78	blanc @ 0,82
écran	assombrissement derrière les feuilles modales	0-8 dp/px	noir @ 0,20-0,45	noir @ 0,20-0,45

Détails et nombres de contraste vérifiés : references/tokens.md. Les remplissages sont teintés avec la couleur d'encre de la surface, pas du blanc pur, afin que le texte en mode sombre survive aux arrière-plans lumineux.

4. Vérifications de réalité par plate-forme

Android (Jetpack Compose)

• Modifier.blur() / RenderEffect floute le contenu de l'élément lui-même, pas ce qui se trouve derrière. Un véritable flou d'arrière-plan nécessite une bibliothèque (Haze est sous licence Apache-2.0 et prend en charge Compose) ou un flou de fenêtre pour les dialogues (API 31+).
• Les effets de flou nécessitent Android 12 (API 31) ou supérieur (VERIFIER). En dessous de l'API 31, rendez toujours la surface de repli solide.
• Budget : Au maximum 2-3 couches floutées simultanées par écran. Ne floutez jamais les éléments de liste.
• Détails complets : references/compose-implementation.md.

iOS (SwiftUI)

• Utilisez les matériaux SwiftUI natifs : .ultraThinMaterial (niveau fin), .thinMaterial / .regularMaterial (niveau régulier) et .thickMaterial (niveau épais).
• Prenez en charge les coins continus iOS avec RoundedRectangle(cornerRadius: ..., style: .continuous).
• Utilisez .presentationBackground(.thinMaterial) pour les feuilles inférieures (iOS 16.4+).
• Détails complets : references/swiftui-implementation.md.

Flutter

• Utilisez BackdropFilter avec ImageFilter.blur(sigmaX: tier.blur, sigmaY: tier.blur) enveloppé dans ClipRRect.
• Enveloppez toujours dans RepaintBoundary pour éviter de repeindre le flou d'arrière-plan à chaque image.
• N'utilisez jamais BackdropFilter à l'intérieur d'éléments ListView.builder ou GridView.builder.
• Détails complets : references/flutter-implementation.md.

Web (CSS / Tailwind CSS)

• Incluez toujours -webkit-backdrop-filter: blur(...) et backdrop-filter: blur(...) pour la compatibilité entre navigateurs (Safari nécessite -webkit-).
• Spécifiez toujours une solution de repli @supports not (backdrop-filter: blur(1px)) pour les navigateurs plus anciens.
• Implémentez toujours une solution de repli @media (prefers-reduced-transparency: reduce) vers des arrière-plans solides.
• Détails complets : references/web-implementation.md.

5. Modes d'accessibilité (implémenter tous)

• Transparence réduite : Vérifiez les indicateurs système d'accessibilité (prefers-reduced-transparency sur le Web, accessibilityReduceTransparency dans SwiftUI, accessibleNavigation dans Flutter, ou bascule intégrée à l'application sur Android). Remplacez le verre par des tokens de surface solide avec une bordure visible de 1 dp/px.
• Grande police (200%) et lecteurs d'écran : Aucune information transmise uniquement par la couleur ; étiquettes sur les contrôles à icône seule ; ordre de focus logique.
• Mouvement réduit : Remplacez le mouvement par ressort par des fondus rapides (150 ms) ; conservez le retour d'état.
• Cibles tactiles : Minimum 48x48 dp / 44x44 pt. Les gestes (balayage) fournissent toujours un bouton ou une alternative de menu accessible.

6. Composants et géométrie

Spécifications pour la pilule de navigation, la barre supérieure, le FAB, les feuilles, le champ de recherche, les puces, les cartes et les piles de triage : references/components.md. Utilisez des rayons de coins cohérents :

• Petites puces : 999 (pilule complète)
• Petits contrôles / boutons : 16 dp/pt
• Cartes de contenu (opaques) : 24 dp/pt
• Pilule de navigation flottante : 28 dp/pt
• Feuilles modales : 32 dp/pt
• Rayon des éléments imbriqués = rayon extérieur - padding.

7. Mouvement et haptiques

Animations par ressort (durée 250-350 ms), fondus courts (150 ms), dépassement minimal ou nul. Petite impulsion haptique subtile aux déclencheurs de seuil (validation du balayage, sélection de pilule). État pressé : échelle 0,97 plus un surlignage doux. Honorez les paramètres système de mouvement réduit.

8. Mode d'invite d'image (écrans de référence)

Lors de la génération d'invites de maquettes UI, suivez references/image-prompts.md : un écran par invite, bloc de style autonome, texte exact à l'écran, verre uniquement sur la couche flottante, "les cartes sont opaques", barre d'état précise pour la plate-forme. Utilisez les sorties comme référence de mise en page et d'ambiance, puis implémentez en code avec des tokens de design.

9. Mode de révision

Lorsqu'on vous demande de réviser un design ou une base de code :

1. Classez chaque élément UI dans sa couche (contenu vs flottant).
2. Comptez le nombre de couches de verre par écran (appliquez le budget maximum de 2-3).
3. Recherchez les anti-modèles (verre sur les cartes, verre imbriqué dans du verre, solutions de repli manquantes).
4. Exécutez la vérification du contraste (python scripts/contrast_check.py --tokens assets/tokens.json).
5. Pour les projets Android, exécutez python scripts/audit_compose.py <src>.
6. Listez les résultats par sévérité avec des conseils correctifs issus de references/review-checklist.md.

10. Références et fichiers

• references/principles.md - Principes spatiaux fondamentaux & inspiration du design Apple
• references/tokens.md - Tableaux de tokens, valeurs de couleurs et nombres de contraste vérifiés
• references/compose-implementation.md - Architecture et extraits de code Android Compose
• references/swiftui-implementation.md - Architecture et extraits de code iOS SwiftUI
• references/flutter-implementation.md - Architecture et extraits de code Flutter
• references/web-implementation.md - Architecture et extraits de code Web CSS & Tailwind CSS
• references/components.md - Géométrie des composants, mises en page et états
• references/image-prompts.md - Modèles d'invite pour la génération de maquettes IA
• references/review-checklist.md - Portes de qualité et anti-modèles
• scripts/contrast_check.py - Script de vérification du contraste WCAG
• scripts/audit_compose.py - Script de scan statique Compose
• assets/tokens.json - Schéma complet des tokens de design
• assets/GlassTheme.kt - Modèle Jetpack Compose
• assets/GlassView.swift - Modèle SwiftUI
• assets/glass_theme.dart - Modèle Flutter
• assets/glass.css & assets/tailwind-glass.config.js - Modèles Web CSS et Tailwind