83.3K+Scarica
Vai alla guida all’uso
shadcn-uidi Google Labs

shadcn UI Skill.

Una skill per Claude Code e Codex per il design UI: integrazione e personalizzazione dei componenti shadcn/ui: ricerca, installazione, best practice.

  • Web & UI
  • Codice UI
Scarica OpenDesignGuida all'uso
google-labs-code/stitch-skills · plugins/stitch-build/skills/shadcn-ui/SKILL.mdSKILL.md
--- name: shadcn-ui description: Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices. --- ## Core Principles ## Component Discovery and Installation ## Project Setup ## Component Architecture ## Customization Best Practices ## Blocks and Complex Components
Front matter e intestazioni di sezione lette dal file upstream il 2026-09-14 · 9.117 caratteri in totale

01 Cosa fa

Cosa fa la Skill shadcn-ui in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

Questa skill fornisce a un agente una guida esperta per costruire applicazioni con shadcn/ui, la raccolta di componenti accessibili e personalizzabili costruiti con Radix UI o Base UI e Tailwind CSS. Copre la scoperta dei componenti tramite gli strumenti shadcn MCP, l'installazione con la CLI o l'integrazione manuale, la configurazione del progetto tramite i comandi create e init, e le opzioni di components.json come style, baseColor, cssVariables, rsc e rtl.

Spiega la struttura dei file in components/ui/ e l'helper cn(), poi la personalizzazione tramite variabili CSS in app/globals.css, le varianti di class-variance-authority e i componenti wrapper. I blocchi sono organizzati per categoria, seguiti da regole di accessibilità, pattern comuni per form, dialog e tabelle, risoluzione dei problemi e una checklist di validazione in cinque passaggi.

Che cosa produce

  • File sorgente dei componenti scritti in components/ui/ e collegati ai tuoi import.
  • Un components.json aggiornato che riflette la configurazione e i componenti aggiunti.
  • Codice sorgente dei blocchi recuperato per interfacce multi-file come dashboard o flussi di login.
  • I tuoi file di componenti wrapper, ad esempio components/custom-button.tsx.
Vedi l'esempio di prompt ↗

Come funziona

  1. 01
    Prima Sfogliare il Catalogo

    Esplorare i componenti disponibili tramite gli strumenti shadcn MCP invece di indovinare i nomi, usando list_components, get_component_metadata e get_component_demo.

  2. 02
    Aggiungere il Componente con la CLI

    Il percorso consigliato è il comando add, che scarica il codice sorgente adattato alla propria configurazione, installa le dipendenze e posiziona i file in components/ui/.

  3. 03
    Oppure Integrare il Codice a Mano

    Per l'integrazione manuale, recuperare il codice con get_component, creare il file autonomamente, installare le dipendenze peer e aggiustare gli import.

  4. 04
    Inizializzare la Configurazione del Progetto

    I nuovi progetti usano create per scegliere stile, font e libreria di componenti; i progetti esistenti eseguono init, che scrive components.json.

  5. 05
    Applicare il Tema con le Variabili CSS

    I colori risiedono nella configurazione Tailwind e nelle variabili CSS, con un blocco .dark che fornisce le sovrascritture per la modalità scura.

  6. 06
    Validare Prima del Commit

    Verificare i tipi, eseguire il lint, testare l'accessibilità, controllare le modalità chiara e scura e verificare i breakpoint.

02 Trova la tua applicazione

Quando usare lo skill shadcn-ui

Usa lo skill shadcn-ui in Claude Code o Codex quando il lavoro è design UI di questo tipo. Adattabilità e limiti qui sotto sono tratti dal file dello skill stesso.

Buona applicazione

  • Avviare un nuovo progetto in cui stile, font e libreria di componenti devono essere scelti in anticipo.
  • Reintrodurre shadcn/ui in una codebase esistente che necessita di una configurazione components.json.
  • Lavorare con un registry privato o di team dichiarato in components.json, oppure sfogliare la Registry Directory pubblica.
  • Assemblare schermate più grandi come flussi di autenticazione o dashboard a partire da blocchi predefiniti.
  • Progetti in cui la navigazione da tastiera, gli attributi ARIA e la gestione del focus non sono negoziabili.

Conosci i limiti

  • Le versioni dei componenti e dei primitive divergono, quindi gli aggiornamenti possono rompersi e richiedere il controllo delle note di rilascio.

Cosa fornire

  • Libreria di primitiveScegliere Radix UI o Base UI; il codice sorgente scaricato viene adattato a tale scelta.
  • Nomi dei registryQuando è configurato più del registry predefinito, elencare cosa è disponibile prima di prelevare elementi da esso.
  • Categoria di bloccoUn filtro di categoria opzionale restringe quali blocchi vengono elencati prima di recuperarne il codice sorgente.

03 Dentro la skill

Le Regole che la Skill shadcn-ui Fornisce a Claude Code e Codex

7 istruzioni concrete, valori predefiniti e limiti che SKILL.md definisce per l'agente — la parte del file che cambia il risultato.

  1. Possedere il Codice del Componente

    Trattare i componenti come codice sorgente copiato che si può riscrivere, non come una dipendenza da aggiornare in blocco; è possibile modificare liberamente stile, comportamento e struttura.

  2. Mantieni i wrapper fuori da Components/ui/

    I componenti composti o estesi vanno in components/, mai in components/ui/, che contiene i componenti shadcn stessi.

  3. Unisci le classi con Cn()

    Ogni componente shadcn usa l'helper cn(), una combinazione di clsx e tailwind-merge, così le sovrascritture non entrano in conflitto.

  4. Esprimi le varianti con Cva

    La logica di variant e size appartiene a class-variance-authority, con defaultVariants che dichiara quale variant e size si applicano quando non ne viene passata nessuna.

  5. Preserva l'accessibilità durante la personalizzazione

    Mantieni gli attributi ARIA, conserva i gestori da tastiera, testa con screen reader e mantieni indicatori di focus visibili.

  6. Rispetta i requisiti di runtime

    shadcn/ui v4 richiede React 18+ e, nei progetti Next.js, Next.js 13+; alcuni componenti fissano inoltre versioni specifiche di Radix UI.

  7. Installa tu stesso le peer dependency in caso di installazione manuale

    L'integrazione manuale significa che risolvi le peer dependency e correggi gli import a mano invece di lasciare che lo faccia la CLI.

04 Mettila al lavoro

Installare shadcn-ui in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungere shadcn-ui a Claude Code, Codex o al proprio agente

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill shadcn-ui

Forma generica della CLI skills per plugins/stitch-build/skills/shadcn-ui/SKILL.md; il repository potrebbe documentare un proprio percorso.

Assegna alla skill un primo compito di progettazione UI

Redatto nei termini propri della skill; sostituisca le parti tra parentesi con il suo materiale.

Starter prompt
Set up shadcn/ui in my existing [Next.js app] with the new-york style and zinc base color, then add Button, Card and Dialog. Use the login block for the sign-in page, and wrap Button in a LoadingButton in components/ that shows a spinner while [the form submission] is pending. Keep the ARIA attributes and keyboard handling intact.

Fonte: redatto a partire dal SKILL.md, nei termini propri della skill.

Verifica il primo risultato

Ciò che il SKILL.md stesso indica come risultato corretto:

  • Esegui il linter del progetto per individuare problemi di stile nel codice copiato.
  • Verifica l'accessibilità con strumenti come axe DevTools.
  • Esegui un controllo visivo sia in modalità chiara che scura.
  • Verifica il comportamento nei diversi breakpoint.

In OpenDesign shadcn-ui è incluso: Plugins → Skills, selezionalo nella barra superiore.

Scarica OpenDesignLeggi il quickstart

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Author
Google Labs
Repository
github.com/google-labs-code/stitch-skills Branch main
File della skill
plugins/stitch-build/skills/shadcn-ui/SKILL.md Checksum del contenuto registrato alla verifica; commit 0337446
License
Apache-2.0 Da LICENSE.
Stelle del repository
8.304 Snapshot GitHub del 14 settembre 2026 per l'intero repository google-labs-code/stitch-skills, che contiene 12 skill in questo catalogo. Non è una valutazione o un conteggio d'uso per shadcn-ui.
Verificato da OpenDesign
14 settembre 2026 Il file sorgente, il percorso, il testo della licenza e il conteggio delle stelle sono stati verificati. Incluso nella build principale di OpenDesign (verificato il 28 agosto 2026); non è stata registrata un'esecuzione live su questa pagina.

All'interno di SKILL.md

  1. Principi fondamentaliPerché il codice copiato che possiedi supera una dipendenza.
  2. Scoperta e installazione dei componentiStrumenti MCP, CLI contro installazione manuale, registri personalizzati.
  3. Configurazione del progettocreate contro init, opzioni di components.json, dipendenze richieste.
  4. Architettura dei componentiStruttura delle directory e l'utilità di unione classi cn().
  5. Best practice di personalizzazioneTheming con variabili CSS, varianti cva, componenti wrapper fuori da components/ui/.
  6. Blocchi e componenti complessiElenco, recupero e installazione di blocchi multi-file per categoria.
  7. AccessibilitàComportamenti di tastiera, ARIA, focus e stato disabilitato basati su Radix, da preservare.
  8. Pattern comuniRicette di importazione per form, dialoghi e tabelle dati.
  9. Risoluzione dei problemiCorrezioni per problemi di importazione, conflitti di stile, dipendenze e versioni.
  10. Validazione e qualitàCinque controlli pre-commit, dal type check al QA responsive.
  11. RisorseFile di riferimento per configurazione, catalogo, personalizzazione e migrazione.
  12. EsempiImplementazioni di esempio più pattern per form, dashboard, autenticazione e tabelle dati.
Descrizione della skill
Guida esperta per integrare e costruire applicazioni con i componenti shadcn/ui, inclusa la ricerca dei componenti, l'installazione, la personalizzazione e le best practice.

Descrizione dal front-matter di SKILL.md. Il file completo è di circa 9.117 caratteri. Leggi il file completo su GitHub.

06 Prima di installare

Domande sulla Skill shadcn-ui

Le risposte provengono dal SKILL.md letto il 2026-09-14, non da un'esecuzione registrata.

Radix UI o Base UI?

Entrambi. Scelga la primitiva nella configurazione e la CLI adatta di conseguenza il codice sorgente scaricato. Le garanzie di accessibilità descritte sono legate ai componenti costruiti sulle primitive di Radix UI.

shadcn UI

Esegui shadcn-ui su un compito di design UI reale.

La skill shadcn-ui è inclusa in OpenDesign. Scarica l'app, seleziona la skill in Plugins → Skills, incolla il prompt qui sopra e leggi il piano prima del risultato.

Scarica OpenDesignEsplora tutte le skill
Terminale
npx skills add https://github.com/google-labs-code/stitch-skills --skill shadcn-ui