Communitygithub.com

axewhyzed/agentic-skills

Cadre opérationnel pour applications web modernes à haute densité et zéro déchet, tableaux de bord et espaces de travail productifs. À utiliser lors de la conception, la construction ou la refonte d'interfaces web (React, TypeScript), de dispositions maître-détail à deux volets, de hubs de composition unifiés, de navigation pilotée par clavier, de palettes de commandes (cmdk), d'indicateurs de télémétrie en direct et d'ergonomie d'authentification granulaire.

Qu'est-ce que agentic-skills ?

Cette compétence fournit un guide opérationnel complet pour concevoir des applications web utilitaires à haute densité d'information et sans gaspillage visuel. Elle se concentre sur des architectures optimisées pour les utilisateurs productifs, comme les outils de développement, les panneaux d'administration et les relais de communication. La compétence détaille des motifs d'interface précis : suppression des bannières décoratives au profit d'une barre supérieure compacte, utilisation de l'espace avec des mises en page 100vh, l'esthétique minimaliste inspirée de Linear/Vercel (bordure fine de 1px, fonds ardoise profonde, grille d'espacement de 4px/8px), et le motif de hub de composition unifié avec onglets segmentés et glisser-déposer. Elle couvre également la navigation clavier complète (⌘K, Ctrl+Entrée, Tab) et l'accessibilité WCAG 2.2 AA/AAA, incluant des règles de contraste strictes pour les textes et les composants en mode clair et sombre. Enfin, elle traite de l'ergonomie de sécurité avec la distinction entre déconnexion locale et révocation globale, et propose des références à des dépôts open source comme shadcn/ui et cmdk pour l'inspiration.

Compatible avec~Claude Code~Codex CLI~Cursor✓Antigravity
npx skills add https://github.com/axewhyzed/agentic-skills/tree/HEAD/.agents/skills/modern-web-ui-ux
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Conception d'UI/UX Web Moderne et d'Espace de Travail à Haute Densité

Un guide opérationnel complet pour l'ingénierie d'applications web à haute densité et zéro déchet, de tableaux de bord utilitaires et d'espaces de travail web productifs.

1. La Philosophie du Zéro Déchet sur le Web

Les applications web productives (outils, panneaux d'administration, relais de communication, tableaux de bord développeur) ne sont pas des pages d'atterrissage. Les utilisateurs arrivent pour accomplir une tâche, pas pour admirer des graphismes marketing.

1.1 La Règle Anti-Héros

  • ❌ Anti-patron : Placer une énorme bannière décorative de 300px en haut d'un écran d'application (« Bienvenue dans votre Boîte de Réception ! », illustrations abstraites flottantes, grands fonds dégradés) qui repousse les données réelles et les contrôles interactifs sous la ligne de flottaison.
  • ✔️ Le Patron Zéro Déchet : Éliminer entièrement les bannières marketing des états connectés. Utiliser une seule barre supérieure compacte de 56px qui intègre :
    1. Une identité de marque / icône subtile.
    2. Une télémétrie système en direct ou des compteurs de quota (ex : pastille de stockage : 14 Mo / 2 Go).
    3. Des déclencheurs de modale d'action (ex : « Appairer un appareil »).
    4. Des bascules de thème rapides (Sombre / Clair).
    5. Un menu utilisateur compact avec une déconnexion locale distincte et des options de sécurité.

1.2 Maximisation de la Zone d'Affichage

  • Mises en page 100vh : Verrouiller la hauteur de la zone d'affichage racine (height: 100vh; overflow: hidden;) et créer des conteneurs de défilement indépendants pour les listes de contenu et les inspecteurs de détails.
  • Zéro Barre de Défilement Accidentelle : Éliminer les doubles barres de défilement en gérant soigneusement overflow-y: auto uniquement sur les conteneurs de liste internes.

2. L'Esthétique à Haute Densité de Style Linéaire

Inspirée des paradigmes de conception popularisés par Linear, Vercel et Raycast :

2.1 Hiérarchie Visuelle et Tokens

  • Bordures Subtiles de 1px : Éviter les ombres portées lourdes. Utiliser des bordures fines de 1px (border-border/40 ou #1E293B) pour établir la structure.
  • Fonds Ardoise / Obsidienne Profond : Utiliser des fonds à contraste élevé et non saturés (#0B0F17 ou #090D16) plutôt que du noir pur (#000000) ou des gris boueux.
  • Chiffres à Chasse Fixe Monospace : Toujours appliquer font-mono tabular-nums aux dates, horodatages, tailles de fichiers et compteurs afin que les chiffres s'alignent verticalement sans à-coup de mise en page.
  • Grille d'Espacement Compacte : Standardiser sur un rythme de 4px/8px. Rembourrer les lignes à 8px–10px verticalement et 12px horizontalement pour une densité d'information maximale sans claustrophobie visuelle.

2.2 Palette de Menu de Commande (Patron cmdk)

En plus de la barre de recherche standard, intégrer une palette de commandes globale déclenchée par ⌘K ou Ctrl+K :

  • Actions groupées : Navigation, Création, Paramètres système, Actions du compte.
  • Recherche floue instantanée sur les éléments, fichiers et raccourcis.
  • Navigation clavier entièrement accessible (FlècheBas, FlècheHaut, Entrée, Échap).

3. Le Patron de Hub de Composition Unifié

Lorsqu'une application permet aux utilisateurs de créer, télécharger ou envoyer différents types de données (ex : notes textuelles, URLs, documents), évitez de disperser les points d'entrée sur différentes pages ou de les enterrer en bas.

+-------------------------------------------------------------+
| Hub de Composition                                           |
| [ 📝 Texte ]  [ 🔗 Lien Web ]  [ 📁 Téléchargement Fichier ] |
+-------------------------------------------------------------+
|                                                             |
|  Zone Active de Formulaire / Glisser-Déposer                 |
|  - Zone de texte multiligne pour les notes                   |
|  - Saisie d'URL propre avec validation automatique            |
|  - Zone de glisser-déposer avec prévisualisation instantanée |
|    de l'étape de fichier                                     |
|                                                             |
+-------------------------------------------------------------+
| Rétention : [ 1 Jour ] [ 3 Jours ] [ 7 Jours ]    [ Déposer dans le Coffre ↵ ] |
+-------------------------------------------------------------+

Éléments Clés d'un Hub de Composition Efficace :

  1. Commutateur à Onglets Segmentés : Onglets en pastilles propres avec commutation instantanée sans réinitialisation du formulaire.
  2. Zone de Glisser-Déposer : Gestion native HTML5 du glisser-déposer avec mise en évidence visuelle de la bordure (border-dashed border-accent) et validation de la taille en octets.
  3. Comptage de Caractères et d'Octets en Direct : Calculer les vrais octets UTF-8 en temps réel (ex : 124 octets ou 18.4 Mo / 100 Mo).
  4. Contrôles de Cycle de Vie / Rétention : Permettre à l'utilisateur de définir l'expiration à l'avance afin que le système nettoie automatiquement les éléments temporaires.
  5. Soumission au Clavier : Ctrl + Entrée (ou Cmd + Entrée) pour soumettre depuis n'importe quelle entrée de texte active.
  6. États Actifs à Contraste Élevé (WCAG 1.4.11) :
    • Contraste d'Onglet Actif : En mode sombre, un onglet actif ne doit JAMAIS se fondre dans son conteneur (#111827 actif sur un conteneur #0F172A est seulement 1,02:1). Toujours surélever l'onglet actif avec --card-elevated: #1E293B, une bordure sémantique explicite de 1px (1px solid var(--accent)), un contour lumineux actif (box-shadow: 0 0 0 1px var(--accent-glow)), et une icône teintée active.
    • Limites des Contrôles de Formulaire : Les entrées de rétention, les chevrons de listes déroulantes et les boutons secondaires en mode sombre doivent utiliser des bordures avec une opacité blanche $\ge 18%$ (rgba(255, 255, 255, 0.18) ou #334155) pour répondre à l'exigence de contraste non textuel de 3:1 par rapport aux fonds sombres.

4. Mises en Page Maître-Détail à Haute Densité (Deux Volets)

Pour la navigation dans les données, les mises en page maître-détail maintiennent le contexte visible tout en permettant une inspection approfondie.

flowchart LR
    subgraph VoletMaître["Volet Maître (Gauche : 40% - 45%)"]
        BarreRecherche["Barre de Recherche Instantanée (Touche de raccourci : /)"]
        FiltresPastilles["Pastilles de Filtre : [Tout] [Fichiers] [Liens] [Texte]"]
        ÉlémentsListe["Lignes d'Éléments Virtualisées / Défilables
        - Icône de Type + Titre
        - Badge d'Appareil Expéditeur
        - Horodatage Relatif
        - Balayage Rapide / Action"]
    end

    subgraph VoletDétail["Volet Détail (Droite : 55% - 60%)"]
        EnTêteDétail["Badge de Titre et de Type d'Élément"]
        ZoneAperçu["Aperçu de Contenu en Direct :
        - Liens cliquables
        - Texte avec coloration syntaxique
        - Aperçu d'image / document"]
        LigneAction["Actions Principales :
        [ Ouvrir le Lien ] [ Copier le Texte ] [ Télécharger le Fichier ] [ Supprimer ]"]
    end

    VoletMaître -->|"État de Sélection"| VoletDétail

Meilleures Pratiques :

  • En-tête de Recherche et de Filtre Fixe : La saisie de recherche et les pastilles de filtre doivent rester épinglées pendant que la liste d'éléments défile en dessous.
  • États Vides et sans Résultat : Fournir des états visuels clairs :
    • Aucun élément pour l'instant : « Votre boîte de réception est vide. Utilisez le hub de composition ci-dessus pour déposer votre premier élément. »
    • Aucun résultat de recherche : « Aucun élément correspondant à 'déclaration-impôts'. [Effacer la recherche]. »

5. Navigation au Clavier et Accessibilité (a11y)

Les utilisateurs expérimentés attendent une maîtrise du clavier :

RaccourciActionImplémentation
/ ou ⌘KFocus sur l'Entrée de Recherchedocument.addEventListener('keydown', ...) avec input.focus()
ÉchapEffacer la Recherche / Fermer la Modale ActiveFerme la modale la plus haute ou désactive le champ de recherche
Ctrl + EntréeSoumettre le Formulaire Actif / Envoyer l'ÉlémentGestionnaire onKeyDown du formulaire
Tab / Maj + TabOrdre de Focus DOM LogiqueAppliquer des anneaux :focus-visible accessibles (contour bleu de $2\text{px}$)

5.1 Audit de Contraste de Couleur WCAG 2.2 AA / AAA

Ne jamais publier des applications web avec des tokens de conception non vérifiés ou à faible contraste :

  • Contraste du Texte Normal ($\ge 4,5:1$ AA, $\ge 7:1$ AAA) :
    • Piège du Mode Clair : Slate-400 (#94A3B8) sur #FFFFFF n'est que 2,57:1 (échec AA). Assombrir le texte secondaire en mode clair au moins jusqu'à Slate-500 (#64748B), donnant 4,77:1.
    • Piège du Badge Avertissement / Amber : Amber-600 (#D97706) sur #FFFFFF n'est que 3,22:1 (échec AA). Assombrir à Amber-700 (#B45309) pour les badges de texte, donnant 4,82:1.
    • Texte en Mode Sombre : Assurer que text-primary (#F8FAFC, 15,6:1 AAA) et text-secondary (#CBD5E1, 11:1 AAA) offrent une lisibilité sans effort sur les cartes en ardoise profonde.
  • Contraste des Composants et des Bordures ($\ge 3:1$, WCAG 1.4.11) :
    • Les entrées de formulaire, les champs de recherche et les bordures de contrôle segmenté en mode sombre doivent respecter un contraste $\ge 3:1$ par rapport aux conteneurs adjacents.
    • Les indicateurs de focus doivent utiliser des anneaux primaires à contraste élevé (box-shadow: 0 0 0 2px var(--focus-ring)).

6. Ergonomie Granulaire de la Sécurité et de l'Authentification

Ne pas confondre les actions utilisateur quotidiennes normales avec les actions de sécurité à haut risque.

6.1 Déconnexion Locale vs Révocation Globale

  • Déconnexion (Locale) : Efface le cookie de session sur le navigateur actuel uniquement. C'est l'action de routine que les utilisateurs effectuent sur les ordinateurs partagés.
  • Déconnexion Partout (Globale) : Révoque tous les jetons d'actualisation actifs et les sessions d'appareil sur tous les téléphones, ordinateurs portables et navigateurs enregistrés.
    • Règle de Sécurité : Ne jamais placer « Déconnexion Partout » comme un bouton à un clic direct dans un menu standard. Toujours le sécuriser derrière une modale dédiée avec une étape de confirmation explicite (« Êtes-vous sûr ? Cela déconnectera votre téléphone et vos autres appareils. »).

6.2 Ergonomie d'Appairage d'Appareil

  • Afficher les codes QR d'appairage dans une boîte de dialogue légère avec :
    • Code QR SVG à contraste élevé.
    • Minuteur en temps réel (ex : « Expire dans 09:42 »).
    • Secret textuel de secours avec un bouton de copie en un clic pour les appareils sans caméra fonctionnelle.

7. Références de Dépôts Open Source

Inspecter ces dépôts leaders de l'industrie pour la conception, la structure des tokens et l'inspiration d'implémentation :

  • shadcn/ui : Primitives de composants non stylisées et accessibles combinant Radix UI et Tailwind CSS avec des valeurs par défaut modernes à haute densité.
  • pacocoursey/cmdk : Le composant de menu de commande accessible de référence utilisé par Linear, Vercel et Raycast.
  • henrikzabel/linearlike : Index organisé d'applications web de qualité production utilisant l'esthétique Linear.
  • ln-dev7/circle : Gestionnaire de problèmes open source inspiré de Linear démontrant des tableaux denses et une navigation latérale.
  • calcom/cal.com : Mise en page d'espace de travail React de niveau entreprise avec des volets multiples propres, des boîtes de dialogue granulaires et une navigation instantanée.

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

axewhyzed/agentic-skills

>- Comprehensive guide and operational framework for native Android and mobile UI/UX engineering. Use when designing, auditing, building, or refactoring Android applications (Jetpack Compose, Material 3), mobile ergonomics, offline-first outbox patterns, stale-while-revalidate caching, smart one-tap intent actions, storage framework integrations, tactile haptics, shared element transitions, predictive back gestures, and seamless mobile authentication.

axewhyzed/agentic-skills

>- Comprehensive guide and operational framework for engineering world-class, human-grade GitHub READMEs and technical repository documentation. Use whenever creating, auditing, or refactoring a README for open-source tools, self-hosted services, developer utilities, or client-server applications. Enforces clear documentation guidelines, the 30-second rule, dual-audience narrative balance, copy-pasteable quickstarts, and high-signal visual showcases.

axewhyzed/agentic-skills

>- Comprehensive guide and operational framework for software engineering standards, clean code, low-level design (LLD), high-level architecture (HLD), distributed systems, API contracts, database indexing, capacity planning, and architecture decision records (ADRs). Use this skill whenever designing, evaluating, refactoring, reviewing, or scaling software architectures, backend services, database schemas, APIs, or performance-critical systems.

axewhyzed/agentic-skills

>- Comprehensive operational framework and design intelligence for modern UI/UX design, design systems, visual hierarchy, design tokens, component architecture, high-density financial terminal aesthetics, accessibility (WCAG 2.2 AAA/AA), mobile ergonomics, data visualization, and complete interface revamps. Use this skill whenever auditing, designing, refactoring, building, or restyling user interfaces, dashboards, design systems, layouts, forms, data tables, animations, and micro-interactions.

Skills associés

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community