Habilidades hyperframes-creative
📦

hyperframes-creative

Risco Médio 🌐 Acesso à rede⚙️ Comandos externos📁 Acesso ao sistema de arquivos⚡ Contém scripts🔑 Variáveis de ambiente

Criar Direção de Vídeo para HyperFrames

Composições de vídeo frequentemente se tornam genéricas quando as decisões de estilo são improvisadas. Esta skill oferece aos agentes uma direção criativa estruturada para vídeos HyperFrames refinados.

Suporta: Claude Codex Code(CC)
⚠️ 50 Ruim
1

Baixar o ZIP da skill

2

Upload no Claude

Vá em Configurações → Capacidades → Skills → Upload skill

3

Ative e comece a usar

Recursos legíveis por agentes

Use estes links quando um AI Agent, crawler ou script precisar de contexto limpo em vez de ler a página inteira.

Testar

A utilizar "hyperframes-creative". Um vídeo de lançamento para uma ferramenta de produtividade para desenvolvedores com um tom calmo, porém premium.

Resultado esperado:

Uma direção de frame com paleta contida, superfícies focadas em código, ritmo medido, regras de legendas e notas de densidade cena por cena.

A utilizar "hyperframes-creative". Um app de consumo divertido precisa de um estilo de vídeo social de 30 segundos.

Resultado esperado:

Uma recomendação de preset, justificativa de paleta, combinação tipográfica, escolha de skin de legenda e esboço de beats para um clipe social vibrante.

A utilizar "hyperframes-creative". Uma composição rascunho parece uma página web estática.

Resultado esperado:

Uma revisão que identifica falta de composição em escala de frame, metadados de primeiro plano fracos, baixa densidade visual e escolhas de layout genéricas.

Auditoria de Segurança

Risco Médio
v1 • 6/27/2026

The static scanner reported many critical and high findings, but most are false positives from design-language keywords, Markdown examples, and harmless words such as SAME. Real concerns remain: local helper scripts can execute npm, Node, and ffmpeg, and the design picker injects generated preview HTML with innerHTML.

67
Arquivos analisados
28,120
Linhas analisadas
12
achados
1
Total de auditorias
Problemas de Risco Médio (4)
Local HTML Injection Surface in Design Picker
The design picker renders generated preview_html and option data with innerHTML. The reference warns that preview_html must not contain scripts, event handlers, or javascript URLs, so misuse can create local XSS in the picker page.
Local Dependency Bootstrap Executes npm and Re-runs Node
The package loader can install pinned helper packages into a temporary directory and re-run the current Node process. It uses confirmation, pinned specs, and --ignore-scripts, but it still executes local package-management commands.
ffmpeg Subprocess Processes User-Supplied Media
The audio extraction helper passes a user-provided media path to ffmpeg and writes JSON output. It avoids shell=True, but ffmpeg parsing of untrusted media is still a local processing risk.
External Runtime and Font Dependencies
Several HTML assets load GSAP or fonts from external CDNs. These are normal presentation dependencies, but they create network access and supply-chain exposure during preview or rendering.
Problemas de Baixo Risco (3)
Static Critical Sensitive Findings Are Keyword Collisions
The reported Windows SAM database findings include prose such as SAME in comments, not access to Windows credential stores. I did not find evidence of SAM database reads.
Static Weak-Crypto and C2 Findings Are Mostly Design Text
Many high findings are caused by terms inside frame presets, color descriptions, Markdown examples, and visual style labels. No evidence found of cryptographic routines or command-and-control behavior in those cited design files.
Prompt Injection Search Found No Direct Override Text
A targeted search for common instruction-override phrases found no evidence of embedded prompts telling the evaluator to ignore instructions, skip review, or change risk levels.

Padrões Detectados

innerHTML Assignment With Generated HTMLSynchronous Child Process ExecutionPython Subprocess Execution
Auditado por: codex

Pontuação de qualidade

68
Arquitetura
100
Manutenibilidade
87
Conteúdo
65
Comunidade
39
Segurança
83
Conformidade com especificações

O Que Você Pode Construir

Estruturar um Vídeo de Lançamento de Produto

Escolha um preset de frame, sistema tipográfico, paleta e plano de ritmo antes de criar um vídeo promocional em HyperFrames.

Converter Notas de Marca em Estilo de Vídeo

Transforme um briefing de design em regras no nível de frame para cor, tipografia, densidade, legendas e tom visual.

Melhorar uma Composição Rascunho

Audite um vídeo rascunho quanto a layout genérico, hierarquia fraca, estilo de legendas ruim e ausência de detalhes de vídeo produzido.

Tente Estes Prompts

Escolher uma Direção Visual
Use hyperframes-creative para escolher uma direção visual para um vídeo HyperFrames de 45 segundos sobre meu produto. Primeiro, peça os detalhes de marca ausentes.
Criar uma Especificação de Frame
Use hyperframes-creative para rascunhar uma especificação de design frame.md a partir deste briefing de marca. Inclua cores, tipografia, layout, elevação e estilo de legendas.
Planejar Beats de Cena
Use hyperframes-creative para planejar beats de cena, ritmo, tom da narração e densidade visual para um vídeo explicativo de 60 segundos.
Revisar uma Direção de Composição
Use hyperframes-creative para revisar este rascunho HyperFrames quanto à aderência ao design, densidade do meio de vídeo, escolhas tipográficas e consistência de marca.

Melhores Práticas

  • Leia house-style.md e video-composition.md antes de tomar decisões de design não triviais.
  • Use os tokens de marca exatos de frame.md ou design.md em vez de inventar valores aproximados.
  • Valide pré-visualizações HTML geradas e legendas antes de renderizar ou compartilhar resultados.

Evitar

  • Não trate um frame de vídeo como uma landing page web responsiva.
  • Não execute scripts auxiliares ou inicialização de dependências sem revisar os comandos primeiro.
  • Não injete preview_html não confiável no seletor de design sem sanitização.

Perguntas Frequentes

O que esta skill faz?
Ela orienta a direção criativa para vídeos HyperFrames, incluindo estilo, tipografia, paletas, legendas, narração e planejamento de beats.
Ela renderiza vídeos por conta própria?
Não. Ela oferece suporte à camada de planejamento criativo. A renderização é realizada pelas ferramentas HyperFrames e por skills de fluxo de trabalho relacionadas.
Ela consegue criar regras de animação?
Ela cobre orientação de movimento em alto nível. Padrões de animação atômicos são delegados à skill hyperframes-animation.
Ela funciona com Claude Code e Codex?
Sim. O relatório lista suporte para Claude, Codex e Claude Code.
Há considerações de segurança?
Sim. A skill inclui scripts locais, URLs externas de fontes ou scripts e um seletor HTML que usa innerHTML.
Quando devo usá-la?
Use-a antes de criar ou revisar um vídeo HyperFrames quando a direção visual e o design de frames forem importantes.

Detalhes do Desenvolvedor

Estrutura de arquivos

📁 frame-presets/

📁 biennale-yellow/

📄 caption-skin.html

📄 frame-showcase.html

📄 FRAME.md

📁 blockframe/

📄 caption-skin.html

📄 frame-showcase.html

📄 FRAME.md

📁 blue-professional/

📄 caption-skin.html

📄 frame-showcase.html

📄 FRAME.md

📁 bold-poster/

📄 caption-skin.html

📄 frame-showcase.html

📄 FRAME.md

📁 broadside/

📄 caption-skin.html

📄 frame-showcase.html

📄 FRAME.md

📁 capsule/

📄 caption-skin.html

📄 frame-showcase.html

📄 FRAME.md

📁 cartesian/

📄 caption-skin.html

📄 frame-showcase.html

📄 FRAME.md

📁 claude/

📄 caption-skin.html

📄 frame-showcase.html

📄 FRAME.md

📁 cobalt-grid/

📄 caption-skin.html

📄 frame-showcase.html

📄 FRAME.md

📁 coral/

📄 caption-skin.html

📄 frame-showcase.html

📄 FRAME.md

📁 creative-mode/

📄 caption-skin.html

📄 frame-showcase.html

📄 FRAME.md

📁 daisy-days/

📄 caption-skin.html

📄 frame-showcase.html

📄 FRAME.md

📁 editorial-forest/

📄 caption-skin.html

📄 frame-showcase.html

📄 FRAME.md

📁 palettes/

📄 bold-energetic.md

📄 clean-corporate.md

📄 dark-premium.md

📄 jewel-rich.md

📄 monochrome.md

📄 nature-earth.md

📄 neon-electric.md

📄 pastel-soft.md

📄 warm-editorial.md

📁 references/

📄 audio-reactive.md

📄 beat-direction.md

📄 composition-patterns.md

📄 data-in-motion.md

📄 design-adherence.md

📄 design-picker.md

📄 design-spec.md

📄 house-style.md

📄 motion-principles.md

📄 narration.md

📄 prompt-expansion.md

📄 typography.md

📄 video-composition.md

📄 visual-styles.md

📁 scripts/

📄 contrast-report.mjs

📄 extract-audio-data.py

📄 package-loader.mjs

📁 templates/

📄 design-picker.html

📄 SKILL.md