Synthèse automatique
Ce skill impose un format vidéo vertical fixe de 1080x1920 pixels et des règles de positionnement en pourcentage pour les compositions Remotion destinées à TikTok et Instagram Reels.
Points forts
- Fixe des dimensions explicites (1080x1920) et impose le recours à VIDEO_CONFIG comme source unique de vérité
- Recommande un positionnement en pourcentage des dimensions, ce qui rend les mises en page plus faciles à maintenir
- Définit une zone de sécurité (90 % central) pour éviter que le contenu passe sous les interfaces des plateformes
- Fournit un exemple de code comparant la bonne et la mauvaise pratique (pixels codés en dur)
Limites
- Suppose que le projet utilise Remotion et expose déjà VIDEO_CONFIG dans src/lib/theme.ts
- Ne traite pas des autres ratios ni de l'adaptation multi-plateformes au-delà de TikTok/Reels
- Ne couvre ni les animations, ni le timing, ni les contraintes de rendu autres que la mise en page
Utilisez ce skill dès que vous positionnez des éléments ou calculez des dimensions dans une composition vidéo verticale.
Ne l'utilisez pas pour des vidéos horizontales ou carrées, ni pour des projets qui ne reposent pas sur Remotion et VIDEO_CONFIG.
Analyse de sécurité
SûrThis skill only provides layout guidance for fixed 9:16 video compositions and contains no executable commands, network access, secret handling, or destructive operations. It merely references local constants and positioning best practices, so listing it presents no meaningful execution risk.
Aucun point d'attention détecté
Comment cette analyse est faiteExemples
Lay out the book cover image in our Remotion composition using VIDEO_CONFIG: place it 15% from the top, 10% from the left, and size it to 80% of the video width while keeping the book's aspect ratio.Add a subtitle block to the 9:16 video composition and keep it inside the central 90% safe zone so TikTok UI overlays don't cover it.Refactor this component's hardcoded top/left/width pixel values into percentage-based positions that reference VIDEO_CONFIG from src/lib/theme.ts.name: Fixed Video Format (9:16) description: Fixed 1080x1920 pixel video format with percentage-based positioning. Use this when laying out video compositions, positioning elements on the canvas, or calculating dimensions. All videos render at exactly 9:16 aspect ratio for TikTok/Instagram Reels.
Fixed Video Format (9:16)
This Skill provides Claude Code with specific guidance on how it should handle the fixed 9:16 video format.
When to use this skill:
- Positioning elements in any video composition
- Calculating element dimensions and coordinates
- Using VIDEO_CONFIG.width and VIDEO_CONFIG.height
- Defining safe zones for platform UI overlays
- Creating layouts optimized for vertical viewing
- Testing compositions in Remotion Studio preview
Instructions
- Fixed Dimensions: All videos render at exactly 1080x1920 pixels (9:16 portrait); no responsive design needed
- VIDEO_CONFIG Constants: Use
VIDEO_CONFIGfromsrc/lib/theme.tsfor width/height values - Percentage-Based Layout: Position elements using percentages of VIDEO_CONFIG dimensions for maintainability
- TikTok Optimization: Format optimized for TikTok/Instagram Reels vertical viewing
- Safe Zones: Keep important content within central 90% to account for platform UI overlays
- Consistent Aspect Ratio: All compositions must maintain 9:16 aspect ratio; test in Remotion Studio preview
Examples:
// Good: Use VIDEO_CONFIG, percentage-based positioning
import { VIDEO_CONFIG } from '@/lib/theme';
export const BookCover: React.FC = () => (
<img
src={coverUrl}
style={{
position: 'absolute',
top: VIDEO_CONFIG.height * 0.15, // 15% from top
left: VIDEO_CONFIG.width * 0.1, // 10% from left
width: VIDEO_CONFIG.width * 0.8, // 80% width
height: VIDEO_CONFIG.width * 0.8 * 1.5, // Maintain book aspect ratio
}}
/>
);
// Bad: Hardcoded pixels, no VIDEO_CONFIG reference
<img
style={{
position: 'absolute',
top: 300,
left: 100,
width: 800,
}}
/>
Du fichier au premier essai
Le téléchargement contient exactement le contenu affiché sur cette fiche. Cette copie peut différer de la dernière version du dépôt source.
Consulter la source et ses fichiers annexesCe téléchargement contient uniquement SKILL.md. Les scripts, références, modèles et dépendances éventuels ne sont pas inclus. Récupérez les fichiers nécessaires depuis la source en conservant leur arborescence avant de poursuivre.
1. Télécharger le fichier
Télécharger SKILL.mdDepuis la racine d’un projet de test, enregistrez le fichier sous .skill-downloads/fixed-video-format-9-16-mm78no5o/SKILL.md, ou utilisez la commande suivante. Ce dossier sert à examiner la skill avant son installation.
Commande pour macOS/Linux ou WSL : un shell POSIX et curl sont nécessaires. Sous Windows sans WSL, utilisez le bouton de téléchargement et créez le dossier manuellement.
mkdir -p '.skill-downloads/fixed-video-format-9-16-mm78no5o' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/fixed-video-format-9-16-mm78no5o/download' --output '.skill-downloads/fixed-video-format-9-16-mm78no5o/SKILL.md.part' && mv '.skill-downloads/fixed-video-format-9-16-mm78no5o/SKILL.md.part' '.skill-downloads/fixed-video-format-9-16-mm78no5o/SKILL.md'2. Vérifier les prérequis
Lisez SKILL.md avant de l’utiliser. Si le fichier cite des scripts ou services externes, examinez-les et préparez les accès nécessaires dans votre environnement de test.
Aucune section de prérequis reconnue dans ce fichier. Cela ne signifie pas qu’il est autonome : les bibliothèques, outils et accès peuvent être cités ailleurs dans le contenu ou dans le dépôt source.
Les plateformes de la fiche sont des indications du catalogue. Les chemins ci-dessous suivent la documentation des outils ; ils ne prouvent pas que cette skill y a été exécutée. Aucune version minimale de ces outils n’est attestée pour cette fiche.
3. Charger la skill
Le fichier ne fournit pas un en-tête name/description exploitable pour cette procédure native. Le téléchargement reste disponible pour lecture ; utilisez le mode manuel ci-dessous.
Mode manuel ou autre outil : joignez SKILL.md à une conversation, ou ouvrez-le dans un agent capable de lire les fichiers. Ajoutez les ressources annexes nécessaires. Il n’existe pas de dossier universel reconnu par tous les outils.
4. Faire un premier essai
Utilisez une entrée courte et fictive : un endpoint d’API, un petit document ou un brief d’interface. Dans une nouvelle conversation, joignez le fichier ou donnez son chemin à l’agent, puis adaptez cette demande :
Lis .skill-downloads/fixed-video-format-9-16-mm78no5o/SKILL.md et applique ses instructions à cet exemple : [décrire une entrée de test]. Indique les fichiers, dépendances ou accès qui manquent. Produis le résultat demandé par la skill sans inventer de données ni exécuter de script non examiné.Résultat attendu : une sortie correspondant aux instructions de la skill, ou une liste précise des prérequis manquants. Une simple confirmation de lecture ne valide pas le premier usage. Si une ressource externe est indisponible, ce parcours reste à tester.
Fragments d'écriture
Contenu
Extrayez des fragments d'écriture bruts via un entretien intensif, sans imposer de structure. Capturez idées, citations et mots porteurs pour une utilisation ultérieure.
Rédaction UI et audit
Contenu
Rédigez ou auditez les textes d'interface (boutons, erreurs, états vides, infobulles) dans le monorepo, en suivant la source de vérité du design system.
Extraction MIDI/score
Contenu
Extrait le MIDI ou la partition d'une production musicale existante via l'outil MCP CogMusic et confirme la disponibilité du fichier.