Communitygithub.com

molveau/ui

Construit, relooke, peaufine et révise les interfaces utilisateur avec goût. À utiliser lors de la création, du relooking ou de l'amélioration d'une UI, page, écran ou composant, notamment un hero, une barre de navigation, un en-tête, des cartes, un formulaire ou une section ("rends-le meilleur", "fais-le claquer", "peaufine"), pour le travail sur la mise en page, l'espacement, la typographie, les couleurs, le mode sombre ou les jetons de design, pour le polissage des états de survol et de focus ou des détails quand quelque chose "sonne faux", pour la mise en page responsive ou mobile, pour la critique, l'audit ou la refonte d'une interface, pour une revue de design ou un UI roast, pour simplifier ou rendre un design plus audacieux, ou pour rédiger des prompts qui produisent une UI de qualité professionnelle avec un outil d'IA.

Qu'est-ce que ui ?

Ce skill consolide plusieurs références de design d'interface en un seul playbook, fusionnant les travaux de Jakub Krehel (make-interfaces-feel-better, Impeccable) et les propres directives de Molveau (dont un guide de goût inspiré d'Emil Kowalski). Il est conçu pour les développeurs et les agents IA travaillant sur des UI web ou mobiles, en priorisant la définition d'une direction de conception claire via un processus en cinq étapes ("Direction gate") avant toute implémentation, et en appliquant des règles de base comme un seul point focal par écran et une maquette avant implémentation. Le skill excelle dans la revue de design, la correction des défauts esthétiques et l'alignement des interfaces sur des principes de design éprouvés. Il s'intègre avec les skills `anti-slop` (pour éliminer les telltales de l'IA), `motion` (pour les animations complexes) et `ux` (pour l'accessibilité et les microcopies), et propose une table de référence complète pour chaque type de tâche UI.

Compatible avec✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/molveau/skills/tree/main/skills/ui
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

Que fait ui ?

Un skill pour construire et relooker des interfaces. Il fusionne les compétences de Jakub Krehel, make-interfaces-feel-better, Impeccable et les propres références de Molveau (y compris un guide de goût tiré du travail d'Emil Kowalski) en un seul playbook.

Commencez ici

Lisez references/playbook.md d'abord, en commençant par son bloc "Faites ceci d'abord" ; ouvrez les fichiers des fournisseurs et les références Molveau uniquement pour approfondir ou pour des exemples concrets. Le playbook est la doctrine fusionnée (avant de commencer, mise en forme, mise en page, typographie, couleur, mode sombre, surfaces, icônes, composants et états, retour de mouvement, responsive et natif, relectures, passes d'affinage, performance, maquette d'abord, prompts) avec des balises de source et les décisions prises lorsque les sources divergent. Le tableau ci-dessous est l'index de profondeur.

Porte de direction

Faites ceci avant tout code pour une nouvelle page, un nouvel écran ou une refonte, même si la demande tient en une ligne. Le reste de ce skill supprime les erreurs ; il ne donne pas de caractère à un écran. Si vous sautez cette étape, le résultat est la page médiane que chaque modèle produit : juste sur les détails, n'appartenant à personne.

  1. Cinq lignes. Produit : ce qu'il fait, pour qui. Caractère : deux ou trois mots concrets (calme, précis, un peu chaleureux), jamais propre, moderne, élégant, minimal ou premium. Monde : l'endroit ou le matériau auquel le produit appartient ; il teinte les neutres et définit l'accent. Moments : les un ou deux endroits qui reçoivent une couleur riche et des détails. Signature : un petit détail que seul ce produit possède, utilisé de manière cohérente. Un moment est dessiné avec soin, pas seulement nettoyé : un graphique redessiné pour ce qu'il doit dire (lignes lisses, une comparaison en miroir, une échelle réelle), ou l'objet même du produit rendu avec poids et lumière.
  2. Inventaire, puis l'idée. Listez 8 à 12 choses qu'aucun concurrent ne partage (nom, rue, chiffres du brief, matériaux, outils, rituels, documents que le métier imprime). Écrivez : "Sur cet écran, [un élément] devient [le dispositif]". Ce dispositif est le moment.
  3. Refusez les valeurs par défaut de second ordre sauf si la marque les possède déjà. Ce sont celles qu'un modèle atteint une fois les telltales évidents interdits :
    • un fond crème, pierre ou blanc chaud avec un accent orange brûlé, terre cuite, sauge ou forêt, avec ou sans titre en serif (le look "papier et encre" est la nouvelle norme, pas une direction) ;
    • Fraunces, Instrument Serif, Playfair ou Georgia comme police de titre par réflexe ; system-ui comme seule police ;
    • Inter ou Geist sur blanc avec un seul accent indigo ou bleu ;
    • hero, trois fonctionnalités, témoignages, appel à l'action, dans cet ordre, sans argument pour cela ; sur un écran d'application, quatre cartes de statistiques égales au-dessus d'un graphique à barres ;
    • un sourcil centré, un titre et deux boutons comme seul premier écran.
  4. Test d'échange. Remplacez le nom et le métier par ceux d'un concurrent. Si l'écran convient toujours, changez la proposition, le moment et la signature, et testez à nouveau.
  5. Montrez et attendez. Montrez les cinq lignes et l'idée, et attendez le propriétaire. Si vous ne pouvez pas demander (l'utilisateur a dit de simplement construire, ou vous travaillez sans personne), écrivez-les en commentaire en haut du fichier principal et construisez exactement cela.

Profondeur : playbook anti-slop §2 (direction) et §12 (écrans d'application) ; le skill design-inspiration-index pour des références réelles.

Toujours actif

  1. Le projet d'abord. Ses jetons, composants, DESIGN.md et les écrans frères décident avant toute valeur par défaut ici.
  2. Une seule autorité de design à la fois. Terminez une passe avant d'en superposer une autre.
  3. Un point focal et une action principale par écran, chaque état conçu (playbook §3, §9).
  4. Maquette avant implémentation pour les nouveaux écrans ou les refontes lorsque le projet fonctionne en mode maquette d'abord, la valeur par défaut de Molveau (references/mockup-first.md) ; sinon, le propre processus de relecture du projet.
  5. Avant de déclarer l'UI terminée : le skill anti-slop et son détecteur, puis vérification de type, lint et tests.

Voisins : le skill anti-slop possède les telltales du code vidéo et les passes de dés-IA ; motion possède les animations au-delà du retour UI ; ux possède les textes, formulaires, focus, cibles, profondeur d'accessibilité, erreurs, cas limites et intégration. Profondeur de relecture : design-grill est l'audit approfondi (sept lentilles, rapport classé), les lignes de critique ci-dessous sont la passe unique plus légère, et anti-slop est la passe d'aspect IA.

Quoi lire pour quelle tâche

Tous les chemins sont relatifs à ce dossier de skill.

TâcheÀ lire
Les règles fusionnées, les valeurs et les appels de conflitreferences/playbook.md
Écran nouveau ou relooké qui a besoin de retour (pas une petite retouche)references/mockup-first.md
Valeurs par défaut de goût quand un projet n'a pas encore de jetonsreferences/taste.md
Mise en page, regroupement, alignement, espacementreferences/vendor/jakub/better-layout.md, puis references/vendor/impeccable/layout.md
Typographie : polices, échelle, longueur de ligne, OpenTypereferences/vendor/jakub/better-typography.md et references/vendor/impeccable/typeset.md
Couleur : palette, contraste, mode sombre, jetonsreferences/vendor/jakub/better-colors.md, plus references/vendor/impeccable/colorize.md pour ajouter de la couleur
Polissage final : rayons, ombres, alignement optique, états d'icônesreferences/vendor/feel/make-interfaces-feel-better.md et references/vendor/impeccable/polish.md ; references/vendor/jakub/better-ui.md pour des valeurs exactes
Relecture classée plein écran (accessibilité et rédaction vivent dans le skill ux)references/vendor/jakub/better-interface.md, le parapluie
Relecture d'une branche ou d'une PR pour les régressions UIreferences/vendor/jakub/interface-review.md
Audit de design multi-lentilles complet d'un fichier, composant ou route (lourd : plusieurs agents)le skill design-grill
Références visuelles ou inspiration pour un hero, CTA, barre de navigation, motion, icônesle skill design-inspiration-index
Critique ou revue de design d'un écranreferences/vendor/impeccable/critique.md (heuristiques, charge cognitive, personas) ; démontage rapide : prompt 4 dans references/prompts.md
Audit : performance, thématisation, responsive (pour l'accessibilité, utilisez le skill ux)references/vendor/impeccable/audit.md, references/vendor/impeccable/optimize.md
Trop chargé ou lourdreferences/vendor/impeccable/distill.md, references/vendor/impeccable/quieter.md
Trop fade ou timidereferences/vendor/impeccable/bolder.md, references/vendor/impeccable/colorize.md, references/vendor/impeccable/delight.md
Effets techniquement ambitieuxreferences/vendor/impeccable/overdrive.md
Planifier un nouveau design de zéroreferences/vendor/impeccable/shape.md ; references/vendor/impeccable/new-work.md et les fichiers de mode (references/vendor/impeccable/mode-operate.md, mode-persuade.md, mode-read.md) pour une nouvelle identité visuelle
Application, tableau de bord et profondeur des paramètresreferences/vendor/impeccable/operate.md
Petits écrans, tactile, autres plateformesreferences/vendor/impeccable/adapt.md ; natif : references/vendor/impeccable/ios.md, references/vendor/impeccable/android.md, references/vendor/impeccable/adapt.native.md
Écrire ou mettre à jour DESIGN.md, extraire des jetons et des composantsreferences/vendor/impeccable/document.md, references/vendor/impeccable/extract.md
Recettes de motion de retour (pression, entrée et sortie, échanges d'icônes, changement de thème)references/vendor/jakub/better-ui/animations.md, references/vendor/jakub/better-ui/enter-exit.md, references/vendor/jakub/better-ui/icon-transitions.md ; les chiffres d'Emil dans references/animation.md (workflow complet : le skill motion). Certaines recettes y sont plus longues (une feuille d'environ 500ms, les 400ms de Sonner) : dans l'UI le playbook plafonne les superpositions à 300ms (§10)
Liste de contrôle pour composant interactif (toasts, tiroirs, menus)references/components.md
Site marketing public qui devrait être cité par les LLMsreferences/discoverability.md
Prompts qui imposent le goût dans l'UI générée par IAreferences/prompts.md
La philosophie derrière les règlesreferences/quotes.md
L'UI a l'air vidéo-codée ou génériquele skill anti-slop
Textes, erreurs, états vides, profondeur d'accessibilitéle skill ux

Le point d'entrée Impeccable references/vendor/impeccable/impeccable.md décrit un ensemble complet de commandes avec ses propres fichiers de configuration et scripts ; lisez-le lorsque vous voulez ce workflow complet plutôt qu'une seule passe. Ses commandes clarify, harden et onboard sont fournies une fois, dans le skill ux.

Notes sur les fichiers fournis

Les fichiers sous references/vendor/ sont copiés sans modification de leurs auteurs, donc les liens relatifs et les noms de commandes à l'intérieur (commandes slash d'Impeccable, scripts/impeccable, mode live, comp gates) peuvent ne pas exister dans cette installation. Suivez les conseils ; ignorez ce qui pointe vers des outils manquants. Là où un fichier fourni demande des captures d'écran navigateur, des sous-agents ou des passes visuelles automatisées, suivez la propre règle du projet (conflit de playbook 14). Les licences et les sources exactes se trouvent dans chaque dossier de fournisseur (LICENSE, SOURCE.md).

Crédits et licences

  • references/vendor/jakub/ sont les compétences de Jakub Krehel (https://github.com/jakubkrehel/skills), MIT.
  • references/vendor/feel/ est make-interfaces-feel-better par Jakub Krehel (https://github.com/jakubkrehel/make-interfaces-feel-better), MIT.
  • references/vendor/impeccable/ est Impeccable par Paul Bakaus (https://github.com/pbakaus/impeccable), Apache-2.0, avec sa LICENSE et sa NOTICE conservées. Fichiers relocalisés, SKILL.md renommé, scripts/ non inclus ; voir son SOURCE.md. Le playbook paraphrase et condense les conseils d'Impeccable ; cette adaptation est un changement par rapport à l'original.
  • Le guide de goût (references/taste.md, animation.md, components.md, quotes.md) est distillé du travail de design-engineering d'Emil Kowalski (https://emilkowal.ski), marqué [Molveau/Emil] dans le playbook. Les mots et la structure sont ceux de Molveau (MIT) ; les idées et les chiffres sont les siens. references/quotes.md attribue chaque citation. references/animation.md s'inspire également de devouringdetails.com de Rauno Freiberg.
  • references/discoverability.md est distillé de la recherche de Suganthan Mohanadasan (suganthan.com).
  • references/playbook.md, references/prompts.md et references/mockup-first.md sont propres à Molveau (MIT), créditant chaque source par balise.

Individual skills in this repo

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

molveau/anti-slop

Removes the AI-generated look from a UI and gives it a direction of its own. Use when a screen, landing page or dashboard looks vibe-coded or generic (purple gradients, gradient text, emoji labels, glow, eyebrow pills, Inter everywhere, buzzword copy, uneven spacing), when the user asks to unslop, de-AI or make a page stop looking generated, and before shipping any UI to check the 20 tells. Includes a zero-dependency detector script and a ratchet-test recipe.

molveau/design-inspiration-index

Routing index for design inspiration. Use when you need visual references or ideas for a UI (a hero, landing page, SaaS page, navbar, CTA, motion or micro-interaction, brand or rebrand, component, icon) and want to know which curated gallery to pull from. Maps a need to the best source among galleries, component registries and optional MCP servers. Use it before hunting blindly for inspiration.

molveau/vitrine

Playbook for a vitrine, a business showcase / brochure site for a local business. Use at the start of a small business website, brochure site, landing page for a local business, service-business site, or when adding pricing, booking, city pages, local SEO, bilingual FR/EN or a Québec privacy setup to one. Says what such a site needs, in which order to apply the ui, ux, anti-slop, motion, french-typography and loi-25-website skills, and gives a done checklist.

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