skills.rest
kubermatic
kubermaticOFFICIAL
Explore all skills by this author →
Website𝕏@KubermaticGitHub

prototype

Create a self-contained HTML prototype with before/after toggles.

1|2|Updated Mar 11, 2026
Search Tags:#html#single-file#interactive#prototype#ui-design#design-review#before-after
One-click install
npx skills add https://github.com/kubermatic/kubelb-dashboard --skill prototype-kubermatic
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/kubermatic/kubelb-dashboard/tree/main/.agents/skills/prototype
Command: npx skills add https://github.com/kubermatic/kubelb-dashboard --skill prototype-kubermatic

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This approach helps designers and product teams compare multiple UI change proposals by generating a self-contained, easily shareable HTML prototype that you can toggle between before and after states.

Core Features & Use Cases

  • Single-file prototype: Produces one HTML file that includes all assets and state logic.
  • Fixed control bar: Top-right bar with master toggles and per-change controls; supports dark mode if available.
  • Floating description panel: Bottom-centered panel summarizes active changes and provides quick context.
  • Real content & accuracy: Uses actual project fonts, colors, and layout patterns to reflect real design.

Quick Start

Save the concept as an HTML prototype file named prototype-prototype.html and open it in a browser to review interactivity.

Frequently Asked Questions about prototype

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

FAQPage Schema
How do I create a single HTML file for an interactive before/after UI prototype?▼

A before/after UI prototype is built as a single self-contained HTML file with a deterministic state object and an applyState() function, loading assets from a CDN to ensure it is easily shareable and runs directly in a browser.

What is the best way to compare multiple UI design change proposals?▼

Comparing UI change proposals is handled by a single HTML prototype featuring a fixed top control bar with master toggles and per-change controls, allowing users to interactively switch between different design states for design review.

Can I use my project's actual fonts and colors in an interactive HTML prototype?▼

Your project's actual fonts, colors, and layout patterns are used in the prototype to reflect real content and accuracy. The HTML file loads these assets from a CDN to ensure the visual fidelity of the UI design review.

Does the generated before/after prototype support dark mode?▼

Dark mode is supported in the generated prototype if it is available in your project. The fixed control bar at the top-right includes master toggles and per-change controls that adapt to the dark mode setting.

How do I share a UI prototype with a floating description panel for design review?▼

To share a UI prototype, you distribute the single self-contained HTML file, which features a bottom-centered floating panel that summarizes active changes and provides quick context, requiring no external dependencies to open.

Related Skills

Explore More Design & Creative Skills→
hamzaPixlhamzaPixl
2

website-layout

Restructure website layouts by updating JSX and Tailwind classes while preserving design tokens.

Community
Advanced
nexu-ionexu-io
84.7k

dating-web

Generate a self-contained HTML dating dashboard prototype with KPI grid and charts.

Official
Advanced
serejarisserejaris
215

html-draft

Generate a standalone HTML engineering diagram using Tailwind v4 and D3 v7.

Community
Intermediate
HerxinsasaHerxinsasa
1

web-artifacts-builder

Generate React and TypeScript projects bundled into single-file HTML artifacts.

Community
Intermediate