Vibe coding React Color Picker using Google Antigravity

I vibe-coded an MVP version of Color Picker this weekend for my ReactJS/NextJS projects using Google Antigravity. It was less of a self-test of JavaScript and more of a challenge to myself, to see if I can use Prompt Engineering to build something that is commonly used in my projects.

After initial research, to make it framework independent, and to keep everything in Shadow DOM, I finalized using Lit, Open Web Components, and Rollup module bundler.

Salient Features:

• Eye Dropper using Chrome EyeDropper API
• HTML Form Compatibility using ElementInternals Interface
• HEX, RGBa output

Upcoming Features:

• Canvas-based fallback EyeDropper for Firefox
• Multiple layouts for better accessibility

Initial Prompt Used:

Role
Act as a senior frontend architect. Scaffold a universal UI library for a color picker using the Open Web Components generator and Lit

Instructions

• Create a universal color picker library where output must be that works natively in jQuery, ReactJS (handle events via props), and NuxtJS, NextJS (handle window undefined checks) using Web Component API.
• It should use Lit and the open web components generator as a starting point.
• There must be no external dependencies. It should be compiler independent, should not use Vite, Babbel, or turbopack, or any kind of CSS loader.
• All CSS must be self-contained, encapsulated within the component (no separate .css file)
• Build output should be an ESM module and a UMD bundle
• It should use the rollup, rollup.config.js must be configured to ensure this 'compiler-independent distribution.'
• Implement a standard CustomEvent (e.g., color-change that bubbles and is composed to cross the Shadow root boundary
• Implement a Web Test Runner, also use @open-wc/testing-helpers to run automated accessibility audits

Gaurdrails

• NextJs and Nuxt execute code on the server where window and document do not exists, ensure all browser-specific API's (window, document, customElements are wrapped in checks or executed only after the component has mounted
• The library must be importable in a Node.js environment without throwing "ReferenceError: window is not defined."
• The component must use bubble: true and composed: true for all CustomEvents. For React, provide a small wrapper or using Ref to ensure seamless event binding in React 18/19
• Avoid importing heavy external color-math libraries, write lightweight internal utilities instead
• Strictly use shadow dom for style encapsulations
• If user puts <color-picker> inside a <form>, it should behave like a native using ElementInternals API
• Do not build a wrapper around the native color picker input element; it should be a custom HTML element with swatches, hue slider, and hex input

Refinements to the Journey

• Initially, Google Antigravity got confused and tried adding all the OpenWebComponent tools independently, such as Lit, Rollup.

Therefore, I preferred to install the packages manually.

• Initial UI from the above prompt was not user friendly, therefore I used other AI tools to create a simple HTML UI and passed the same to Google Antigravity.

• The Gradient generation was not upto the mark, this is something that I have fixed manually

Further Steps

Over the next few days, I'll be refactoring the code to be more human-friendly and will spend time understanding the basic maths behind color conversion to make it scalable and maintainable in the future.