130 lines
7.9 KiB
Markdown
130 lines
7.9 KiB
Markdown
# 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>` | 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)
|