About this skill

Problem

Customer demos often fail with wireframes or low-effort prototypes: pages exist, but they look unfinished, data feels placeholder, and mobile, admin, and executive views are inconsistent. This skill turns high-fidelity H5 demo generation into a reusable engineering spec for enterprise-style dual-platform prototypes.

How It Works

It prioritizes tokens and state before pages:

variables.css defines color, spacing, typography, and radii; base.css, h5.css, admin.css, and exec.css build on it.
store.js handles seed, reset, roles, permissions, and page data, while utils.js covers AI simulation and intent matching.
h5.html is the mobile-first app with TabBar, route guards, modals, alert banners, and AI result cards; admin.html is the optional PC admin SPA.
Desktop preview adds a phone simulator frame and uses safe-area-inset for notches and bottom occlusion.

The skill enforces three high-fidelity constraints: visual consistency, complete interactions, and believable data. Animations favor CSS transitions, and state persists in localStorage where possible.

Boundaries

It is useful for sales demos, internal reviews, solution presentations, and workflow validation, but not for production frontend delivery. If the venue has restricted networking, local vendor assets or offline mirrors must be prepared beforehand. If the workflow depends on backend services, SSO, complex charts, or realtime collaboration, this skill only provides a high-fidelity shell, not the real service or permission system.

Screenshots

Use Cases

Before a sales demo, build clickable H5 prototypes for employee self-service, manager dashboards, and executive views.
During solution reviews, generate mobile demos with role switching, route guards, and believable seed data instead of static screenshots.
In restricted on-site networks, preview high-fidelity H5 locally or over a local HTTP server to verify navigation, persistence, and AI flows.
When reporting KPI tracking, alert banners, and decision dashboards, create pixel-level H5 views and an admin shell to support data storytelling.

Best For

Solutions architects preparing sales demos who need clickable prototypes for multi-role enterprise apps.
H5 engineers who need CSS variables, localStorage, and route guards to structure high-fidelity pages.
Consultants presenting to business owners who need dashboards, alerts, and data storytelling to support discussions.
Delivery teams doing offline on-site demos who need H5 files that open directly or preview over local services.