zhukang 1c7abd81d1 All 310 Manus skill-hub community skills as a Kortix marketplace registry

- 310 registry:skill items, 1528 files, 7 categories (hub tags)
- registry.json generated by @kortix/registry buildRegistry
- nested SKILL.md in sn-da-* renamed SUBSKILL.md (no phantom skills)
- provenance + licenses: SOURCES.md

2026-09-15 13:37:20 +08:00

1.7 KiB

Raw Permalink Blame History

Wiring Components

Components are effect snippets — HTML, CSS, and optionally JS that you merge directly into an existing composition. Unlike blocks, components have no standalone timeline; they participate in the host composition's timeline.

General process

Run hyperframes add <component-name>
Open the installed file (e.g., compositions/components/grain-overlay.html)
Read the comment header for usage instructions
Copy the parts into your host composition:
- HTML elements — inside your <div data-composition-id="...">
- CSS styles — into your composition's <style> block
- JS setup — into your composition's <script>, before your timeline code
- Timeline calls — into your GSAP timeline (if the component exposes them)

Example: grain-overlay (CSS-only, no timeline integration)

<!-- Paste the overlay div into your composition -->
<div
  id="grain-overlay"
  style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100;"
>
  <div class="grain-texture"></div>
</div>

Then paste the CSS keyframes and .grain-texture rule into your styles. No GSAP timeline calls needed — the grain animates via CSS @keyframes.

Example: shimmer-sweep (needs timeline integration)

See examples/add-component.md for the full shimmer-sweep walkthrough (HTML wrapping, CSS, JS setup, and timeline call).

Key principles

Components inherit the host composition's dimensions and duration
Place component HTML at the appropriate z-index relative to your content
Read the comment header in each snippet for customizable values
Run hyperframes lint after wiring to catch structural issues

1.7 KiB Raw Permalink Blame History