13 - Agent Skills: Creare Capacità Modulari per Claude

.claude/
  skills/
    document-generator.md       # Skill per generazione documenti
    api-tester.md               # Skill per testing API
    database-migration.md       # Skill per migrazioni DB
    code-review-checklist.md    # Skill per code review
    performance-analyzer.md     # Skill per analisi performance
    security-audit.md           # Skill per audit di sicurezza
    csv-data-analyzer.md        # Skill per analisi dati CSV
    deployment-validator.md     # Skill per validazione deploy
  agents/                       # Subagenti (articolo 14)
  commands/                     # Custom slash commands
  settings.json                 # Configurazione progetto
  settings.local.json           # Configurazione locale

# Nome della Skill

## Descrizione
Breve descrizione di cosa fa questa skill e quando viene attivata.

## capacità
- capacità 1: cosa sa fare
- capacità 2: cosa sa fare
- capacità N: cosa sa fare

## Istruzioni
Istruzioni dettagliate su come eseguire il task:
1. Passo 1
2. Passo 2
3. Passo N

## Vincoli
- Non fare X
- Preferire Y rispetto a Z
- Formato output atteso

## Esempi
### Esempio 1: [Titolo]
Input: ...
Output: ...

### Esempio 2: [Titolo]
Input: ...
Output: ...

# Document Generator (DOCX)

## Descrizione
Genera documenti Microsoft Word professionali a partire da contenuti
strutturati. Supporta stili personalizzati, tabelle, immagini inline,
intestazioni/pie' di pagina e indice automatico.

## capacità
- Creare documenti .docx da zero con template professionale
- Applicare stili di formattazione coerenti
- Inserire tabelle con dati strutturati
- Generare indice automatico dai titoli
- Inserire header e footer con numerazione pagine
- Supportare contenuto multilingue

## Istruzioni
1. Analizzare la struttura del contenuto richiesto
2. Creare lo script Node.js usando la libreria `docx`
3. Definire gli stili del documento (heading, body, table)
4. Costruire la struttura del documento sezione per sezione
5. Eseguire lo script per generare il file .docx
6. Verificare che il file sia stato creato correttamente

## Dipendenze
- npm: docx (per generazione .docx)
- npm: @types/docx (per TypeScript)

## Vincoli
- Usare sempre stili coerenti nel documento
- Includere numerazione pagine nel footer
- Formato data: DD/MM/YYYY per documenti italiani
- Dimensione massima consigliata: 50 pagine

# TDD Workflow

## Descrizione
Guida lo sviluppo seguendo rigorosamente il ciclo Red-Green-Refactor
del Test-Driven Development. Ogni feature viene implementata partendo
dai test che descrivono il comportamento atteso.

## capacità
- Scrivere test che definiscono il comportamento desiderato (Red)
- Implementare il minimo codice per far passare i test (Green)
- Refactoring del codice mantenendo tutti i test verdi (Refactor)
- Gestire test unitari, di integrazione e e2e
- Applicare test doubles (mock, stub, spy) dove necessario

## Istruzioni
### Fase Red
1. Analizzare il requisito e scomporlo in comportamenti testabili
2. Scrivere un test che descrive il comportamento atteso
3. Eseguire il test e verificare che FALLISCA
4. Se il test passa gia: il test non testa nulla di nuovo

### Fase Green
5. Scrivere il MINIMO codice necessario per far passare il test
6. Non ottimizzare, non aggiungere feature extra
7. Eseguire tutti i test e verificare che PASSINO tutti

### Fase Refactor
8. Rifattorizzare il codice eliminando duplicazione
9. Migliorare naming e struttura
10. Eseguire tutti i test dopo ogni modifica
11. I test devono rimanere VERDI dopo il refactoring

## Vincoli
- MAI scrivere codice di produzione senza un test che lo richiede
- Un test alla volta, una feature alla volta
- I test devono essere indipendenti tra loro
- Naming dei test: should_[comportamento]_when_[condizione]

# CSV Data Summarizer

## Descrizione
Analizza file CSV per produrre report statistici completi con
visualizzazioni, correlazioni e identificazione di anomalie.

## capacità
- Caricare e parsare file CSV di qualsiasi dimensione
- Calcolare statistiche descrittive (media, mediana, moda, deviazione standard)
- Identificare valori mancanti, duplicati e outlier
- Generare correlazioni tra variabili numeriche
- Produrre visualizzazioni con grafici ASCII o script Python/matplotlib
- Creare report strutturati in formato Markdown

## Istruzioni
1. Leggere il file CSV e identificare le colonne
2. Classificare le colonne: numeriche, categoriche, date, testo
3. Per ogni colonna numerica:
   - Calcolare min, max, media, mediana, std dev
   - Identificare outlier (IQR method)
   - Verificare distribuzione
4. Per ogni colonna categorica:
   - Contare valori unici e frequenze
   - Identificare valori dominanti
5. Calcolare matrice di correlazione per colonne numeriche
6. Identificare pattern temporali (se presenti date)
7. Generare report con tutte le scoperte

## Formato Output
```markdown
# Report Analisi: [nome_file]
## Panoramica Dataset
- Righe: N, Colonne: M
- Valori mancanti: X%
## Statistiche per Colonna
[tabella per ogni colonna]
## Correlazioni Significative
[matrice e insights]
## Anomalie Rilevate
[lista anomalie con spiegazione]
```

# Changelog Generator

## Descrizione
Genera changelog professionali a partire dalla storia dei commit Git.
Categorizza automaticamente le modifiche seguendo Conventional Commits.

## capacità
- Analizzare commit tra due tag/versioni
- Categorizzare: feat, fix, docs, refactor, perf, test, chore
- Generare formato Keep a Changelog
- Linkare commit e issue/PR correlati
- Rilevare breaking changes
- Supportare versionamento semantico (SemVer)

## Istruzioni
1. Identificare l'intervallo di commit (ultimo tag -> HEAD)
2. Parsare ogni messaggio di commit per tipo e scope
3. Raggruppare per categoria
4. Ordinare per importanza (breaking > feat > fix > others)
5. Generare il documento CHANGELOG.md
6. Suggerire la nuova versione SemVer

## Formato Output
```markdown
# Changelog

## [1.2.0] - 2026-02-14

### Breaking Changes
- **auth:** Rimossa compatibilità con token v1

### Features
- **user:** Aggiunto form di modifica profilo (#123)
- **notif:** Sistema notifiche push (#145)

### Bug Fixes
- **cart:** Corretto calcolo totale con sconti (#167)

### Performance
- **api:** Cache su endpoint /products (-40% latenza)
```

# Diagram Generator

## Descrizione
Genera diagrammi tecnici in formato Mermaid o PlantUML
a partire da descrizioni in linguaggio naturale o analisi del codice.

## capacità
- Diagrammi di sequenza da flussi di codice
- Diagrammi di classe da modelli di dominio
- Diagrammi ER da schema database
- Diagrammi di stato da macchine a stati
- Diagrammi di flusso da logica di business
- Diagrammi di architettura C4

## Istruzioni
1. Analizzare la richiesta o il codice sorgente
2. Identificare il tipo di diagramma più appropriato
3. Estrarre entità, relazioni e flussi
4. Generare il codice Mermaid/PlantUML
5. Salvare in un file .md o .puml
6. Se possibile, generare un preview ASCII

## Formato Mermaid
```mermaid
sequenceDiagram
    participant U as User
    participant A as API
    participant DB as Database
    U->>A: POST /login
    A->>DB: SELECT user
    DB-->>A: User data
    A-->>U: JWT Token
```

## Vincoli
- Preferire Mermaid per semplicità
- Usare PlantUML per diagrammi complessi
- Includere sempre legenda se il diagramma ha più di 5 entità
- Massimo 20 entità per diagramma (dividere se necessario)

# Meeting Analytics

## Descrizione
Analizza note di riunione per estrarre decisioni, action item,
rischi e metriche di partecipazione. Genera report strutturati
e traccia il follow-up delle azioni nel tempo.

## capacità
- Parsare note di riunione in formato libero
- Estrarre decisioni prese e rationale
- Identificare action item con responsabile e deadline
- Rilevare rischi e impedimenti menzionati
- Calcolare metriche di partecipazione
- Generare email di follow-up con riassunto
- Tracciare azioni aperte tra riunioni successive

## Formato Output
```markdown
# Meeting Report - [Data]

## Partecipanti
[Lista con ruolo]

## Decisioni
1. [Decisione] - Motivazione: [perchè]
2. ...

## Action Items
| # | Azione | Responsabile | Deadline | Stato |
|---|--------|-------------|----------|-------|
| 1 | ...    | @nome       | GG/MM    | Open  |

## Rischi Identificati
- [Rischio] - Impatto: [alto/medio/basso]

## Prossima Riunione
- Data: [suggerita]
- Agenda: [punti proposti]
```

# OWASP Security Checklist

## Descrizione
Verifica sistematica della sicurezza dell'applicazione web
contro le OWASP Top 10 vulnerabilità. Produce un report
di audit con severity, evidenze e raccomandazioni.

## Checklist OWASP Top 10
1. A01 - Broken Access Control
2. A02 - Cryptographic Failures
3. A03 - Injection (SQL, NoSQL, OS, LDAP)
4. A04 - Insecure Design
5. A05 - Security Misconfiguration
6. A06 - Vulnerable and Outdated Components
7. A07 - Identification and Authentication Failures
8. A08 - Software and Data Integrity Failures
9. A09 - Security Logging and Monitoring Failures
10. A10 - Server-Side Request Forgery (SSRF)

## Istruzioni per Ogni Voce
1. Identificare i file e gli endpoint rilevanti
2. Analizzare il codice per pattern vulnerabili
3. Classificare la severity: Critical/High/Medium/Low/Info
4. Documentare l'evidenza con riferimento al codice
5. Proporre la remediation con codice di esempio
6. Stimare l'effort di correzione

## Formato Report
| # | Vulnerabilità | Severity | File | Stato |
|---|--------------|----------|------|-------|
| A01 | Access Control | ... | ... | ... |

# Angular Standalone Component Generator

## Descrizione
Genera componenti Angular standalone seguendo le convenzioni
del progetto. Crea il file component.ts, il template HTML,
il foglio di stile CSS e il file di test .spec.ts.

## capacità
- Generare componenti standalone con signal per state management
- Creare template con design system del progetto
- Generare stili seguendo le convenzioni CSS/SCSS del progetto
- Scrivere test unitari con TestBed e ComponentFixture
- Applicare OnPush change detection
- Integrare con il router se richiesto

## Convenzioni del Progetto
- File naming: kebab-case (user-profile.component.ts)
- Selector prefix: app- (app-user-profile)
- State management: Angular Signals (non RxJS per stato locale)
- Change detection: OnPush
- Stili: CSS scoped al componente
- Test: Jasmine + TestBed

## Template Componente
```typescript
import { Component, signal, input, output } from '@angular/core';

@Component({
  standalone: true,
  selector: 'app-[nome]',
  templateUrl: './[nome].component.html',
  styleUrls: ['./[nome].component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: []
})
export class [Nome]Component {
  // Input signals
  // State signals
  // Output events
  // Methods
}
```

## Template Test
```typescript
describe('[Nome]Component', () => {
  let component: [Nome]Component;
  let fixture: ComponentFixture<[Nome]Component>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [[Nome]Component]
    }).compileComponents();

    fixture = TestBed.createComponent([Nome]Component);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});
```

## Vincoli
- Usare SEMPRE standalone: true
- NON usare ngModule
- Preferire signal() a BehaviorSubject per stato locale
- Includere almeno 3 test nel file .spec.ts
- Documentare ogni input/output con commento JSDoc

# Test 1: Richiesta diretta
> Crea un componente UserProfile con campo nome ed email

# Verifica:
# - Ha creato user-profile.component.ts con standalone: true?
# - Ha usato signal() per lo stato?
# - Ha generato il file .spec.ts con almeno 3 test?

# Test 2: Richiesta con routing
> Genera un componente Dashboard che sia una route lazy-loaded

# Verifica:
# - Ha configurato il routing correttamente?
# - Ha applicato OnPush change detection?

# Test 3: Richiesta complessa
> Crea un componente ProductList con paginazione, filtri e ordinamento

# Verifica:
# - Ha gestito lo stato con signal?
# - Ha separato la logica in metodi chiari?
# - I test coprono i casi edge?

# Passo 1: Progettazione API
> Progetta l'API per il modulo notifiche push
> Endpoint: GET /notifications, POST /notifications/subscribe,
> DELETE /notifications/{id}

# La skill api-design-first genera la specifica OpenAPI

# Passo 2: Test first
> Genera i test per il NotificationService seguendo TDD
> Basa i test sulla specifica API appena generata

# La skill tdd-workflow genera i test (fase Red)

# Passo 3: Implementazione
> Implementa il NotificationService per far passare i test

# La skill tdd-workflow guida l'implementazione (fase Green)

# Passo 4: Frontend
> Crea il componente NotificationPanel per visualizzare le notifiche

# La skill angular-component-gen crea il componente

# Passo 5: Documentazione
> Genera la documentazione per il modulo notifiche

# La skill changelog-generator o docx-generator documenta tutto

.claude/
  skills/
    # Skill di sviluppo
    dev/
      angular-component-gen.md
      spring-service-gen.md
      api-design-first.md
      tdd-workflow.md

    # Skill di qualità
    quality/
      code-review-checklist.md
      owasp-checklist.md
      dependency-auditor.md
      performance-analyzer.md

    # Skill di documentazione
    docs/
      docx-generator.md
      changelog-generator.md
      adr-writer.md

    # Skill di analisi
    analysis/
      csv-data-summarizer.md
      log-analyzer.md
      root-cause-tracing.md

    # Skill di project management
    pm/
      meeting-analytics.md
      sprint-planner.md
      standup-reporter.md

# Full Feature Pipeline

## Descrizione
Orchestrazione completa per la creazione di una nuova feature,
dalla specifica API al deploy. Combina le skill: api-design-first,
tdd-workflow, angular-component-gen, e changelog-generator.

## Pipeline
### Fase 1: Design (api-design-first)
- Input: Requisiti della feature in linguaggio naturale
- Output: Specifica OpenAPI completa
- Gate: Approvazione della specifica da parte dell'utente

### Fase 2: Backend (tdd-workflow)
- Input: Specifica OpenAPI dalla Fase 1
- Output: Service + Controller + Test con copertura 80%+
- Gate: Tutti i test passano

### Fase 3: Frontend (angular-component-gen)
- Input: API endpoints dalla Fase 1 + modelli dati
- Output: Componenti Angular standalone con test
- Gate: Build senza errori + test passano

### Fase 4: Documentazione (changelog-generator)
- Input: Tutti i file creati/modificati nelle fasi precedenti
- Output: Entry changelog + aggiornamento README
- Gate: Review della documentazione

## Vincoli
- Ogni fase richiede approvazione prima di procedere
- Se una fase fallisce, tornare alla fase precedente
- Mantenere git commit separati per ogni fase

# Angular Component Generator
> Versione: 2.1.0 | Ultimo aggiornamento: 2026-02-14
> Changelog:
> - 2.1.0: Aggiunto supporto per lazy-loaded routes
> - 2.0.0: Migrazione da ngModule a standalone
> - 1.3.0: Aggiunto template per form reattivi
> - 1.2.0: Aggiunto OnPush change detection
> - 1.1.0: Aggiunto supporto signal()
> - 1.0.0: Rilascio iniziale

## Descrizione
...

#!/bin/bash
# Test automatico delle skill di Claude Code

echo "=== Testing Agent Skills ==="

# Test 1: Angular Component Generator
echo "Testing: Angular Component Generator..."
OUTPUT=$(claude --print "Crea un componente TestWidget con un input 'title' di tipo string" \
  --output-format json --max-iterations 5 2>&1)

if echo "$OUTPUT" | grep -q "standalone: true"; then
  echo "  PASS: standalone component generated"
else
  echo "  FAIL: standalone not found in output"
fi

if echo "$OUTPUT" | grep -q "signal\|input()"; then
  echo "  PASS: signal/input used"
else
  echo "  FAIL: signal/input not found"
fi

# Test 2: TDD Workflow
echo "Testing: TDD Workflow..."
OUTPUT=$(claude --print "Scrivi i test per una funzione calculateDiscount(price, percentage)" \
  --output-format json --max-iterations 5 2>&1)

if echo "$OUTPUT" | grep -q "describe\|it("; then
  echo "  PASS: test structure generated"
else
  echo "  FAIL: test structure not found"
fi

echo "=== Test Complete ==="