HyperFrames Creative
Marca, ritmo, estilo, narração e direção de composição. Use após o contrato técnico do hyperframes-core estar em vigor.
Para padrões de movimento, blueprints de cena, transições e efeitos de marcador CSS, use hyperframes-animation — este skill é intencionalmente não relacionado a animação.
Leia estes dois PRIMEIRO para qualquer composição não trivial — eles substituem instintos web:
references/house-style.md— "interprete o prompt, gere conteúdo real", a lista de padrões preguiçosos e a receita de camadas de fundo/primeiro plano. Isto é o que transforma uma reformulação literal em um conceito.references/video-composition.md— escala, profundidade e detalhes de primeiro plano no meio de vídeo. Explica como evitar layouts vazios de página web sem impor uma contagem universal de elementos.Ignorar estes é a maior causa única de saídas genéricas com aparência de página web. Eles não são linhas opcionais na tabela de roteamento abaixo — para qualquer coisa além de uma edição de uma linha, abra ambos antes de escolher cores ou escrever HTML.
Fluxo de Trabalho
- Se um projeto tiver uma especificação de design, leia-a primeiro e trate seus tokens de frontmatter como verdade da marca (cores, fontes, espaçamento, tom, restrições). Qual arquivo ler (precedência
frame.md→design.md→DESIGN.md) e como analisá-lo (frontmatter = normativo, prosa = contexto) estão definidos uma vez emreferences/design-spec.md— resolva e carregue conforme esse documento. - Se não existir especificação de design e o usuário solicitar direção visual, escolha uma rota:
- Frame-preset pronto (opcional) →
frame-presets/(adote umFRAME.mdcomoframe.md; vejareferences/design-spec.md) - Estilo ou clima nomeado →
references/visual-styles.md - Padrões rápidos →
references/house-style.md - Seleção interativa →
references/design-picker.md
- Frame-preset pronto (opcional) →
- Para trabalhos com múltiplas cenas, planeje batidas e ritmo antes de escrever HTML →
references/beat-direction.md. Para transições de cena, vá parahyperframes-animation/transitions/. - Para trabalhos com muito movimento, leia
references/motion-principles.md(diretrizes de alto nível) e depois vá parahyperframes-animationpara regras atômicas.
Roteamento
| Tópico | Leia |
|---|---|
Adotar um frame-preset pronto como frame.md (opcional) | frame-presets/ · references/design-spec.md |
| Paletas padrão, movimento, tipografia, padrões preguiçosos a questionar | references/house-style.md |
| Presets de estilo nomeados, roteamento clima-para-estilo | references/visual-styles.md |
| Tokens de cor específicos de paleta | palettes/*.md |
| Padrões de composição — PiP, texto-atrás-do-sujeito, cartão de título, apresentação de slides | references/composition-patterns.md |
| Apresentação de estatísticas / infográficos | references/data-in-motion.md |
| Expansão estruturada para prompts abertos | references/prompt-expansion.md |
| Densidade, escala, cor, composição de quadro no meio de vídeo | references/video-composition.md |
| Direção por batida, planejamento de ritmo, tempo de transição | references/beat-direction.md |
| Verificação de especificação pós-autoria (cores, tipo, cantos, espaçamento, profundidade) | references/design-adherence.md |
| Diretrizes de movimento de alto nível e regras de qualidade GSAP | references/motion-principles.md |
| Seleção de fontes, combinações, diretrizes de tipo em vídeo renderizado | references/typography.md |
| Doutrina de história — linguagem de gancho, valor-antes-da-evidência, storyboard-como-proposta, visuais com origem rastreável | references/story-spine.md |
| Ritmo de roteiro, tom, aberturas, pronúncia de números | references/narration.md |
| Bandas de áudio pré-computadas mapeadas para movimento | references/audio-reactive.md |
Scripts
scripts/contrast-report.mjs— inspeciona avisos de contraste de quadros renderizados.scripts/extract-audio-data.py— pré-extrai bandas de áudio para composições reativas a áudio.scripts/package-loader.mjs— script de suporte para ferramentas criativas empacotadas.
contrast-report.mjs resolve pacotes auxiliares do projeto atual primeiro, depois pode inicializar a versão do pacote HyperFrames empacotado. Defina HYPERFRAMES_SKILL_PKG_VERSION=<versão> apenas ao executar o skill fora da CLI/instalação empacotada e você precisar fixar explicitamente essa versão de inicialização.
Execute a partir da raiz do repositório com caminhos explícitos, por exemplo:
python skills/hyperframes-creative/scripts/extract-audio-data.py <arquivo-de-áudio>
A análise de animação (animation-map.mjs) reside em hyperframes-animation/scripts/.
Limites
- Não substitua as regras técnicas do
hyperframes-core. - Não exija um sistema de design para uma composição técnica mínima.
- Não adicione cenas extras, narração, música, legendas ou transições, a menos que a solicitação as exija ou você primeiro proponha a expansão.
- Mantenha as referências de receita específicas à tarefa; não leia toda referência para edições simples.