Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Design Reference Transformer (Vibes)

Converts a static design.html mockup into a React + TinyBase Vibes app without reinterpreting the design.

Dev & CodingIntermediate★ 135⑂ 6AI score 8/10Last updated: Jul 27, 2026

What it does

  • Treats a complete design.html as source code to transform, not inspiration: HTML structure and CSS are preserved verbatim.
  • Supplies a deterministic conversion table (class→className, for→htmlFor, kebab-case→camelCase, inline style string→object, HTML comments→JSX).
  • Identifies only the dynamic parts (repeating lists, inputs, counts) and wires them to TinyBase hooks such as useRowIds, useCell, and useAddRowCallback.
  • Warns about CSS selectors that would leak onto the template's VibesSwitch toggle and VibesPanel menu, plus how to force a light theme.
  • Finishes with bun scripts/assemble.js app.jsx index.html and a pre/during/post transformation checklist for visual diffing.

Who it's for

  • Developers building on VibesOS (Vibes template + TinyBase).
  • Teams whose implementations keep drifting from designer-provided HTML mockups.
  • Anyone shipping pixel-faithful prototypes or demos.

Example uses

  1. Hand over design.html and say "match this exactly" — CSS is copied untouched while lists bind to stored rows.
  2. Turn a static <ul> list into useRowIds('items').map(...) with a per-row useCell child component.
  3. Convert a static form into a controlled form with value/onChange plus useAddRowCallback persistence.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/popmechanic/VibesOS/HEAD/skills/design/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the skills/design folder from the GitHub repo popmechanic/VibesOS into my ~/.claude/skills/popmechanic-design/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/popmechanic/VibesOS.git /tmp/VibesOS && mkdir -p ~/.claude/skills && cp -r /tmp/VibesOS/skills/design ~/.claude/skills/design

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open your terminal.
  2. Clone the repo: git clone https://github.com/popmechanic/VibesOS.git /tmp/VibesOS
  3. Create the skills folder: mkdir -p ~/.claude/skills
  4. Copy the skill: cp -r /tmp/VibesOS/skills/design ~/.claude/skills/design
  5. Install prerequisites: the skill depends on the VibesOS template and scripts/assemble.js, run with the bun runtime (install from https://bun.sh). Working inside the VibesOS repo (or installing it as a plugin) is recommended.
  6. Restart Claude Code, then provide a design.html and ask it to "transform this design into a Vibes app" to trigger the skill.
View source on GitHub ↗License: MIT