Source profileQuality 70/100

nexu-io/open-design/design-templates/motion-frames/SKILL.md

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.

Source repository stars
91,167
Declared platforms
0
Static risk flags
0
Last source update
2026-08-25
Source checked
2026-08-25
DecisionCompatibilityInstallWorkflowPermissionsEvidenceSourceFAQ

Decision brief

What it does: where it fits

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.

Best for

  • 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.

Not for

  • Tasks that require unconfirmed production actions or broad system permissions.
  • Environments where the pinned source and install steps cannot be inspected.

Compatibility matrix

Platform support, with evidence labels

PlatformStatusEvidenceWhat to check
CodexNot declaredNo explicit evidencePortability before use
Claude CodeNot declaredNo explicit evidencePortability before use
CursorNot declaredNo explicit evidencePortability before use
Gemini CLINot declaredNo explicit evidencePortability before use
Open the compatibility checker

Installation

Inspect first. Install second.

The source command is displayed only when detected. A safe inspection prompt is always available so your agent can explain every action before execution.

Source-detected install commandSource
npx skills add https://github.com/nexu-io/open-design --skill "design-templates/motion-frames"
Safe inspection promptEditorial

Inspect the Agent Skill "motion-frames" from https://github.com/nexu-io/open-design/blob/edfa6b5f447e95cb120eae030f03baba00dc34de/design-templates/motion-frames/SKILL.md at commit edfa6b5f447e95cb120eae030f03baba00dc34de. List every install step, command, network request, credential, file read/write, external action, and rollback step. Explain whether it fits my task. Do not install or execute anything until I approve.

Workflow

What the source asks the agent to do

  1. 01

    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
  2. 02

    Output contract

    One sentence before the artifact, nothing after.

    One sentence before the artifact, nothing after.

Permission review

Static risk signals and limitations

No configured static risk pattern was detected

This is not proof of safety. Runtime behavior, indirect dependencies, and hidden external systems are outside the static scan.

Evidence record

Why each signal appears

EvidenceSourceComputedTestedEditorial
SignalValueEvidence typeMeaning
Quality score70/100ComputedDocumentation, specificity, maintenance, and trust rules
Repository stars91,167SourceRepository attention, not individual Skill quality
Compatibility0 platformsSourceDeclared in the catalog source record
Usage guideautomated source guideEditorialGenerated or reviewed according to the visible evidence level

Pinned source

Provenance and original SKILL.md

Repository
nexu-io/open-design
Skill path
design-templates/motion-frames/SKILL.md
Commit
edfa6b5f447e95cb120eae030f03baba00dc34de
License
Apache-2.0
Collected
2026-08-25
Default branch
main
View the original SKILL.md

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

  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 front:
    • Stage — full-bleed <main>. Off-white or DS-canvas background, very subtle dotted grid texture (CSS background, radial-gradient dots 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.
  3. Animate with @keyframes only — no JS:
    • rotate-slow, rotate-med, rotate-fast for rings.
    • globe-spin for the focal mark.
    • pulse for the focal dot, ~2s, easing.
    • marquee-fade to reveal headline once on load.
  4. 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-id on stage, focal, ring, headline, chrome.
  5. 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.

Frequently asked questions

What to verify before installation and use

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.

Alternatives

Compare before choosing

Computed 10014,671

prowler-cloud/prowler

postgresql-indexing

PostgreSQL indexing best practices for Prowler: index design, partial indexes, partitioned table indexing, EXPLAIN ANALYZE validation, concurrent operations, monitoring, and maintenance. Trigger: When creating or modifying PostgreSQL indexes, analyzing query performance with EXPLAIN, debugging slow queries, reviewing index usage statistics, reindexing, dropping indexes, or working with partitioned table indexes. Also trigger when discussing index strategies, partial indexes, or index maintenance

2026-08-240 platforms
Computed 100147

oaustegard/claude-skills

featuring

Generate hierarchical _FEATURES.md files that describe what a codebase DOES from a user/consumer perspective, anchored to source symbols via tree-sitting. Supports large complex codebases through feature-driven decomposition into sub-feature files. Uses a multi-pass synthesis: orientation → detail → overview rewrite. Use when someone says "what does this do", "document features", "feature inventory", "_FEATURES.md", or needs to understand a codebase's purpose before modifying it. Complements tre

2026-08-251 platforms
Computed 9931,651

HKUDS/Vibe-Trading

strategy-generate

Create, modify, and optimize quantitative trading strategies, then backtest and evaluate them.

2026-08-240 platforms
Computed 9980

vasilyu1983/AI-Agents-public

qa-testing-ios

Guides iOS testing with XCTest, XCUITest, Swift Testing, simctl, and xcresult. Use when choosing destinations, controlling flakes, or parsing test artifacts for native apps.

2026-08-212 platforms