aievolutionpl/social-motion-agent

Polissage Motion UI (Motion UI Polish)

Problème : les images codées par un modèle partagent des signes révélateurs qui les trahissent comme fabriquées par une machine : dégradé indigo, quatre cartes égales, un seul rayon de bord et une ombre unique partout, texte gris minuscule, emoji comme icônes, une barre de couleur sur un côté d'une carte. Ce skill les supprime avant le rendu, et mesure ce qui peut être mesuré.

La racine du projet se trouve trois niveaux au-dessus de ce dossier. Source de doctrine : tools/repos/ux-ui-agent-skills (MIT, instantané dans sources.lock.json). Ne lisez que les parties nécessaires à une scène.

Étapes

1. Copiez templates/frame-tokens.css et templates/frame-starter.html dans le dossier source/ du job. Modifiez uniquement le bloc de marque en haut des tokens (accent, surfaces ; prenez les couleurs du brief de marque de production). Ne codez jamais en dur la couleur, la taille ou l'ombre dans une scène : utilisez les variables.
2. Construisez la scène à partir des tokens. Le mouvement est une fonction pure du temps (window.seek(t), pas de temporisateurs, pas de Math.random), le contrat vstudio et les moteurs de rendu HTML s'y attendent. Choisissez les effets avec le skill motion-effect-picker, pas en devinant.
3. Passez la gate pour chaque scène distincte dans chaque format de sortie, à un temps qui montre la mise en page terminée :

python -S studio.py polish output/jobs/ID/source/scene.html --format 9:16 --seek 4.2 --shot output/jobs/ID/previews/scene-916.png

Il échoue sur : texte hors cadre, textes en chevauchement, texte sous le minimum lisible, emoji, et les résultats HAUT de slop_tells et taste_audit. Les avertissements (hors de la zone sûre, hiérarchie faible, texte tronqué) nécessitent une décision, pas un silence. 4. Ouvrez la capture d'écran et regardez-la. Les gates prouvent une exactitude mesurable, pas le goût. Exécutez ensuite la liste de contrôle adversarial ci-dessous et corrigez ce qu'un designer sévère rejetterait. 5. Ce n'est qu'alors que vous effectuez le rendu. Enregistrez dans le fichier HANDOFF.md du job quelles scènes ont passé polish et à quel temps de recherche.

Règles internes pour les images vidéo

1. Un élément mène. La police d'affichage doit être au moins 2,5 fois la taille du corps. Quatre cartes égales semblent générées ; donnez à un élément plus de taille ou sa propre ligne.
2. Échelle typographique réelle (tokens) : label 2.1, corps 2.8, lead 3.6, titre 6.4, affichage 9, héro 17 (cqmin, 1 cqmin = 1% du petit côté). Rien en dessous de 2% du petit côté. Les nombres utilisent .num (tabulaire).
3. Rythme de 4 px (--sp-*). Les éléments liés sont plus serrés que les éléments non liés.
4. Plusieurs rayons de bord et ombres, chacun avec un rôle (chip, panneau, carte, pilule ; --sh-1..3, deux couches chacune). Jamais un seul rayon et une seule ombre partout.
5. Bordures pleines ou contraste de surface. Jamais de barre de couleur sur un côté d'une carte, alerte ou callout. Statut = icône plus mots.
6. Couleur par signification. Un accent. Danger uniquement pour les éléments destructeurs ou négatifs. Pas de dégradé indigo-violet codé en dur, pas de texte ou fond pur #000 (les tokens utilisent un noir quasi pur teinté).
7. Pas d'emoji et pas de pictogrammes décoratifs. Utilisez des icônes SVG en ligne (currentColor) ou des mots. Pas de tirets dans le texte à l'écran (règle de l'espace de travail).
8. Contraste : corps 4,5:1, grand texte 3:1. Une légende superposée à une séquence nécessite un voile ou une pilule (.pill-caption), jamais de texte nu.
9. Zones sûres. Le 9:16 garde les 17% supérieurs et 30% inférieurs de la largeur libres de texte (plateforme UI), les côtés 5,6%. Le 16:9 a 5,6% tout autour. Les tokens définissent --safe-* ; la gate vérifie cela.
10. Maintiens. Un bloc de texte reste au repos au moins 0,5 s plus 0,3 s par mot avant de disparaître. Les entrées durent 0,4 à 0,7 s, rapides avec atterrissage en douceur (ease-out). Ne déplacez que transform et opacity.
11. Données extrêmes : noms longs, 0, 100%, nombreux éléments. Une scène ne doit pas se casser sur ces données ; testez un cas extrême.

Liste de contrôle adversarial (avant approbation)

• Couvrez le titre : l'œil se pose-t-il encore quelque part, ou sur rien ?
• Y a-t-il un élément qui n'est que décoration ? Supprimez-le.
• Plissez les yeux : y a-t-il deux points focaux concurrents ?
• Un nombre est-il affiché sans son unité, sa source ou sa comparaison ?
• La scène serait-elle identique avec le nom d'une autre marque ? Si oui, elle n'a pas de direction : prenez une esthétique dans tools/repos/ux-ui-agent-skills/taste/aesthetic-systems.md ou une spécification dans design-systems/library/<nom>/DESIGN.md (138 d'entre elles) et intégrez-la dans le bloc de tokens.

Références approfondies (chargez à la demande)

Besoin	Fichier sous tools/repos/ux-ui-agent-skills/
Doctrine anti-slop, valeurs par défaut interdites	taste/design-taste.md
Grammaire du mouvement (entrées, décalage, survol)	taste/motion-choreography.md
Graphiques et écrans de données denses	components/data-viz.md, tokens/data-viz.json, examples/terminal/
Palettes, échelles OKLCH, mode sombre	.claude/rules/tokens-and-color.md
Texte UI, étiquettes, états vides	content/voice-tone.md
Grille d'évaluation avec notation	workflows/design-review.md, .claude/agents/design-critic.md
Un style nommé (Stripe, Linear, Apple…)	design-systems/library/ + taste/aesthetic-systems.md

Exécutez les gates amont directement uniquement si nécessaire (depuis ce dossier, DS_REQUIRE_BROWSER=1, Chrome système) : node scripts/slop_tells.mjs <fichier>, node scripts/taste_audit.mjs <fichier>, node scripts/measure_render.mjs <fichier> (contraste WCAG sur le rendu réel). Leurs résultats sont des heuristiques : un signal fort, pas un verdict. Ne modifiez pas l'instantané amont.