Prototype
Build interactive HTML prototypes. Use when creating clickable mockups, adding animations, linking pages, or exporting HTML.
BytesAgain2
@ckchzh
Install
$ openclaw skills install @ckchzh/prototypePrototype
Create interactive HTML prototypes with components, animations, and navigation.
Commands
create
Create a new interactive prototype HTML page with specified sections and style.
bash scripts/script.sh create --name "app-proto" --sections "nav,hero,features,footer" --theme light --output proto/
component
Generate a standalone UI component (button, modal, card, form, navbar, etc).
bash scripts/script.sh component --type modal --title "Confirm" --body "Are you sure?" --actions "cancel,confirm" --output components/
animate
Add CSS animation to an element in an existing prototype HTML file.
bash scripts/script.sh animate --input proto/index.html --selector ".hero" --animation fadeIn --duration 0.5s --output proto/index.html
link
Add click-based page navigation between prototype pages.
bash scripts/script.sh link --from proto/index.html --selector ".nav-about" --to proto/about.html
preview
Generate a preview summary of a prototype: page list, component count, linked routes.
bash scripts/script.sh preview --input proto/
export
Bundle a multi-page prototype into a single self-contained HTML file with all assets inlined.
bash scripts/script.sh export --input proto/ --output prototype-bundle.html
Output
create: HTML file(s) in the output directory with inline CSS and JScomponent: HTML snippet file for the specified componentanimate: Updated HTML file with injected CSS keyframes and classlink: Updated HTML file with onclick navigation wiredpreview: Summary printed to stdout (pages, components, links)export: Single HTML file with all pages, styles, and scripts inlined
Requirements
- bash 4+
Feedback
https://bytesagain.com/feedback/
Powered by BytesAgain | bytesagain.com
Top skills in this category
Nano Banana Pro
@steipeteGenerate/edit images with Nano Banana Pro (Gemini 3 Pro Image). Use for image create/modify requests incl. edits. Supports text-to-image + image-to-image; 1K/2K/4K; use --input-image.
AdMapix
@fly0pantsAdMapix raw data layer for ad creatives, apps, rankings, downloads/revenue, and market metadata. Returns structured JSON from the AdMapix API; the calling ag...
YouTube Watcher
@michaelgatharaFetch and read transcripts from YouTube videos. Use when you need to summarize a video, answer questions about its content, or extract information from it.
SuperDesign
@mpociotExpert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
Video Frames
@steipeteExtract frames or short clips from videos using ffmpeg.