🎨

ui-ux-pro-max

Name: ui-ux-pro-max
Author: sickn33

Risque faible

Créez des designs UI/UX professionnels avec l'assistance de l'IA

Également disponible depuis: ZhanlinCui,DCjanus,nextlevelbuilder

Les designers et développeurs ont du mal à maintenir des systèmes de design cohérents et accessibles across les projets. Cette skill fournit des directives de design complètes, des palettes de couleurs, des recommandations typographiques et des modèles de composants pour 9 grandes stacks technologiques.

Prend en charge: Claude Codex Code(CC)

⚠️ 68 Médiocre

Télécharger le ZIP du skill

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

Activez et commencez à utiliser

Tester

Utilisation de "ui-ux-pro-max". Recommandez une palette de couleurs pour une application de santé

Résultat attendu:

Palette de couleurs pour application de santé : Primaire (#0891B2 - Cyan apaisant) établit la confiance et le calme. Secondaire (#22D3EE - Cyan clair) fournit la hiérarchie visuelle. CTA (#059669 - Vert succès) pour les actions principales. Arrière-plan (#ECFEFF - Blanc doux) réduit la fatigue oculaire. Texte (#164E63 - Sarcelle profonde) assure la lisibilité. Bordure (#A5F3FC - Bordure claire) pour une séparation subtile. Cette palette priorise le calme et la confiance, essentiels pour les applications de santé où les utilisateurs peuvent éprouver de l'anxiété.

Utilisation de "ui-ux-pro-max". Quelles sont les exigences de cible tactile pour les boutons mobiles ?

Résultat attendu:

Directives de cible tactile : Minimum 44x44 pixels (exigence iOS HIG et WCAG). Recommandé 48x48 pixels pour les actions fréquemment utilisées. Le padding doit être inclus dans la mesure, pas seulement le bouton visible. Espacement entre les cibles tactiles : minimum 8px pour éviter les appuis accidentels. Pour les actions critiques (supprimer, acheter), envisagez un minimum de 56x56px.

Audit de sécurité

Risque faible

v1 • 2/25/2026

Static analysis flagged 1176 patterns but nearly all are false positives. 'Weak cryptographic algorithm' detections are hex color codes (#2563EB) in design data files. 'Hardcoded URLs' are documentation links in guidelines. 'System reconnaissance' and 'C2 keywords' are design terminology matches. Python scripts read CSV files to generate design recommendations - no network calls or code execution. One legitimate concern: scripts/design_system.py uses subprocess calls (Ruby/shell execution patterns) for design tooling integration, which is appropriate for this use case but documented as a minor risk.

Fichiers analysés

2,560

Lignes analysées

résultats

Total des audits

Problèmes à risque moyen (1)

scripts/design_system.py:9 scripts/design_system.py:423-425

External Command Execution in Design Scripts

scripts/design_system.py contains shell command execution patterns for design tooling integration. This is legitimate for a design system generator but represents a minor risk if the script were modified to accept untrusted input.

Problèmes à risque faible (3)

data/stacks/nuxt-ui.csv:2 data/stacks/nextjs.csv:2

Documentation URLs in Design Guidelines

CSV data files contain documentation URLs (e.g., https://ui.nuxt.com/docs/) as part of design guidelines. These are reference links, not network calls made by the skill.

data/colors.csv:2-30 data/products.csv:2-30

False Positive: Hex Color Codes Flagged as Crypto

Static analyzer flagged hex color codes (e.g., #2563EB, #3B82F6) as 'weak cryptographic algorithm'. These are design color values, not cryptographic operations.

data/ux-guidelines.csv:1-100

False Positive: Design Terminology Flagged as Suspicious

Terms like 'reconnaissance' (in UX research context), 'keylogger' (in security UI guidelines), and 'C2' (likely 'call-to-action' abbreviation) triggered keyword detectors but are legitimate design domain vocabulary.

Audité par: claude

Score de qualité

Architecture

100

Maintenabilité

Contenu

Communauté

Sécurité

Conformité aux spécifications

Ce que vous pouvez construire

Startup construisant un système de design MVP

Un fondateur solo utilise la skill pour établir des modèles UI cohérents pour son produit SaaS, en sélectionnant des palettes de couleurs appropriées, des styles de composants et des directives d'accessibilité pour son application basée sur React.

Équipe design standardisant les composants

Un lead d'équipe design exploite les directives complètes pour créer une documentation unifiée du système de design, garantissant que tous les membres de l'équipe suivent des modèles cohérents across plusieurs gammes de produits.

Développeur implémentant des exigences d'accessibilité

Un développeur frontend consulte les directives d'accessibilité pour s'assurer que son application Vue respecte les exigences WCAG 2.1, incluant un contraste de couleurs approprié, la gestion du focus et des modèles de navigation au clavier.

Essayez ces prompts

Sélection de palette de couleurs de base

Je construis un [type de produit, ex. tableau de bord SaaS]. Recommandez une palette de couleurs avec des couleurs primaire, secondaire, CTA, d'arrière-plan, de texte et de bordure. Incluez les codes hex et expliquez la psychologie des couleurs.

Guide d'implémentation de composants

Montrez-moi les meilleures pratiques pour implémenter [composant, ex. tableaux de données] dans [framework, ex. React]. Incluez les exigences d'accessibilité, les modèles courants et des exemples de code.

Demande d'audit d'accessibilité

Examinez mon [type de page/composant] pour les problèmes d'accessibilité. J'ai [décrivez votre UI]. Quelles directives WCAG dois-je vérifier ? Fournissez une checklist priorisée.

Génération complète de système de design

Générez un système de design complet pour un [type de produit] ciblant [audience]. Incluez : palette de couleurs, échelle typographique, styles de composants, système d'espacement et directives UX spécifiques à mon domaine.

Bonnes pratiques

Toujours vérifier que les ratios de contraste des couleurs respectent le minimum WCAG AA (4.5:1 pour le texte normal, 3:1 pour le texte large) avant de finaliser les designs
Maintenir la cohérence across toutes les pages - utiliser le même style, palette de couleurs et modèles de composants dans toute votre application
Designer mobile-first : commencer par des layouts touch-friendly (cibles 44px+) et adapter pour les écrans plus grands
Utiliser des noms de couleurs sémantiques (primaire, secondaire, erreur) au lieu de valeurs codées en dur pour permettre le theming et le support du mode sombre
Tester les designs avec les préférences de mouvement réduit (prefers-reduced-motion) pour assurer l'accessibilité aux utilisateurs avec des troubles vestibulaires

Éviter

Utiliser des emojis comme icônes dans les interfaces de production - ils s'affichent de manière incohérente across les plateformes et manquent d'apparence professionnelle
Implémenter des interactions hover-only sans alternatives tap/click - exclut les utilisateurs d'appareils tactiles et les scénarios d'accessibilité
Sauter les états de chargement et les skeleton screens - crée des problèmes de performance perçue et de l'incertitude utilisateur pendant les opérations asynchrones
Coder les couleurs en dur inline au lieu d'utiliser des design tokens ou des variables CSS - empêche le theming et crée une charge de maintenance
Utiliser l'animation à des fins décoratives sans respecter prefers-reduced-motion - peut causer de l'inconfort ou des nausées pour certains utilisateurs

Foire aux questions

Cette skill fonctionne-t-elle avec Claude, Codex et Claude Code ?

Oui. Cette skill est compatible avec les trois assistants IA. Chacun peut accéder aux directives de design et fournir des recommandations basées sur les besoins spécifiques de votre projet.

Puis-je utiliser ces directives pour des projets commerciaux ?

Oui. La skill est sous licence MIT, qui permet l'usage commercial. Les directives référencent les meilleures pratiques standard de l'industrie issues de systèmes de design établis.

Comment adapter ces directives à mes couleurs de marque existantes ?

Utilisez les recommandations de psychologie des couleurs et de contraste tout en substituant les couleurs primaires de votre marque. Les directives fournissent des ratios et des relations qui fonctionnent avec n'importe quelle couleur de base.

Ces directives d'accessibilité sont-elles conformes WCAG ?

Oui. Les directives référencent les standards WCAG 2.1 AA pour le contraste des couleurs, les cibles tactiles, les états de focus et la navigation au clavier. Toujours vérifier avec des outils de test automatisés pour la production.

Quelle stack technologique dois-je choisir pour mon projet ?

La skill fournit des directives pour 9 stacks. React/Next.js pour les applications web, React Native/SwiftUI/Flutter pour le mobile, Vue/Svelte pour le web léger, Tailwind pour le CSS utility-first, et shadcn/ui pour les composants basés sur Radix. Considérez l'expertise de votre équipe et les exigences du projet.

À quelle fréquence les directives de design sont-elles mises à jour ?

Les meilleures pratiques de design évoluent avec le temps. La skill contient des modèles établis des principaux systèmes de design (Material Design, Human Interface Guidelines, Carbon, etc.) qui restent pertinents across les versions de frameworks.