Synthèse automatique
Un référentiel de conception qui expose les sept principes du design universel de Ronald Mace et leur application concrète aux produits numériques.
Points forts
- Fournit une grille de lecture complète et mémorisable en sept principes, chacun décliné en critères concrets
- Traduit chaque principe en pratiques web directement actionnables : une seule URL pour tous, cibles tactiles de 44 px, sous-titres, annulation d'action, mode sombre
- S'appuie sur des exemples historiques parlants (OXO Good Grips, rampes de trottoir) qui rendent l'argumentaire convaincant face à une équipe produit
- Identifie clairement les anti-patrons, notamment l'accessibilité traitée en après-coup ou les versions séparées pour utilisateurs handicapés
Limites
- Contenu essentiellement conceptuel : aucune méthode de test, checklist de conformité ou critère mesurable n'est fourni
- Ne couvre pas les normes techniques précises comme WCAG, seulement des renvois vers des principes liés
- Rédigé en espagnol, ce qui peut demander une traduction pour une équipe non hispanophone
À utiliser en amont d'un projet ou lors d'une revue de conception pour vérifier qu'un écran ou un parcours ne crée pas de barrières pour des publics variés.
À ne pas utiliser comme référentiel de conformité ou de recette : pour auditer formellement l'accessibilité, il faut se tourner vers WCAG et des tests avec utilisateurs.
Analyse de sécurité
SûrThe skill is a pure reference document about Universal Design principles. It declares no tools, contains no executable instructions, and does not request secrets, network access, filesystem changes, or destructive actions.
Aucun point d'attention détecté
Comment cette analyse est faiteExemples
Voici la description de l'écran d'inscription de mon app. Passe-le en revue avec les 7 principes du design universel et liste les barrières concrètes, avec une correction pour chacune.Mon équipe veut créer une version « accessible » séparée de notre site. Confronte cette décision aux principes du design universel et propose une alternative.Transforme les principes de flexibilité d'usage et de tolérance à l'erreur en exigences concrètes pour notre design system (mode sombre, taille de police, undo, confirmations).name: universal-design description: Diseño que funciona para todos sin necesidad de adaptación. Use cuando diseñe productos para audiencias diversas o cuando busque máximo alcance. metadata: author: ux-ui-skills version: "1.0" category: frameworks
Diseño Universal
Resumen
Diseño de productos y entornos que sean utilizables por todas las personas, en la mayor medida posible, sin necesidad de adaptación o diseño especializado.
Origen
- Autor: Ronald Mace (NC State University)
- Año: 1997
- Centro: Center for Universal Design
- Contexto: Arquitectura accesible
Los 7 Principios
1. Uso Equitativo
- Útil para personas con diversas capacidades
- Mismo método de uso cuando posible
- Equivalente cuando no es posible
- Sin segregar usuarios
2. Flexibilidad de Uso
- Acomoda preferencias y habilidades
- Facilita precisión y accuracy
- Ofrece adaptabilidad al ritmo
- Permite múltiples métodos
3. Uso Simple e Intuitivo
- Fácil de entender
- Independiente de experiencia
- Independiente de conocimiento
- Independiente de idioma
4. Información Perceptible
- Comunica eficazmente
- Múltiples modos (visual, auditivo, táctil)
- Contraste adecuado
- Compatible con técnicas/dispositivos
5. Tolerancia al Error
- Minimiza riesgos de acciones accidentales
- Warnings de peligros
- Fail-safe features
- Desalienta acciones inconscientes en tareas críticas
6. Bajo Esfuerzo Físico
- Uso eficiente y cómodo
- Mínima fatiga
- Posición corporal neutral
- Fuerzas de operación razonables
7. Tamaño y Espacio Apropiado
- Apropiado para approach, reach, manipulation
- Independiente de tamaño corporal
- Independiente de postura
- Independiente de movilidad
Aplicación en Diseño Digital
Uso Equitativo
- Una URL para todos (no versiones "accesibles")
- Responsive design
- Progressive enhancement
- Sin barreras de entrada
Flexibilidad
- Dark mode / light mode
- Tamaños de fuente ajustables
- Keyboard + mouse + touch
- Velocidad de animación configurable
Simple e Intuitivo
- Iconos universales
- Navegación consistente
- Lenguaje simple
- Onboarding claro
Información Perceptible
- Alt text en imágenes
- Captions en videos
- Transcripts de audio
- High contrast options
Tolerancia al Error
- Undo disponible
- Confirmaciones para acciones destructivas
- Autoguardado
- Mensajes de error claros
Bajo Esfuerzo
- Gestos simples
- Clicks mínimos
- Formularios cortos
- Autocompletado
Espacio Apropiado
- Touch targets de 44px+
- Spacing generoso
- Scrolling natural
- Zoom funcional
Ejemplos
- OXO Good Grips: Diseñado para artritis, útil para todos
- Rampas de acera: Para sillas de ruedas, útiles para todos
- Puertas automáticas: Accesibles, convenientes para todos
- Subtítulos: Para sordos, útiles en espacios ruidosos
Anti-patterns
- ❌ Diseñar para "usuario promedio"
- ❌ Accesibilidad como afterthought
- ❌ Versiones separadas para "discapacitados"
- ❌ Asumir capacidades uniformes
- ❌ Ignorar edge cases como casos raros
Principios Relacionados
- [[inclusive-design]] - Diseño que incluye
- [[wcag-perceivable]] - Web accesible
- [[accessibility]] - Accesibilidad digital
Referencias
- Center for Universal Design. "The Principles of Universal Design"
- Mace, R. et al. (1997). "The Principles of Universal Design"
- https://universaldesign.ie/about-universal-design/
Du fichier au premier essai
Le téléchargement contient exactement le contenu affiché sur cette fiche. Cette copie peut différer de la dernière version du dépôt source.
Consulter la source et ses fichiers annexesCe téléchargement contient uniquement SKILL.md. Les scripts, références, modèles et dépendances éventuels ne sont pas inclus. Récupérez les fichiers nécessaires depuis la source en conservant leur arborescence avant de poursuivre.
1. Télécharger le fichier
Télécharger SKILL.mdDepuis la racine d’un projet de test, enregistrez le fichier sous .skill-downloads/universal-design-ms47vqzj/SKILL.md, ou utilisez la commande suivante. Ce dossier sert à examiner la skill avant son installation.
Commande pour macOS/Linux ou WSL : un shell POSIX et curl sont nécessaires. Sous Windows sans WSL, utilisez le bouton de téléchargement et créez le dossier manuellement.
mkdir -p '.skill-downloads/universal-design-ms47vqzj' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/universal-design-ms47vqzj/download' --output '.skill-downloads/universal-design-ms47vqzj/SKILL.md.part' && mv '.skill-downloads/universal-design-ms47vqzj/SKILL.md.part' '.skill-downloads/universal-design-ms47vqzj/SKILL.md'2. Vérifier les prérequis
Lisez SKILL.md avant de l’utiliser. Si le fichier cite des scripts ou services externes, examinez-les et préparez les accès nécessaires dans votre environnement de test.
Aucune section de prérequis reconnue dans ce fichier. Cela ne signifie pas qu’il est autonome : les bibliothèques, outils et accès peuvent être cités ailleurs dans le contenu ou dans le dépôt source.
Les plateformes de la fiche sont des indications du catalogue. Les chemins ci-dessous suivent la documentation des outils ; ils ne prouvent pas que cette skill y a été exécutée. Aucune version minimale de ces outils n’est attestée pour cette fiche.
3. Charger la skill
Après vérification, copiez le dossier complet dans le projet avec l’une des commandes ci-dessous, puis ouvrez une nouvelle session de l’outil. La commande s’arrête si un dossier du même nom existe déjà : comparez les fichiers avant de le remplacer.
Claude Code
test -f '.skill-downloads/universal-design-ms47vqzj/SKILL.md' && test -s '.skill-downloads/universal-design-ms47vqzj/SKILL.md' && mkdir -p '.claude/skills' && test ! -e '.claude/skills/universal-design' && cp -R '.skill-downloads/universal-design-ms47vqzj' '.claude/skills/universal-design'Cursor
test -f '.skill-downloads/universal-design-ms47vqzj/SKILL.md' && test -s '.skill-downloads/universal-design-ms47vqzj/SKILL.md' && mkdir -p '.cursor/skills' && test ! -e '.cursor/skills/universal-design' && cp -R '.skill-downloads/universal-design-ms47vqzj' '.cursor/skills/universal-design'Codex
test -f '.skill-downloads/universal-design-ms47vqzj/SKILL.md' && test -s '.skill-downloads/universal-design-ms47vqzj/SKILL.md' && mkdir -p '.agents/skills' && test ! -e '.agents/skills/universal-design' && cp -R '.skill-downloads/universal-design-ms47vqzj' '.agents/skills/universal-design'OpenSkills
OpenSkills doit déjà être installé. La procédure locale install/read est contrôlée avec OpenSkills 1.5.0, qui exige Node.js ≥ 20.6.0. Aucun slug du catalogue n’est résolu automatiquement.
Installation officielle d’OpenSkillsopenskills install './.skill-downloads/universal-design-ms47vqzj'openskills read 'universal-design-ms47vqzj'La lecture doit afficher le contenu du fichier installé et son dossier de base. Elle ne lance ni la skill ni ses dépendances.
Pour un agent qui lit AGENTS.md, synchronisez ensuite l’index. Cette commande modifie AGENTS.md : relisez le diff avant de l’utiliser.
openskills syncMode manuel ou autre outil : joignez SKILL.md à une conversation, ou ouvrez-le dans un agent capable de lire les fichiers. Ajoutez les ressources annexes nécessaires. Il n’existe pas de dossier universel reconnu par tous les outils.
4. Faire un premier essai
Utilisez une entrée courte et fictive : un endpoint d’API, un petit document ou un brief d’interface. Dans une nouvelle conversation, joignez le fichier ou donnez son chemin à l’agent, puis adaptez cette demande :
Lis .skill-downloads/universal-design-ms47vqzj/SKILL.md et applique ses instructions à cet exemple : [décrire une entrée de test]. Indique les fichiers, dépendances ou accès qui manquent. Produis le résultat demandé par la skill sans inventer de données ni exécuter de script non examiné.Résultat attendu : une sortie correspondant aux instructions de la skill, ou une liste précise des prérequis manquants. Une simple confirmation de lecture ne valide pas le premier usage. Si une ressource externe est indisponible, ce parcours reste à tester.
Bonnes pratiques React Hook Form
Developpement
Maîtrisez React Hook Form : évitez les anti-patterns, gérez les abonnements, et traitez correctement reset, dirty state et entrées contrôlées.
Migration Emotion vers Mantine
Developpement
Migrer les styled-components Emotion vers des composants Mantine avec style props et modules CSS. Pour convertir .styled.tsx ou supprimer les imports @emotion.
Détecteur de dérive de périmètre
Developpement
Analyse les diffs git par rapport à une intention pour détecter la dérive de périmètre, fichiers non liés et PR trop larges, puis suggère de garder, diviser ou justifier.