{"enrichment":{"faq":[{"a":"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\u2014converting 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.","q":"How do I use the design skill to convert HTML design to React app?"},{"a":"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.","q":"How does design preserve my layout when transforming to React?"},{"a":"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.","q":"What transformation rules does design apply to HTML?"},{"a":"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.","q":"Can design integrate my mockup with TinyBase reactive data?"},{"a":"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.","q":"What should I prepare before using design to transform my design HTML?"},{"a":"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.","q":"Does design handle both static styling and dynamic content binding?"}],"shadow_tags":["html-to-react","design-preservation","mockup-transformation","visual-fidelity","mechanical-conversion","prototype-to-app","css-passthrough","syntax-adaptation","layout-integrity","design-reference"],"summary_rewrite":"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\u2014converting class attributes to className, inline styles to objects, and vanilla JavaScript to React hooks\u2014rather than reinterpreting the design. Use this skill when you have a mockup or prototype that needs to become a functional Vibes app."},"files":[{"bytes":10875,"path":"skills/design/SKILL.md","sha256":"46391d673f00824c06285fb776a16bdc33dfd2f8f830cd87e59f6e16c476be4a","url":"https://skillfed.io/files/popmechanic/VibesOS/design/80b0000f/SKILL.md"}],"id":"popmechanic/VibesOS/design","links":{"html":"https://skillfed.io/popmechanic/VibesOS/design","md":"https://skillfed.io/popmechanic/VibesOS/design.md","repo":"https://github.com/popmechanic/VibesOS"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":6,"language":"HTML","last_updated":"2026-07-27","license":"MIT","name":"design","publisher":"popmechanic","stars":134},"relations":{"similar":[{"id":"popmechanic/VibesOS/sell"},{"id":"popmechanic/VibesOS/vibes"},{"id":"popmechanic/VibesOS/launch"},{"id":"popmechanic/VibesOS/riff"},{"id":"popmechanic/VibesOS/autoresearch"},{"id":"popmechanic/VibesOS/factory"},{"id":"bobmatnyc/claude-mpm-skills/daisyui"},{"id":"popmechanic/VibesOS/test"},{"id":"manutej/luxor-claude-marketplace/react-patterns"},{"id":"manutej/luxor-claude-marketplace/react-development"}]},"slug":{"owner":"popmechanic","repo":"VibesOS","skill":"design"},"version":"80b0000f"}