Skills
.Work. You
Rest

design-reference

Community

Turn a design HTML into a ready-to-run Vibes app.

Design & Creative#automation#React#HTML#transformation#Vibes#design-reference
Authorpopmechanic
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: design-reference
Download link: https://github.com/popmechanic/vibes-cli/archive/main.zip#design-reference

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.