Installation du plugin : Avant les commandes de configuration ou de fraîcheur, suivez les règles d'exécution du plugin lorsque ce skill se trouve à l'intérieur d'un plugin HyperFrames. Les installations autonomes conservent les instructions de mise à jour ci-dessous.
HyperFrames Créatif
Direction de marque, rythme, style, narration et composition. À utiliser après que le contrat technique de hyperframes-core est en place.
Pour les motifs de mouvement, les plans de scène, les transitions et les effets de marqueur CSS, utilisez hyperframes-animation — ce skill est intentionnellement non-animé.
Lisez ces deux documents EN PREMIER pour toute composition non triviale — ils remplacent les instincts web :
references/house-style.md— « interpréter la consigne, générer du contenu réel », la liste des valeurs par défaut paresseuses et la recette des couches arrière-plan/avant-plan. C'est ce qui transforme un simple restylage en un concept.references/video-composition.md— échelle, profondeur et détail de l'avant-plan dans le média vidéo. Il explique comment éviter les mises en page vides de type page web sans imposer un nombre universel d'éléments.Ignorer ces documents est la cause principale de sorties génériques ressemblant à des pages web. Ils ne sont pas des lignes facultatives dans la table de routage ci-dessous — pour tout ce qui dépasse une modification ponctuelle, ouvrez les deux avant de choisir les couleurs ou d'écrire du HTML.
Flux de travail
- Si un projet a un cahier des charges de conception, lisez-le en premier et traitez ses jetons de métadonnées comme la vérité de la marque (couleurs, polices, espacement, ton, contraintes). Le fichier à lire (priorité
frame.md→design.md→DESIGN.md) et la méthode d'analyse (métadonnées = normatif, prose = contexte) sont définis une fois dansreferences/design-spec.md— résolvez et chargez selon ce document. - Si aucun cahier des charges de conception n'existe et que l'utilisateur demande une direction visuelle, choisissez une route :
- Préréglage de trame prêt à l'emploi (optionnel) →
frame-presets/(adoptez unFRAME.mdcommeframe.md; voirreferences/design-spec.md) - Style ou ambiance nommé →
references/visual-styles.md - Valeurs par défaut rapides →
references/house-style.md - Sélection interactive →
references/design-picker.md
- Préréglage de trame prêt à l'emploi (optionnel) →
- Pour un travail multi-scènes, planifiez les temps forts et le rythme avant d'écrire le HTML →
references/beat-direction.md. Pour les transitions de scène, passez àhyperframes-animation/transitions/. - Pour un travail axé sur le mouvement, lisez
references/motion-principles.md(gardes-fous de haut niveau), puis allez danshyperframes-animationpour les règles atomiques.
Routage
| Sujet | Lire |
|---|---|
Adopter un préréglage de trame prêt à l'emploi comme frame.md (optionnel) | frame-presets/ · references/design-spec.md |
| Palettes par défaut, mouvement, typographie, valeurs par défaut paresseuses à remettre en question | references/house-style.md |
| Préréglages de style nommé, routage ambiance-vers-style | references/visual-styles.md |
| Jetons de couleur spécifiques à une palette | palettes/*.md |
| Motifs de composition — PiP, texte derrière le sujet, carte de titre, diaporama | references/composition-patterns.md |
| Présentation de statistiques / infographies | references/data-in-motion.md |
| Expansion structurée pour les consignes ouvertes | references/prompt-expansion.md |
| Densité, échelle, couleur, composition de trame dans le média vidéo | references/video-composition.md |
| Direction par temps fort, planification du rythme, synchronisation des transitions | references/beat-direction.md |
| Vérification de conformité après création (couleurs, typographie, coins, espacement, profondeur) | references/design-adherence.md |
| Gardes-fous de mouvement de haut niveau et règles de qualité GSAP | references/motion-principles.md |
| Sélection de polices, associations, gardes-fous pour les types de vidéo rendues | references/typography.md |
| Doctrine narrative — langage d'accroche, valeur avant preuve, storyboard comme proposition, visuels traçables à la source | references/story-spine.md |
| Rythme du script, ton, ouvertures, prononciation des nombres | references/narration.md |
| Bandes audio précalculées mappées au mouvement | references/audio-reactive.md |
Scripts
scripts/contrast-report.mjs— inspecter les avertissements de contraste des trames rendues.scripts/extract-audio-data.py— pré-extraire les bandes audio pour les compositions audio-réactives.scripts/package-loader.mjs— script de support pour les outils créatifs groupés.
contrast-report.mjs résout les packages d'aide depuis le projet actuel en premier, puis peut amorcer la version groupée du package HyperFrames. Définissez HYPERFRAMES_SKILL_PKG_VERSION=<version> uniquement lorsque vous exécutez le skill en dehors de l'installation groupée CLI/skill et que vous devez fixer explicitement cette version d'amorçage.
Exécutez depuis la racine du dépôt avec des chemins explicites, par exemple :
python skills/hyperframes-creative/scripts/extract-audio-data.py <fichier-audio>
L'analyse d'animation (animation-map.mjs) se trouve dans hyperframes-animation/scripts/.
Limites
- Ne pas remplacer les règles techniques de
hyperframes-core. - Ne pas exiger un système de conception pour une composition technique minimale.
- Ne pas ajouter de scènes, narration, musique, sous-titres ou transitions supplémentaires à moins que la demande ne l'exige ou que vous proposiez d'abord l'expansion.
- Gardez les références liées aux recettes spécifiques à la tâche ; ne lisez pas chaque référence pour des modifications simples.