Best fit
- Use when the brief asks for "motion design", "animated hero", "loop", "video poster", "title card", or pairs Open Claude Design with HyperFrames for a kinetic export.
nexu-io/open-design
motion-frames
A single-frame motion-design composition with looping CSS animations — rotating type ring, animated globe, ticking timer, parallax labels. Renders as a hero video poster you can hand straight to HyperFrames or any keyframe-based exporter. Use when the brief asks for "motion design", "animated hero", "loop", "video poster", "title card", or pairs Open Claude Design with HyperFrames for a kinetic export.
70Collecting
See how to use itView GitHub source
npx skills add https://github.com/nexu-io/open-design --skill "design-templates/motion-frames"Automated source guideDesignStandard source
Source checked Jul 28, 2026·Refresh due Oct 26, 2026
Reorganized from the pinned upstream SKILL.md
Source-grounded design guide: motion-frames
Produce a single full-bleed motion composition. Inline CSS animations only — the page is the loop. Treat it as a poster frame that an exporter (HyperFrames, Lottie, etc.) can capture into a video.
npx skills add https://github.com/nexu-io/open-design --skill "design-templates/motion-frames"The pinned source supports a structured brief, but not an expanded tutorial. Only detected inputs, outputs, and sections are shown.
357 source words · 2 usable sections
Design outputs
- One sentence before the artifact, nothing after.
Design process
Read motion-frames through these 2 source sections
Sections are extracted automatically from the pinned SKILL.md and link back to the source.
Workflow
1. Read the active DESIGN.md (injected above). Motion lives or dies on typography contrast — pick the most expressive serif / display token in the DS for the headline; the body / mono token labels everything else. 2. Compose the canvas as a 16:9 hero with these layers, back to f…
Read the active DESIGN.md (injected above). Motion lives or dies onCompose the canvas as a 16:9 hero with these layers, back to front:Stage — full-bleed . Off-white or DS-canvas background, very
Output contract
One sentence before the artifact, nothing after.
One sentence before the artifact, nothing after.
Design checklist
Verify each item before delivery
The source section “Workflow” has been checked.
The source section “Output contract” has been checked.
Source output checked: One sentence before the artifact, nothing after.
Choose a different workflow
When another Skill is the better fit
design-review
Use when the user says "review the design", "check the UI", or wants a comprehensive UI/UX review. Uses a 7-phase methodology covering interaction, responsiveness, accessibility, and more.
A separate implementation from event4u-app/agent-config; compare its source, maintenance signals, and permission requirements.
Open source detailhiggsfield-generate
Use when the user wants to generate an image or video via Higgsfield AI. Covers 30+ models: Soul V2, Seedance 2.0, Kling 3.0, Veo 3.1, GPT Image 2, Nano Banana 2. Also covers Marketing Studio — branded ad video/image with avatars and products. Use whenever: "generate an image", "make a video", "animate this photo", "image-to-video", "img2vid", "edit this image with AI", "produce a clip", "create an ad", "make a UGC video", "marketing video", "brand video", "TV spot", "import product from URL", "
A separate implementation from MoizIbnYousaf/marketing-cli; compare its source, maintenance signals, and permission requirements.
Open source detailarize-evaluator
Handles LLM-as-judge evaluation workflows on Arize including creating/updating evaluators, running evaluations on spans or experiments, managing tasks, trigger-run operations, column mapping, and continuous monitoring. Use when the user mentions create evaluator, LLM judge, hallucination, faithfulness, correctness, relevance, run eval, score spans, score experiment, trigger-run, column mapping, continuous monitoring, or improve evaluator prompt.
A separate implementation from github/awesome-copilot; compare its source, maintenance signals, and permission requirements.
Open source detailFAQ
What does the motion-frames source document cover?
Produce a single full-bleed motion composition. Inline CSS animations only — the page is the loop. Treat it as a poster frame that an exporter (HyperFrames, Lottie, etc.) can capture into a video.
How do I install motion-frames?
The source record exposes this install command: npx skills add https://github.com/nexu-io/open-design --skill "design-templates/motion-frames". Inspect the command and pinned source before running it.
Repository stars
82,073
Repository forks
9,485
Quality
70/100
Source repository last pushed
Quality breakdown
Based on traceable docs and repository signals; stars are not treated as quality.
Documentation22/30
Specificity16/25
Maintenance20/20
Trust signals12/25
Compare before choosing
Related Agent Skills and source variants
These links are selected from shared tasks, functions, stacks, platforms, and same-name variants. Compare the source owner, documentation, permissions, and maintenance signals.
design-review by event4u-app
Use when the user says "review the design", "check the UI", or wants a comprehensive UI/UX review. Uses a 7-phase methodology covering interaction, responsiveness, accessibility, and more.
higgsfield-generate by MoizIbnYousaf
Use when the user wants to generate an image or video via Higgsfield AI. Covers 30+ models: Soul V2, Seedance 2.0, Kling 3.0, Veo 3.1, GPT Image 2, Nano Banana 2. Also covers Marketing Studio — branded ad video/image with avatars and products. Use whenever: "generate an image", "make a video", "animate this photo", "image-to-video", "img2vid", "edit this image with AI", "produce a clip", "create an ad", "make a UGC video", "marketing video", "brand video", "TV spot", "import product from URL", "
arize-evaluator by github
Handles LLM-as-judge evaluation workflows on Arize including creating/updating evaluators, running evaluations on spans or experiments, managing tasks, trigger-run operations, column mapping, and continuous monitoring. Use when the user mentions create evaluator, LLM judge, hallucination, faithfulness, correctness, relevance, run eval, score spans, score experiment, trigger-run, column mapping, continuous monitoring, or improve evaluator prompt.
neuropixels-analysis by k-dense-ai
Analyze Neuropixels extracellular recordings end-to-end with SpikeInterface. Covers loading SpikeGLX/Open Ephys/NWB data, preprocessing, drift/motion correction, Kilosort4 (and CPU) spike sorting, quality metrics, and unit curation (threshold-based, model-based UnitRefine, and AI-assisted visual review). Use when working with Neuropixels 1.0/2.0 recordings, spike sorting, or extracellular electrophysiology analysis.
scientific-brainstorming by k-dense-ai
Facilitates evidence-aware scientific ideation with independent generation, structured discussion, explicit assumptions, transparent evaluation, adversarial review, and decision logs. Use for early-stage research brainstorming or prioritizing candidate directions; hand off empirical validation, study design, ethics or regulatory review, and clinical questions to appropriate experts or skills.
View original Skill.mdThis page is parsed directly from the repository SKILL.md without editorial rewriting. Collected: Jul 28, 2026 · about 2 min
Motion Frames Skill
Produce a single full-bleed motion composition. Inline CSS animations only — the page is the loop. Treat it as a poster frame that an exporter (HyperFrames, Lottie, etc.) can capture into a video.
Workflow
- Read the active DESIGN.md (injected above). Motion lives or dies on typography contrast — pick the most expressive serif / display token in the DS for the headline; the body / mono token labels everything else.
- Compose the canvas as a 16:9 hero with these layers, back to front:
- Stage — full-bleed
<main>. Off-white or DS-canvas background, very subtle dotted grid texture (CSS background,radial-gradientdots at 22–32px intervals). - Concentric rings — 2–3 SVG circles radiating from a focal point. Ultra-thin strokes (0.5–1px) in DS-foreground at low opacity. These rotate at different speeds (60s, 90s, 180s).
- Focal mark — a wireframe globe, a stylized object, or a typographic monogram drawn as inline SVG. ~28% of the canvas wide.
- Ring labels — short words / phonetic tokens placed around one of
the rings (e.g. "Hola · Bonjour · 你好 · नमस्ते"). They co-rotate with
the ring, with
<text>paths counter-rotated so the words stay upright. - Headline — bottom-left or center-bottom. Display serif, italic
accent on one word. Add a subtle
letterSpacing+ opacity reveal animation (@keyframes type-in). - Frame chrome — corner stamps (top-left lab tag, top-right brand or issue number) and a thin baseline rule. Static.
- Stage — full-bleed
- Animate with
@keyframesonly — no JS:rotate-slow,rotate-med,rotate-fastfor rings.globe-spinfor the focal mark.pulsefor the focal dot, ~2s, easing.marquee-fadeto reveal headline once on load.
- Write a single HTML document:
<!doctype html>through</html>, CSS inline.- All motion uses CSS — no scripts, so HyperFrames or any frame-grabber can capture it deterministically.
data-od-idon stage, focal, ring, headline, chrome.
- Self-check:
- The composition still reads as a poster with motion paused at frame 0.
- At least 3 layers move at different speeds (depth comes from delta velocity, not parallax tricks).
- Accent appears once — usually the italic word in the headline.
Output contract
Emit between <artifact> tags:
<artifact identifier="motion-slug" type="text/html" title="Motion — Title">
<!doctype html>
<html>...</html>
</artifact>
One sentence before the artifact, nothing after.
- Source repo
- nexu-io/open-design
- Skill path
- design-templates/motion-frames/SKILL.md
- Commit SHA
- 89d6d4ef21ba
- Repository license
- Apache-2.0
- Data collected