106.9K+Scarica
Vai alla guida all’uso
Component Canvasdi ibelick

Component Canvas Skill.

Esamina componenti UI reali e varianti su una tela con panoramica e zoom.

  • Varianti dei componenti
  • Confronto
Scarica OpenDesignVedi la guida all'uso
Analisi della fonte · component-canvasSKILL.md
Attività Esamina componenti UI reali e varianti su una tela con panoramica e zoom. Risultati Una route o un punto di ingresso isolato per la tela con i componenti richiesti. Prima di iniziare La tela non deve modificare sorgenti, hook o stili dei componenti per far funzionare l’anteprima.
Sintesi editoriale · fonte verificata il 2026-11-02 · non è un esempio generato

01 Funzionalità

Esamina componenti UI reali e varianti su una tela con panoramica e zoom

Crea una tela isolata per confrontare le varianti dei componenti esistenti, mantenendo i veri comportamenti di tastiera, portali e input.

Flusso di lavoro basato sulla fonteNon è un benchmark di esecuzione

L'approccio di lavoro

Component Canvas costruisce una superficie di ispezione a schermo intero attorno ai componenti già presenti nel progetto. Raggruppa varianti supportate e stati utili per un confronto immediato e per interagire con i controlli reali. La fonte mantiene l’implementazione dei componenti indipendente dalla tela.

Il flusso specifica con precisione cosa significhi confrontare: nel confronto di dimensioni testo, stile e dati restano uguali; nel confronto di stile cambia solo lo stile. Preserva anche portali nativi, focus e scorrimento annidato, quindi un’anteprima utile deve funzionare oltre lo screenshot dello stato predefinito.

Risultati attesi

  • Una route o un punto di ingresso isolato per la tela con i componenti richiesti.
  • Gruppi di varianti nominati, con copertura registrata e omissioni motivate.
  • Un rapporto su file modificati, controlli eseguiti, decisioni e comportamenti non testati.
Vedi il brief di esempio

Dal brief alla revisione

  1. 01
    Monta un esempio sicuro

    Leggi le API pubbliche e le convenzioni del progetto. Usa dati di test, mock o callback esistenti per evitare scritture reali prima di montare un componente.

  2. 02
    Costruisci gruppi confrontabili

    Aggiungi le varianti supportate in gruppi coerenti. Cambia una sola dimensione alla volta e conserva i comportamenti reali disabilitati, focalizzati e interattivi.

  3. 03
    Verifica la tela attorno ai componenti

    Prova panoramica, zoom, adattamento alla vista e navigazione da tastiera insieme a scorrimento annidato e portali nativi. Salva in modo persistente solo la camera e verifica che il ripristino preservi lo stato dell’anteprima.

02 Quando usarlo

Quando usarla

La tela non deve modificare sorgenti, hook o stili dei componenti per far funzionare l’anteprima.

Adatta a

  • Ispezione delle variantiConfronta pulsanti, input e altri componenti esistenti tramite le loro API pubbliche reali.
  • Revisione dei componentiOffri ai designer un luogo dove provare gli stati supportati senza alterare le implementazioni di produzione.

Limiti da verificare

  • Componenti in sola letturaLa tela non deve modificare sorgenti, hook o stili dei componenti per far funzionare l’anteprima.
  • Spazio di lavoro limitatoI gruppi non si possono trascinare e non esistono cronologia di modifica né annulla/ripristina.
  • Dati di test sicuriUn esempio interattivo viene omesso se chiamate e scritture di produzione non possono essere isolate in sicurezza.

Cosa portare

  • Ambito dei componentiIndica componenti e varianti pubbliche da includere.
  • Configurazione di testFornisci dati sicuri, provider e callback per gli esempi interattivi.
  • Convenzioni del progettoUsa route, API di tema, dipendenze e controlli di accesso esistenti.

03 Decisioni importanti

Decisioni importanti

  1. Comportamento reale

    Gli esempi rispondono alle interazioni native di puntatore e tastiera.

  2. Confronti equi

    Tenere costanti le altre proprietà rivela cosa modifica davvero una variante.

  3. Implementazione circoscritta

    La logica di camera e layout resta separata dai sorgenti dei componenti.

04 Esempio di brief

Prova un brief mirato

Il brief di esempio qui sotto non è stato testato. Controlla la configurazione della skill prima di usarlo.

Esamina la fonte e la configurazione

Indica componenti e varianti pubbliche da includere.

File sorgente originale
https://github.com/ibelick/ui-skills/blob/4907a526b07943b3a338177558d42fae4fdf0a86/skills/component-canvas/SKILL.md

Il riferimento qui sotto apre le istruzioni originali. Esamina la configurazione del repository prima di usarle; non è un comando di installazione.

Inizia con un risultato concreto

Adatta ambito, materiale di partenza e vincoli di questo brief prima di eseguire la skill.

Brief di esempio
Usa component-canvas per esaminare i nostri Button, Select e Dialog esistenti. Leggi le API pubbliche e mostra le varianti nominate supportate con dati di test. Confronta una proprietà alla volta mantenendo etichette e altri parametri costanti. Non modificare i sorgenti e usa il provider di tema attuale. Parti da un esempio sicuro, poi aggiungi gli altri gruppi. Verifica tastiera, focus, scorrimento annidato e posizione dei portali a più livelli di zoom. Riporta casi omessi e verifiche che richiedono dispositivi non disponibili.

Controlla il risultato

Confronta l'output effettivo con questi criteri osservabili.

  • Il diff dei sorgenti dei componenti è vuoto e i dati di test non eseguono scritture reali.
  • Allineamento dei portali, focus e input nativo restano utilizzabili con lo zoom.
  • La camera viene ripristinata al ricaricamento; il reset conserva lo stato attuale dell’anteprima. Non si garantiscono bozze dopo il ricaricamento e gli errori di memorizzazione hanno un fallback sicuro.

OpenDesign offre uno spazio di lavoro di design locale per agenti di programmazione. Questa scheda non significa che la skill sia inclusa nel pacchetto né che i suoi strumenti esterni, le credenziali e le dipendenze software siano compresi.

Scarica OpenDesignLeggi la guida rapida

05 Fonte e licenza

Fonte e licenza

Questa pagina descrive la revisione della fonte fissata e collegata qui sotto. Comportamento e requisiti upstream possono cambiare.

Proprietario della fonte
ibelick
Repository
ibelick/ui-skills
File della skill
SKILL.md
Licenza
MIT
Snapshot esaminato
2026-11-02 · 4907a526b079
Sintesi editoriale della fonte
Esamina componenti UI reali e varianti su una tela con panoramica e zoom.

Sintesi originale di OpenDesign, basata sulla fonte collegata. Le stelle del repository sono un indicatore di popolarità datato, non l'uso della skill né un punteggio di qualità.

06 Domande prima di iniziare

Domande prima di iniziare

Posso trascinare i gruppi?

La fonte mantiene esplicitamente fissi i gruppi. Panoramica e zoom muovono invece la camera.

Inventa varianti mancanti?

No. Legge l’API pubblica ed elenca i casi omessi invece di modificare un componente per simulare il supporto.

Cosa rimane dopo il ricaricamento?

La persistenza prevista salva la camera. Le bozze dell’anteprima non devono sopravvivere al ricaricamento salvo richiesta separata.

OpenDesign

Tieni insieme il brief e il tuo lavoro di design.

Tieni brief, materiali di partenza e lavoro di design insieme in uno spazio di lavoro locale. Controlla la configurazione della skill prima di aggiungerla al tuo flusso di lavoro.

Scarica OpenDesignSfoglia le skill di design
File sorgente originale
https://github.com/ibelick/ui-skills/blob/4907a526b07943b3a338177558d42fae4fdf0a86/skills/component-canvas/SKILL.md