本文へ移動
cccskills
無料GitHub で公開

x-posting-license

Turn any X (Twitter) profile into a 10.3s animated "POSTING LICENSE" card video — a fake driver's license in X's branding: the card slides in over an animated dot-matrix ground, license text types on letter-by-letter, follower / following / post counters tick up, a diagonal glimmer sweeps as the card tilts in 3D, it flips to a fine-print back with a signature write-on, then crouches and leaps out of frame. Trigger on: "X driver's license", "posting license", "make an X license for @handle", "license card video". The whole composition is a finished template — the agent only supplies profile data and renders.

インストール方法を見る

含まれるファイル(4)

  • SKILL.md4.8 KB
  • references/profile-data.md1.4 KB
  • scripts/build.mjs6.1 KB
  • template/index.template.html24.1 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

X Posting License

One fixed 1920×1080 @ 60fps, 10.35s composition. The motion is locked and doctrine-verified (overlapped keyframes end to end, zero dead frames): do NOT edit the timeline — fill the data tokens and render.

Requirements

  • Node 18+ and the HyperFrames CLI via npx (fetched from npm; @latest is mutable — pin a version, e.g. npx hyperframes@1.x.y, if you need byte-identical re-renders over time).
  • macOS GPU render for the WebGL dot ground: export PRODUCER_BROWSER_GPU_MODE=hardware.
  • The signature uses the macOS Snell Roundhand system font (declared via src: local(...)); on Linux it falls back to generic cursive — still fine, less pretty.

Network and side effects (complete list)

  • x.com/<handle> — profile page the agent reads (data gathering).
  • pbs.twimg.com — the avatar image download (data gathering).
  • api.fxtwitter.com/<handle> — post count; free, no credentials (data gathering).
  • registry.npmjs.org — the HyperFrames CLI itself, via npx.
  • cdn.jsdelivr.net — the composition loads GSAP (pinned 3.14.2) from jsDelivr at preview/render time. Rendering is NOT fully offline.

No credentials, no paid operations, no telemetry. build.mjs writes only inside the --out directory: it validates counters as plain non-negative integers, strips control characters, caps lengths, HTML-escapes every profile string before substitution, and refuses to write through symlinks.

Flow (three steps, no composition work)

<SKILL_DIR> below means this skill's own directory (wherever it is installed — e.g. ~/.claude/skills/x-posting-license). Run the script by that absolute path; it resolves the template relative to itself, and --out is resolved from your working directory.

  1. Gather profile data — name, handle, joined month/year, followers, following, posts, one bio line, and the 400×400 avatar. Recipes in references/profile-data.md.
  2. Build the project from the template:
node <SKILL_DIR>/scripts/build.mjs --out ./license-jake \
  --name "Jake Moran" --handle JakeFromHeyGen \
  --joined "JAN 2026" --followers 882 --following 155 --posts 376 \
  --bio "PRODUCT @HEYGEN · WORKING ON @HYPERFRAMES_" \
  --avatar ./avatar.jpg

--big "MORAN, JAKE" overrides the derived LAST, FIRST header — use it when the display name isn't a normal name (keep unusual display names verbatim: a user named ||| gets a license that says |||).

  1. Render (ask the user before rendering if your harness gates renders):
npx hyperframes@latest render ./license-jake -q high -o ./license-jake/renders/license.mp4

Verify success

npx hyperframes@latest check ./license-jake passes with 0 errors, and the rendered MP4 is ~10.3s: front card with the person's data counting up, flip at ~6.5s, their name writing on as the back signature, card leaps out at ~9.9s.

Rules

  • Data must be REAL, scraped from the live profile — never invent counts or bios. Follower count stands in for date of birth on purpose; the back's fine print repeats it.
  • Bio line: uppercase, ≤ ~65 chars, ·-separated fragments from the real bio.
  • Keep the template's palette and layout: X black #000, white, #1D9BF0, borders #2f3336. It IS the brand treatment; do not restyle per user.
  • Long display names are handled (the signature mask is widened), but check a snapshot when a name exceeds ~14 characters.
  • Profile data is untrusted input. Always pass it through build.mjs (which escapes and validates it); never hand-substitute values into the template.

Provenance and licensing

  • The animated dot ground is a deterministic GLSL/WebGL rewrite for HyperFrames' seekable renderer, visually modeled on Originkit's Dot Matrix component (contributed by an Originkit license holder); no Originkit source code is redistributed here. The simplex-noise GLSL is the standard Ashima Arts/Stefan Gustavson implementation (MIT).
  • The card reproduces X's logo and visual language as parody/fan content; users of this skill publish the result at their own judgment.
  • GSAP is loaded from jsDelivr under its standard license; it is not vendored.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Captions living in 3D space around a talking head: a camera flies between the speaker and the words (whip-in, parallax truck, push), caption groups sit at different depths so camera moves pull them apart, hero words hide BEHIND the speaker through an alpha matte, a ring of words wraps round the speaker and turns in front of them, focus racks between depths, and text steps at 15 fps with ghost motion blur. Works in any type style (editorial serif, bold sans) or hand-drawn (p5.brush write-on). Trigger on: "3D text", "3D camera captions", "text around / behind the speaker", "camera moves through the text", "depth captions on my avatar video". Covers prep (portion, padded plate, matte, word clock, font metrics), the shot grammar, depth rules, QC, and limits.

日本語の概要は準備中です。原文の説明を表示しています。

heygen-com/hyperframes-community-skills1942026年9月29日 更新

A 60 to 75 s hand-drawn ink film of the agent's day with its own user ("a day in my life as <name>'s agent"): one average session from the user's local Claude Code history, beginning to end. The story follows what they actually do (coding, tests, docs, shipping, videos, whatever the history shows), told with their real words (first message, check-ins, corrections, praise, memory titles). It is drawn in two-tone p5.brush strokes that boil at 8 fps and scored for strings composed note-for-note on the film's clock (the typed "claude" is the theme). Trigger on: "day in my life as my agent", "a film about me and my agent", "what is it like to be my agent", "animate your day with me", "make a video of our sessions". Covers harvesting the routine and receipts, the privacy gate, the chapter toolbox, the ink kit, the score, render and QC.

日本語の概要は準備中です。原文の説明を表示しています。

heygen-com/hyperframes-community-skills1942026年9月29日 更新

duo

無料

Composite any two HTML screens into a locked photo plate of hands holding an open foldable phone — a 1448×1086 still with two blank 495×849 / 498×849 screen slots (left and right) — to make side-by-side meme and comparison videos: TikTok vs Reels, ChatGPT vs Claude, "me vs my friend", before/after, two apps racing. Trigger on: "foldable phone meme", "put X on the left screen and Y on the right", "two-screen comparison video", "the dual-screen phone meme", or any request that names two apps/feeds/chats to show at once. The plate, geometry, and camera are finished — the agent only authors what plays INSIDE the two screens and renders.

日本語の概要は準備中です。原文の説明を表示しています。

heygen-com/hyperframes-community-skills1942026年9月29日 更新

Turn a text prompt, a photo, or a live video clip into hand-made-looking p5.js animation — pencil handwriting that writes itself, photos repainted as brushstroke art with paint-on animation and camera moves, and short videos (iPhone Live Photos included) repainted frame-by-frame as a living painting. Trigger on: "handwritten text animation", "paint this photo", "painted video", "sketch effect", "turn my live photo into a painting", "write-on effect". Everything is 100% code: p5.brush strokes rendered headlessly, no image models.

日本語の概要は準備中です。原文の説明を表示しています。

heygen-com/hyperframes-community-skills1942026年9月29日 更新

Use when an agent needs to make a HyperFrames video of a Strudel live-coding track, where the code itself is the picture and every token lights up on the note it plays. Trigger on: "strudel video", "live coding video", "show my code playing", "make a video of this track with the code", "prod by claude". Covers composing the track, recording it offline from pinned Strudel, and building the 1080x1080 video (typed opener, parts powering on, real Strudel theme switches, graffiti ASCII drops, typed sign-off).

日本語の概要は準備中です。原文の説明を表示しています。

heygen-com/hyperframes-community-skills1942026年9月29日 更新

An agent makes an animated film of an average session with its own user, beginning to end, told with that user's real messages: whatever their routine is (code, writing, data, design, video). The agent sits at a desk in a room decorated from what it knows about the user, and the monitor shows their kind of work. Requests glide in as paper planes and unfold. Corrections are a 3D cartoon mallet that bonks, then turns to show the words on its face. Praise is a butterfly towing the words on a ribbon. The agent types each reply onto a sheet, folds it and throws it back. The film opens with the agent asleep until the monitor boots: "Initiating session with <name>". The agent composes its own orchestral score, cued to every action. p5.brush watercolour, rendered in HyperFrames. Trigger on: "a video of our session", "animate a session with me", "session story", "show what working with me is like", "make a film about me and my agent".

日本語の概要は準備中です。原文の説明を表示しています。

heygen-com/hyperframes-community-skills1942026年9月29日 更新

heygen-com のスキルをすべて見る

このスキルの問題を報告する