davide/my-skills
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
my-skills/skills/ui-ux-pro-max.md
T
davideandClaude Sonnet 5.5 c09f4b1f7e Aggiorna le schede con le novità di ottobre 2026 
Ponytail 5 (regole, review, audit, installazione), graphify v0.9.91,
catalogo di claude-plugins-official e numeri aggiornati delle altre schede.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
2026-10-16 09:26:03 +02:00

9.7 KiB
Raw Permalink Blame History

ui-ux-pro-max

A cosa serve

Dà all'agente competenze di design per creare interfacce curate (web, mobile e desktop) invece di pagine generiche. Prima di scrivere il codice dell'interfaccia, l'agente consulta un archivio locale di stili, palette, abbinamenti di font e regole di UX, e sceglie quelli adatti al tipo di prodotto e al settore.

Cosa fa

Quando si attiva

Quando progetti, costruisci, revisioni o correggi un'interfaccia: pagine, componenti, design system, accessibilità, interazioni, layout responsive, tipografia, colori, grafici e implementazione per uno specifico framework. Per esempio:

Build a landing page for my SaaS product
Create a dashboard for healthcare analytics
Design a portfolio website with dark mode

Non si attiva per lavori senza parte visiva: logica backend, API, database, infrastruttura, prestazioni non visive.

Cosa contiene

Un archivio di file CSV consultabile in locale:

Contenuto Quantità
Stili di interfaccia (glassmorphism, brutalism, bento grid...) 79 (50 attivi)
Profili di prodotto con palette e regole di scelta per settore 192
Abbinamenti di font (Google Fonts) 74
Linee guida di UX 119
Icone 105
Preset di animazione GSAP 17
Tipi di grafico 25
Framework supportati 22

I framework comprendono React, Next.js, Vue, Nuxt, Svelte, Astro, Angular, Laravel, HTML + Tailwind, shadcn/ui, SwiftUI, Jetpack Compose, React Native e Flutter.

Come lavora

  1. Raccoglie il contesto: tipo di prodotto, pubblico, stile desiderato. Riconosce il framework dai file del progetto (package.json, pubspec.yaml, Package.swift, composer.json...); se non ci riesce, chiede invece di supporre.
  2. Genera un design system, per progetti o pagine nuove, con lo script Python della skill: 
    python .../scripts/search.py "<tipo di prodotto> <settore> <parole chiave>" --design-system -p "Nome progetto"
    Lo script fa cinque ricerche parallele (prodotto, stile, colori, tipografia, effetti), applica le regole del settore ed esclude gli errori da evitare. Il risultato comprende struttura, stile, colori, tipografia, effetti, errori da evitare e una checklist finale. Con --persist salva il design system nel progetto, in design-system/<progetto>/MASTER.md, più eventuali regole per singole pagine in design-system/<progetto>/pages/. Serve a restare coerenti tra una sessione e l'altra.
  3. Fa ricerche mirate su un solo aspetto con --domain <ambito>: product, style, color, typography, google-fonts, chart, ux, landing, icons, gsap, oppure il nome di un framework.
  4. Consulta le indicazioni per il framework con --stack <framework>, per esempio --stack react.
  5. Prima di consegnare, controlla il lavoro con la checklist di references/pro-rules.md: icone, feedback delle interazioni, contrasto in tema chiaro e scuro, margini di sicurezza sui dispositivi mobili, accessibilità.

Tre opzioni regolano il risultato su una scala da 1 a 10: --variance (da minimale e centrato ad audace e asimmetrico), --motion (da animazioni leggere a coreografie complesse) e --density (da spazioso a denso, come nelle dashboard). I formati di uscita sono -f ascii (predefinito), -f markdown e --json.

Se una ricerca non dà risultati, l'agente riprova una volta con termini più precisi. Se ancora non trova niente, usa le regole generali della skill e dichiara che non vengono dall'archivio.

Priorità di controllo

L'agente controlla gli aspetti in quest'ordine:

# Aspetto Importanza Controlli principali Da evitare
1 Accessibilità critica contrasto 4,5:1, testo alternativo, navigazione da tastiera, aria-label togliere l'indicatore di focus
2 Tocco e interazione critica aree cliccabili almeno 44×44 px, spaziatura di almeno 8 px, feedback durante i caricamenti interazioni solo al passaggio del mouse
3 Prestazioni alta immagini WebP/AVIF, caricamento differito, CLS < 0,1 ricalcoli continui del layout
4 Scelta dello stile alta adatto al tipo di prodotto, coerente, icone SVG mescolare stili a caso
5 Layout responsive alta mobile first, meta viewport, niente scorrimento orizzontale larghezze fisse in pixel
6 Tipografia e colori media testo base 16 px, interlinea 1,5, colori definiti come token testo sotto i 12 px
7 Animazioni media durate adatte al contesto, movimento che comunica qualcosa la stessa durata ovunque
8 Form e feedback media etichette visibili, errori vicino al campo, testo d'aiuto usare il placeholder come etichetta
9 Navigazione alta "indietro" prevedibile, massimo 5 voci nella barra in basso, link diretti alle pagine menu sovraccarichi
10 Grafici e dati bassa legende, tooltip, colori accessibili significato affidato solo al colore

Da sapere

  • Serve Python 3 (python3 --version per verificarlo). Gli script usano solo la libreria standard e non si collegano a internet.
  • Altre skill nel repository: oltre a ui-ux-pro-max ci sono banner-design, brand, design, design-system, slides e ui-styling. Questa scheda non le copre.
  • Numeri non aggiornati su skills.sh: la pagina riporta ancora i dati di una versione precedente (161 palette, 57 font, 10 framework). Quelli in questa scheda vengono dal SKILL.md attuale.

Installazione

Claude Code e Codex con uipro (consigliato dall'autore)

L'installatore ufficiale richiede Node.js:

npm install -g ui-ux-pro-max-cli
uipro init --ai claude --global   # Claude Code, per tutti i progetti
uipro init --ai codex --global    # Codex

Senza --global installa solo nel progetto corrente. Con --ai all installa per tutti gli assistenti supportati (Cursor, Windsurf, Copilot, Gemini CLI e altri). Per non installare niente globalmente si può usare npx ui-ux-pro-max-cli init --ai claude.

Gestione:

uipro update --global                   # aggiornamento (senza --global: progetto corrente)
uipro uninstall --ai claude --global    # rimozione (senza --ai rileva la piattaforma da solo)
uipro versions                          # versioni disponibili

Claude Code come plugin

Nella sessione di Claude Code:

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

Claude Code e Codex con npx skills

npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max -g -a claude-code -a codex
Opzione Significato
--skill ui-ux-pro-max installa solo questa skill del repository
-g installazione globale (~/.claude/skills/, ~/.codex/skills/); senza, solo nel progetto corrente
-a <agente> agente di destinazione, ripetibile
-y salta le domande di conferma

Gestione con npx skills list -g, npx skills update ui-ux-pro-max e npx skills remove ui-ux-pro-max.

Nel SKILL.md i comandi dello script usano il percorso della versione plugin (${CLAUDE_PLUGIN_ROOT}). Con un'installazione diversa, l'agente deve trovare da solo dove si trova scripts/search.py: non ho verificato se questo crea problemi.

Dopo qualsiasi installazione riavvia la sessione. La skill si attiva da sola con le richieste di interfaccia; in Codex puoi richiamarla anche con $ui-ux-pro-max.

App desktop di Claude e ChatGPT

Il README non documenta l'uso nelle app desktop. La skill ha bisogno di eseguire script Python, quindi può funzionare solo dove l'app esegue codice:

git clone --depth 1 https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git
cd ui-ux-pro-max-skill/.claude/skills && zip -r ~/ui-ux-pro-max.zip ui-ux-pro-max
  • Claude (desktop o web): attiva l'esecuzione del codice in Settings → Capabilities, poi Customize → Skills → + → Create skill → Upload a skill, scegli lo ZIP e attiva l'interruttore.
  • ChatGPT (desktop o web): Skills nella barra laterale, poi Create → Upload from your computer; richiamala con @. Le skill caricate su desktop e web non si sincronizzano.

Questo uso non è stato verificato: non ho controllato se la cartella della skill contiene già tutti i dati CSV di cui ha bisogno lo script, né se i percorsi funzionano nell'ambiente isolato delle app.

Fonti

Reference in new issue View Git Blame Copy Permalink