Estendi Claude con le skill - Claude Code Docs

Le skill estendono ciò che Claude può fare. Crea un file SKILL.md con le istruzioni, e Claude lo aggiunge al suo toolkit. Claude utilizza le skill quando rilevante, oppure puoi invocare una direttamente con /skill-name.

Per i comandi integrati come /help e /compact, vedi modalità interattiva.I comandi slash personalizzati sono stati uniti alle skill. Un file in .claude/commands/review.md e una skill in .claude/skills/review/SKILL.md creano entrambi /review e funzionano allo stesso modo. I tuoi file .claude/commands/ esistenti continuano a funzionare. Le skill aggiungono funzionalità opzionali: una directory per i file di supporto, frontmatter per controllare se tu o Claude le invoca, e la capacità per Claude di caricarle automaticamente quando rilevante.

Le skill di Claude Code seguono lo standard aperto Agent Skills, che funziona su più strumenti di IA. Claude Code estende lo standard con funzionalità aggiuntive come controllo dell’invocazione, esecuzione di subagent, e iniezione di contesto dinamico.

Iniziare

Crea la tua prima skill

Questo esempio crea una skill che insegna a Claude di spiegare il codice usando diagrammi visivi e analogie. Poiché utilizza frontmatter predefinito, Claude può caricarla automaticamente quando chiedi come funziona qualcosa, oppure puoi invocarla direttamente con /explain-code.

Crea la directory della skill

Crea una directory per la skill nella tua cartella di skill personali. Le skill personali sono disponibili in tutti i tuoi progetti.

mkdir -p ~/.claude/skills/explain-code

Scrivi SKILL.md

Ogni skill ha bisogno di un file SKILL.md con due parti: frontmatter YAML (tra i marcatori ---) che dice a Claude quando usare la skill, e contenuto markdown con le istruzioni che Claude segue quando la skill viene invocata. Il campo name diventa il /slash-command, e la description aiuta Claude a decidere quando caricarla automaticamente.Crea ~/.claude/skills/explain-code/SKILL.md:

---
name: explain-code
description: Spiega il codice con diagrammi visivi e analogie. Usa quando spieghi come funziona il codice, insegni su una codebase, o quando l'utente chiede "come funziona questo?"
---

Quando spieghi il codice, includi sempre:

1. **Inizia con un'analogia**: Confronta il codice con qualcosa della vita quotidiana
2. **Disegna un diagramma**: Usa l'arte ASCII per mostrare il flusso, la struttura, o le relazioni
3. **Percorri il codice**: Spiega passo dopo passo cosa accade
4. **Evidenzia un'insidia**: Qual è un errore comune o un'idea sbagliata?

Mantieni le spiegazioni conversazionali. Per concetti complessi, usa più analogie.

Testa la skill

Puoi testarla in due modi:Lascia che Claude la invochi automaticamente chiedendo qualcosa che corrisponda alla descrizione:

Come funziona questo codice?

Oppure invocala direttamente con il nome della skill:

/explain-code src/auth/login.ts

In entrambi i casi, Claude dovrebbe includere un’analogia e un diagramma ASCII nella sua spiegazione.

Dove vivono le skill

Dove memorizzi una skill determina chi può usarla:

Posizione	Percorso	Si applica a
Enterprise	Vedi impostazioni gestite	Tutti gli utenti nella tua organizzazione
Personale	`~/.claude/skills/<skill-name>/SKILL.md`	Tutti i tuoi progetti
Progetto	`.claude/skills/<skill-name>/SKILL.md`	Solo questo progetto
Plugin	`<plugin>/skills/<skill-name>/SKILL.md`	Dove il plugin è abilitato

Le skill di progetto sovrascrivono le skill personali con lo stesso nome. Se hai file in .claude/commands/, funzionano allo stesso modo ma una skill ha la precedenza su un comando con lo stesso nome.

Scoperta automatica da directory annidate

Quando lavori con file in sottodirectory, Claude Code scopre automaticamente le skill da directory .claude/skills/ annidate. Ad esempio, se stai modificando un file in packages/frontend/, Claude Code cerca anche le skill in packages/frontend/.claude/skills/. Questo supporta configurazioni monorepo dove i pacchetti hanno le loro proprie skill. Ogni skill è una directory con SKILL.md come punto di ingresso:

my-skill/
├── SKILL.md           # Istruzioni principali (obbligatorio)
├── template.md        # Template per Claude da compilare
├── examples/
│   └── sample.md      # Output di esempio che mostra il formato previsto
└── scripts/
    └── validate.sh    # Script che Claude può eseguire

SKILL.md contiene le istruzioni principali ed è obbligatorio. Gli altri file sono opzionali e ti permettono di costruire skill più potenti: template per Claude da compilare, output di esempio che mostrano il formato previsto, script che Claude può eseguire, o documentazione di riferimento dettagliata. Fai riferimento a questi file dal tuo SKILL.md in modo che Claude sappia cosa contengono e quando caricarli. Vedi Aggiungi file di supporto per più dettagli.

I file in .claude/commands/ continuano a funzionare e supportano lo stesso frontmatter. Le skill sono consigliate poiché supportano funzionalità aggiuntive come i file di supporto.

Configura le skill

Le skill sono configurate tramite frontmatter YAML in cima a SKILL.md e il contenuto markdown che segue.

Tipi di contenuto della skill

I file skill possono contenere qualsiasi istruzione, ma pensare a come vuoi invocarle aiuta a guidare cosa includere: Contenuto di riferimento aggiunge conoscenza che Claude applica al tuo lavoro attuale. Convenzioni, pattern, guide di stile, conoscenza del dominio. Questo contenuto viene eseguito inline in modo che Claude possa usarlo insieme al contesto della tua conversazione.

---
name: api-conventions
description: Pattern di progettazione API per questa codebase
---

Quando scrivi endpoint API:
- Usa convenzioni di denominazione RESTful
- Restituisci formati di errore coerenti
- Includi la validazione delle richieste

Contenuto di attività fornisce a Claude istruzioni passo dopo passo per un’azione specifica, come distribuzioni, commit, o generazione di codice. Spesso sono azioni che vuoi invocare direttamente con /skill-name piuttosto che lasciare che Claude decida quando eseguirle. Aggiungi disable-model-invocation: true per impedire a Claude di attivarla automaticamente.

---
name: deploy
description: Distribuisci l'applicazione in produzione
context: fork
disable-model-invocation: true
---

Distribuisci l'applicazione:
1. Esegui la suite di test
2. Compila l'applicazione
3. Esegui il push verso il target di distribuzione

Il tuo SKILL.md può contenere qualsiasi cosa, ma pensare a come vuoi che la skill sia invocata (da te, da Claude, o entrambi) e dove vuoi che venga eseguita (inline o in un subagent) aiuta a guidare cosa includere. Per skill complesse, puoi anche aggiungere file di supporto per mantenere la skill principale focalizzata.

Riferimento frontmatter

Oltre al contenuto markdown, puoi configurare il comportamento della skill usando campi frontmatter YAML tra i marcatori --- in cima al tuo file SKILL.md:

---
name: my-skill
description: Cosa fa questa skill
disable-model-invocation: true
allowed-tools: Read, Grep
---

Le tue istruzioni di skill qui...

Tutti i campi sono opzionali. Solo description è consigliato in modo che Claude sappia quando usare la skill.

Campo	Obbligatorio	Descrizione
`name`	No	Nome visualizzato per la skill. Se omesso, usa il nome della directory. Solo lettere minuscole, numeri e trattini (max 64 caratteri).
`description`	Consigliato	Cosa fa la skill e quando usarla. Claude usa questo per decidere quando applicare la skill. Se omesso, usa il primo paragrafo del contenuto markdown.
`argument-hint`	No	Suggerimento mostrato durante l’autocompletamento per indicare gli argomenti previsti. Esempio: `[issue-number]` o `[filename] [format]`.
`disable-model-invocation`	No	Imposta su `true` per impedire a Claude di caricare automaticamente questa skill. Usa per i flussi di lavoro che vuoi attivare manualmente con `/name`. Predefinito: `false`.
`user-invocable`	No	Imposta su `false` per nascondere dal menu `/`. Usa per la conoscenza di background che gli utenti non dovrebbero invocare direttamente. Predefinito: `true`.
`allowed-tools`	No	Strumenti che Claude può usare senza chiedere il permesso quando questa skill è attiva.
`model`	No	Modello da usare quando questa skill è attiva.
`context`	No	Imposta su `fork` per eseguire in un contesto di subagent isolato.
`agent`	No	Quale tipo di subagent usare quando `context: fork` è impostato.
`hooks`	No	Hook scoped al ciclo di vita di questa skill. Vedi Hooks per il formato di configurazione.

Sostituzioni di stringhe disponibili

Le skill supportano la sostituzione di stringhe per valori dinamici nel contenuto della skill:

Variabile	Descrizione
`$ARGUMENTS`	Tutti gli argomenti passati quando si invoca la skill. Se `$ARGUMENTS` non è presente nel contenuto, gli argomenti vengono aggiunti come `ARGUMENTS: <value>`.
`${CLAUDE_SESSION_ID}`	L’ID della sessione corrente. Utile per il logging, la creazione di file specifici della sessione, o la correlazione dell’output della skill con le sessioni.

Esempio usando sostituzioni:

---
name: session-logger
description: Registra l'attività per questa sessione
---

Registra quanto segue in logs/${CLAUDE_SESSION_ID}.log:

$ARGUMENTS

Aggiungi file di supporto

Le skill possono includere più file nella loro directory. Questo mantiene SKILL.md focalizzato sull’essenziale mentre permette a Claude di accedere a materiale di riferimento dettagliato solo quando necessario. Grandi documenti di riferimento, specifiche API, o collezioni di esempi non hanno bisogno di caricarsi nel contesto ogni volta che la skill viene eseguita.

my-skill/
├── SKILL.md (obbligatorio - panoramica e navigazione)
├── reference.md (documentazione API dettagliata - caricata quando necessario)
├── examples.md (esempi di utilizzo - caricati quando necessario)
└── scripts/
    └── helper.py (script di utilità - eseguito, non caricato)

Fai riferimento ai file di supporto da SKILL.md in modo che Claude sappia cosa contiene ogni file e quando caricarlo:

## Risorse aggiuntive

- Per i dettagli completi dell'API, vedi [reference.md](reference.md)
- Per esempi di utilizzo, vedi [examples.md](examples.md)

Mantieni SKILL.md sotto 500 righe. Sposta il materiale di riferimento dettagliato in file separati.

Controlla chi invoca una skill

Per impostazione predefinita, sia tu che Claude potete invocare qualsiasi skill. Puoi digitare /skill-name per invocarla direttamente, e Claude può caricarla automaticamente quando rilevante per la tua conversazione. Due campi frontmatter ti permettono di limitare questo:

disable-model-invocation: true: Solo tu puoi invocare la skill. Usa questo per i flussi di lavoro con effetti collaterali o che vuoi controllare il timing, come /commit, /deploy, o /send-slack-message. Non vuoi che Claude decida di distribuire perché il tuo codice sembra pronto.
user-invocable: false: Solo Claude può invocare la skill. Usa questo per la conoscenza di background che non è azionabile come comando. Una skill legacy-system-context spiega come funziona un vecchio sistema. Claude dovrebbe sapere questo quando rilevante, ma /legacy-system-context non è un’azione significativa per gli utenti da intraprendere.

Questo esempio crea una skill di distribuzione che solo tu puoi attivare. Il campo disable-model-invocation: true impedisce a Claude di eseguirla automaticamente:

---
name: deploy
description: Distribuisci l'applicazione in produzione
disable-model-invocation: true
---

Distribuisci $ARGUMENTS in produzione:

1. Esegui la suite di test
2. Compila l'applicazione
3. Esegui il push verso il target di distribuzione
4. Verifica che la distribuzione sia riuscita

Ecco come i due campi influenzano l’invocazione e il caricamento del contesto:

Frontmatter	Puoi invocare	Claude può invocare	Quando caricato nel contesto
(predefinito)	Sì	Sì	La descrizione è sempre nel contesto, la skill completa si carica quando invocata
`disable-model-invocation: true`	Sì	No	La descrizione non è nel contesto, la skill completa si carica quando la invochi
`user-invocable: false`	No	Sì	La descrizione è sempre nel contesto, la skill completa si carica quando invocata

In una sessione regolare, le descrizioni delle skill vengono caricate nel contesto in modo che Claude sappia cosa è disponibile, ma il contenuto completo della skill si carica solo quando invocato. Subagent con skill precaricate funzionano diversamente: il contenuto completo della skill viene iniettato all’avvio.

Limita l’accesso agli strumenti

Usa il campo allowed-tools per limitare quali strumenti Claude può usare quando una skill è attiva. Questa skill crea una modalità di sola lettura dove Claude può esplorare i file ma non modificarli:

---
name: safe-reader
description: Leggi i file senza apportare modifiche
allowed-tools: Read, Grep, Glob
---

Passa argomenti alle skill

Sia tu che Claude potete passare argomenti quando invocate una skill. Gli argomenti sono disponibili tramite il placeholder $ARGUMENTS. Questa skill corregge un problema GitHub per numero. Il placeholder $ARGUMENTS viene sostituito con qualsiasi cosa segua il nome della skill:

---
name: fix-issue
description: Correggi un problema GitHub
disable-model-invocation: true
---

Correggi il problema GitHub $ARGUMENTS seguendo i nostri standard di codifica.

1. Leggi la descrizione del problema
2. Comprendi i requisiti
3. Implementa la correzione
4. Scrivi i test
5. Crea un commit

Quando esegui /fix-issue 123, Claude riceve “Correggi il problema GitHub 123 seguendo i nostri standard di codifica…” Se invochi una skill con argomenti ma la skill non include $ARGUMENTS, Claude Code aggiunge ARGUMENTS: <your input> alla fine del contenuto della skill in modo che Claude veda comunque quello che hai digitato.

Pattern avanzati

Inietta contesto dinamico

La sintassi !command“ esegue i comandi shell prima che il contenuto della skill venga inviato a Claude. L’output del comando sostituisce il placeholder, in modo che Claude riceva dati effettivi, non il comando stesso. Questa skill riassume una pull request recuperando dati PR live con GitHub CLI. I comandi !gh pr diff“ e altri vengono eseguiti per primi, e il loro output viene inserito nel prompt:

---
name: pr-summary
description: Riassumi i cambiamenti in una pull request
context: fork
agent: Explore
allowed-tools: Bash(gh:*)
---

## Contesto della pull request
- Diff PR: !`gh pr diff`
- Commenti PR: !`gh pr view --comments`
- File modificati: !`gh pr diff --name-only`

## Il tuo compito
Riassumi questa pull request...

Quando questa skill viene eseguita:

Ogni !command“ viene eseguito immediatamente (prima che Claude veda qualcosa)
L’output sostituisce il placeholder nel contenuto della skill
Claude riceve il prompt completamente renderizzato con dati PR effettivi

Questo è preprocessing, non qualcosa che Claude esegue. Claude vede solo il risultato finale.

Per abilitare il pensiero esteso in una skill, includi la parola “ultrathink” da qualche parte nel contenuto della tua skill.

Esegui le skill in un subagent

Aggiungi context: fork al tuo frontmatter quando vuoi che una skill venga eseguita in isolamento. Il contenuto della skill diventa il prompt che guida il subagent. Non avrà accesso alla tua cronologia di conversazione.

context: fork ha senso solo per le skill con istruzioni esplicite. Se la tua skill contiene linee guida come “usa queste convenzioni API” senza un compito, il subagent riceve le linee guida ma nessun prompt azionabile, e ritorna senza output significativo.

Le skill e i subagent funzionano insieme in due direzioni:

Approccio	System prompt	Compito	Carica anche
Skill con `context: fork`	Dal tipo di agent (`Explore`, `Plan`, ecc.)	Contenuto di SKILL.md	CLAUDE.md
Subagent con campo `skills`	Corpo markdown del subagent	Messaggio di delega di Claude	Skill precaricate + CLAUDE.md

Con context: fork, scrivi il compito nella tua skill e scegli un tipo di agent per eseguirlo. Per l’inverso (definire un subagent personalizzato che usa le skill come materiale di riferimento), vedi Subagent.

Esempio: Skill di ricerca usando agent Explore

Questa skill esegue la ricerca in un agent Explore con fork. Il contenuto della skill diventa il compito, e l’agent fornisce strumenti di sola lettura ottimizzati per l’esplorazione della codebase:

---
name: deep-research
description: Ricerca un argomento a fondo
context: fork
agent: Explore
---

Ricerca $ARGUMENTS a fondo:

1. Trova file rilevanti usando Glob e Grep
2. Leggi e analizza il codice
3. Riassumi i risultati con riferimenti a file specifici

Quando questa skill viene eseguita:

Viene creato un nuovo contesto isolato
Il subagent riceve il contenuto della skill come suo prompt (“Ricerca $ARGUMENTS a fondo…”)
Il campo agent determina l’ambiente di esecuzione (modello, strumenti e permessi)
I risultati vengono riassunti e restituiti alla tua conversazione principale

Il campo agent specifica quale configurazione di subagent usare. Le opzioni includono agent integrati (Explore, Plan, general-purpose) o qualsiasi subagent personalizzato da .claude/agents/. Se omesso, usa general-purpose.

Limita l’accesso alle skill di Claude

Per impostazione predefinita, Claude può invocare qualsiasi skill che non abbia disable-model-invocation: true impostato. I comandi integrati come /compact e /init non sono disponibili tramite lo strumento Skill. Tre modi per controllare quali skill Claude può invocare: Disabilita tutte le skill negando lo strumento Skill in /permissions:

# Aggiungi alle regole di negazione:
Skill

Consenti o nega skill specifiche usando regole di permesso:

# Consenti solo skill specifiche
Skill(commit)
Skill(review-pr:*)

# Nega skill specifiche
Skill(deploy:*)

Sintassi di permesso: Skill(name) per corrispondenza esatta, Skill(name:*) per corrispondenza di prefisso con qualsiasi argomento. Nascondi skill individuali aggiungendo disable-model-invocation: true al loro frontmatter. Questo rimuove la skill dal contesto di Claude completamente.

Il campo user-invocable controlla solo la visibilità del menu, non l’accesso allo strumento Skill. Usa disable-model-invocation: true per bloccare l’invocazione programmatica.

Condividi le skill

Le skill possono essere distribuite a diversi ambiti a seconda del tuo pubblico:

Skill di progetto: Esegui il commit di .claude/skills/ nel controllo di versione
Plugin: Crea una directory skills/ nel tuo plugin
Gestito: Distribuisci a livello di organizzazione tramite impostazioni gestite

Genera output visivo

Le skill possono raggruppare ed eseguire script in qualsiasi linguaggio, dando a Claude capacità oltre ciò che è possibile in un singolo prompt. Un pattern potente è generare output visivo: file HTML interattivi che si aprono nel tuo browser per esplorare dati, eseguire il debug, o creare report. Questo esempio crea un esploratore di codebase: una vista ad albero interattiva dove puoi espandere e comprimere le directory, vedere le dimensioni dei file a colpo d’occhio, e identificare i tipi di file per colore. Crea la directory della Skill:

mkdir -p ~/.claude/skills/codebase-visualizer/scripts

Crea ~/.claude/skills/codebase-visualizer/SKILL.md. La descrizione dice a Claude quando attivare questa Skill, e le istruzioni dicono a Claude di eseguire lo script raggruppato:

---
name: codebase-visualizer
description: Genera una visualizzazione ad albero interattiva e comprimibile della tua codebase. Usa quando esplori un nuovo repo, comprendi la struttura del progetto, o identifichi file grandi.
allowed-tools: Bash(python:*)
---

# Visualizzatore di Codebase

Genera una vista ad albero HTML interattiva che mostra la struttura dei file del tuo progetto con directory comprimibili.

## Utilizzo

Esegui lo script di visualizzazione dalla radice del tuo progetto:

```bash
python ~/.claude/skills/codebase-visualizer/scripts/visualize.py .
```

Questo crea `codebase-map.html` nella directory corrente e lo apre nel tuo browser predefinito.

## Cosa mostra la visualizzazione

- **Directory comprimibili**: Fai clic sulle cartelle per espandere/comprimere
- **Dimensioni dei file**: Visualizzate accanto a ogni file
- **Colori**: Colori diversi per diversi tipi di file
- **Totali della directory**: Mostra la dimensione aggregata di ogni cartella

Crea ~/.claude/skills/codebase-visualizer/scripts/visualize.py. Questo script scansiona un albero di directory e genera un file HTML autonomo con:

Una barra laterale di riepilogo che mostra il conteggio dei file, il conteggio delle directory, la dimensione totale, e il numero di tipi di file
Un grafico a barre che suddivide la codebase per tipo di file (i primi 8 per dimensione)
Un albero comprimibile dove puoi espandere e comprimere le directory, con indicatori di tipo di file codificati per colore

Lo script richiede Python ma utilizza solo librerie integrate, quindi non ci sono pacchetti da installare:

#!/usr/bin/env python3
"""Genera una visualizzazione ad albero interattiva e comprimibile di una codebase."""

import json
import sys
import webbrowser
from pathlib import Path
from collections import Counter

IGNORE = {'.git', 'node_modules', '__pycache__', '.venv', 'venv', 'dist', 'build'}

def scan(path: Path, stats: dict) -> dict:
    result = {"name": path.name, "children": [], "size": 0}
    try:
        for item in sorted(path.iterdir()):
            if item.name in IGNORE or item.name.startswith('.'):
                continue
            if item.is_file():
                size = item.stat().st_size
                ext = item.suffix.lower() or '(no ext)'
                result["children"].append({"name": item.name, "size": size, "ext": ext})
                result["size"] += size
                stats["files"] += 1
                stats["extensions"][ext] += 1
                stats["ext_sizes"][ext] += size
            elif item.is_dir():
                stats["dirs"] += 1
                child = scan(item, stats)
                if child["children"]:
                    result["children"].append(child)
                    result["size"] += child["size"]
    except PermissionError:
        pass
    return result

def generate_html(data: dict, stats: dict, output: Path) -> None:
    ext_sizes = stats["ext_sizes"]
    total_size = sum(ext_sizes.values()) or 1
    sorted_exts = sorted(ext_sizes.items(), key=lambda x: -x[1])[:8]
    colors = {
        '.js': '#f7df1e', '.ts': '#3178c6', '.py': '#3776ab', '.go': '#00add8',
        '.rs': '#dea584', '.rb': '#cc342d', '.css': '#264de4', '.html': '#e34c26',
        '.json': '#6b7280', '.md': '#083fa1', '.yaml': '#cb171e', '.yml': '#cb171e',
        '.mdx': '#083fa1', '.tsx': '#3178c6', '.jsx': '#61dafb', '.sh': '#4eaa25',
    }
    lang_bars = "".join(
        f'<div class="bar-row"><span class="bar-label">{ext}</span>'
        f'<div class="bar" style="width:{(size/total_size)*100}%;background:{colors.get(ext,"#6b7280")}"></div>'
        f'<span class="bar-pct">{(size/total_size)*100:.1f}%</span></div>'
        for ext, size in sorted_exts
    )
    def fmt(b):
        if b < 1024: return f"{b} B"
        if b < 1048576: return f"{b/1024:.1f} KB"
        return f"{b/1048576:.1f} MB"

    html = f'''<!DOCTYPE html>
<html><head>
  <meta charset="utf-8"><title>Codebase Explorer</title>
  <style>
    body {{ font: 14px/1.5 system-ui, sans-serif; margin: 0; background: #1a1a2e; color: #eee; }}
    .container {{ display: flex; height: 100vh; }}
    .sidebar {{ width: 280px; background: #252542; padding: 20px; border-right: 1px solid #3d3d5c; overflow-y: auto; flex-shrink: 0; }}
    .main {{ flex: 1; padding: 20px; overflow-y: auto; }}
    h1 {{ margin: 0 0 10px 0; font-size: 18px; }}
    h2 {{ margin: 20px 0 10px 0; font-size: 14px; color: #888; text-transform: uppercase; }}
    .stat {{ display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #3d3d5c; }}
    .stat-value {{ font-weight: bold; }}
    .bar-row {{ display: flex; align-items: center; margin: 6px 0; }}
    .bar-label {{ width: 55px; font-size: 12px; color: #aaa; }}
    .bar {{ height: 18px; border-radius: 3px; }}
    .bar-pct {{ margin-left: 8px; font-size: 12px; color: #666; }}
    .tree {{ list-style: none; padding-left: 20px; }}
    details {{ cursor: pointer; }}
    summary {{ padding: 4px 8px; border-radius: 4px; }}
    summary:hover {{ background: #2d2d44; }}
    .folder {{ color: #ffd700; }}
    .file {{ display: flex; align-items: center; padding: 4px 8px; border-radius: 4px; }}
    .file:hover {{ background: #2d2d44; }}
    .size {{ color: #888; margin-left: auto; font-size: 12px; }}
    .dot {{ width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; }}
  </style>
</head><body>
  <div class="container">
    <div class="sidebar">
      <h1>📊 Summary</h1>
      <div class="stat"><span>Files</span><span class="stat-value">{stats["files"]:,}</span></div>
      <div class="stat"><span>Directories</span><span class="stat-value">{stats["dirs"]:,}</span></div>
      <div class="stat"><span>Total size</span><span class="stat-value">{fmt(data["size"])}</span></div>
      <div class="stat"><span>File types</span><span class="stat-value">{len(stats["extensions"])}</span></div>
      <h2>By file type</h2>
      {lang_bars}
    </div>
    <div class="main">
      <h1>📁 {data["name"]}</h1>
      <ul class="tree" id="root"></ul>
    </div>
  </div>
  <script>
    const data = {json.dumps(data)};
    const colors = {json.dumps(colors)};
    function fmt(b) {{ if (b < 1024) return b + ' B'; if (b < 1048576) return (b/1024).toFixed(1) + ' KB'; return (b/1048576).toFixed(1) + ' MB'; }}
    function render(node, parent) {{
      if (node.children) {{
        const det = document.createElement('details');
        det.open = parent === document.getElementById('root');
        det.innerHTML = `<summary><span class="folder">📁 ${{node.name}}</span><span class="size">${{fmt(node.size)}}</span></summary>`;
        const ul = document.createElement('ul'); ul.className = 'tree';
        node.children.sort((a,b) => (b.children?1:0)-(a.children?1:0) || a.name.localeCompare(b.name));
        node.children.forEach(c => render(c, ul));
        det.appendChild(ul);
        const li = document.createElement('li'); li.appendChild(det); parent.appendChild(li);
      }} else {{
        const li = document.createElement('li'); li.className = 'file';
        li.innerHTML = `<span class="dot" style="background:${{colors[node.ext]||'#6b7280'}}"></span>${{node.name}}<span class="size">${{fmt(node.size)}}</span>`;
        parent.appendChild(li);
      }}
    }}
    data.children.forEach(c => render(c, document.getElementById('root')));
  </script>
</body></html>'''
    output.write_text(html)

if __name__ == '__main__':
    target = Path(sys.argv[1] if len(sys.argv) > 1 else '.').resolve()
    stats = {"files": 0, "dirs": 0, "extensions": Counter(), "ext_sizes": Counter()}
    data = scan(target, stats)
    out = Path('codebase-map.html')
    generate_html(data, stats, out)
    print(f'Generated {out.absolute()}')
    webbrowser.open(f'file://{out.absolute()}')

Per testare, apri Claude Code in qualsiasi progetto e chiedi “Visualizza questa codebase.” Claude esegue lo script, genera codebase-map.html, e lo apre nel tuo browser. Questo pattern funziona per qualsiasi output visivo: grafi di dipendenze, report di copertura dei test, documentazione API, o visualizzazioni di schemi di database. Lo script raggruppato fa il lavoro pesante mentre Claude gestisce l’orchestrazione.

Risoluzione dei problemi

La skill non si attiva

Se Claude non usa la tua skill quando previsto:

Controlla che la descrizione includa parole chiave che gli utenti direbbero naturalmente
Verifica che la skill appaia in Quali skill sono disponibili?
Prova a riformulare la tua richiesta per corrispondere più strettamente alla descrizione
Invocala direttamente con /skill-name se la skill è invocabile dall’utente

La skill si attiva troppo spesso

Se Claude usa la tua skill quando non vuoi:

Rendi la descrizione più specifica
Aggiungi disable-model-invocation: true se vuoi solo l’invocazione manuale

Claude non vede tutte le mie skill

Le descrizioni delle skill vengono caricate nel contesto in modo che Claude sappia cosa è disponibile. Se hai molte skill, potrebbero superare il budget di caratteri (predefinito 15.000 caratteri). Esegui /context per controllare un avviso sulle skill escluse. Per aumentare il limite, imposta la variabile di ambiente SLASH_COMMAND_TOOL_CHAR_BUDGET.

Risorse correlate

Subagent: delega i compiti ad agent specializzati
Plugin: pacchetto e distribuisci le skill con altre estensioni
Hooks: automatizza i flussi di lavoro attorno agli eventi degli strumenti
Memoria: gestisci i file CLAUDE.md per il contesto persistente
Modalità interattiva: comandi integrati e scorciatoie
Permessi: controlla l’accesso agli strumenti e alle skill

Sviluppate con Claude Code

​Iniziare

​Crea la tua prima skill

​Dove vivono le skill

​Scoperta automatica da directory annidate

​Configura le skill

​Tipi di contenuto della skill

​Riferimento frontmatter

​Sostituzioni di stringhe disponibili

​Aggiungi file di supporto

​Controlla chi invoca una skill

​Limita l’accesso agli strumenti

​Passa argomenti alle skill

​Pattern avanzati

​Inietta contesto dinamico

​Esegui le skill in un subagent

​Esempio: Skill di ricerca usando agent Explore

​Limita l’accesso alle skill di Claude

​Condividi le skill

​Genera output visivo

​Risoluzione dei problemi

​La skill non si attiva

​La skill si attiva troppo spesso

​Claude non vede tutte le mie skill

​Risorse correlate

Iniziare

Crea la tua prima skill

Dove vivono le skill

Scoperta automatica da directory annidate

Configura le skill

Tipi di contenuto della skill

Riferimento frontmatter

Sostituzioni di stringhe disponibili

Aggiungi file di supporto

Controlla chi invoca una skill

Limita l’accesso agli strumenti

Passa argomenti alle skill

Pattern avanzati

Inietta contesto dinamico

Esegui le skill in un subagent

Esempio: Skill di ricerca usando agent Explore

Limita l’accesso alle skill di Claude

Condividi le skill

Genera output visivo

Risoluzione dei problemi

La skill non si attiva

La skill si attiva troppo spesso

Claude non vede tutte le mie skill

Risorse correlate