UI/UX Pro Max: opinionated end-to-end interface design across 10 stacks
Hiérarchie de priorités accessibilité-d'abord, tables de décision de style, règles de palettes et paires de polices, sélecteur de type de graphique, architecture de design tokens, et quick wins plus antipatterns — de React à SwiftUI
- Quoi
- Hiérarchie de priorités accessibilité-d'abord, tables de décision de style, règles de palettes et paires de polices, sélecteur de type de graphique, architecture de design tokens, et quick wins plus antipatterns — de React à SwiftUI
- Coût
- Gratuit
- Prérequis
- une interface, une app ou un site à concevoir ou construire — le skill est un guide que l'agent suit, pas un logiciel à installer
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — le skill UI/UX Pro Max de @pixel-process-ug : un système de design d'interfaces de bout en bout avec opinions et hiérarchie de priorités non négociable — Accessibilité (WCAG 2.1 AA minimum, contraste 4,5:1, navigation clavier, ARIA, reduced-motion) avant cibles tactiles (44x44px) avant performance (WebP/AVIF, budgets CLS/LCP/FID, font-display swap) avant style avant layout. Il parcourt cinq phases avec gates STOP-et-confirmation explicites : collecte des besoins, sélection de style via tables de décision par contexte (SaaS → Minimalism/Swiss/Material 3, portfolio → Brutalism/Maximalism/Glassmorphism, e-commerce, mobile, landing, enterprise, santé, finance, kids, luxe), couleur et typographie (catégories de palettes par produit avec comptes, tokens de couleur sémantiques, règles de remap dark mode, 10 paires de polices, échelle typographique), guidelines UX (navigation, formulaires, feedback, layout de contenu, règles mobile — 22 règles numérotées), et implémentation (table de décision de type de graphique par relation de données, patterns pour 10 stacks : React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, HTML/CSS pur, architecture de design tokens en 3 couches). Se termine par une checklist de quick wins et une table d'antipatterns (opacity pour texte désactivé, labels placeholder-only, hex brut dans les composants, modal-sur-modal). Bémols honnêtes : les gates de confirmation obligatoires supposent une boucle d'agent interactive — les runs batch/autonomes doivent les adapter ; palettes et paires sont des recommandations, pas un design system livré ; le type de skill FLEXIBLE signifie qu'il suit la hiérarchie mais adapte le style au contexte. Licence MIT. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Découvert via skills.sh.
Version :
Installation
Prérequis : une interface, une app ou un site à concevoir ou construire — le skill est un guide que l'agent suit, pas un logiciel à installer Installe-moi « UI/UX Pro Max : design d'interfaces de bout en bout avec opinions, sur 10 stacks ». Il donne à mon agent le système UI/UX Pro Max de @pixel-process-ug : la hiérarchie de priorités accessibilité-d'abord, cinq phases avec gates (besoins, sélection de style, couleur/typographie, guidelines UX, implémentation), tables de décision de style/palettes/polices, un sélecteur de type de graphique, des patterns d'implémentation pour 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, HTML/CSS), l'architecture de design tokens en 3 couches, une checklist de quick wins et une table d'antipatterns. Licence MIT. Dépôt : https://github.com/pixel-process-ug/superkit-agents/blob/main/templates/skills/ui-ux-pro-max/SKILL.md 1. Récupère le fichier SKILL.md (et les fichiers d'aide éventuels) depuis le chemin du dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Vérification de sécurité : examine le SKILL.md et les scripts pour tout contenu suspect (appels réseau inattendus, commandes shell, collecte d'identifiants). Ce dépôt ne devrait contenir aucun secret en dur, les identifiants uniquement via le coffre sécurisé, les hôtes autorisés déclarés dans le SKILL.md. Vérifie que c'est bien le cas ici ; STOP sur tout signal d'alerte et dis-le-moi. 3. Installe-le comme skill : copie le SKILL.md et ses fichiers d'aide dans le répertoire des skills de l'agent, dans un dossier nommé « ui-ux-pro-max ». 4. Vérifie sans appels réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (p. ex. pointer l'agent vers l'interface à concevoir ou construire et confirmer la stack cible ; les gates STOP-et-confirmation du skill supposent une boucle interactive — les adapter pour les runs batch ; traiter ses palettes et paires comme des recommandations de départ). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne jamais l'exiger sauf s'il figure dans les prérequis ci-dessus. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrête-toi et demande-moi.
Questions
Comment installer une création ?
Chaque fiche produit contient un prompt d’installation à copier-coller. Collez-le dans votre Muse et il installe la création pour vous — sans configuration manuelle.
Où va mon argent ?
Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.
Que signifie le ✓ à côté du nom d’un créateur ?
Il signifie que nous avons confirmé l’identité de la personne derrière la fiche. Il ne dit rien sur le code lui-même — vérifiez toujours une création avant de l’installer.