skills.rest
hugotown
hugotownCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

contribute-catalog

Author HyperFrames registry blocks and components and ship them as upstream pull requests.

Updated Oct 16, 2025
Search Tags:#pull request#captions#registry#gsap#vfx#video composition#hyperframes
One-click install
npx skills add https://github.com/hugotown/dotfiles --skill contribute-catalog-hugotown
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: contribute-catalog
Source: https://github.com/hugotown/dotfiles/tree/main/agents/skills/contribute-catalog
Command: npx skills add https://github.com/hugotown/dotfiles --skill contribute-catalog-hugotown

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Contributing a new caption style, VFX block, transition, or component to the HyperFrames public registry involves many error-prone steps: correct scaffolding, naming conventions, GSAP timeline rules, validation, preview generation, and PR submission. This Skill guides the entire workflow so nothing is missed. ## Core Features & Use Cases - Guided six-step workflow: Clarify, Scaffold, Build, Validate, Preview, and Ship a new registry block or component. - Copy-paste templates: Starter HTML templates for caption blocks, Three.js VFX blocks, and reusable components, plus registry-item.json schemas. - Quality gate enforcement: Lint, validate, format with oxfmt, update registry.json, generate catalog docs, and publish a preview before opening the PR. - Use Case: A motion designer wants to contribute a new karaoke caption style to the HyperFrames catalog. The Skill scaffolds registry/blocks/cap-swoosh/, applies the caption template with correct ID prefixes and hard-kill timeline rules, runs hyperframes lint and validate, generates the catalog docs page, and opens a PR with a preview link. ## Quick Start Help me create a new karaoke caption block called cap-neon and submit it as a PR to the HyperFrames registry.

Frequently Asked Questions about contribute-catalog

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I contribute a new caption style to the HyperFrames registry?▼

Scaffold a folder under registry/blocks with an HTML composition and registry-item.json, build it using the caption template with GSAP timeline rules, then run hyperframes lint and validate. Finally update registry.json, generate catalog docs, publish a preview, and open a PR.

What is the difference between a HyperFrames block and a component?▼

A block is a standalone composition with fixed dimensions and duration, such as caption styles or lower thirds. A component is a reusable snippet with no fixed dimensions, like text effects or overlays that adapt to any parent composition.

Why does my HyperFrames caption animation fail validation?▼

Common causes include using tl.from with opacity at the same position as tl.set, missing hard-kill tl.set calls at group end, unprefixed element IDs, or using Math.random and Date.now. All timelines must be paused and IDs must use the block prefix.

Can I use requestAnimationFrame in a Three.js VFX block?▼

No. VFX blocks must render via tl.eventCallback("onUpdate", renderScene) so frames stay seekable with the GSAP timeline. Use a state proxy object that GSAP animates and the render function reads, with three@0.147.0 from CDN.

Do I need a GitHub account to submit a HyperFrames registry PR?▼

Yes, opening a pull request requires a GitHub account. Sign up at github.com/signup, authenticate with gh auth login, then push your branch and create the PR with a hyperframes.dev preview link.

Related Skills

Explore More Design & Creative Skills→
taewook486taewook486

moai-domain-design-dna

Extract design tokens and effects from reference designs into a JSON profile for artifact generation.

Community
Advanced
bwhtechbwhtech

hyperframes-registry

Install and wire HyperFrames registry blocks into video compositions.

Official
Intermediate
jetteimjetteim

doc

Render DOCX pages to PNG images for layout verification.

Community
Intermediate
grandameniumgrandamenium
88

community-publish

Package local templates for community submission while stripping PII and scanning for secrets.

Community
Intermediate