0 Fork 0

Files

T

davideandClaude Sonnet 5.5 62caee979a Aggiungi la scheda di apple-design

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

2026-10-19 09:37:01 +02:00

7.9 KiB

Raw Permalink Blame History

apple-design

Autore: Emil Kowalski
Repository: emilkowalski/skills
Sorgente: skills/apple-design/SKILL.md
Pagina su 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:

Risposta immediata: feedback al pointer-down, non al rilascio.
Manipolazione diretta: il contenuto segue il dito 1:1 con Pointer Events e setPointerCapture, tenendo conto del punto in cui l'hai afferrato.
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.
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.
Passaggio di velocità: la molla riparte dalla velocità di rilascio del dito.
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.
Coerenza spaziale: entrata e uscita sullo stesso percorso, transform-origin sul trigger, easing speculare per le transizioni reversibili.
Rubber-banding: resistenza progressiva ai bordi invece di un arresto netto.
Dettagli dei gesti: soglia di circa 10 px prima di scegliere una direzione, riconoscitori in parallelo, ritardi di disambiguazione minimi.
Prestazioni: si animano solo transform e opacity; will-change quando serve.
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.
Feedback multimodale: visivo, audio e aptico sullo stesso frame, solo nei momenti che contano.
Accessibilità: prefers-reduced-motion (cross-fade al posto di slide e molle), prefers-reduced-transparency, prefers-contrast: more.
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.
Otto principi di design: scopo, controllo dell'utente, responsabilità, familiarità, flessibilità, semplicità (non minimalismo), cura del dettaglio, deliziare.
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:

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):

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:

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ì:

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)

Attiva l'esecuzione del codice in Settings → Capabilities.
Vai in Customize → Skills → + → Create skill → Upload a skill e scegli lo ZIP.
Attiva l'interruttore della skill.

ChatGPT (desktop o web)

Vai in Skills nella barra laterale, poi Create → Upload from your computer, e scegli lo ZIP o la cartella.
Attendi l'analisi di sicurezza di ChatGPT.
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.

7.9 KiB Raw Permalink Blame History Unescape Escape