skills.rest
popmechanic
popmechanicCOMMUNITY
Explore all skills by this author →
GitHub

design

Transform design reference HTML into a Vibes app with TinyBase data bindings.

134|5|Updated Dec 24, 2025
Search Tags:#workflow#design#html#react#transformation#design-reference#tinybase
One-click install
npx skills add https://github.com/popmechanic/VibesOS --skill design-popmechanic
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/popmechanic/VibesOS/tree/main/skills/design
Command: npx skills add https://github.com/popmechanic/VibesOS --skill design-popmechanic

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design reference HTML is often static and non-interactive. This skill performs a safe, deterministic transformation to a Vibes app, preserving structure and styles while wiring in TinyBase data.

Core Features & Use Cases

  • Self-contained transformer that takes a complete design reference HTML file and outputs a working Vibes app with React bindings.
  • Preserves CSS blocks exactly and converts HTML attributes to React-compatible syntax (class → className, for example) for a pixel-faithful result.
  • Use Case: you have a design.html, mockup, or static prototype and need a ready-to-run Vibes app that matches the design exactly.

Quick Start

Provide design.html to the skill and invoke it as /vibes:design to generate a ready-to-run Vibes app.

Frequently Asked Questions about design

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

FAQPage Schema
How do I convert a static HTML mockup into a React app with TinyBase?▼

To convert a static HTML mockup into a React app with TinyBase, provide your design.html file to the transformation skill. It outputs a ready-to-run Vibes app with React bindings and wired TinyBase reactive data.

Can I turn design reference HTML into a working app without altering the CSS?▼

Yes, you can turn design reference HTML into a working app without altering the CSS. The transformation process preserves style blocks verbatim and converts HTML attributes to React-compatible syntax for a pixel-faithful result.

What is the best way to match a static prototype exactly when building a Vibes app?▼

The best way to match a static prototype exactly when building a Vibes app is using deterministic transformation rules. It copies styles verbatim, preserves HTML structure, and wires TinyBase data bindings without reinterpretation.

Does the Vibes design workflow support converting HTML attributes like class to React className?▼

Yes, the Vibes design workflow supports converting HTML attributes like class to React className. It automatically translates standard HTML attributes into their React-compatible equivalents during the app generation process.

Why does my transformed HTML design look different in the React app?▼

If your transformed HTML design looks different in the React app, it may be due to non-deterministic conversion. This skill enforces deterministic rules to copy style blocks verbatim and preserve exact HTML structure, preventing visual discrepancies.

Do I need a complete HTML file to generate a Vibes app from a mockup?▼

Yes, you need a complete HTML file to generate a Vibes app from a mockup. The transformer requires a self-contained design reference HTML file to perform a safe, deterministic transformation into a working application.

Related Skills

Explore More Design & Creative Skills→
popmechanicpopmechanic
134

design-reference

Convert design reference HTML files into React/JSX Vibes apps.

Community
Intermediate
TumeloRamaphosaTumeloRamaphosa

lottie-animations

Convert After Effects animations into Lottie assets for React apps.

Community
Advanced
ProfPowellProfPowell
4

state-management

Manage Web Component state with reactive stores, signals, and undo/redo.

Community
Intermediate
zzafergokzzafergok
1

markdown-to-html-skill

Convert Markdown documents to HTML using marked.js, pandoc, gomarkdown, or static site generators.

Community
Intermediate