design
Design takes a complete HTML file and mechanically converts it into a React component backed by TinyBase, preserving structure and CSS while replacing static content with reactive data bindings. The transformation follows deterministic rules—converting class attributes to className, inline styles to objects, and vanilla JavaScript to React hooks—rather than reinterpreting the design. Use this skill when you have a mockup or prototype that needs to become a functional Vibes app.
Design transforms static HTML mockups into reactive Vibes apps by converting syntax and wiring dynamic content to TinyBase.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-27
Design transforms static HTML mockups into reactive Vibes apps by converting syntax and wiring dynamic content to TinyBase. Design takes a complete HTML file and mechanically converts it into a React component backed by TinyBase, preserving structure and CSS while replacing static content with reactive data bindings. The transformation follows deterministic rules—converting class attributes to className, inline styles to objects, and vanilla JavaScript to React hooks—rather than reinterpreting the design. Use this skill when you have a mockup or prototype that needs to become a functional Vibes app.
Use it when
- Design preserves design layout in app by maintaining the exact HTML structure and CSS during conversion.
- Design applies deterministic mechanical transformation rules: HTML class attributes convert to React className.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
popmechanic/VibesOS/design · repository language: HTML
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I use the design skill to convert HTML design to React app?
Design takes a complete HTML file and mechanically converts it into a React component backed by TinyBase, preserving structure and CSS while replacing static content with reactive data bindings. The transformation follows deterministic rules—converting class attributes to className, inline styles to objects, and vanilla JavaScript to React hooks. Use design when you have a mockup or prototype that needs to become a functional Vibes app.
How does design preserve my layout when transforming to React?
Design preserves design layout in app by maintaining the exact HTML structure and CSS during conversion. Rather than reinterpreting your design, it applies mechanical transformation rules: class attributes become className, inline styles convert to JavaScript objects, and semantic markup stays intact. This ensures your visual hierarchy and spacing remain unchanged as the design becomes a working React component.
What transformation rules does design apply to HTML?
Design applies deterministic mechanical transformation rules: HTML class attributes convert to React className, inline style strings become JavaScript objects, vanilla JavaScript event handlers convert to React hooks, and static content placeholders become reactive TinyBase data bindings. These rules ensure consistent, predictable conversion from static prototype to dynamic app without reinterpreting your original design intent.
Can design integrate my mockup with TinyBase reactive data?
Yes. Design integrates design reference with TinyBase reactive data and dynamic content by replacing static HTML content with data bindings after the mechanical transformation. Once your HTML structure and styling are converted to React, design connects static placeholders to TinyBase stores, enabling your design to respond to data changes while maintaining the exact visual structure from your original mockup.
What should I prepare before using design to transform my design HTML?
Prepare a complete, well-formed HTML file containing your full design mockup or prototype. Include all CSS (inline or linked), semantic markup, and placeholder content for areas that will become dynamic. Design works best when your HTML is clean and structured; the skill will then mechanically convert it to a React component with className, style objects, and hooks while preserving every layout detail.
Does design handle both static styling and dynamic content binding?
Design handles both. It mechanically transforms all static CSS and styling rules into React-compatible format (className and style objects), then integrates reactive TinyBase data bindings to replace static content. This two-phase approach ensures your design reference maintains pixel-perfect fidelity while becoming fully dynamic and connected to your app's data layer.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
> Plan mode: If you are planning work, this entire skill is ONE plan step: "Invoke /vibes:design". Do not decompose the steps below into separate plan tasks.
Display this ASCII art immediately when starting:
░▒▓███████▓▒░░▒▓████████▓▒░░▒▓███████▓▒░▒▓█▓▒░░▒▓██████▓▒░░▒▓███████▓▒░
░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░
░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░
░▒▓█▓▒░░▒▓█▓▒░▒▓██████▓▒░ ░▒▓██████▓▒░░▒▓█▓▒░▒▓█▓▒▒▓███▓▒░▒▓█▓▒░░▒▓█▓▒░
░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ ░▒▓█▓▒░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░
░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ ░▒▓█▓▒░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░
░▒▓███████▓▒░░▒▓████████▓▒░▒▓███████▓▒░░▒▓█▓▒░░▒▓██████▓▒░░▒▓█▓▒░░▒▓█▓▒░
Design Reference Transformer
Transform a complete design reference HTML file into
(truncated - see the full file via the links below)
File tree — 1 file
skills/design/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Transform a static HTML design file into a working React/TinyBase Vibes app”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Sell transforms an existing Vibes app into a production-ready SaaS platform with multi-tenant architecture, automatic Pocket ID authentication, and subscription controls. The skill generates a unified HTML file that routes traffic by subdomain—landing page, tenant apps, and admin dashboard all from a single deployment.
Vibes Brainstorm walks you through friendly, non-technical questions to clarify your app idea before building begins. It asks about features, sharing, and how your app works—one question at a time—then produces a brief ready for code generation.
Vibes is a self-contained app generator that creates React web applications powered by TinyBase for reactive, real-time data management. Choose between a browser-based editor with live preview or terminal-driven generation, then deploy your app as a standalone HTML file. Ideal for rapid prototyping, single-page applications, and collaborative tools.
Riff creates multiple app variations simultaneously, each representing a different interpretation rather than just visual tweaks. Gather your requirements once, then generate and rank all variations in parallel to find the strongest concept.
Launch is a self-contained SaaS pipeline that generates a complete app, adds authentication and billing, and deploys it live—all in one invocation. Choose between a visual editor with live preview or terminal-based generation, then let the skill handle setup, configuration, and deployment automatically.
Factory transforms a Vibes app into a revenue-generating SaaS by automating subscription setup, AI token billing, and Vibe Token economics for partner rewards. It handles Stripe integration, deploys to Cloudflare Workers, and manages token-backed revenue sharing through a unified configuration pipeline.
More skills autoresearch (MIT) · cloudflare (MIT)