Instalación del plugin: Antes de ejecutar comandos de configuración o actualización, sigue las reglas de ejecución del plugin cuando esta habilidad esté dentro de un plugin de HyperFrames. Las instalaciones independientes conservan las instrucciones de actualización a continuación.
HyperFrames Creativo
Dirección de marca, ritmo, estilo, narración y composición. Úsalo después de tener el contrato técnico de hyperframes-core.
Para patrones de movimiento, planos de escena, transiciones y efectos de marcador CSS, usa hyperframes-animation — esta habilidad es intencionalmente no animada.
Lee estos dos PRIMERO para cualquier composición no trivial — anulan los instintos web:
references/house-style.md— "interpreta el prompt, genera contenido real", la lista de perezosos por defecto y la receta de capas de fondo/primer plano. Esto es lo que convierte un cambio de estilo literal en un concepto.references/video-composition.md— escala, profundidad y detalle de primer plano en el medio de video. Explica cómo evitar diseños de página web vacíos sin imponer un recuento universal de elementos.Saltarse estos es la causa más común de resultados genéricos y con aspecto de página web. No son filas opcionales en la tabla de enrutamiento a continuación — para cualquier cosa más allá de un cambio de una línea, abre ambos antes de elegir colores o escribir HTML.
Flujo de trabajo
- Si un proyecto tiene una especificación de diseño, léela primero y trata sus tokens de frontmatter como verdad de marca (colores, fuentes, espaciado, tono, restricciones). Qué archivo leer (precedencia
frame.md→design.md→DESIGN.md) y cómo analizarlo (frontmatter = normativo, prosa = contexto) se definen una vez enreferences/design-spec.md— resuelve y carga según ese documento. - Si no existe una especificación de diseño y el usuario solicita dirección visual, elige una ruta:
- Frame preestablecido listo (opcional) →
frame-presets/(adopta unFRAME.mdcomoframe.md; consultareferences/design-spec.md) - Estilo o estado de ánimo nombrado →
references/visual-styles.md - Valores predeterminados rápidos →
references/house-style.md - Selección interactiva →
references/design-picker.md
- Frame preestablecido listo (opcional) →
- Para trabajos con múltiples escenas, planifica los ritmos y el ritmo antes de escribir HTML →
references/beat-direction.md. Para transiciones de escena, salta ahyperframes-animation/transitions/. - Para trabajos con mucho movimiento, lee
references/motion-principles.md(directrices de alto nivel), luego ve ahyperframes-animationpara reglas atómicas.
Enrutamiento
| Tema | Leer |
|---|---|
Adoptar un frame preestablecido listo como frame.md (opcional) | frame-presets/ · references/design-spec.md |
| Paletas predeterminadas, movimiento, tipografía, valores predeterminados perezosos para cuestionar | references/house-style.md |
| Estilos preestablecidos nombrados, enrutamiento de estado de ánimo a estilo | references/visual-styles.md |
| Tokens de color específicos de paleta | palettes/*.md |
| Patrones de composición — PiP, texto detrás del sujeto, tarjeta de título, presentación de diapositivas | references/composition-patterns.md |
| Presentación de estadísticas/infografía | references/data-in-motion.md |
| Expansión estructurada para prompts abiertos | references/prompt-expansion.md |
| Densidad, escala, color, composición del cuadro en el medio de video | references/video-composition.md |
| Dirección por ritmo, planificación del ritmo, sincronización de transiciones | references/beat-direction.md |
| Verificación posterior a la autoría de la especificación (colores, tipo, esquinas, espaciado, profundidad) | references/design-adherence.md |
| Directrices de movimiento de alto nivel y reglas de calidad GSAP | references/motion-principles.md |
| Selección de fuentes, combinaciones, directrices de tipo de video renderizado | references/typography.md |
| Doctrina de la historia — lenguaje de gancho, valor antes de la evidencia, guion gráfico como propuesta, visuales trazables a la fuente | references/story-spine.md |
| Ritmo del guion, tono, aperturas, pronunciación de números | references/narration.md |
| Bandas de audio precomputadas asignadas al movimiento | references/audio-reactive.md |
Scripts
scripts/contrast-report.mjs— inspecciona advertencias de contraste de fotogramas renderizados.scripts/extract-audio-data.py— extrae previamente bandas de audio para composiciones reactivas al audio.scripts/package-loader.mjs— script de soporte para herramientas creativas empaquetadas.
contrast-report.mjs resuelve los paquetes auxiliares del proyecto actual primero, luego puede iniciar la versión del paquete HyperFrames empaquetado. Establece HYPERFRAMES_SKILL_PKG_VERSION=<version> solo cuando ejecutas la habilidad fuera de la instalación empaquetada de CLI/habilidad y necesitas fijar esa versión de inicio explícitamente.
Ejecuta desde la raíz del repositorio con rutas explícitas, por ejemplo:
python skills/hyperframes-creative/scripts/extract-audio-data.py <archivo-de-audio>
El análisis de animación (animation-map.mjs) se encuentra en hyperframes-animation/scripts/.
Límites
- No anules las reglas técnicas de
hyperframes-core. - No requieras un sistema de diseño para una composición técnica mínima.
- No agregues escenas, narración, música, subtítulos o transiciones adicionales a menos que la solicitud lo requiera o primero propongas la expansión.
- Mantén las referencias de recetas específicas de la tarea; no leas todas las referencias para ediciones simples.