Compétence de construction ultra-rapide d'un poste de travail multi-profession
Construisez un produit opérationnel centré sur un rôle, pas une coquille de tableau de bord renommée. Préservez une architecture existante le cas échéant. Pour une nouvelle construction en pur Web, partez de assets/reference-workbench-template/, puis remplacez complètement son domaine de référence (éducation).
Démarrage
- Classifiez la demande : nouvelle construction, extension, refonte ou audit.
- Inférez la profession, l'organisation, le rôle, les utilisateurs, les objets de travail, le cycle de vie, les décisions, les risques, les approbations, le périmètre de confidentialité et le mode de déploiement. Ne demandez que lorsqu'un choix manquant modifie substantiellement le produit.
- Lisez uniquement les références nécessaires :
- Lisez toujours deployment-modes.md pour une nouvelle construction.
- Lisez workbench-architecture.md pour les contrats de shell, modules et pages.
- Lisez profession-profiles.md pour sélectionner ou combiner des modèles de domaine.
- Lisez dashboard-catalog.md pour les KPI, graphiques et pages analytiques.
- Lisez design-interaction.md pour le travail visuel, l'animation, le canevas, la navigation ou l'adaptabilité.
- Lisez local-persistence.md chaque fois que les utilisateurs peuvent créer, modifier, supprimer, organiser, annoter, importer ou attacher des données.
- Lisez data-and-validation.md avant la génération des enregistrements et l'acceptation finale.
- Pour un nouveau projet hors ligne, exécutez :
python3 scripts/scaffold_professional_workbench.py <cible> --profile <profil> --profession "..." --organization-name "..." --role-name "..." --user-name "..." --deployment-mode local-offline
- Considérez l'échafaudage comme un point de départ. Ne livrez pas tant que chaque route, enregistrement, workflow, graphique, contrôle, chemin de persistance et vérification de vestige de domaine n'est pas passé.
Modélisation du métier
- Définissez les noms principaux du rôle : dossiers, clients, patients, projets, candidats, comptes, contenus, actifs, expériences, commandes, incidents ou objets équivalents.
- Définissez les états du cycle de vie, les propriétaires, les transferts, les échéances, les décisions, les conditions d'exception, les preuves et les approbations.
- Séparez le travail personnel, les opérations d'équipe, les ressources partagées, les analyses et l'administration/conformité.
- Gardez visibles le contexte d'organisation, de rôle, de période, de territoire, d'équipe ou de portefeuille.
- Utilisez des libellés de navigation explicites en chinois ; les icônes ne font que renforcer le sens.
- Sélectionnez un profil parmi profession-profiles.md, ou combinez des profils pour des rôles hybrides. Ne conservez que les responsabilités soutenues par le rôle réel.
Construction de pages complètes
- Donnez à chaque élément de navigation une page complète avec titre, contexte, actions, enregistrements denses, statuts et un tableau de bord analytique distinct.
- Évitez les espaces réservés, les tableaux à trois lignes, les cartes renommées répétées, les graphiques décoratifs et les boutons non fonctionnels.
- Utilisez des enregistrements de démonstration déterministes et cohérents, et étiquetez-les comme données simulées.
- Incluez les états appropriés : normal, vide, chargement, avertissement, erreur, désactivé, en retard, conflit, approbation et confirmation.
- Rendez les pages riches en enregistrements consultables, filtrables, triables et limitées par pagination ou défilement contrôlé.
- Rendez les enregistrements principaux directement modifiables. Les opérations de création, mise à jour et suppression doivent alimenter la même source que celle utilisée par le tableau, les détails, l'exportation et les tableaux de bord.
- Faites en sorte que les contrôles de date, de plage, de filtre et de segment agissent sur des enregistrements réels. Les contrôles uniquement visuels sont des défauts.
- Exportez les enregistrements filtrés actuels avec des en-têtes stables. Validez les importations pour le format, la forme des lignes, les limites et l'intention de fusion/remplacement ; prévisualisez d'abord et conservez les données actuelles inchangées en cas d'échec.
- Tracez l'objet de travail principal à travers les pages de liste, de détail, de workflow et de tableau de bord.
Attribution de tableaux de bord distincts
- Donnez à chaque page une question métier, un ensemble de KPI, une combinaison de graphiques, un diagnostic, une interaction et une variante de couleur différents.
- Utilisez les tendances pour le temps, les barres pour les catégories, les heatmaps pour la densité, les Sankey pour les flux, les réseaux pour les relations, le radar ou les coordonnées parallèles pour les profils, les Gantt pour les plannings et les histogrammes ou boîtes à moustaches pour les distributions.
- Composez chaque tableau de bord à partir d'un graphique dominant, de 3 à 4 KPI, d'un diagnostic secondaire, d'une vue classée ou segmentée, de contrôles de plage, d'infobulles et d'une interprétation concise.
- Liez les graphiques aux mêmes enregistrements visibles et fournissez des résumés textuels accessibles.
- Traitez les résultats financiers, médicaux, juridiques, de sécurité et de conformité comme une aide à la décision, jamais comme un jugement professionnel autonome.
Application du style « Quiet Luxury A »
- Utilisez le fichier
css/premium-minimal.cssfourni comme couche en cascade finale, sauf si l'utilisateur choisit une autre direction visuelle. - Conservez un fond ivoire chaud, une typographie vert-encre, des accents sauge désaturés, des titres d'affichage sérif, des contrôles système sans sérif, des règles fines et un espacement généreux.
- Privilégiez la hiérarchie éditoriale et l'alignement plutôt que les cartes arrondies imbriquées et les ombres lourdes.
- Gardez le shell calme et les libellés textuels. Utilisez des tableaux de bord analytiques légers ; réservez le graphite foncé pour le héros spatial ou le canevas infini.
- Gardez les heatmaps denses mais discrètes, avec cinq niveaux de cellules carrées.
- Utilisez l'inspection au survol, le focus, la sélection, le drill-down, les tiroirs de détail, les modales, le panoramique/zoom et la divulgation progressive là où ils clarifient l'état.
- Gardez les animations courtes, interruptibles et désactivées sous
prefers-reduced-motion. - Préservez l'accès clavier, le focus visible, les contrôles sémantiques, les dispositions tactiles et les vues d'impression/rapport.
- Adaptez
--workbench-folio, les sélecteurs de contexte et le langage du héros à la nouvelle organisation et profession. - L'image de référence du héros est intégrée sous forme de texte dans
js/hero-media.jsafin que la compétence reste compatible avec Red Skill et que le site généré reste entièrement hors ligne.
Exigence de persistance locale en premier
- Enregistrez automatiquement les modifications (création, édition, suppression, réorganisation, annotation, brouillon, préférence et disposition) sur l'ordinateur actuel après validation.
- Restaurez l'état enregistré avant le premier rendu significatif. Un toast de sauvegarde sans écriture réussie est un défaut.
- Utilisez le fichier
js/local-persistence.jsfourni pour les petits enregistrements JSON et les brouillons. Utilisez IndexedDB pour les pièces jointes, les grandes collections et les files d'attente hors ligne. - Espacez de noms chaque poste de travail, versionnez les enregistrements stockés et ajoutez des migrations lorsque les schémas changent.
- Affichez les états d'enregistrement, de sauvegarde, d'échec et de quota. Ne rejetez jamais silencieusement une écriture échouée.
- Fournissez une exportation JSON versionnée, une importation atomique validée avec sémantique de fusion/remplacement, une gestion des pièces jointes et une suppression confirmée. Annulez toute importation partiellement appliquée.
- Gardez les seeds de démonstration séparés des enregistrements personnels. Ne stockez pas de secrets et ne prétendez pas que le stockage du navigateur est crypté.
- Pour le mode
local-offline, divulguez les limites d'un seul appareil et d'un seul navigateur. Pour les modesteam-serverouenterprise, utilisez des API authentifiées et une base de données serveur comme système d'enregistrement ; voir deployment-modes.md.
Utilisation de l'implémentation fournie
Le modèle de référence fournit du HTML/CSS/JavaScript pur (sans CDN), une navigation textuelle multi-zone, 56 entrées de modules, des enregistrements denses, le style Quiet Luxury A, un héros spatial, un canevas infini, une heatmap d'activité, un curseur personnalisé, une animation de route, 22 familles de graphiques, des tableaux modifiables, un localStorage par espace de noms, une sauvegarde automatique, une sauvegarde/importation versionnée, des dialogues, des formulaires, un comportement adaptatif et des styles d'impression.
Remplacez tous les noms, la navigation, les enregistrements, les workflows, les KPI, les identités simulées et le texte du héros du domaine de référence. Ne livrez jamais un poste de travail non éducatif en changeant uniquement son titre.
Validation
- Exécutez
python3 scripts/validate_redskill_package.py .lors de la préparation de cette compétence pour un téléchargement sur Red Skill. - Exécutez
python3 scripts/validate_professional_workbench.py <chemin-du-projet>pour le poste de travail généré. - Exécutez les vérifications de syntaxe ou de construction natives.
- Vérifiez que chaque entrée de navigation mène à une page complète et reçoit un tableau de bord distinct.
- Vérifiez la densité des enregistrements, la cohérence entre les pages, les filtres opérationnels, les formulaires, les détails, les états du workflow et l'accès clavier.
- Vérifiez les actifs locaux et le comportement en
file://pour la livraison hors ligne. - Vérifiez : ajouter → recharger, modifier → recharger, supprimer → recharger, exporter → effacer → importer, rejet d'importation malformée et signalement d'échec de stockage.
- Exécutez
node scripts/test_local_persistence.js <chemin-du-projet>lorsque Node.js est disponible. - Pour les profils non éducatifs, exigez zéro vestige du domaine de l'éducation.
- Effectuez une QA visuelle et interactive lorsqu'une surface de navigateur est disponible ; n'assimilez jamais la simple existence d'un fichier ou la réussite syntaxique à une acceptation visuelle.
- Rapportez le chemin, le mode de déploiement, la profession, le rôle, la couverture des modules et des tableaux de bord, les résultats CRUD/filtre/importation/exportation, les résultats de persistance, la validation et les limites restantes.
Garde-fous
- N'inférez pas d'autorité pour les écritures externes, les approbations, les messages, les transactions ou les publications.
- Ne présentez pas les enregistrements simulés comme des données réelles et n'exposez pas d'identifiants sensibles.
- N'automatisez pas les décisions à enjeux élevés sans examen professionnel.
- N'utilisez pas de CDN externes pour les livrables hors ligne.
- Gardez
production_readyàfalsejusqu'à ce que l'architecture, la sécurité et les portes d'acceptation du mode de déploiement choisi soient franchies. - Ne publiez et ne déployez pas sauf si l'utilisateur le demande ou si des instructions actives de construction de site l'exigent.