design-reference

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

134|5|Updated Dec 24, 2025

Search Tags:#automation #React #HTML #transformation #Vibes #design-reference

Ready to run

npx skills add https://github.com/popmechanic/vibes-cli --skill design-reference

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-reference
Source: https://github.com/popmechanic/vibes-cli/tree/main/skills/design-reference
Command: npx skills add https://github.com/popmechanic/vibes-cli --skill design-reference

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill converts a design reference HTML into a Vibes-ready app, preserving the original structure and styles while wiring up React/Fireproof components for immediate execution.

Core Features & Use Cases

Deterministic HTML-to-React transformation that preserves markup and CSS.
Automatic wiring to Fireproof for data persistence and a working app scaffold.
Use Case: given a complete design.html, produce a pixel-faithful Vibes app that can be assembled and run with a single command.

Quick Start

Provide a design.html input to transform; the skill outputs app.jsx and an assembly-ready project that matches the reference.

Frequently Asked Questions about design-reference

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

FAQPage Schema

How do I convert a static HTML design mockup into a React app?▼

Converting static HTML to a React app requires deterministic transformation of markup and CSS into JSX. A design.html file is transformed into a pixel-faithful, ready-to-run application scaffold with data persistence wired for immediate execution.

Do I need a local Node environment to transform HTML into a Vibes app?▼

Yes, transforming HTML into a Vibes app requires a local Node environment. The deterministic conversion process relies on the vibes-skill assembly workflow to generate the ready-to-run React/JSX application scaffold from your design.html input.

Can I use a static HTML prototype to generate a ready-to-run React app with data persistence?▼

Yes, a static HTML prototype can generate a ready-to-run React app with Fireproof data persistence. The transformation preserves original styles and structure while automatically wiring components for immediate assembly and execution.

What is the best way to ensure pixel-faithful conversion from HTML to React JSX?▼

Pixel-faithful conversion from HTML to React JSX is achieved through deterministic transformation that preserves the original markup and CSS. A complete design.html is processed to output an app.jsx that matches the visual reference exactly.

Does converting HTML to Vibes app preserve my original CSS styles?▼

Yes, converting HTML to a Vibes app preserves your original CSS styles and markup structure. The deterministic transformation ensures the resulting React/JSX application remains visually identical to the provided design reference input.