agentleFS
Sign inStart free
tizonaitizonai/hyperui/skills/video/SKILL.md

video

Skill2 starsChanged 29 days agoApache-2.0View on GitHub

Make a short promo/demo video of a web product with HyperFrames (HTML → MP4), reusing the project's real brand tokens and components. Use when asked for a promo, teaser, product video, launch clip, social clip.

61 other projects use a version of this.

Adopted by

Most recently taken up by

Used with

Projects with it also use popups, co-marketing 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.
  • CesarjoquinSkill

    popups

    When the user wants to create or optimize popups, modals, overlays, slide-ins, or banners for conversion purposes. Also use when the user mentions "exit intent," "popup conversions," "modal optimization," "lead capture popup," "email popup," "announcement banner," "overlay," "collect emails with a popup," "exit popup," "scroll trigger," "sticky bar," or "notification bar." Use this for any overlay or interrupt-style conversion element. For forms outside of popups, see cro. For general page conversion optimization, see cro.

    Also in 22 projects that use this

  • CesarjoquinSkill

    co-marketing

    When the user wants to find co-marketing partners, plan joint campaigns, or brainstorm partnership opportunities. Use when the user says 'co-marketing,' 'partner marketing,' 'joint campaign,' 'who should we partner with,' 'integration marketing,' 'cross-promotion,' 'collaborate with another company,' 'partnership ideas,' or 'co-brand.' For customer referral programs, see referrals. For launch-specific partnerships, see launch.

    Also in 24 projects that use this

  • coreyhaines31Skill

    marketing-council

    When the user wants multiple expert perspectives on a marketing question — a simulated board of advisors staffed by legendary marketers (Seth Godin, David Ogilvy, Eugene Schwartz, April Dunford, Rory Sutherland, Alex Hormozi, Byron Sharp, and more). Also use when the user mentions 'marketing council,' 'board of advisors,' 'advisory board,' 'what would Seth Godin say,' 'what would Ogilvy think,' 'channel Hormozi,' 'get multiple perspectives,' 'debate this,' 'have the council review,' 'marketing mentors,' or asks how a famous marketer would approach their problem. The council gives each advisor's take through their documented frameworks, surfaces where they disagree, and synthesizes a recommendation. For executing the winning direction, hand off to positioning, offers, copywriting, ads, or the relevant skill.

    Also in 17 projects that use this

  • ukunal91appSkill

    community-marketing

    Build and leverage online communities to drive product growth and brand loyalty. Use when the user wants to create a community strategy, grow a Discord or Slack community, manage a forum or subreddit, build brand advocates, increase word-of-mouth, drive community-led growth, engage users post-signup, or turn customers into evangelists. Trigger phrases: "build a community," "community strategy," "Discord community," "Slack community," "community-led growth," "brand advocates," "user community," "forum strategy," "community engagement," "grow our community," "ambassador program," "community flywheel.

    Also in 26 projects that use this

  • roerohanSkill

    emails

    When the user wants to create or optimize an email sequence, drip campaign, automated email flow, or lifecycle email program. Also use when the user mentions "email sequence," "drip campaign," "nurture sequence," "onboarding emails," "welcome sequence," "re-engagement emails," "email automation," "lifecycle emails," "trigger-based emails," "email funnel," "email workflow," "what emails should I send," "welcome series," or "email cadence." Use this for any multi-email automated flow. For cold outreach emails, see cold-email. For in-app onboarding, see onboarding.

    Also in 19 projects that use this

  • +7 more from Cesarjoquin

The file

We split this skill into the rules it gives an agent

7 rules. 0 are common, 5 are distinctive, and 2 are very specific to this project.

  • 0

    Common

    Most of the 52 edited versions we read keep these.

  • 5

    Distinctive

    This author's own choices. Worth a look.

  • 2

    Very specific

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

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

    Check that the HyperFrames skills exist in .claude/skills/hyperframes (project) or ~/.claude/skills/hyperframes (global).

    line 29
  2. Distinctive:

    Duration: default 12 s. Anything over 20 s needs a reason.

    line 37
  3. Distinctive:

    No lorem ipsum, no placeholder marks.

    line 43
  4. Distinctive:

    No layout-property animation, no bounces unless the brand already bounces.

    line 53
  5. Distinctive:

    Check every scene at 50% size and at full size.

    line 71
  6. Distinctive:

    If any item fails, fix it in the composition and re-render.

    line 91
  7. Very specific:

    Write the render path and the next step to .hyperui/state.md, and one ADR-lite line per settled decision (message, duration, aspect, copy …

    line 95

“Common” is measured: kept by at least 6 in 10 of the 52 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

hyperui:video — promo clip with HyperFrames

HyperFrames renders HTML/CSS/JS compositions to deterministic MP4. This skill owns the brief and the brand; the installed /hyperframes skills own the framework. Never reimplement their API or project layout — hand the composition to them.

0. Before anything

  • Resolve the project root with ${CLAUDE_PLUGIN_ROOT}/scripts/profile.sh root and use it (absolute paths) for .hyperui/ and for every repo read/write. If <root>/.hyperui/profile.md is missing, invoke the hyperui skill first (it onboards and routes); otherwise read profile.md and state.md and never re-ask what they hold. With several roots (profile.sh roots), work in the repo the request or the touched file belongs to, with that repo's .hyperui/ (rules: ${CLAUDE_PLUGIN_ROOT}/references/workspace.md). Profile fields used: archetype, conversation_language, product_languages, design.*; also .hyperui/design.md: the picked direction's fonts, palette and motion register are the clip's brand.
  • Clip copy language = product_languages[0] unless the user says otherwise.
  • Reply in the conversation language; keep internal reasoning, code and files in English.
  • Tone per archetype: non-tech → one or two plain sentences per step; dev → the fact + one line of why; senior → the fact.

1. Preflight

Check that the HyperFrames skills exist in .claude/skills/hyperframes (project) or ~/.claude/skills/hyperframes (global). If neither exists, tell the user to run /hyperui:setup and stop here.

2. Brief (ask only what is missing)

  • Product and the URL it points to.
  • One message: the single sentence the viewer must leave with. One, not three.
  • Duration: default 12 s. Anything over 20 s needs a reason.
  • Aspect: 16:9 default (landing/YouTube); offer 9:16 for Stories/Reels/TikTok.
  • Brand tokens: find where they live — globals.css custom properties, Tailwind config, a tokens.* file, a design-system package. Read them. Never invent a palette or typeface: if the project has none, ask for a reference or stop.
  • Real assets: product screenshots, the actual icon/logo, real copy from the site. No lorem ipsum, no placeholder marks.

3. Composition rules (pass these to the /hyperframes skills)

  • Real copy only, taken from the product's own pages.
  • ≤ 15 s → max 3 scenes. Hook (what it is) → proof (one real screen or demo moment) → end card.
  • Type-led scenes: the headline is the hero; images support it. Type uses the project's display font and weight; sizes read at 50% playback size.
  • Motion on transform and opacity only (translate, scale, clip reveals, fades). No layout-property animation, no bounces unless the brand already bounces.
  • Easing language: see the /hyperui:motion skill (same curves on the site and in the video so they feel like one product).
  • Brand colors from the tokens; one accent, generous negative space, safe margins ≥ 5% of the frame on every side.
  • End card: logo/mark + product name + URL, held ≥ 2 s, static or near-static.
  • Audio is optional. If a track is used, duck it under any voice and end on silence.

4. Build → preview → render

  1. Let the installed /hyperframes skills scaffold the project in their layout (they choose folders, manifest, and timeline API).

  2. Preview:

    npx hyperframes preview

    Check every scene at 50% size and at full size.

  3. Render:

    npx hyperframes render --output <product>-<aspect>-<duration>s.mp4
  4. Report: output path, duration, aspect, file size, and which tokens/assets were used. Record the render path (and the preview command) in .hyperui/state.md.

5. QA checklist (before reporting done)

  • Every headline legible at 50% size.
  • Nothing clipped at the safe margins; no text touching the frame edge.
  • Colors and type match the live product (open it side by side).
  • Only transform/opacity animate; no janky layout shifts in preview.
  • End card holds ≥ 2 s with the real URL.
  • Duration matches the brief (±0.5 s).
  • Audio, if any, does not clip and ends clean.

If any item fails, fix it in the composition and re-render; do not ship with a known miss.

6. Close the turn

Write the render path and the next step to .hyperui/state.md, and one ADR-lite line per settled decision (message, duration, aspect, copy language) to decisions.md (date · decision · why · source).

Sources

Cite only URLs that are listed in a skill/reference or that you opened this session; never construct or guess a URL.

HyperFrames API and layout come from its docs and skills. Canonical references: references/sources.md.

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