跳到正文
cccskills
免费在 GitHub 公开

hyperframes-creative

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

中文简介正在准备中。当前显示原文说明。

查看安装方法

包含的文件(78)

  • SKILL.md6.2 KB
  • frame-presets/biennale-yellow/caption-skin.html8.1 KB
  • frame-presets/biennale-yellow/frame-showcase.html34.1 KB
  • frame-presets/biennale-yellow/FRAME.md17.4 KB
  • frame-presets/blockframe/caption-skin.html8.3 KB
  • frame-presets/blockframe/frame-showcase.html37.9 KB
  • frame-presets/blockframe/FRAME.md15.9 KB
  • frame-presets/blue-professional/caption-skin.html8.2 KB
  • frame-presets/blue-professional/frame-showcase.html38.2 KB
  • frame-presets/blue-professional/FRAME.md16.8 KB
  • frame-presets/bold-poster/caption-skin.html8.6 KB
  • frame-presets/bold-poster/frame-showcase.html31.6 KB
  • frame-presets/bold-poster/FRAME.md15.6 KB
  • frame-presets/broadside/caption-skin.html8.4 KB
  • frame-presets/broadside/frame-showcase.html33.1 KB
  • frame-presets/broadside/FRAME.md15.9 KB
  • frame-presets/capsule/caption-skin.html8.3 KB
  • frame-presets/capsule/frame-showcase.html42.0 KB
  • frame-presets/capsule/FRAME.md16.8 KB
  • frame-presets/cartesian/caption-skin.html8.2 KB
  • frame-presets/cartesian/frame-showcase.html34.5 KB
  • frame-presets/cartesian/FRAME.md16.9 KB
  • frame-presets/cobalt-grid/caption-skin.html8.7 KB
  • frame-presets/cobalt-grid/frame-showcase.html45.9 KB
  • frame-presets/cobalt-grid/FRAME.md16.9 KB
  • frame-presets/code-editorial/caption-skin.html8.3 KB
  • frame-presets/code-editorial/fonts/EBGaramond-400.woff221.2 KB
  • frame-presets/code-editorial/fonts/EBGaramond-700.woff222.5 KB
  • frame-presets/code-editorial/fonts/Inter-400.woff223.1 KB
  • frame-presets/code-editorial/fonts/Inter-700.woff223.8 KB
  • frame-presets/code-editorial/fonts/JetBrainsMono-400.woff220.7 KB
  • frame-presets/code-editorial/fonts/JetBrainsMono-700.woff221.4 KB
  • frame-presets/code-editorial/fonts/OFL-eb-garamond.txt4.4 KB
  • frame-presets/code-editorial/fonts/OFL-inter.txt4.4 KB
  • frame-presets/code-editorial/fonts/OFL-jetbrains-mono.txt4.4 KB
  • frame-presets/code-editorial/frame-showcase.html42.7 KB
  • frame-presets/code-editorial/FRAME.md20.1 KB
  • frame-presets/coral/caption-skin.html8.3 KB
  • frame-presets/coral/frame-showcase.html35.6 KB
  • frame-presets/coral/FRAME.md18.5 KB
  • frame-presets/creative-mode/caption-skin.html8.3 KB
  • frame-presets/creative-mode/frame-showcase.html37.8 KB
  • frame-presets/creative-mode/FRAME.md19.1 KB
  • frame-presets/daisy-days/caption-skin.html8.4 KB
  • frame-presets/daisy-days/frame-showcase.html41.3 KB
  • frame-presets/daisy-days/FRAME.md17.0 KB
  • frame-presets/editorial-forest/caption-skin.html8.3 KB
  • frame-presets/editorial-forest/frame-showcase.html36.0 KB
  • frame-presets/editorial-forest/FRAME.md16.6 KB
  • palettes/bold-energetic.md417 B
  • palettes/clean-corporate.md410 B
  • palettes/dark-premium.md389 B
  • palettes/jewel-rich.md394 B
  • palettes/monochrome.md454 B
  • palettes/nature-earth.md399 B
  • palettes/neon-electric.md380 B
  • palettes/pastel-soft.md392 B
  • palettes/warm-editorial.md411 B
  • references/audio-reactive.md3.0 KB
  • references/beat-direction.md13.3 KB
  • references/composition-patterns.md5.6 KB
  • references/data-in-motion.md1.2 KB
  • references/design-adherence.md1.4 KB
  • references/design-picker.md11.9 KB
  • references/design-spec.md10.3 KB
  • references/house-style.md5.0 KB
  • references/motion-principles.md9.1 KB
  • references/narration.md3.4 KB
  • references/prompt-expansion.md5.6 KB
  • references/story-spine.md4.0 KB
  • references/typography.md14.1 KB
  • references/video-composition.md4.2 KB
  • references/visual-styles.md11.7 KB
  • scripts/contrast-report.mjs20.8 KB
  • scripts/extract-audio-data.py7.0 KB
  • scripts/package-loader.mjs13.2 KB
  • scripts/package-loader.test.mjs2.5 KB
  • templates/design-picker.html43.1 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

HyperFrames Creative

Brand, pacing, style, narration, and composition direction. Use after the technical contract from hyperframes-core is in place.

For motion patterns, scene blueprints, transitions, and CSS marker effects, use hyperframes-animation — this skill is intentionally non-animation.

Read these two FIRST for any non-trivial composition — they override web instincts:

  • references/house-style.md — "interpret the prompt, generate real content," the lazy-default list, and the background/foreground layer recipe. This is what turns a literal restyle into a concept.
  • references/video-composition.md — video-medium scale, depth, and foreground detail. It explains how to avoid empty web-page layouts without imposing a universal element count.

Skipping these is the single biggest cause of generic, web-page-looking output. They are not optional rows in the routing table below — for anything beyond a one-line edit, open both before you choose colors or write HTML.

Workflow

  1. If a project has a design spec, read it first and treat its frontmatter tokens as brand truth (colors, fonts, spacing, tone, constraints). Which file to read (precedence frame.md → design.md → DESIGN.md) and how to parse it (frontmatter = normative, prose = context) are defined once in references/design-spec.md — resolve and load per that doc.
  2. If no design spec exists and the user asks for visual direction, choose a route:
    • Ready-made frame-preset (optional) → frame-presets/ (adopt a FRAME.md as frame.md; see references/design-spec.md)
    • Named style or mood → references/visual-styles.md
    • Fast defaults → references/house-style.md
    • Interactive selection → references/design-picker.md
  3. For multi-scene work, plan beats and rhythm before writing HTML → references/beat-direction.md. For scene transitions, jump to hyperframes-animation/transitions/.
  4. For motion-heavy work, read references/motion-principles.md (high-level guardrails), then go to hyperframes-animation for atomic rules.

Routing

TopicRead
Adopt a ready-made frame-preset as frame.md (optional)frame-presets/ · references/design-spec.md
Default palettes, motion, typography, lazy defaults to questionreferences/house-style.md
Named style presets, mood-to-style routingreferences/visual-styles.md
Palette-specific color tokenspalettes/*.md
Composition patterns — PiP, text-behind-subject, title card, slide showreferences/composition-patterns.md
Stats / infographic presentationreferences/data-in-motion.md
Structured expansion for open-ended promptsreferences/prompt-expansion.md
Video-medium density, scale, color, frame compositionreferences/video-composition.md
Per-beat direction, rhythm planning, transition timingreferences/beat-direction.md
Post-authoring spec verification (colors, type, corners, spacing, depth)references/design-adherence.md
High-level motion guardrails and GSAP-quality rulesreferences/motion-principles.md
Font selection, pairings, rendered-video type guardrailsreferences/typography.md
Story doctrine — hook language, value-before-evidence, storyboard-as-proposal, source-traceable visualsreferences/story-spine.md
Script pacing, tone, openings, number pronunciationreferences/narration.md
Precomputed audio bands mapped to motionreferences/audio-reactive.md

Scripts

  • scripts/contrast-report.mjs — inspect contrast warnings from rendered frames.
  • scripts/extract-audio-data.py — pre-extract audio bands for audio-reactive compositions.
  • scripts/package-loader.mjs — support script for bundled creative tooling.

contrast-report.mjs resolves helper packages from the current project first, then can bootstrap the bundled HyperFrames package version. Set HYPERFRAMES_SKILL_PKG_VERSION=<version> only when running the skill outside the bundled CLI/skill install and you need to pin that bootstrap version explicitly.

Run from the repo root with explicit paths, for example:

python skills/hyperframes-creative/scripts/extract-audio-data.py <audio-file>

Animation analysis (animation-map.mjs) lives in hyperframes-animation/scripts/.

Boundaries

  • Do not override hyperframes-core technical rules.
  • Do not require a design system for a minimal technical composition.
  • Do not add extra scenes, narration, music, captions, or transitions unless the request calls for them or you first propose the expansion.
  • Keep recipe references task-specific; do not read every reference for simple edits.

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

使用 AACT (Aggregate Analysis of ClinicalTrials.gov) PostgreSQL 数据库进行大批量临床试验历史分析与数据挖掘。触发场景包括:AACT 查询、临床试验批量分析、PostgreSQL 试验数据、全量 NCT 检索、试验数据挖掘、clinical trials data warehouse、疾病领域全景分析、设计相似试验匹配、跨年度试验趋势聚合。本 skill 通过 SQL 接口处理百万级试验记录,支持云端公共 PostgreSQL 服务(aact-db.ctti-clinicaltrials.org)和每日 dump 本地还原两种连接方式,自动检测并优先使用本地高性能模式。

中文简介正在准备中。当前显示原文说明。

EthanYoQ/Skill-hub112026年10月18日 更新

使用 AACT (Aggregate Analysis of ClinicalTrials.gov) PostgreSQL 数据仓库进行批量、历史、聚合性临床试验数据挖掘。Use this skill when the user requests bulk SQL analysis over the full clinical trials data warehouse — historical trial trends, disease landscapes, similar-design matching, or multi-year aggregations across hundreds of thousands of NCT records. 触发场景包括:AACT 查询、临床试验批量分析、PostgreSQL 试验数据、全量 NCT 检索、试验数据挖掘、历史试验分析、clinical trials data warehouse、SQL trials、bulk trial analysis、disease landscape、试验设计相似性匹配、跨年度聚合、sponsor/phase/country 多维统计。**与 clinical-trials-v2 差异**:本 skill 走批量 SQL · 离线大数据(PostgreSQL);v2 走实时 API · 单查询。两者互补:单条 NCT 实时状态用 v2,百万级历史挖掘用本 skill。支持云端公共 PostgreSQL(aact-db.ctti-clinicaltrials.org · 零部署)和每日 dump 本地还原(高性能 · 离线)两种连接方式,自动检测优先用本地。跨平台(macOS/Linux/Windows)参数化 SQL 防注入,read-only 强制保护。

中文简介正在准备中。当前显示原文说明。

EthanYoQ/Skill-hub112026年10月18日 更新

Use when work produces a deliverable, factual claim, dataset, code change, decision, publication, deployment, automation, or irreversible action whose failure would matter; when the user asks for a quality gate, acceptance criteria, QA, completeness, validation, audit, evidence, preflight, release readiness, or a definition of done; or before claiming completion on medium- or high-risk work. Automatically decide whether a formal gate is warranted, derive task-specific pass/fail criteria, gather evidence, and block unsupported completion. Make sure to use this skill even when the user does not say "quality gate" if consequential work needs acceptance criteria or completion evidence. Skip formal gating for trivial, reversible, low-impact requests.

中文简介正在准备中。当前显示原文说明。

EthanYoQ/Skill-hub112026年10月18日 更新

Create a changeset file in .changeset/ that describes a user-facing change for the release notes

中文简介正在准备中。当前显示原文说明。

EthanYoQ/Skill-hub112026年10月18日 更新

Add a new competitor to the AI Visibility Tool Directory — researches the tool, generates data, takes a screenshot, and inserts into the codebase

中文简介正在准备中。当前显示原文说明。

EthanYoQ/Skill-hub112026年10月18日 更新

add-lang

免费

Add tree-sitter language support to codegraph end-to-end — wire the grammar + extractor, write tests, then benchmark extraction quality and retrieval value on 3 popular real-world repos. Use when the user runs /add-lang <language> or asks to add/support a new language (e.g. Lua, Elixir, Zig, OCaml) in codegraph.

中文简介正在准备中。当前显示原文说明。

EthanYoQ/Skill-hub112026年10月18日 更新

查看 EthanYoQ 的全部技能

报告此技能的问题