motion-web Checked

Name: motion-web
Author: feitangyuan

Design and build motion-first creative websites — page design (structure, type scale, palette, sp…

🎬 Video & Motion skills By feitangyuan Updated 2026-09-17

9.3Overall rating

Installation

This skill doesn't have an installation method yet. Check back later.

About this skill

Overview

Design and build motion-first creative websites — page design (structure, type scale, palette, spacing) plus interaction choreography: scroll animation, Framer Motion, GSAP, and light 3D via Three.js/R3F. Use for animated landing pages, creative portfolios, product showcases, WebGL-lite scenes, and motion audits. Also use when tuning interaction handfeel (手感差/太生硬/不跟手), replicating motion from a video or URL reference (复刻), building 3D depth from flat image assets (伪3D/抠图), diagnosing dead scroll-timeline stretches, mixing scene audio, auditing discoverability (点不开/没人会发现), building headless verification probes, or fixing a page that moves well but looks generated (不好看/像AI做的/没设计感). Equally for building a whole site from nothing (从0到1做个网页/落地页/官网/作品集): stack choice, sections and copy, components (导航/hero/表单/卡片/定价表), and production polish (favicon/OG/404/空状态/暗色模式). Not for dashboards, admin UI, or full 3D scene generation.

Source

Repo: https://github.com/feitangyuan/motion-web
Path: (repo root)

Score breakdown

Trigger

9.5

Exemplary bilingual (EN+CN) trigger coverage: What/When/When-Not all present, a 25-row signal-to-intent map including slang complaints (手感差/像AI做的); minor deduction for a very long description that risks diluting precision.

Structure

8.7

Clean scripts/references/cases/data/assets split with a mode-based 'Load Only What You Need' table, but SKILL.md runs 626 lines (over the 500-line guideline) and the repo ships README/LICENSE/.gitignore as a GitHub-origin artifact.

Workflow

9.6

Outstanding execution design: autonomous intent detection, hard gates (video reference protocol, design-before-motion gate, pre-flight mandatory reads), Build Order, per-case adversarial verification ('prove an oracle by breaking the case') and explicit output contracts per mode.

Content

9.0

Exceptionally precise, evidence-backed writing with measured numbers and documented failure post-mortems; density is very high, which occasionally hurts scanability.

Engineering

9.0

Correct frontmatter, shebangs present, all referenced paths exist; deps (playwright, fonttools, numpy, ffmpeg) declared in docstrings; assumes external tooling (safe-x, 3d-scene-studio sibling skill) without availability checks.

Security

9.5

Capability manifest matches declared scope: no external egress endpoints, no credential access, subprocess calls are fixed local binaries (ffmpeg/ffprobe/fontTools), base64 used only to inline font/woff2 data URIs, no persistence; small deduction for the undeclared ~/Downloads font scan in subset_fonts.py (local read, benign, license-filtered).

Remarkable motion-first web design/build skill (source: github.com/feitangyuan/motion-web; site package upload 404, assessed from repo root). Bilingual signal-to-intent map, video-reference and design gates, 26 references, 7 verified cases with adversarial oracles. Capability manifest (6.0): scripts open only user-supplied URLs (declared replicate/audit purpose) or local files; writes limited to data/structure-bank.json, assets/cases media, /tmp font output; no hardcoded external endpoints, no credentials, no persistence; verify_case targets file:// or localhost. One undeclared local read: subset_fonts.py scans ~/Downloads and a ~/.workbuddy-ai plugin dir for OFL fonts (benign, license-aware, documented in-script). Capabilities match declared scope.