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

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
One-click install
npx skills add https://github.com/popmechanic/vibes-cli --skill design-reference
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
popmechanicpopmechanic
134

design

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

Community
Advanced
popmechanicpopmechanic
134

vibes

Generate a React app with Fireproof database and Clerk authentication.

Community
Advanced
fanguyunfanguyun

react-expert

Generate React 18+ components with TypeScript and state management.

Community
Advanced
zzafergokzzafergok
1

markdown-to-html-skill

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

Community
Intermediate