Aggiungi la scheda di ui-ux-pro-max
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
8d8a2dae77
commit
8f33c6af6c
2 files changed
+159
No files matched your search
@@ -9,3 +9,4 @@ Il mio dizionario delle skill per agenti AI (Claude Code, Codex, app di Claude e
|
||||
| [find-skills](skills/find-skills.md) | Permette all'agente di cercare e installare da solo altre skill con `npx skills`. |
|
||||
| [ponytail](skills/ponytail.md) | Fa scrivere all'agente il codice più semplice e breve che funziona, evitando la sovraingegnerizzazione. |
|
||||
| [project-estimation](skills/project-estimation.md) | Stima durata, costi e risorse di un progetto con tecniche strutturate (PERT, bottom-up, per analogia). |
|
||||
| [ui-ux-pro-max](skills/ui-ux-pro-max.md) | Dà all'agente un archivio di stili, palette, font e regole di UX per progettare interfacce curate su web, mobile e desktop. |
|
||||
@@ -0,0 +1,158 @@
|
||||
# ui-ux-pro-max
|
||||
|
||||
- **Autore:** nextlevelbuilder
|
||||
- **Repository:** [nextlevelbuilder/ui-ux-pro-max-skill](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) (licenza MIT)
|
||||
- **Sorgente:** [.claude/skills/ui-ux-pro-max/SKILL.md](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/.claude/skills/ui-ux-pro-max/SKILL.md)
|
||||
- **Pagina su skills.sh:** [nextlevelbuilder/ui-ux-pro-max-skill/ui-ux-pro-max](https://skills.sh/nextlevelbuilder/ui-ux-pro-max-skill/ui-ux-pro-max)
|
||||
- **Versione:** v2.15.0 (13 agosto 2026)
|
||||
- **Diffusione (settembre 2026):** circa 367.600 installazioni tramite `npx skills` (su skills.sh dal 19 gennaio 2026); il repository ha circa 130.000 stelle e 13.800 fork su GitHub
|
||||
- **Controlli di sicurezza su skills.sh:** Gen Agent Trust Hub, Socket e Snyk superati
|
||||
|
||||
## 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:
|
||||
```bash
|
||||
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:
|
||||
|
||||
```bash
|
||||
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:
|
||||
|
||||
```bash
|
||||
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`
|
||||
|
||||
```bash
|
||||
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:
|
||||
|
||||
```bash
|
||||
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
|
||||
|
||||
- [README di nextlevelbuilder/ui-ux-pro-max-skill](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill)
|
||||
- [SKILL.md di ui-ux-pro-max](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/.claude/skills/ui-ux-pro-max/SKILL.md)
|
||||
- [Release del repository](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/releases)
|
||||
- [ui-ux-pro-max su skills.sh](https://skills.sh/nextlevelbuilder/ui-ux-pro-max-skill/ui-ux-pro-max)
|
||||
- [README di vercel-labs/skills](https://github.com/vercel-labs/skills)
|
||||
- [Use skills in Claude – Claude Help Center](https://support.claude.com/en/articles/12512180-use-skills-in-claude)
|
||||
- [Skills in ChatGPT – OpenAI Help Center](https://help.openai.com/en/articles/20001066-skills-in-chatgpt)
|
||||
Reference in new issue
Block a user