ameviadodo/montageos

Applique une charte graphique à MonteurOS Studio (l'interface web) et aux vidéos — extrait couleurs, typographies, rayons, ambiance depuis des captures d'écran, une vidéo ou un lien YouTube (ex. l'interface « EditingOS » montrée dans une vidéo), puis génère le thème `ui/themes/<nom>.json` et aligne les styles vidéo (sous-titres, accents). Utiliser pour « reprends la charte de… », « mets l'interface aux couleurs de… », « même look que l'interface de la vidéo ».

Qu'est-ce que montageos ?

Ce skill vous permet d'extraire automatiquement la charte graphique (couleurs, polices, rayons, disposition) à partir d'images, de vidéos ou de liens YouTube, puis de l'appliquer à MonteurOS Studio (interface web) et aux vidéos générées. Il utilise l'outil `bin/monteur charte` pour analyser les médias et produire un fichier `ui/themes/<nom>.json` définissant la palette de couleurs (bg, surface, accent, text...), les polices (display, body) et les rayons. Le skill peut aussi ajuster la disposition de l'interface si elle diffère du template par défaut. Il est conçu pour Claude Code (avec accès aux outils `bash`, `Read`, `Edit`) et permet d'aligner le style vidéo (sous-titres, cartes) sur le thème choisi.

Compatible avec~Claude Code~Codex CLI~Cursor

npx skills add https://github.com/ameviadodo/montageos/tree/HEAD/skills/monteur-charte

Documentation

Charte graphique

1. Extraire

bin/monteur charte capture1.png capture2.png [video.mp4] ["https://youtube.com/watch?v=…"] --name editingos

→ ui/themes/editingos.json (palette dominante, rôles de couleurs proposés) + captures dans ui/themes/editingos/. Pour une vidéo YouTube, le moment où l'interface apparaît compte : si l'utilisateur donne un horodatage, découpe d'abord : ffmpeg -ss 03:12 -t 20 -i video.mp4 extrait.mp4.

2. Affiner (toi, en regardant les captures avec Read)

Dans ui/themes/<nom>.json :

colors : bg (fond), surface/surface2 (panneaux), text, muted, accent (boutons, sélection), accent2 (états secondaires). Contraste texte/fond ≥ 4,5:1.
fonts.display / fonts.body : police la plus proche (installe l'OFL dans assets/fonts/ si besoin ; le Studio utilise les polices système/installées).
radius (coins en px), layout_notes : disposition observée (barre latérale, timeline, cartes de formats, panneau d'inspection…). Si la disposition diffère fortement de ui/index.html, adapte la mise en page (grille CSS en tête de fichier) en gardant toutes les fonctions et les appels /api/*.

3. Activer

Sélecteur « Charte » en haut à droite du Studio, ou ui/settings.json → {"theme": "editingos"}. Aligne aussi les vidéos : reporte accent dans styles/*.json (subtitles.highlight, motion.accent) si l'utilisateur veut une identité commune.

Charte par défaut : `nocturne`

Relevée image par image sur la vidéo de référence de l'utilisateur : bleu nuit #070A12, panneaux #0E1320, accent jaune #FFD935 (navigation en pastilles, boutons primaires), vert #4ADE80 (prêt à relire), rouge #FF5A6E (périmé) ; titres de page Instrument Serif italique, corps Montserrat, étiquettes et chiffres Space Mono en capitales espacées. Le style vidéo styles/nocturne.json en est la déclinaison (sous-titres et cartes jaunes).

Règle

On s'inspire d'une charte (couleurs, typo, ergonomie) ; on ne copie ni logo ni nom de marque tiers dans l'interface.