106.9K+Télécharger
Aller au guide d’utilisation
Component Canvaspar ibelick

Component Canvas Skill.

Inspectez des composants UI réels et leurs variantes sur un canevas avec déplacement et zoom.

  • Variantes de composants
  • Comparaison
Télécharger OpenDesignVoir le guide d'utilisation
Analyse de la source · component-canvasSKILL.md
Tâche Inspectez des composants UI réels et leurs variantes sur un canevas avec déplacement et zoom. Livrables Une route ou un point d’entrée de canevas isolé contenant les composants demandés. Avant de commencer Le canevas ne doit pas modifier le code source, les hooks ou les styles d’un composant pour faire fonctionner l’aperçu.
Synthèse éditoriale · source vérifiée le 2026-11-02 · pas un exemple généré

01 Fonctionnement

Inspectez des composants UI réels et leurs variantes sur un canevas avec déplacement et zoom

Créez un canevas isolé pour comparer les variantes de composants existants en conservant les véritables comportements clavier, portail et saisie.

Flux de travail fondé sur la sourcePas un benchmark d'exécution

La méthode de travail

Component Canvas crée une surface d’inspection plein écran autour des composants déjà présents dans le projet. Il regroupe variantes prises en charge et états utiles pour permettre aux designers de comparer rapidement, puis d’interagir avec les vrais contrôles. La source maintient l’implémentation des composants indépendante du canevas.

Le workflow définit précisément la comparaison : pour les tailles, texte, styles et données restent constants ; pour les styles, seul le style change. Il préserve aussi les portails natifs, le focus et le défilement imbriqué. Une prévisualisation utile doit donc résister à davantage qu’une capture de son état par défaut.

Livrables attendus

  • Une route ou un point d’entrée de canevas isolé contenant les composants demandés.
  • Des groupes de variantes nommés, avec liste de couverture et omissions expliquées.
  • Un rapport des fichiers modifiés, contrôles exécutés, décisions et comportements non testés.
Voir l'exemple de brief

Du brief à la revue

  1. 01
    Monter un premier exemple sûr

    Lisez les API publiques et conventions du projet. Utilisez données de test, mocks ou callbacks existants pour empêcher les écritures réelles avant de monter un composant.

  2. 02
    Créer des groupes comparables

    Ajoutez les variantes prises en charge dans des groupes cohérents. Changez une seule dimension à la fois et préservez les comportements réels désactivés, focalisés et interactifs.

  3. 03
    Vérifier le canevas autour des composants

    Testez déplacement, zoom, ajustement à la vue et navigation clavier, ainsi que défilement imbriqué et portails natifs. Ne conservez que la caméra et vérifiez que la réinitialisation préserve l’état de prévisualisation.

02 Cas d’usage

Quand l’utiliser

Le canevas ne doit pas modifier le code source, les hooks ou les styles d’un composant pour faire fonctionner l’aperçu.

Un bon choix

  • Inspection de variantesComparez boutons, champs ou autres composants existants via leurs véritables API publiques.
  • Revue de composantsOffrez aux designers un espace pour tester les états pris en charge sans modifier les implémentations de production.

Limites à vérifier

  • Composants inchangésLe canevas ne doit pas modifier le code source, les hooks ou les styles d’un composant pour faire fonctionner l’aperçu.
  • Espace limitéLes groupes ne sont pas déplaçables et le canevas n’offre ni historique d’édition ni annulation/rétablissement.
  • Données de test sûresUn exemple interactif est omis si les appels et écritures de production ne peuvent pas être isolés sans risque.

Éléments à fournir

  • Périmètre des composantsNommez les composants et variantes publiques à inclure.
  • Configuration de testFournissez données sûres, providers et callbacks pour les exemples interactifs.
  • Conventions du projetUtilisez routes, API de thème, dépendances et contrôles d’accès existants.

03 Décisions importantes

Les choix importants

  1. Comportement réel

    Les exemples répondent aux interactions natives au pointeur et au clavier.

  2. Comparaisons équitables

    Garder les autres propriétés constantes révèle ce qu’une variante change réellement.

  3. Implémentation isolée

    La logique de caméra et de disposition reste séparée du code des composants.

04 Exemple de brief

Essayez un brief ciblé

L'exemple de brief ci-dessous n'a pas été testé. Vérifiez la configuration du skill avant de l'utiliser.

Examiner la source et la configuration

Nommez les composants et variantes publiques à inclure.

Fichier source amont
https://github.com/ibelick/ui-skills/blob/4907a526b07943b3a338177558d42fae4fdf0a86/skills/component-canvas/SKILL.md

La référence ci-dessous ouvre les instructions d’origine. Vérifiez la configuration du dépôt avant de les utiliser ; ce n’est pas une commande d’installation.

Commencer par un seul livrable

Adaptez le périmètre, les sources et les contraintes de ce brief avant d’exécuter le skill.

Exemple de brief
Utilise component-canvas pour inspecter nos composants Button, Select et Dialog existants. Lis leurs API publiques et affiche les variantes nommées prises en charge avec des données de test. Compare une propriété à la fois, en gardant libellés et autres réglages constants. Ne modifie pas les sources des composants et utilise le provider de thème actuel. Commence par un exemple sûr, puis ajoute les autres groupes. Vérifie saisie clavier, focus, défilement imbriqué et position des portails à plusieurs niveaux de zoom. Rapporte les cas omis et les contrôles nécessitant des appareils indisponibles.

Vérifier le résultat

Comparez le résultat réel à ces critères observables.

  • Aucune modification du code des composants ; les données de test ne provoquent aucune écriture réelle.
  • L’alignement des portails, le focus et la saisie native restent utilisables avec le zoom.
  • La caméra est restaurée après rechargement ; réinitialiser préserve l’état actuel de l’aperçu. Les brouillons d’aperçu ne sont pas garantis après rechargement et les échecs de stockage ont un repli sûr.

OpenDesign fournit un espace de travail de design local pour les agents de code. Cette fiche ne signifie pas que le skill est fourni avec ses outils externes, ses identifiants et ses dépendances logicielles.

Télécharger OpenDesignLire le guide de démarrage rapide

05 Source et licence

Source et licence

Cette page décrit la révision source figée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source
ibelick
Dépôt
ibelick/ui-skills
Fichier du skill
SKILL.md
Licence
MIT
Version examinée
2026-11-02 · 4907a526b079
Résumé éditorial de la source
Inspectez des composants UI réels et leurs variantes sur un canevas avec déplacement et zoom.

Résumé original de OpenDesign, fondé sur la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, pas une mesure d'utilisation du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Puis-je déplacer les groupes de composants ?

La source maintient explicitement les groupes fixes. Déplacement et zoom agissent plutôt sur la caméra.

Invente-t-il les variantes manquantes ?

Non. Il lit l’API publique et indique les cas omis au lieu de modifier un composant pour simuler une prise en charge.

Qu’est-ce qui reste après rechargement ?

La persistance prescrite stocke la caméra. Les brouillons d’aperçu n’ont pas à survivre au rechargement sauf demande distincte.

OpenDesign

Gardez votre brief et votre travail de design au même endroit.

Gardez votre brief, vos sources et votre travail de design ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l'ajouter à votre flux de travail.

Télécharger OpenDesignParcourir les skills de design
Fichier source amont
https://github.com/ibelick/ui-skills/blob/4907a526b07943b3a338177558d42fae4fdf0a86/skills/component-canvas/SKILL.md