Come Installare Vercel Skills: Guida Pratica con Esempi

Indice dei contenuti

Se hai letto il mio articolo su cos'è Vercel Skills, sai già che si tratta di un game changer per chi usa agenti AI nel coding quotidiano. Ora è il momento di sporcarci le mani: vediamo come installare, configurare e usare le Skills con esempi pratici che uso ogni giorno nei miei progetti.

Questa guida è pensata per sviluppatori che vogliono passare dalla teoria alla pratica. Ti mostrerò i comandi esatti, le configurazioni e alcuni workflow che ho implementato per i clienti di cosimo.dev.

Prerequisiti: Cosa Ti Serve Prima di Iniziare

Prima di installare Vercel Skills, assicurati di avere:

Node.js 18+ installato sul tuo sistema
npm o pnpm come package manager
Almeno un agente AI tra Claude Code, Cursor, OpenCode, Codex o Antigravity
Git configurato (le Skills vengono scaricate da repository GitHub)

Se usi Claude Code, assicurati di avere un abbonamento attivo ad Anthropic. Per Cursor, la versione gratuita funziona ma quella Pro offre risultati migliori con le Skills installate.

Step 1: Installare la CLI add-skill

Vercel ha creato il package add-skill che gestisce tutto il processo automaticamente. Non devi installarlo globalmente: puoi usarlo direttamente con npx.

Apri il terminale e verifica che npx funzioni:

npx --version

Se vedi un numero di versione (es. 10.2.0), sei pronto. Altrimenti aggiorna Node.js all'ultima versione LTS.

Step 2: Esplorare le Skills Disponibili

Prima di installare, vediamo cosa offre il repository ufficiale di Vercel:

npx add-skill vercel-labs/agent-skills --list

Questo comando mostra tutte le Skills disponibili nel repository. Al momento del lancio troverai:

react-best-practices - 40+ regole di ottimizzazione React/Next.js
web-design-guidelines - 100+ regole UI/UX e accessibilità
vercel-deploy-claimable - Deploy diretto da chat

Step 3: Installare una Skill Specifica

Per installare solo la Skill delle best practice React:

npx add-skill vercel-labs/agent-skills --skill react-best-practices

La CLI rileverà automaticamente quali agenti AI hai installato e configurerà la Skill nelle directory corrette. Se vuoi specificare manualmente gli agenti:

npx add-skill vercel-labs/agent-skills --skill react-best-practices -a claude-code -a cursor

Step 4: Installazione Globale di Tutte le Skills

Per installare tutte le Skills disponibili in modo non interattivo (utile per script di setup):

npx add-skill vercel-labs/agent-skills -g -y

I flag significano:

-g - Installazione globale (disponibile in tutti i progetti)
-y - Accetta automaticamente tutte le conferme

Step 5: Verificare l'Installazione

Dopo l'installazione, le Skills vengono salvate in directory specifiche per ogni agente. Per Claude Code, trovi i file in:

~/.claude/skills/

Per Cursor:

~/.cursor/skills/

Puoi verificare che tutto sia a posto con:

ls -la ~/.claude/skills/

Dovresti vedere le cartelle delle Skills installate, ognuna contenente un file SKILL.md e eventuali script.

Esempio Pratico 1: Review di un Componente React

Ecco come uso la Skill react-best-practices nei progetti dei miei clienti. Supponiamo di avere un componente che carica dati da un'API:

// ProductList.jsx - PRIMA della review
import { useState, useEffect } from 'react';

export function ProductList({ categoryId }) {
  const [products, setProducts] = useState([]);
  const [category, setCategory] = useState(null);
  const [reviews, setReviews] = useState([]);

  useEffect(() => {
    fetch(`/api/products?category=${categoryId}`)
      .then(res => res.json())
      .then(setProducts);
  }, [categoryId]);

  useEffect(() => {
    fetch(`/api/category/${categoryId}`)
      .then(res => res.json())
      .then(setCategory);
  }, [categoryId]);

  useEffect(() => {
    fetch(`/api/reviews?category=${categoryId}`)
      .then(res => res.json())
      .then(setReviews);
  }, [categoryId]);

  return (
    <div>
      {products.map(p => <ProductCard key={p.id} product={p} />)}
    </div>
  );
}

Apro Claude Code e scrivo:

Rivedi questo componente React per problemi di performance usando le best practice

Con la Skill installata, Claude Code identifica immediatamente il waterfall pattern: tre fetch sequenziali che potrebbero essere paralleli. La risposta include codice corretto:

// ProductList.jsx - DOPO la review
import { useState, useEffect } from 'react';

export function ProductList({ categoryId }) {
  const [data, setData] = useState({ products: [], category: null, reviews: [] });
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setLoading(true);
    Promise.all([
      fetch(`/api/products?category=${categoryId}`).then(r => r.json()),
      fetch(`/api/category/${categoryId}`).then(r => r.json()),
      fetch(`/api/reviews?category=${categoryId}`).then(r => r.json())
    ])
    .then(([products, category, reviews]) => {
      setData({ products, category, reviews });
      setLoading(false);
    });
  }, [categoryId]);

  if (loading) return <Skeleton />;

  return (
    <div>
      {data.products.map(p => <ProductCard key={p.id} product={p} />)}
    </div>
  );
}

Il risultato? Da 3 chiamate sequenziali (600-900ms) a 3 chiamate parallele (200-300ms). Un miglioramento del 60-70% con una sola review.

Esempio Pratico 2: Audit Accessibilità di un Form

Per i progetti e-commerce l'accessibilità è fondamentale. Ecco come uso la Skill web-design-guidelines:

// CheckoutForm.jsx - Form da auditare
export function CheckoutForm() {
  return (
    <form>
      <input type="text" placeholder="Nome" />
      <input type="email" placeholder="Email" />
      <div onClick={() => submitForm()}>Acquista</div>
    </form>
  );
}

Chiedo a Claude Code:

Fai un audit di accessibilità di questo form di checkout

La Skill identifica problemi critici:

Mancano le label - Gli screen reader non possono descrivere i campi
Placeholder come label - Scompare quando l'utente digita
Div invece di button - Non navigabile da tastiera
Nessun feedback di errore - Utenti non vedono cosa correggere

Il codice corretto:

// CheckoutForm.jsx - DOPO l'audit
export function CheckoutForm() {
  const [errors, setErrors] = useState({});

  return (
    <form onSubmit={handleSubmit} aria-label="Form di checkout">
      <div>
        <label htmlFor="name">Nome completo</label>
        <input 
          id="name"
          type="text" 
          aria-required="true"
          aria-invalid={!!errors.name}
          aria-describedby={errors.name ? "name-error" : undefined}
        />
        {errors.name && <span id="name-error" role="alert">{errors.name}</span>}
      </div>
      
      <div>
        <label htmlFor="email">Email</label>
        <input 
          id="email"
          type="email"
          aria-required="true"
          aria-invalid={!!errors.email}
        />
      </div>
      
      <button type="submit">Acquista ora</button>
    </form>
  );
}

Esempio Pratico 3: Deploy Diretto da Chat

Questo è il mio preferito per le demo ai clienti. Con la Skill vercel-deploy-claimable, posso deployare un progetto senza uscire dalla conversazione:

Deploya questa app su Vercel

Claude Code esegue automaticamente:

Rileva il framework (Next.js, Vite, etc.)
Crea un tarball escludendo node_modules
Carica su Vercel
Restituisce due URL

L'output tipico:

✓ Framework rilevato: Next.js 14
✓ Progetto impacchettato (2.3 MB)
✓ Deploy completato!

Preview URL: https://my-app-abc123.vercel.app
Claim URL: https://vercel.com/claim-deployment?code=xyz789

Usa il Claim URL per trasferire il deployment al tuo account Vercel.

Il Claim URL è geniale: posso fare una demo al cliente, mostrargli l'app funzionante, e lui può "rivendicare" il deployment sul suo account senza che io debba condividere credenziali.

Creare una Skill Personalizzata per il Tuo Team

Per i progetti più strutturati, creo Skills personalizzate. Ecco la struttura che uso per i clienti di MT Solutions:

mtsolutions-standards/
├── SKILL.md
├── scripts/
│   └── lint-check.sh
└── references/
    └── coding-standards.md

Il file SKILL.md:

---
name: mtsolutions-standards
description: Standard di coding MT Solutions. Usa quando rivedi codice o crei nuovi componenti.
---

# MT Solutions Coding Standards

Questa skill applica gli standard di sviluppo di MT Solutions per progetti React/Next.js.

## Regole Principali

1. **Naming**: Componenti in PascalCase, hook con prefisso "use", utility in camelCase
2. **Struttura file**: Un componente per file, co-locazione di styles e tests
3. **State management**: Zustand per stato globale, React Query per server state
4. **Styling**: Tailwind CSS, no CSS-in-JS
5. **Testing**: Vitest + Testing Library, coverage minimo 80%

## Come Applicare

Quando rivedi codice, verifica:
- [ ] Naming conventions rispettate
- [ ] Nessun useEffect per data fetching (usa React Query)
- [ ] Componenti sotto le 150 righe
- [ ] Props tipizzate con TypeScript
- [ ] Nessun any esplicito

## Comandi Disponibili

```bash
bash /mnt/skills/user/mtsolutions-standards/scripts/lint-check.sh
```

Per installare la Skill personalizzata da un repository privato:

npx add-skill github.com/mtsolutions/agent-skills --skill mtsolutions-standards

Integrazione con Workflow n8n

Un caso d'uso avanzato che ho implementato: integrare le review automatiche nel workflow di CI/CD usando n8n.

Il flusso funziona così:

Un webhook riceve notifica di nuova PR su GitHub
n8n estrae il diff dei file modificati
Passa il codice a Claude API con le istruzioni della Skill react-best-practices
Il risultato viene postato come commento sulla PR

Questo permette review automatiche su ogni pull request, identificando problemi di performance prima che il codice arrivi in produzione.

Troubleshooting: Problemi Comuni

La Skill non viene rilevata dall'agente

Verifica che il file SKILL.md sia nella directory corretta. Per Claude Code:

cat ~/.claude/skills/react-best-practices/SKILL.md

Se il file non esiste, reinstalla la Skill con il flag verbose:

npx add-skill vercel-labs/agent-skills --skill react-best-practices --verbose

Errore "Permission denied" durante l'installazione

Su macOS/Linux, potresti dover sistemare i permessi:

sudo chown -R $(whoami) ~/.claude/skills/

Le Skills funzionano su Cursor ma non su Claude Code

I due agenti usano directory diverse. Reinstalla specificando entrambi:

npx add-skill vercel-labs/agent-skills -a claude-code -a cursor

Conclusione

Vercel Skills trasforma il modo in cui lavoro con gli agenti AI. Non si tratta solo di installare pacchetti: si tratta di dare al tuo assistente di coding una base di conoscenza strutturata che produce risultati consistenti e di qualità.

I tre esempi che ti ho mostrato - review React, audit accessibilità e deploy da chat - sono workflow che uso quotidianamente. Il tempo risparmiato si misura in ore ogni settimana, e la qualità del codice prodotto è notevolmente più alta.

Se vuoi implementare questi workflow nel tuo team o hai bisogno di Skills personalizzate per i tuoi standard di sviluppo, contattami per una consulenza.

Autore

Cosmin-Anton Mihoc

Full stack developer

Developer con esperienza nello sviluppo di applicazioni web moderne e scalabili. Specializzato in PHP, Laravel, Node.js e tecnologie frontend come React e Next.js. Appassionato di architetture pulite, performance e user experience. Aiuto aziende e professionisti a trasformare le loro idee in soluzioni digitali efficaci.

phpnodejshtmlcss+4

Vedi profilo completo

Condividi questo articolo

Hai domande? Contattami