Aggiungi la scheda di apple-design
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
davideandClaude Sonnet 5.5 committed
1 parent
8a38f0a62a
commit
62caee979a
2 files changed
+130
No files matched your search
@@ -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. |
|
||||
|
||||
|
||||
@@ -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>` | 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)
|
||||
Reference in new issue
Block a user