cueframe-component-authoring

Installation
SKILL.md

CueFrame graphic authoring

Use the project and capability policy. Preserve the current project and source identities; make the intended visual behavior inspectable and editable.

Choose the representation

  • HTML card: authored typography, UI, diagrams and 2D motion with deterministic CSS. It can depict perspective, but does not provide the scene renderer's physical camera, lighting or occlusion.
  • Whole-clip keyframes: position, scale, rotation and opacity when the entire card or layer moves together. Read the current clip.setKeyframes schema; times are relative to the clip.
  • Scene shot: supported groups, devices, pages, world text, surfaces and cameras. Use cueframe-scene-shot and its current schema; author JSON, not the generated wrapper.
  • Native component: reusable version-4 media-tile scenes with declared inputs, assets and deterministic rendering. Discover a near-fit example before writing one; definitions, presets and recipes carry different editable information. Read the native source contract, then the applicable MCP, CLI or desktop workflow. This is not an arbitrary browser application runtime.

Search the builtin component library without restricting it to definitions. Use concrete mechanism terms (for example card, shuffle or carousel); the current query matches literal substrings, not semantic synonyms. Inspect the selected poster and motion, and read its exact source/document before deciding fit. An unfamiliar mechanism needs source and evidence inspection; if none fits the inputs, motion or runtime, state that limitation and choose an admitted representation deliberately. Org library filtering can be refused; do not describe an unfiltered page as a matching search.

A definition, preset and recipe are different catalog items. Preserve the selected item's exact scoped identity. A builtin source read needs componentId, sourceVersionId and builtinCollection; unavailable pins do not authorize a different source. Keep the complete template, manifest and definition when forking. On the hosted editor/API, resolve builtin presets and recipes with resolve_builtin_component using the selected collection, ID and revision; source-only reads do not recover selected preset values. Insert with apply_template using its exact documentSha256, explicit start time, unique ID prefix and your own media bindings. A URL is not received pixels: check delivery status and inspect attached poster bytes; open the movie through the current host’s supported viewer or record motion as unobserved.

Cards: geometry, clock and controls

A card source is {kind:"card", html, tokens}. Each token key x becomes the CSS property --cf-x; read var(--cf-x). Keys have no leading dashes. Missing variables silently invalidate CSS, so inspect returned warnings and actual output. Use literal or supported whole-string brand references and do not overwrite reserved motion variables.

Installs
2
GitHub Stars
2
First Seen
4 days ago