agentleFS
Sign inStart free
adityareddy-devadityareddy-dev/deskstudio/skills/motion-design/SKILL.md

motion-design

Skill43 starsChanged 23 days agoMITView on GitHub

A 6 to 10 second motion clip built in CSS and the Web Animations API and recorded in Chrome: a brand sting, a product beat, a site loop. Use when there is no script to speak, just one idea to move.

46 other projects use a version of this.

Adopted by

Most recently taken up by

Used with

Projects with it also use addskill, apply-firmware and 10 more.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • ryanportfolioSkill

    addskill

    Create, import, update, or install repo or personal skills: runtime ownership, resources, discovery checks.

    Also in 6 projects that use this

  • ryanportfolioSkill

    apply-firmware

    Bring current folder (plain folder, existing repo, old or partial firmware copy) up to full Harness Firmware in place. Mirror external repo → adopt-repo.

    Also in 6 projects that use this

  • +10 more from ryanportfolio

The file

We split this skill into the rules it gives an agent

1 rule. 0 are common, 0 are distinctive, and 1 is very specific to this project.

  • 0

    Common

    Most of the 42 edited versions we read keep these.

  • 0

    Distinctive

    This author's own choices. Worth a look.

  • 1

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Very specific:

    Run: Read ${CLAUDE_PLUGIN_ROOT}/skills/desk/SKILL.md now and follow it from step 0 to step 7 as the Design Manager with the desks above.

    line 35

“Common” is measured: kept by at least 6 in 10 of the 42 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Make a motion clip as the Design Manager.

Deliverable and standard. A clip to ${CLAUDE_PLUGIN_ROOT}/skills/desk/standards/motion-clip.md: three to five beats, one movement each, reading-time holds, the brand's easings, deterministic, recorded to WebM and MP4 with a poster.

Desks.

DeskAgentTierDoes
Storyboard Artistdesk:storyboard-artistbuilderthe beats: time, what is on screen, the movement, as a board
Copy Editordesk:copy-editorseniorany words on screen against the copy standard
Motion Designerdesk:motion-designerbuilderthree roughs at the senior model, the timeline, polish rounds
Typographerdesk:typographerseniorthe type moves: sizes, rise distances, what may animate
Video Editordesk:video-editorbuilderpacing on the recording, the exports per size and platform
Art Directordesk:art-directordirectorthe pick on the boards and the first frames, the notes
Creative Directordesk:creative-directordirectorsign-off on the recorded frames

Inputs. Text (the idea, the words if any, where it plays), a brand file, an existing HTML (a card, a screen) to animate, a logo SVG for a sting.

Proof sizes. slide (16:9) by default, ig-story (9:16) and ig-square when asked. Recorded, not just screenshotted.

Output under .desk/out/<id>/:

  • final.html: the timeline per the file contract.
  • board.html: one [data-frame] per beat at the primary size.
  • timeline.md: beat, start, end, what moves, easing, hold reason.
  • clip-16x9.webm (and -9x16, -1x1 when asked), .mp4 beside each when ffmpeg is on PATH, poster-*.png from the first frame.
  • renders/ with the held frames proof checked.

Run. Read ${CLAUDE_PLUGIN_ROOT}/skills/desk/SKILL.md now and follow it from step 0 to step 7 as the Design Manager with the desks above. Command name for state and events: motion-design. Changes to the loop for this command:

  • The board comes first: the Storyboard Artist writes the beats and draws board.html, the Copy Editor passes any words. Roughs are three timelines on that board, each in a pattern from the standard.
  • The pick is made on the first, middle and last frame of each rough plus its recording. Polish rounds revise final.html only.
  • Proof is the recorder: record at each size, then the reading-time, flash and held-frame contrast checks. A failed hold is a proof failure, back to the Motion Designer.
  • --loop makes the last 300ms ease into the first frame and the Creative Director checks the seam.

The ask: $ARGUMENTS

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free