widgets-ui
Générer des widgets UI déclaratifs à partir de JSON
Les agents peinent à afficher des interfaces utilisateur complexes. Cette compétence permet à Claude de générer des composants React interactifs et riches à partir de structures JSON simples.
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 "widgets-ui". Créer un formulaire de connexion avec les champs e-mail et mot de passe
Résultat attendu:
Widget JSON avec le type 'ui', asForm défini sur true, contenant une colonne avec un champ de saisie e-mail, un champ de saisie mot de passe et un bouton de soumission
Utilisation de "widgets-ui". Créer une carte de notification avec un badge de succès
Résultat attendu:
Widget box avec un arrière-plan gradient-ocean, padding 4, radius lg, contenant un titre, un badge de succès et un bouton de fermeture
Audit de sécurité
SûrAll 34 static findings are false positives from documentation patterns. The external_commands detections are TypeScript code examples in markdown blocks, not executable commands. Network URLs are legitimate project documentation links. No cryptographic weakness exists - flags were triggered by markdown table syntax. This is pure documentation for a React component library with no executable code.
Problèmes à risque faible (1)
Score de qualité
Ce que vous pouvez construire
Formulaires générés par agent
Claude crée des formulaires dynamiques multi-étapes selon les exigences de l'utilisateur. L'agent génère des définitions de widgets JSON qui s'affichent sous forme de formulaires complets avec validation.
Cartes de visualisation de données
Transformez des données structurées en cartes visuelles avec des icônes, des badges et des mises en page. Affichez des informations de vol, des détails de produits ou des profils utilisateur.
Tableaux de bord interactifs
Construisez des interfaces de tableau de bord en combinant plusieurs widgets. Créez des lignes et des colonnes de boutons, de statistiques et d'affichages de données.
Essayez ces prompts
Créez un widget de formulaire de contact avec les champs nom, e-mail et message. Ajoutez un bouton de soumission avec la variante par défaut.
Générez un widget de fiche produit avec un arrière-plan en dégradé océan. Incluez un titre de produit, un badge de prix et un bouton d'achat.
Créez un widget d'état de vol affichant les aéroports de départ et d'arrivée dans une mise en page en ligne. Ajoutez une icône d'avion entre les destinations.
Construisez une mise en page en colonne avec trois sections : un en-tête avec un titre, un formulaire avec des champs de saisie e-mail et mot de passe, et un pied de page avec du texte de copyright.
Bonnes pratiques
- Définissez toujours le champ 'type' sur 'ui' pour les widgets racine afin de permettre un rendu correct
- Utilisez des noms sémantiques pour les champs de formulaire (e-mail, mot de passe, message) pour améliorer le traitement des données
- Combinez les mises en page box et row/column pour créer des interfaces responsives et structurées
- Exploitez les dégradés prédéfinis comme 'gradient-ocean' et 'gradient-sunset' pour un style cohérent
Éviter
- N'imbriquez pas les widgets à plus de 4 niveaux car cela complique la maintenance et les performances
- Évitez de mélanger différents types de mise en page (row et column) sans objectif structurel clair
- N'incluez jamais de données sensibles dans le JSON des widgets car il est rendu côté client
- N'utilisez pas de propriétés personnalisées en dehors du schéma de widget défini car elles seront ignorées