diff --git a/README.md b/README.md index db69a63..f6f6cdf 100644 --- a/README.md +++ b/README.md @@ -20,6 +20,7 @@ Le schede sono divise in due gruppi, e dentro ogni gruppo per argomento: | Skill | Descrizione | |---|---| +| [apple-design](skills/apple-design.md) | Porta sul web i principi di design Apple: gesti, animazioni a molla, transizioni interrompibili, materiali traslucidi e tipografia. | | [diagram-design](skills/diagram-design.md) | Fa disegnare all'agente diagrammi curati (45 tipi) come file HTML con SVG, nei colori e nei font del tuo sito, e rifà quelli in draw.io, Mermaid ed Excalidraw. | | [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. | diff --git a/skills/apple-design.md b/skills/apple-design.md new file mode 100644 index 0000000..2388f38 --- /dev/null +++ b/skills/apple-design.md @@ -0,0 +1,129 @@ +# apple-design + +- **Autore:** Emil Kowalski +- **Repository:** [emilkowalski/skills](https://github.com/emilkowalski/skills) +- **Sorgente:** [skills/apple-design/SKILL.md](https://github.com/emilkowalski/skills/blob/main/skills/apple-design/SKILL.md) +- **Pagina su skills.sh:** [emilkowalski/skills/apple-design](https://skills.sh/emilkowalski/skills/apple-design) +- **Diffusione (ottobre 2026):** circa 222.900 installazioni; il repository ha circa 47.400 stelle su GitHub; prima rilevazione su skills.sh il 9 luglio 2026 +- **Controlli di sicurezza su skills.sh:** Gen Agent Trust Hub, Socket e Snyk superati, senza avvisi +- **Licenza:** non indicata nel README; da verificare nel repository + +## A cosa serve + +Porta sul web il modo in cui Apple progetta le interfacce e il movimento "fluido". Aiuta l'agente a costruire o rivedere interfacce che si muovono come quelle di iOS: gesti, animazioni a molla, sheet che si trascinano, transizioni che si possono interrompere e invertire in qualsiasi momento. + +## Cosa fa + +### Quando si attiva + +Quando costruisci o rivedi: + +- interfacce guidate da gesti, con drag, swipe e sheet; +- animazioni a molla (spring) e transizioni interrompibili; +- momentum e rimbalzo ai bordi; +- materiali traslucidi e profondità; +- tipografia e supporto a `prefers-reduced-motion`; +- più in generale, i principi di design dietro le interfacce in stile Apple. + +Se la invochi senza una domanda precisa, risponde con un messaggio fisso di presentazione e aspetta la tua domanda. + +### Come lavora + +È una skill di conoscenza: non lancia comandi, ma dà all'agente regole e formule da applicare al codice. L'idea di fondo è che un'interfaccia sembra viva quando il movimento parte dal valore visibile in quel momento, eredita la velocità dell'utente, proietta il momentum in avanti e può essere afferrato e invertito in ogni istante. + +Le regole principali, tutte con esempi di codice nel `SKILL.md`: + +1. **Risposta immediata:** feedback al pointer-down, non al rilascio. +2. **Manipolazione diretta:** il contenuto segue il dito 1:1 con Pointer Events e `setPointerCapture`, tenendo conto del punto in cui l'hai afferrato. +3. **Interrompibilità:** si anima sempre dal valore presente, mai dal bersaglio. Per i gesti si evitano CSS transition e `@keyframes`. Quando un gesto si inverte si trasferisce la velocità; il movimento 2D si separa in molle indipendenti su X e Y. +4. **Molle al posto di durate fisse:** due parametri, *damping ratio* (1.0 = nessun rimbalzo) e *response* (in secondi). Il rimbalzo (circa 0,8) si usa solo se il gesto aveva momentum. Valori Apple citati: spostamento 1.0/0.4, rotazione 0.8/0.4, drawer 0.8/0.3. +5. **Passaggio di velocità:** la molla riparte dalla velocità di rilascio del dito. +6. **Proiezione del momentum:** il punto di arrivo si calcola dalla velocità con una decelerazione esponenziale (rate circa 0,998), poi si aggancia il bersaglio più vicino. +7. **Coerenza spaziale:** entrata e uscita sullo stesso percorso, `transform-origin` sul trigger, easing speculare per le transizioni reversibili. +8. **Rubber-banding:** resistenza progressiva ai bordi invece di un arresto netto. +9. **Dettagli dei gesti:** soglia di circa 10 px prima di scegliere una direzione, riconoscitori in parallelo, ritardi di disambiguazione minimi. +10. **Prestazioni:** si animano solo `transform` e `opacity`; `will-change` quando serve. +11. **Materiali e profondità:** `backdrop-filter` per barre e sheet traslucidi, scrim per i modali, bordi sfumati al posto di divisori netti, niente superfici chiare sovrapposte. +12. **Feedback multimodale:** visivo, audio e aptico sullo stesso frame, solo nei momenti che contano. +13. **Accessibilità:** `prefers-reduced-motion` (cross-fade al posto di slide e molle), `prefers-reduced-transparency`, `prefers-contrast: more`. +14. **Tipografia:** tracking che dipende dalla dimensione (per esempio `-0.02em` sui titoli, vicino a 0 sul corpo), interlinea inversamente proporzionale alla dimensione, gerarchia col peso, font di sistema come default. +15. **Otto principi di design:** scopo, controllo dell'utente, responsabilità, familiarità, flessibilità, semplicità (non minimalismo), cura del dettaglio, deliziare. +16. **Processo:** prototipi interattivi, interazione e visuale progettate insieme, test con persone reali, movimento rivisto al rallentatore. + +Il file include anche una tabella di riferimento rapida (molla di default, molla da flick, proiezione del punto di arrivo, reversibilità, rubber-banding, materiali, reduced-motion) ed esempi di codice per `:active` con scale, Pointer Events, molle con Motion, proiezione del momentum, rubber-banding, media query per reduced-motion e una toolbar traslucida. + +### Da sapere + +- Le fonti dichiarate sono le sessioni WWDC, soprattutto *Designing Fluid Interfaces* (2018), più *The Details of UI Typography* (2020), *Designing Audio-Haptic Experiences* e *Principles of Great Design*. +- Gli esempi sono per il web (CSS, Pointer Events, `requestAnimationFrame`) e citano librerie come Motion/Framer Motion, Vaul ed Embla. Per React Native il repository ha un'altra skill, `animate-expo`. +- Non usa script né file esterni: il `SKILL.md` non cita allegati. I controlli di sicurezza di skills.sh sono tutti superati. +- Il repository contiene altre 14 skill (animazioni, Swift, librerie UI, ecc.): il comando del README le installa tutte, quello con `--skill` solo questa. + +## Installazione + +### Claude Code e Codex + +Solo questa skill: + +```bash +npx skills add emilkowalski/skills --skill apple-design -g -a codex -a claude-code +``` + +Tutte le skill del repository (è il comando del README, con `@latest`): + +```bash +npx skills@latest add emilkowalski/skills +``` + +| Opzione | Significato | +|---|---| +| `--skill apple-design` | installa solo questa skill del repository | +| `-g` | installazione globale (`~/.claude/skills/`, `~/.codex/skills/`); senza, solo nel progetto corrente (`.claude/skills/`, `.agents/skills/`) | +| `-a ` | agente di destinazione, ripetibile (`claude-code`, `codex`, ...) | +| `-y` | salta le domande di conferma | +| `--copy` | copia i file invece di creare collegamenti simbolici | + +Il README non descrive un plugin per Claude Code né altri metodi. Dopo l'installazione riavvia la sessione. In Codex puoi richiamarla con `$apple-design` o vederla con `/skills`; Claude Code la usa da solo quando la richiesta è pertinente. + +Gestione: + +```bash +npx skills list -g # skill installate +npx skills update apple-design # aggiornamento +npx skills remove apple-design # rimozione +``` + +### App desktop di Claude e ChatGPT + +Queste app richiedono di caricare la skill come ZIP. Preparalo così: + +```bash +git clone --depth 1 https://github.com/emilkowalski/skills.git +cd skills/skills && zip -r ~/apple-design.zip apple-design +``` + +Lo ZIP deve contenere la cartella `apple-design/` con dentro `SKILL.md`. + +**Claude (desktop o web)** + +1. Attiva l'esecuzione del codice in **Settings → Capabilities**. +2. Vai in **Customize → Skills → + → Create skill → Upload a skill** e scegli lo ZIP. +3. Attiva l'interruttore della skill. + +**ChatGPT (desktop o web)** + +1. Vai in **Skills** nella barra laterale, poi **Create → Upload from your computer**, e scegli lo ZIP o la cartella. +2. Attendi l'analisi di sicurezza di ChatGPT. +3. Richiamala con `@` nella chat. + +Le skill personali caricate su desktop e web non si sincronizzano: vanno caricate su ciascuna. + +> **Limite:** la skill è solo conoscenza e non richiede strumenti, quindi funziona anche nelle app di chat. Le dà il meglio quando l'agente può modificare ed eseguire il codice di un progetto web. + +## Fonti + +- [README di emilkowalski/skills](https://github.com/emilkowalski/skills) +- [SKILL.md di apple-design](https://github.com/emilkowalski/skills/blob/main/skills/apple-design/SKILL.md) +- [apple-design su skills.sh](https://skills.sh/emilkowalski/skills/apple-design) +- [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)