shadcndi shadcn

shadcn Skill.

Una skill per Claude Code e Codex per il design UI: aggiunge, cerca, corregge, stilizza e compone componenti shadcn in un progetto.

Web & UI
Codice UI

Scarica OpenDesign Guida all'uso

shadcn-ui/ui · skills/shadcn/SKILL.mdSKILL.md

--- name: shadcn description: Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset". --- ## Current Project Context ## Principles ## Critical Rules ## Key Patterns ## Component Selection ## Key Fields

Front matter e intestazioni di sezione lette dal file upstream il 2026-09-14 · 19.427 caratteri in totale

01 Cosa fa

Cosa fa la skill shadcn 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 gestisce progetti shadcn/ui aggiungendo, cercando, correggendo e componendo componenti. Inietta il contesto live del progetto da components.json, applica regole specifiche del framework per form, styling, composizione, icone e chat UI, e utilizza la CLI di shadcn per tutte le operazioni. I componenti vengono installati come codice sorgente tramite npx shadcn@latest (o il package runner del progetto).

La skill si applica quando si lavora con shadcn/ui, registri di componenti, codici preset o qualsiasi progetto con un file components.json. Copre le direttive RSC, Tailwind v3/v4, i primitivi Base UI rispetto a Radix, il rilevamento della libreria di icone e i layout monorepo. Ogni comando fa riferimento agli alias effettivi del progetto, al package manager e ai percorsi risolti.

Che cosa produce

File di codice sorgente per i componenti shadcn aggiunti al percorso ui risolto del progetto
File di componenti uniti durante l'aggiornamento, che preservano le modifiche locali applicando al contempo gli aggiornamenti upstream

Vedi l'esempio di prompt ↗

Come funziona

01
Iniettare il Contesto del Progetto
Esegue npx shadcn@latest info --json per ottenere la configurazione del progetto, i componenti installati, gli alias, il flag RSC, la versione di Tailwind, la libreria di icone, la base (radix o base) e i percorsi risolti.
02
Cercare nei Registri Prima di Scrivere UI Personalizzate
Utilizza npx shadcn@latest search per verificare nel registro shadcn e nei registri della community l'esistenza di componenti che corrispondono alla necessità.
03
Recuperare Documentazione ed Esempi dei Componenti
Esegue npx shadcn@latest docs <component> per ottenere la documentazione e gli URL degli esempi, poi li recupera per verificare l'utilizzo corretto dell'API prima di creare o correggere un componente.
04
Aggiungere o Aggiornare Componenti con la CLI
Utilizza npx shadcn@latest add per installare i componenti.
05
Correggere gli Import nei Componenti di Terze Parti
Dopo aver aggiunto componenti da registri della community, controlla i file non-UI per percorsi hardcoded come @/components/ui/...
06
Revisionare e Verificare i Componenti Aggiunti
Legge tutti i file aggiunti per verificare la presenza di sottocomponenti mancanti, composizioni errate, violazioni di regole critiche e import di icone non corrispondenti.

02 Trova la tua applicazione

Quando Utilizzare la Skill shadcn

Usa la skill shadcn in Claude Code o Codex quando il lavoro riguarda il design UI di questo tipo. Adeguatezza e limiti sono tratti dal file della skill stessa.

Buona applicazione

Creazione di UI con componenti shadcn/ui in un progetto esistente che ha un file components.json
Inizializzazione di un nuovo progetto shadcn con un codice preset o un preset con nome come nova o vega
Creazione di interfacce di chat o conversazione usando MessageScroller, Message, Bubble, Attachment e Marker

Conosci i limiti

Recupero manuale dei file dei componenti da GitHub invece di usare la CLI
Impostazione di un registro predefinito quando l'utente non specifica quale usare
Uso di --overwrite per aggiornare i componenti senza l'approvazione esplicita dell'utente
Invenzione di funzionalità, integrazioni o nomi di file non presenti nel contesto del progetto

Cosa fornire

Nome del componente o del bloccoIl nome di un componente shadcn (button, dialog, select) o di un elemento del registro (@magicui/shimmer-button, owner/repo/item) da aggiungere o cercare.
Codice preset o preset con nomeUna stringa base62 con prefisso di versione (ad es. a2r6bw) da ui.shadcn.com, oppure un preset con nome (nova, vega, maia, lyra, mira, luma) per init o apply.

03 Dentro la skill

Regole che la skill shadcn Fornisce a Claude Code e Codex

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

Usare gap-, Mai space-x- o space-y-*
Per la spaziatura tra elementi flex figli, usare gap-. Per pile verticali, usare flex flex-col gap-. space-x- e space-y- non sono mai consentiti.
I Form Devono Usare FieldGroup + Field
I layout dei form devono usare i componenti FieldGroup e Field. Non usare mai un div grezzo con space-y- o grid gap- per il layout dei form.
Icone nei Button Usare data-icon
Le icone all'interno di Button devono avere data-icon="inline-start" o data-icon="inline-end". Nessuna classe di dimensionamento come size-4 o w-4 h-4 sulle icone all'interno dei componenti.
Gli Elementi Sempre All'Interno del Proprio Gruppo
SelectItem va dentro SelectGroup, DropdownMenuItem dentro DropdownMenuGroup, CommandItem dentro CommandGroup. Non renderizzare mai gli elementi direttamente.
Usare Token di Colore Semantici, Non Valori Grezzi
Usare bg-primary, text-muted-foreground, ecc. Non usare mai colori Tailwind grezzi come bg-blue-500 o text-emerald-600. Nessuna sovrascrittura manuale dei colori dark:.
Dialog, Sheet e Drawer Necessitano Sempre di un Titolo
DialogTitle, SheetTitle e DrawerTitle sono obbligatori per l'accessibilità. Usare className="sr-only" se il titolo deve essere visivamente nascosto.
Non Decodificare Mai Manualmente i Codici Preset
Utilizzare npx shadcn@latest preset decode <code>, preset url <code>, oppure preset open <code>. Per il rilevamento del preset basato sul progetto, utilizzare preset resolve. Non costruire mai manualmente gli URL dei preset.
Eseguire tutti i comandi CLI con il package runner del progetto
Utilizzare npx shadcn@latest, pnpm dlx shadcn@latest, oppure bunx --bun shadcn@latest in base al campo packageManager del progetto. Non impostare mai npx come valore fisso se il progetto utilizza pnpm o bun.

04 Mettila al lavoro

Installa shadcn in Claude Code o Codex

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

Aggiungi shadcn a Claude Code, Codex o al Tuo Agente

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

Terminal

npx skills add https://github.com/shadcn-ui/ui --skill shadcn

Forma generica del CLI skills per skills/shadcn/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

I need a settings page with tabs for profile, account, and notifications. Each tab should have form fields grouped by section, with a save button at the bottom. Use the project's existing shadcn components and follow the FieldGroup pattern. The profile tab needs an avatar upload, the account tab needs email and password inputs with inline buttons to change them, and the notifications tab needs toggle groups for frequency (daily, weekly, monthly) and a set of checkboxes for notification types. Make sure all validation states use data-invalid and aria-invalid correctly.

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:

Eseguire npx shadcn@latest info per verificare che il componente sia stato aggiunto all'elenco dei componenti installati
Verificare che le importazioni delle icone corrispondano al campo iconLibrary del progetto (lucide-react, @tabler/icons-react, ecc.)

In OpenDesign importare shadcn dal suo link SKILL.md: Plugins → Add → Skill → Import from link, quindi selezionarlo nella barra superiore.

Scarica OpenDesign Leggi 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: shadcn
Repository: github.com/shadcn-ui/ui Branch main
File della skill: skills/shadcn/SKILL.md Checksum del contenuto registrato alla verifica; commit 2b3e6d4
License: MIT Da LICENSE.md.
Stelle del repository: 123.708 Snapshot GitHub acquisito il 14 settembre 2026 per l'intero repository shadcn-ui/ui. Non è una valutazione o un conteggio d'uso per shadcn.
Verificato da OpenDesign: 14/09/2026 File sorgente, percorso, testo della licenza e conteggio delle stelle sono stati verificati. Non inclusa in OpenDesign main (verificato il 28/08/2026); un'esecuzione live non è stata registrata in questa pagina.

All'interno di SKILL.md

Contesto del progetto correnteInietta la configurazione live del progetto e i componenti installati da npx shadcn@latest info --json
PrincipiUtilizzare prima i componenti esistenti, comporre invece di reinventare, utilizzare le varianti integrate, utilizzare colori semantici
Regole criticheRegole sempre applicate per styling, form, composizione, icone, chat e CLI, con link ai file di dettaglio
Pattern principaliPattern di codice più comuni: layout dei form, validazione, icone nei bottoni, spaziatura, dimensioni uguali, colori di stato
Selezione dei componentiTabella che mappa le esigenze UI ai componenti shadcn corretti (bottoni, form, overlay, feedback, navigazione, chat)
Campi chiaveSpiega aliases, isRSC, tailwindVersion, base, iconLibrary, resolvedPaths, framework, packageManager, preset dal contesto del progetto
Documentazione, esempi e utilizzo dei componentiEseguire npx shadcn@latest docs per ottenere gli URL e recuperarli per i pattern corretti di API e utilizzo
Flusso di lavoroProcesso in nove passaggi: ottenere il contesto, verificare l'installazione, cercare, recuperare la documentazione, installare, correggere gli import, revisionare, gestire i registry, cambiare i preset
Aggiornamento dei componentiUtilizzare --dry-run e --diff per unire le modifiche upstream preservando le modifiche locali, non utilizzare mai --overwrite senza approvazione
Riferimento rapidoEsempi di comandi CLI per init, apply, add, search, docs, view, operazioni sui preset con flag e sintassi del registry
Riferimenti dettagliatiLink a file di regole separati per form, composizione, chat, icone, styling, base-vs-radix, CLI, registry, personalizzazione

Descrizione della skill

«Gestisce componenti e progetti shadcn: aggiunta, ricerca, correzione, debug, styling e composizione UI, incluse interfacce di chat. Fornisce contesto di progetto, documentazione componenti ed esempi d'uso. Si applica quando si lavora con shadcn/ui, registri di componenti, preset, codici --preset o qualsiasi progetto con file components.json. Si attiva anche per "shadcn init", "create an app with --preset" o "switch to --preset".»

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

shadcn

Esegui shadcn su un task di design UI reale.

Scarica OpenDesign, importa shadcn dal link SKILL.md, incolla il prompt qui sopra e leggi il piano prima del risultato.

Scarica OpenDesign Esplora tutte le skill

Terminale

npx skills add https://github.com/shadcn-ui/ui --skill shadcn

Cosa fa la skill shadcn in Claude Code e Codex

Nelle parole della skill

Come funziona

Quando Utilizzare la Skill shadcn

Buona applicazione

Conosci i limiti

Cosa fornire

Regole che la skill shadcn Fornisce a Claude Code e Codex

Usare gap-, Mai space-x- o space-y-*

I Form Devono Usare FieldGroup + Field

Icone nei Button Usare data-icon

Gli Elementi Sempre All'Interno del Proprio Gruppo

Usare Token di Colore Semantici, Non Valori Grezzi

Dialog, Sheet e Drawer Necessitano Sempre di un Titolo

Non Decodificare Mai Manualmente i Codici Preset

Eseguire tutti i comandi CLI con il package runner del progetto