ui-component-creation
Créer des composants d’interface utilisateur de design system
Les équipes ont besoin de composants d’interface utilisateur cohérents qui respectent les règles de conception locales. Cette compétence guide la création avec shadcn/ui à l’aide de tokens, d’états, de mises en page responsives et de l’accessibilité.
Installer avec mon Agent
Copiez cette demande dans votre Agent. Elle contient la page Skill de référence et le manifeste.
Review the Skillstore skill "ui-component-creation" from https://skillstore.io/skills/cleanexpo-ui-component-creation.md and its manifest at https://skillstore.io/api/skills/cleanexpo-ui-component-creation/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Votre Agent doit toujours présenter son plan et demander toute confirmation exigée par la politique de sécurité.
Ressources lisibles par les agents
Utilisez ces liens lorsqu’un Agent IA, un crawler ou un script a besoin d’un contexte propre au lieu de lire toute la page.
Tester
Utilisation de « ui-component-creation ». Créer une carte de résumé de tableau de bord pour les données de ventes mensuelles.
Résultat attendu:
Un plan de composant de carte réutilisable avec des couleurs de surface basées sur les tokens, une hiérarchie de titres claire, un style de bouton d’action et un espacement responsive.
Utilisation de « ui-component-creation ». Refactoriser un panneau de fonctionnalité qui utilise des classes brutes gray et white.
Résultat attendu:
Un panneau aligné sur le design system qui remplace les classes de couleur brutes par des tokens approuvés de texte, d’arrière-plan, d’accent et de bordure.
Utilisation de « ui-component-creation ». Créer une section de statistiques responsive à trois colonnes.
Résultat attendu:
Une mise en page responsive qui évite les colonnes mobiles fixes et définit des libellés accessibles, des états et un comportement aux points de rupture.
Audit de sécurité
SûrThe static findings are false positives caused by Markdown code fences, inline Tailwind class names, and design-token examples. No shell execution, system reconnaissance, network reconnaissance, prompt injection, or data exfiltration intent was found in SKILL.md.
Facteurs de risque
⚙️ Commandes externes (10)
Partager et citer ce rapport
Partagez le rapport d’évaluation versionné, le badge neutre, la carte intégrable et les citations. Skillstore présente les preuves sans décider si ce Skill est sûr.
Copier le lien du rapport
https://skillstore.io/skills/cleanexpo-ui-component-creation/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportBadge Markdown
[](https://skillstore.io/skills/cleanexpo-ui-component-creation?utm_source=security_passport_badge)Badge HTML
<a href="https://skillstore.io/skills/cleanexpo-ui-component-creation?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/cleanexpo-ui-component-creation/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Carte intégrable
<iframe src="https://skillstore.io/embed/skills/cleanexpo-ui-component-creation.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Citations académiques (APA · BibTeX · CFF)
Citation APA
CleanExpo. (2026). ui-component-creation security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/cleanexpo-ui-component-creation/audits/8Citation BibTeX
@techreport{cleanexpo-cleanexpo-ui-component-creation-2026,
author = {CleanExpo},
title = {ui-component-creation security audit report (audit version 8)},
institution = {Skillstore},
year = {2026},
number = {8},
url = {https://skillstore.io/skills/cleanexpo-ui-component-creation/audits/8},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "ui-component-creation security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
- name: "CleanExpo"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/cleanexpo-ui-component-creation/audits/8"
identifiers:
- type: other
value: "skillstore:cleanexpo-ui-component-creation:audit:8"
description: "Skillstore immutable audit report identifier"
Score Skillstore
Pourquoi ce score Niveau de confiance des preuves: ÉlevéCe que vous pouvez créer
Créer une nouvelle carte produit
Créer une carte réutilisable qui respecte les tokens, les états et le comportement responsive du projet.
Standardiser les panneaux de fonctionnalités
Transformer des demandes d’interface variées en composants utilisant le même système visuel.
Examiner les demandes de génération d’interface utilisateur
Orienter le travail sur les composants assisté par IA vers une sortie accessible et alignée sur la marque.
Essayez ces prompts
Crée un composant de carte shadcn/ui pour [purpose]. Utilise nos tokens de conception, un espacement responsive et des libellés accessibles.
Crée un [component type] avec des états de survol, de focus, désactivé et de chargement. Utilise des tokens de conception au lieu de couleurs Tailwind brutes.
Refactorise ce composant pour utiliser les modèles shadcn/ui, les tokens de couleur du projet, les points de rupture responsives et des contrôles accessibles : [paste component].
Crée un ensemble coordonné de [components] pour [workflow]. Inclue les variantes, les états vides, les états d’erreur, le comportement responsive et les détails d’accessibilité.
Bonnes pratiques
- Fournir le fichier de design system pertinent ou les noms des tokens avant de demander un travail sur les composants.
- Demander tous les états requis, y compris les états de survol, de focus, désactivé, de chargement, vide et d’erreur.
- Examiner les composants générés pour vérifier l’accessibilité, le comportement responsive et la cohérence des tokens.
Éviter
- Ne demandez pas de classes de couleurs Tailwind brutes lorsque le projet dispose de tokens de conception.
- N’acceptez pas de mises en page en grille fixes pour ordinateur sans comportement pour mobile et tablette.
- N’omettez pas les états interactifs pour les boutons, cartes, formulaires ou éléments de navigation.