Compétences ui-skills
🎨

ui-skills

Sûr

Créer des interfaces utilisateur cohérentes avec des contraintes de conception

Les agents IA produisent souvent du code d'interface utilisateur incohérent d'une session à l'autre. Cette compétence fournit des contraintes et des modèles de conception stricts pour garantir une génération d'interfaces cohérentes et accessibles à chaque fois.

Prend en charge: Claude Codex Code(CC)
📊 71 Adéquat
1

Télécharger le ZIP du skill

2

Importer dans Claude

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

3

Activez et commencez à utiliser

Tester

Utilisation de "ui-skills". Générer un composant carte en utilisant les modèles ui-skills

Résultat attendu:

Un composant Card réutilisable avec un padding cohérent, des bordures arrondies, des jetons d'ombre et le support pour les emplacements header, body et footer. Inclut les états au survol et les attributs d'accessibilité.

Utilisation de "ui-skills". Créer une boîte de dialogue modale en suivant les contraintes ui-skills

Résultat attendu:

Un composant Modal avec capture du focus, gestion de la touche Échap, détection du clic sur l'arrière-plan et les rôles ARIA appropriés pour les lecteurs d'écran.

Audit de sécurité

Sûr
v1 • 2/25/2026

This skill contains documentation-only content (SKILL.md) with no executable code. Static analysis flagged URLs and patterns that are false positives - the URLs are GitHub repository references in documentation, not network requests. No security risks detected.

1
Fichiers analysés
23
Lignes analysées
0
résultats
1
Total des audits
Aucun problème de sécurité trouvé
Audité par: claude

Score de qualité

38
Architecture
100
Maintenabilité
87
Contenu
32
Communauté
100
Sécurité
91
Conformité aux spécifications

Ce que vous pouvez construire

Développeur frontend construisant un système de conception

Utilisez cette compétence pour générer des modèles de composants cohérents qui suivent les principes de conception établis et les normes d'accessibilité.

Agent IA créant des composants UI

Permettez aux assistants de codage IA de produire du code UI qui adhere aux contraintes et modèles de conception de votre équipe.

Équipe startup standardisant le développement UI

Établissez un vocabulaire partagé de modèles UI pour les petites équipes sans ressources de conception dédiées.

Essayez ces prompts

Générer un composant bouton de base 
En utilisant les modèles ui-skills, générez un composant bouton avec les états primaire, secondaire et désactivé. Incluez les attributs d'accessibilité et les états de focus.
Créer un champ de formulaire avec validation 
Appliquez les contraintes ui-skills pour créer un composant de saisie de texte avec étiquette, placeholder, état d'erreur et messages de validation. Suivez les directives WCAG.
Construire un composant de navigation responsive 
En utilisant les modèles ui-skills, créez un composant de navigation qui fonctionne sur bureau et mobile. Incluez la navigation au clavier et le support pour lecteurs d'écran.
Concevoir un tableau de données avec tri 
Appliquez les contraintes ui-skills pour générer un composant de tableau de données avec des colonnes triables, la sélection de lignes et la pagination. Assurez la conformité accessibilité.

Bonnes pratiques

  • Définissez toujours les jetons de conception (espacement, couleurs, typographie) avant de générer des composants
  • Testez les composants avec la navigation au clavier et les lecteurs d'écran pendant le développement
  • Documentez les props des composants, les états et les exemples d'utilisation pour la cohérence de l'équipe

Éviter

  • Coder en dur les valeurs de couleurs au lieu d'utiliser les jetons du système de conception
  • Ignorer les états de focus et la navigation au clavier dans les éléments interactifs
  • Créer des composants trop complexes qui devraient être divisés en unités plus petites

Foire aux questions

Quels frameworks cette compétence supporte-t-elle ?
Cette compétence se concentre sur les modèles de composants basés sur React mais les principes de conception s'appliquent à n'importe quel framework frontend.
Cette compétence génère-t-elle du code CSS réel ?
Non, elle fournit la structure et les modèles de composants. Le style doit être appliqué en utilisant votre système de conception ou framework CSS existant.
Comment intégrer cela avec mon système de conception existant ?
Mappez vos jetons de conception (espacement, couleurs, typographie) sur les modèles de cette compétence avant de générer des composants.
Puis-je personnaliser les exigences d'accessibilité ?
Oui, la compétence utilise WCAG comme base mais vous pouvez spécifier des exigences supplémentaires dans vos prompts.
Cette compétence est-elle adaptée au développement mobile-first ?
Oui, les modèles supportent le design responsive et les approches mobile-first avec des contraintes appropriées.
À quelle fréquence les modèles de conception sont-ils mis à jour ?
Les modèles évoluent en fonction des retours de la communauté et des meilleures pratiques émergentes en développement UI.

Détails du développeur

Auteur

sickn33

Licence

MIT

Dépôt

https://github.com/sickn33/antigravity-awesome-skills/tree/main/web-app/public/skills/ui-skills

Réf

main

Structure de fichiers

📄 SKILL.md