portail-associations/docs/ux/PORTAL-SKILLS-SYSTEM.md

Skills portail - integration utile sans surcouche

Intention

Le portail dispose deja d'un socle UX et metier solide.
L'objectif n'est donc pas d'injecter artificiellement une nouvelle couche de "skills", mais de :

• capitaliser sur les briques deja presentes ;
• renforcer les zones qui apportent un vrai gain utilisateur ;
• eviter les dependances ou abstractions inutiles ;
• garder un portail fluide, lisible et robuste.

En pratique, un "skill" correspond ici a un bloc de capacite reutilisable :

• regle de layout ;
• logique UX ;
• moteur de donnees ;
• comportement mobile ;
• outil d'efficacite admin ;
• aide a l'autonomie association.

Principe de pilotage

Avant d'ajouter un nouveau skill, verifier :

1. si le portail a deja une brique equivalente ;
2. si cette brique peut etre etendue proprement ;
3. si le gain UX ou metier est concret ;
4. si l'ajout ne degrade pas la performance ou la lisibilite.

Lecture par priorite

Priorite 1 - Skills structurels

Ces skills sont deja largement presents et doivent rester la base unique.

Responsive Engine

Etat :

• deja present

Points d'appui :

• client/src/hooks/useMobile.tsx
• client/src/components/DashboardLayout.tsx
• client/src/index.css

Role :

• detection mobile / tablette / desktop ;
• adaptation sidebar / densite / structure ;
• reduction des regressions multi-appareils.

UI Kit Global

Etat :

• deja present

Points d'appui :

• client/src/components/ui
• client/src/components/portal/PortalSurface.tsx

Role :

• boutons, badges, cartes, dialogues, tables, panneaux ;
• langage visuel commun entre public, association et admin.

Layout Manager

Etat :

• deja present

Points d'appui :

• client/src/components/DashboardLayout.tsx
• client/src/components/portal/PortalSurface.tsx

Role :

• structure stable ;
• alignements ;
• marges ;
• paddings ;
• hierarchie des surfaces.

Typography System

Etat :

• deja present et relie au module Apparence

Points d'appui :

• shared/appearance.ts
• client/src/lib/appearance.ts
• client/src/index.css

Role :

• famille de police ;
• echelle des titres ;
• lisibilite globale ;
• personnalisation sans casser la coherence.

Priorite 2 - Skills UX

Smooth Navigation

Etat :

• partiellement present, renforce dans ce tour

Points d'appui :

• client/src/components/DashboardLayout.tsx
• client/src/pages/Home.tsx
• client/src/lib/routePrefetch.ts

Role :

• navigation plus immediate ;
• prechargement des vues clefs au survol, au focus et au toucher ;
• reduction de la sensation d'attente entre clic et affichage.

Panel Interaction

Etat :

• deja present

Points d'appui :

• composants Dialog, Sheet, DropdownMenu, Sidebar
• regroupements d'actions secondaires deja poses sur plusieurs vues

Role :

• ouverture/fermeture propre ;
• actions secondaires discretes ;
• meilleure densite operationnelle.

List Enhancer

Etat :

• present par endroits, a propager selon besoin

Points d'appui :

• filtres et vues admin ;
• densite compacte / detaillee ;
• recherche sur annuaire et bordereau.

Role :

• tri ;
• recherche ;
• pagination ;
• lecture dense mais lisible.

Action Visibility

Etat :

• deja present sur les zones prioritaires

Role :

• mettre en avant valider / ignorer / appliquer / ouvrir ;
• reduire le bruit visuel ;
• garder une action principale claire.

Priorite 3 - Skills Data

Matching Engine

Etat :

• deja present

Points d'appui :

• server/associationDirectoryMatcher.ts
• server/routers.ts

Role :

• detection des correspondances ;
• rapprochement portail / bordereau ;
• reduction des doublons.

Fusion Engine

Etat :

• present en logique de validation, a etendre si besoin

Role :

• fusion propre ;
• arbitrage humain ;
• tracabilite.

Data Validation

Etat :

• deja largement present

Points d'appui :

• normalisations dans server/associationDirectory.ts
• validations schema Zod dans server/routers.ts
• helpers partages shared/*

API Connector (RNA / SIRENE / HelloAsso)

Etat :

• present et renforce

Points d'appui :

• server/associationReferenceSync.ts
• docs/compliance/association-directory-official-enrichment.md

Role :

• enrichissement controle ;
• aucune creation automatique ;
• validation admin obligatoire.

Priorite 4 - Skills Mobile

Mobile Scroll

Etat :

• renforce

Points d'appui :

• client/src/index.css
• client/src/lib/appearance.ts

Role :

• limiter les couches couteuses pendant le scroll ;
• garder les fonds immersifs sans penaliser la fluidite.

Lazy Loading

Etat :

• deja present sur les routes et certaines cartes

Points d'appui :

• lazy(...) dans client/src/App.tsx

Prefetch Engine

Etat :

• ajoute dans ce tour

Points d'appui :

• client/src/lib/routePrefetch.ts

Role :

• precharger les vues les plus frequentes ;
• accelerer la navigation percue ;
• ne rien casser dans le routeur existant.

Touch Gestures

Etat :

• a traiter seulement si un vrai besoin apparait

Decision UX :

• ne pas ajouter de gestuelle complexe par defaut ;
• privilegier une ergonomie simple avant les gestures.

Priorite 5 - Skills Admin

Admin Dashboard

Etat :

• deja present

Correspondence Manager

Etat :

• deja present et enrichi

Role :

• correspondances a valider ;
• propositions officielles ;
• workflow de decision humain.

Notification Engine

Etat :

• deja present

Role :

• alertes ;
• badges ;
• suivi des dossiers prioritaires.

Priorite 6 - Skills Association

Association Portal

Etat :

• deja present et fortement harmonise

Reservation Flow

Etat :

• deja present

Document Center

Etat :

• deja present

Ce qui a ete ajoute dans ce tour

1. Prefetch discret des routes clefs

Ajout du fichier :

• client/src/lib/routePrefetch.ts

Et branchement sur :

• la sidebar dashboard/admin ;
• la navigation et les CTA principaux de l'accueil.

Impact attendu :

• navigation plus fluide ;
• sensation de site plus reactif ;
• zero changement de logique metier.

2. Clarification strategique

On ne traite pas les skills comme des plugins externes a injecter partout.

On les traite comme :

• des capacites internes ;
• deja presentes ou utiles ;
• propageres seulement quand elles ont un vrai impact.

Recommandation UX

Le bon ordre reste :

1. structurel ;
2. UX ;
3. data ;
4. mobile ;
5. admin ;
6. association.

Mais dans le code, cela doit se traduire par :

• extension des briques existantes ;
• pas de sur-abstraction ;
• pas de moteur supplementaire si la base actuelle couvre deja le besoin.

Regle de prudence

Un skill n'est utile que s'il rend le portail :

• plus stable ;
• plus fluide ;
• plus lisible ;
• plus simple a administrer ;
• plus confortable pour l'association.

Sinon, c'est du superflu.