{"_id":"@cristianmpx/aiui-assistant","_rev":"6-c192613ce8ad1cd6d9b47d1e4b8c3211","name":"@cristianmpx/aiui-assistant","dist-tags":{"latest":"0.1.20"},"versions":{"0.1.14":{"name":"@cristianmpx/aiui-assistant","version":"0.1.14","keywords":["react","ai","assistant","component"],"author":{"url":"https://github.com/cristianm-developer","name":"Cristian M."},"license":"MIT","_id":"@cristianmpx/aiui-assistant@0.1.14","maintainers":[{"name":"cristianmpx","email":"cristianm.px1995@gmail.com"}],"homepage":"https://github.com/cristianm-developer/IaFrontRefAssistant#readme","bugs":{"url":"https://github.com/cristianm-developer/IaFrontRefAssistant/issues"},"dist":{"shasum":"681506d8927895f8066d1432e47b5233da3d8a18","tarball":"https://registry.npmjs.org/@cristianmpx/aiui-assistant/-/aiui-assistant-0.1.14.tgz","fileCount":67,"integrity":"sha512-NYBUhBVVbcNASxqPrQf7DKStZzpcL/nFkjzCBSaupN4Os2b2M0Nf643ZSH+8qEKlF1vSuT1Usaye7RSjG7NZtA==","signatures":[{"sig":"MEUCIQC5mAPmmtCNjwIggBkBiywqxhWm5rkk+SaJQWESqm2RCgIgSiWAtYoL6KbJekeFkOCDY7neoqc+n/gsbioy6F4+OQo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":771144},"main":"./dist/aiui-assistant.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/aiui-assistant.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/aiui-assistant.js","require":"./dist/aiui-assistant.cjs"},"./dist/*":"./dist/*","./style.css":"./dist/style.css"},"gitHead":"ceaa00e7fd9cc2dc6cf6d450d64e2cad5ef4c479","scripts":{"dev":"vite build --watch","test":"vitest run","build":"vite build","smoke":"node scripts/smoke.mjs && node scripts/smoke-global.mjs","prepare":"npm run build","typecheck":"tsc --noEmit","test:watch":"vitest","example:dev":"npm run dev --prefix example","example:install":"npm install --prefix example"},"_npmUser":{"name":"cristianmpx","email":"cristianm.px1995@gmail.com"},"repository":{"url":"git+https://github.com/cristianm-developer/IaFrontRefAssistant.git","type":"git","directory":"reactComponent"},"_npmVersion":"11.9.0","description":"Widget visual (Preact embebido, cero dependencias de runtime) para asistir la codificación con IA — funciona en cualquier framework","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"24.14.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.10","jsdom":"^25.0.1","react":"^18.3.1","preact":"^10.29.8","vitest":"^2.1.4","react-dom":"^18.3.1","typescript":"^5.6.3","@types/react":"^18.3.12","vite-plugin-dts":"^4.3.0","@types/react-dom":"^18.3.1","@vitejs/plugin-react":"^4.3.3","@testing-library/react":"^16.0.1","@testing-library/jest-dom":"^6.5.0","@testing-library/user-event":"^14.6.5"},"_npmOperationalInternal":{"tmp":"tmp/aiui-assistant_0.1.14_1787843622433_0.8102748324807403","host":"s3://npm-registry-packages-npm-production"}},"0.1.16":{"name":"@cristianmpx/aiui-assistant","version":"0.1.16","keywords":["react","ai","assistant","component"],"author":{"url":"https://github.com/cristianm-developer","name":"Cristian M."},"license":"MIT","_id":"@cristianmpx/aiui-assistant@0.1.16","maintainers":[{"name":"cristianmpx","email":"cristianm.px1995@gmail.com"}],"homepage":"https://github.com/cristianm-developer/aiui-assistant#readme","bugs":{"url":"https://github.com/cristianm-developer/aiui-assistant/issues"},"dist":{"shasum":"a03ea2e033984a52e9eded6d7e8341921800c8bc","tarball":"https://registry.npmjs.org/@cristianmpx/aiui-assistant/-/aiui-assistant-0.1.16.tgz","fileCount":68,"integrity":"sha512-6dga+gK+BX9ohq17j5fYczHcmRe3cxs30O7XgWrQKWEF578evTJ1CrvMvosuy7nEhw1ny2ke+yR4j4LXbs662A==","signatures":[{"sig":"MEUCIDnO71hS9YjyY79JanRrblJafHd1zzqJRb1+JmGWI5q/AiEAwYtncitNQ8ybBbK9GdH9sr/heyMNETAcBWfNZsrWFzY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@cristianmpx%2faiui-assistant@0.1.16","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":813881},"main":"./dist/aiui-assistant.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/aiui-assistant.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/aiui-assistant.js","require":"./dist/aiui-assistant.cjs"},"./dist/*":"./dist/*","./style.css":"./dist/style.css"},"gitHead":"fc1fce5758fc3f1028d4b2bca72057c9f5657a1e","scripts":{"dev":"vite build --watch","test":"vitest run","build":"vite build","smoke":"node scripts/smoke.mjs && node scripts/smoke-global.mjs","prepare":"npm run build","typecheck":"tsc --noEmit","test:watch":"vitest","example:dev":"npm run dev --prefix example","example:install":"npm install --prefix example"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:e9a6b076-44e0-4c11-926f-8bddf54d6bea"}},"repository":{"url":"git+https://github.com/cristianm-developer/aiui-assistant.git","type":"git","directory":"reactComponent"},"_npmVersion":"11.17.0","description":"Framework-agnostic visual widget with bundled Preact and zero runtime dependencies for AI-assisted frontend development","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"24.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.10","jsdom":"^25.0.1","react":"^18.3.1","preact":"^10.29.8","vitest":"^2.1.4","react-dom":"^18.3.1","typescript":"^5.6.3","@types/react":"^18.3.12","vite-plugin-dts":"^4.3.0","@types/react-dom":"^18.3.1","@vitejs/plugin-react":"^4.3.3","@testing-library/react":"^16.0.1","@testing-library/jest-dom":"^6.5.0","@testing-library/user-event":"^14.6.5"},"_npmOperationalInternal":{"tmp":"tmp/aiui-assistant_0.1.16_1788221810927_0.6854814538165357","host":"s3://npm-registry-packages-npm-production"}},"0.1.17":{"name":"@cristianmpx/aiui-assistant","version":"0.1.17","keywords":["react","ai","assistant","component"],"author":{"url":"https://github.com/cristianm-developer","name":"Cristian M."},"license":"MIT","_id":"@cristianmpx/aiui-assistant@0.1.17","maintainers":[{"name":"cristianmpx","email":"cristianm.px1995@gmail.com"}],"homepage":"https://github.com/cristianm-developer/aiui-assistant#readme","bugs":{"url":"https://github.com/cristianm-developer/aiui-assistant/issues"},"dist":{"shasum":"2934b28d242646350ee2c97806fa4b8c603ad824","tarball":"https://registry.npmjs.org/@cristianmpx/aiui-assistant/-/aiui-assistant-0.1.17.tgz","fileCount":68,"integrity":"sha512-Otf2+4Xg5WESh8tyqW4rcdPv+3FlWmBHtaLa3l4XjtDLP8ZSr9ZcdoCgtGaYk2z2T8ubP3s2UIRn2OswNVGlBw==","signatures":[{"sig":"MEUCIQDiBQSvw9ijoyECPIpPKMNqGG2Tj+ApW95acSa4DbkiMAIgBXAvz2q29v0jhUCtCpzca43OwKalJrR8fLLtJZsIQO4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@cristianmpx%2faiui-assistant@0.1.17","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":813907},"main":"./dist/aiui-assistant.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/aiui-assistant.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/aiui-assistant.js","require":"./dist/aiui-assistant.cjs"},"./dist/*":"./dist/*","./style.css":"./dist/style.css"},"gitHead":"c12b42e6c0bb5b99cdd16c0a0166ff94afe48f44","scripts":{"dev":"vite build --watch","test":"vitest run","build":"vite build","smoke":"node scripts/smoke.mjs && node scripts/smoke-global.mjs","prepare":"npm run build","typecheck":"tsc --noEmit","test:watch":"vitest","example:dev":"npm run dev --prefix example","example:install":"npm install --prefix example"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:e9a6b076-44e0-4c11-926f-8bddf54d6bea"}},"repository":{"url":"git+https://github.com/cristianm-developer/aiui-assistant.git","type":"git","directory":"reactComponent"},"_npmVersion":"11.17.0","description":"Framework-agnostic visual widget with bundled Preact and zero runtime dependencies for AI-assisted frontend development","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"24.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.10","jsdom":"^25.0.1","react":"^18.3.1","preact":"^10.29.8","vitest":"^2.1.4","react-dom":"^18.3.1","typescript":"^5.6.3","@types/react":"^18.3.12","vite-plugin-dts":"^4.3.0","@types/react-dom":"^18.3.1","@vitejs/plugin-react":"^4.3.3","@testing-library/react":"^16.0.1","@testing-library/jest-dom":"^6.5.0","@testing-library/user-event":"^14.6.5"},"_npmOperationalInternal":{"tmp":"tmp/aiui-assistant_0.1.17_1788222543529_0.31463561641191484","host":"s3://npm-registry-packages-npm-production"}},"0.1.18":{"name":"@cristianmpx/aiui-assistant","version":"0.1.18","keywords":["react","ai","assistant","component"],"author":{"url":"https://github.com/cristianm-developer","name":"Cristian M."},"license":"MIT","_id":"@cristianmpx/aiui-assistant@0.1.18","maintainers":[{"name":"cristianmpx","email":"cristianm.px1995@gmail.com"}],"homepage":"https://github.com/cristianm-developer/aiui-assistant#readme","bugs":{"url":"https://github.com/cristianm-developer/aiui-assistant/issues"},"dist":{"shasum":"9ef0be4a6a052c93d65b2efa47ca29e832cc7d67","tarball":"https://registry.npmjs.org/@cristianmpx/aiui-assistant/-/aiui-assistant-0.1.18.tgz","fileCount":68,"integrity":"sha512-TqspTxOUL3/FqUf+/NEtvFOkvdGw+VnkbxeF2AhIqCAZ0v4bwhifbHFnEs/XSeVc/HBlRBi7ak+oRm+Y6q02+w==","signatures":[{"sig":"MEUCID02vVnTvDjoAen2ek7q4+Lrwv6vTJ9oVTK8Zc409+nrAiEAuLlBMFEnFR786pgf7OhpQazgSDKsZb70+B9YQwRCryY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@cristianmpx%2faiui-assistant@0.1.18","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":823159},"main":"./dist/aiui-assistant.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/aiui-assistant.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/aiui-assistant.js","require":"./dist/aiui-assistant.cjs"},"./dist/*":"./dist/*","./style.css":"./dist/style.css"},"gitHead":"d59545e7cecb1491f266a7477f20b9a5b7db4229","scripts":{"dev":"vite build --watch","test":"vitest run","build":"vite build","smoke":"node scripts/smoke.mjs && node scripts/smoke-global.mjs","prepare":"npm run build","typecheck":"tsc --noEmit","test:watch":"vitest","example:dev":"npm run dev --prefix example","example:install":"npm install --prefix example"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:e9a6b076-44e0-4c11-926f-8bddf54d6bea"}},"repository":{"url":"git+https://github.com/cristianm-developer/aiui-assistant.git","type":"git","directory":"reactComponent"},"_npmVersion":"11.17.0","description":"Framework-agnostic visual widget with bundled Preact and zero runtime dependencies for AI-assisted frontend development","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"24.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.10","jsdom":"^25.0.1","react":"^18.3.1","preact":"^10.29.8","vitest":"^2.1.4","react-dom":"^18.3.1","typescript":"^5.6.3","@types/react":"^18.3.12","vite-plugin-dts":"^4.3.0","@types/react-dom":"^18.3.1","@vitejs/plugin-react":"^4.3.3","@testing-library/react":"^16.0.1","@testing-library/jest-dom":"^6.5.0","@testing-library/user-event":"^14.6.5"},"_npmOperationalInternal":{"tmp":"tmp/aiui-assistant_0.1.18_1788223273936_0.8522900510756608","host":"s3://npm-registry-packages-npm-production"}},"0.1.19":{"name":"@cristianmpx/aiui-assistant","version":"0.1.19","keywords":["react","ai","assistant","component"],"author":{"url":"https://github.com/cristianm-developer","name":"Cristian M."},"license":"MIT","_id":"@cristianmpx/aiui-assistant@0.1.19","maintainers":[{"name":"cristianmpx","email":"cristianm.px1995@gmail.com"}],"homepage":"https://github.com/cristianm-developer/aiui-assistant#readme","bugs":{"url":"https://github.com/cristianm-developer/aiui-assistant/issues"},"dist":{"shasum":"9b68f45acbb848a82319740631199732a7471740","tarball":"https://registry.npmjs.org/@cristianmpx/aiui-assistant/-/aiui-assistant-0.1.19.tgz","fileCount":68,"integrity":"sha512-71wXjyVhAWeorWcMS4qDvtq2dDgLahPwkEg1H9I7LajeLjQuMXPQdv8vDt0YzOxNLqYnVUzBLP8Ehs08x48Jrw==","signatures":[{"sig":"MEUCIFed2nJSj6G0HYbUYXL8GVWry8TJdhGmcmkq65gDDxf4AiEAp48fHhV6VUI4cZhXvaRI4DW/bAXBcL++gZBKeRXo5gk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@cristianmpx%2faiui-assistant@0.1.19","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":3318039},"main":"./dist/aiui-assistant.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/aiui-assistant.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/aiui-assistant.js","require":"./dist/aiui-assistant.cjs"},"./dist/*":"./dist/*","./style.css":"./dist/style.css"},"gitHead":"b0664511ef961f7ea575828270066f2ba3a9bbcd","scripts":{"dev":"vite build --watch","test":"vitest run","build":"vite build","smoke":"node scripts/smoke.mjs && node scripts/smoke-global.mjs","prepare":"npm run build","typecheck":"tsc --noEmit","test:watch":"vitest","example:dev":"npm run dev --prefix example","example:install":"npm install --prefix example"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:e9a6b076-44e0-4c11-926f-8bddf54d6bea"}},"repository":{"url":"git+https://github.com/cristianm-developer/aiui-assistant.git","type":"git","directory":"reactComponent"},"_npmVersion":"11.17.0","description":"Framework-agnostic visual widget with bundled Preact and zero runtime dependencies for AI-assisted frontend development","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"24.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.10","jsdom":"^25.0.1","react":"^18.3.1","preact":"^10.29.8","vitest":"^2.1.4","react-dom":"^18.3.1","typescript":"^5.6.3","html2canvas":"^1.4.1","@types/react":"^18.3.12","vite-plugin-dts":"^4.3.0","@types/react-dom":"^18.3.1","@vitejs/plugin-react":"^4.3.3","@testing-library/react":"^16.0.1","@testing-library/jest-dom":"^6.5.0","@testing-library/user-event":"^14.6.5"},"_npmOperationalInternal":{"tmp":"tmp/aiui-assistant_0.1.19_1788226409768_0.8429870191746118","host":"s3://npm-registry-packages-npm-production"}},"0.1.20":{"_id":"@cristianmpx/aiui-assistant@0.1.20","bugs":{"url":"https://github.com/cristianm-developer/aiui-assistant/issues"},"dist":{"shasum":"a88a3b0b945717a8b5bd5f2430738a0f12af8579","tarball":"https://registry.npmjs.org/@cristianmpx/aiui-assistant/-/aiui-assistant-0.1.20.tgz","fileCount":68,"integrity":"sha512-rae8brf7MJFXqS25xntcYgcqdagC7A2vuoNLyixLuL7IHFcxdxuhSi9DpTo/U4LMYQFZ48cs+x7UTWy5DWC5DA==","signatures":[{"sig":"MEUCIQDy6zPCIGGWDMaiaPICuXpIBasFsAtuQ2fbAr3Rw4D3BwIgMZyYEpSzZjUj1VyrhLDbGaydiLNjtuAO2MMf2OtxqXc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIAJA8ZITCdm/epWmzKx/qEeHw0aNT95LRCDcYoOlZ1m/AiEAhGBLaBplw1B3uuguqxQLvNEuVFbXFnK3tdSii/rWcxo="}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@cristianmpx%2faiui-assistant@0.1.20","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":3387594},"main":"./dist/aiui-assistant.cjs","name":"@cristianmpx/aiui-assistant","type":"module","types":"./dist/index.d.ts","author":{"url":"https://github.com/cristianm-developer","name":"Cristian M."},"module":"./dist/aiui-assistant.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/aiui-assistant.js","require":"./dist/aiui-assistant.cjs"},"./dist/*":"./dist/*","./style.css":"./dist/style.css"},"gitHead":"7b776b6a771359d30893d952442b18604bc8f897","license":"MIT","scripts":{"dev":"vite build --watch","test":"vitest run","build":"vite build","smoke":"node scripts/smoke.mjs && node scripts/smoke-global.mjs","prepare":"npm run build","typecheck":"tsc --noEmit","test:watch":"vitest","example:dev":"npm run dev --prefix example","example:install":"npm install --prefix example"},"version":"0.1.20","_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:e9a6b076-44e0-4c11-926f-8bddf54d6bea"}},"homepage":"https://github.com/cristianm-developer/aiui-assistant#readme","keywords":["react","ai","assistant","component"],"repository":{"url":"git+https://github.com/cristianm-developer/aiui-assistant.git","type":"git","directory":"reactComponent"},"_npmVersion":"11.19.0","description":"Framework-agnostic visual widget with bundled Preact and zero runtime dependencies for AI-assisted frontend development","directories":{},"maintainers":[{"name":"cristianmpx","email":"cristianm.px1995@gmail.com"}],"sideEffects":["**/*.css"],"_nodeVersion":"24.20.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.10","jsdom":"^25.0.1","react":"^18.3.1","preact":"^10.29.8","vitest":"^2.1.4","react-dom":"^18.3.1","typescript":"^5.6.3","html2canvas":"^1.4.1","@types/react":"^18.3.12","vite-plugin-dts":"^4.3.0","@types/react-dom":"^18.3.1","@vitejs/plugin-react":"^4.3.3","@testing-library/react":"^16.0.1","@testing-library/jest-dom":"^6.5.0","@testing-library/user-event":"^14.6.5"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/aiui-assistant_0.1.20_1789155061443_0.9567648798388866"}}},"time":{"created":"2026-08-27T15:13:42.256Z","modified":"2026-09-11T19:31:01.940Z","0.1.14":"2026-08-27T15:13:42.607Z","0.1.16":"2026-09-01T00:16:51.191Z","0.1.17":"2026-09-01T00:29:03.699Z","0.1.18":"2026-09-01T00:41:14.079Z","0.1.19":"2026-09-01T01:33:29.950Z","0.1.20":"2026-09-11T19:31:01.582Z"},"bugs":{"url":"https://github.com/cristianm-developer/aiui-assistant/issues"},"author":{"url":"https://github.com/cristianm-developer","name":"Cristian M."},"license":"MIT","homepage":"https://github.com/cristianm-developer/aiui-assistant#readme","keywords":["react","ai","assistant","component"],"repository":{"url":"git+https://github.com/cristianm-developer/aiui-assistant.git","type":"git","directory":"reactComponent"},"description":"Framework-agnostic visual widget with bundled Preact and zero runtime dependencies for AI-assisted frontend development","maintainers":[{"name":"cristianmpx","email":"cristianm.px1995@gmail.com"}],"readme":"# AIUI Assistant\n\nA framework-agnostic floating visual widget for working with AI coding assistants. It lets you capture, tag, and generate prompts for UI elements in real time — drop it into any web app to get started.\n\n![Version](https://img.shields.io/badge/version-0.1.20-blue)\n![License](https://img.shields.io/badge/license-MIT-green)\n\n## What is it?\n\n**AIUI Assistant** mounts into your app and gives you:\n\n- 🎯 **Visual capture** of HTML elements via an interactive overlay\n- 📍 **Automatic tagging** of components and sections with data attributes\n- 💬 **Prompt generation** with code and configuration context\n- 🎨 **Customizable theming** via CSS tokens\n- ⚙️ **Per-component configuration** for variants and sizes\n\nIt's especially useful when working with Claude, ChatGPT, or any AI coding assistant — it lets you capture visual references from your UI and turn them into detailed, in-context prompts.\n\n## Framework support\n\nThe package is **framework-agnostic**. It ships [Preact](https://preactjs.com) bundled inside its own JavaScript and does not require `react`, `react-dom`, or a framework integration package. The same public API works in React, Astro, Vue, Angular, Svelte, and plain HTML.\n\nIntegration is intentionally DOM-based: call `mountIaFrontRefAssistant()` once from the browser entry point or a client-side script. The assistant mounts its own isolated root and does not wrap, render, or depend on your application's component tree.\n\n## Installation\n\n### The package\n\n```bash\nnpm install @cristianmpx/aiui-assistant\n```\n\nNo peer dependencies to install — the package's own build already bundles what it needs to render.\n\n### Recommended: install the skill pack (automated setup)\n\nInstalling the package by itself only gets you the widget — you still have to hand-write `iafrontrefassistant.config.ts`, tag your existing components, and call `mountIaFrontRefAssistant()` yourself. This repository also ships a versioned **AIUI Assistant skill/plugin pack** that does all of that for you: adds the dependency, creates/syncs the config file, tags your existing components, and wires up the mount call — idempotently, safe to re-run any time.\n\nThe skills are plain Markdown (`SKILL.md` with YAML frontmatter), following the shared, multi-vendor [Agent Skills](https://agents.md) convention — so the same files work across tools. What differs per tool is only *where* Skills are discovered from and how you register them:\n\n| Tool | Skills folder it reads | How to install this pack |\n|---|---|---|\n| **Claude Code** | `.claude/skills/` (project) or via a plugin | `/plugin marketplace add https://github.com/cristianm-developer/aiui-assistant.git` then `/plugin install aiui-assistant@aiui-assistant`. |\n| **OpenAI Codex** | Native plugin | Add this repository as a Codex plugin source and install `aiui-assistant`; the manifest is at [`ia-skills/.codex-plugin/plugin.json`](../ia-skills/.codex-plugin/plugin.json). |\n| **Cursor** | Native skill directory or plugin format | Use the canonical skills in [`ia-skills/skills/`](../ia-skills/skills/) through Cursor's skill installation flow. |\n| **Claude.ai / Claude API** | Uploaded or API-configured skills | Upload the `ia-skills/skills/*/SKILL.md` folders or register them through the Skills API. |\n| **Any other assistant** | Varies | Copy or register the canonical `SKILL.md` files under [`ia-skills/skills/`](../ia-skills/skills/) with that system's native skill format. |\n\n([`degit`](https://github.com/Rich-Harris/degit) needs no install of its own — `npx degit ...` pulls just that subfolder without cloning the whole repo or leaving a `.git` behind.)\n\nOnce installed, invoke `init-aiui-assistant` (as `/init-aiui-assistant` in Claude Code or through the equivalent skill command in another compatible system).\n\n#### Non-interactive / CI\n\nThe `/plugin` commands above are typed inside an interactive Claude Code session. To register and install the plugin from a script instead, add the marketplace to `.claude/settings.json` and install with the `--yes` CLI flag:\n\n```json\n// .claude/settings.json\n{\n  \"extraKnownMarketplaces\": [\n    { \"name\": \"aiui-assistant\", \"source\": \"https://github.com/cristianm-developer/aiui-assistant.git\" }\n  ],\n  \"enabledPlugins\": { \"ia-skills\": true }\n}\n```\n```bash\nclaude plugin install aiui-assistant@aiui-assistant --scope project --yes\n```\n`enabledPlugins` only toggles a plugin that's already installed — it doesn't install it by itself, so the `claude plugin install ... --yes` step is still required once per machine/CI runner.\n\n## Basic Usage\n\nCall `mountIaFrontRefAssistant()` once wherever your app boots — for example in `main.ts`, an Astro layout `<script>`, or a client-side lifecycle hook. It creates its own render root and portals the widget into `document.body`, so it doesn't need to wrap your app's JSX/template:\n\n```tsx\n// e.g. main.ts, main.tsx, an Astro client script, or any app entry point\nimport { mountIaFrontRefAssistant, defineConfig } from '@cristianmpx/aiui-assistant';\n\nconst config = defineConfig({\n  active: true,\n  components: [{\n    kind: 'Button',\n    variants: [{ value: 'primary', label: 'Primary' }],\n    sizes: [{ value: 'md', label: 'Medium' }],\n  }],\n  theme: [{ key: 'color-primary', label: 'Primary color' }],\n});\n\nmountIaFrontRefAssistant(config);\n```\n\nNo CSS import needed either — `mountIaFrontRefAssistant()` injects its own styles. See [INTEGRATION.md](INTEGRATION.md) for the exact call site in React, Next.js, Astro, Angular, Vue, Svelte, and plain HTML.\n\n## Tagging Elements\n\nFor the widget to identify your elements, use explicit section, wrapper, and component attributes. They are plain HTML attributes, so they work the same in JSX, Astro/Vue/Angular templates, or raw HTML:\n\n```html\n<!-- Site section -->\n<section data-section-id=\"hero\">\n  <div data-wrapper-id=\"hero-content\">\n  <h1>Welcome</h1>\n\n  <!-- Individual component -->\n  <div data-component-id=\"cta-button\" data-component-kind=\"Button\">\n    <button>Sign Up</button>\n  </div>\n  </div>\n</section>\n```\n\n> If you installed via the Claude Code skill pack above, this tagging is done for you automatically by `/init-aiui-assistant`.\n\n### Supported attributes\n\n| Attribute | Purpose | Example |\n|-----------|---------|---------|\n| `data-section-id` | Identifies an independent page/view section | `data-section-id=\"hero\"` |\n| `data-wrapper-id` | Identifies any logical visual container, regardless of HTML tag; wrappers may be nested | `data-wrapper-id=\"hero-content\"` |\n| `data-component-id` | Identifies a reusable component instance | `data-component-id=\"cta-button\"` |\n| `data-component-kind` | Identifies the source component type | `data-component-kind=\"Button\"` |\n\n## AI-ready frontend context\n\nWhen a target is captured, AIUI Assistant can generate a framework-agnostic reference containing its logical type (`section`, `wrapper`, `component`, or `element`), route, component name, source file/line, visible text, classes, semantic attributes, declared visual styles, and immediate visual parent.\n\nThe prompt modal provides two formats:\n\n- **Copy reference** — readable text for a normal coding prompt.\n- **Copy JSON** — structured context for agents, scripts, and automation.\n\nMultiple requests for the same target are grouped into one prompt entry.\n\n### Reference configuration\n\nAll supported attributes are included by default. Use the exported `AIUI_REFERENCE_ATTRIBUTES` constant as the canonical list, or select a subset through `referenceAttributes`. Set `includeSemanticState: false` to omit boolean states such as `disabled`, `checked`, and `expanded`.\n\nThe style context includes only declared visual properties from inline CSS and matching stylesheet rules: display/flex alignment, dimensions, spacing, overflow, colors, font size/weight/line height, border, and border radius. Browser-computed defaults are excluded.\n\n## Advanced Configuration\n\n### `defineConfig(options)`\n\nType-safe configuration helper:\n\n```ts\nimport {\n  AIUI_REFERENCE_ATTRIBUTES,\n  defineConfig,\n} from '@cristianmpx/aiui-assistant';\n\nconst config = defineConfig({\n  // Turn the widget on/off globally\n  active: true,\n\n  // Reusable component definitions\n  components: [\n    {\n      kind: 'Button',\n      variants: [{ value: 'primary', label: 'Primary' }],\n      sizes: [{ value: 'md', label: 'Medium' }],\n    },\n  ],\n  theme: [{ key: 'color-primary', label: 'Primary color' }],\n  referenceAttributes: AIUI_REFERENCE_ATTRIBUTES,\n  includeSemanticState: true,\n});\n```\n\n### `mountIaFrontRefAssistant(definitions?, options?)`\n\n```ts\nmountIaFrontRefAssistant(\n  config,          // optional — the object from defineConfig()\n  {\n    container: myDiv, // optional — defaults to a <div> it creates and appends to document.body\n  }\n);\n```\n\nReturns `{ unmount() }` if you ever need to tear the widget down. Calling it more than once is a no-op (logs a dev warning) — safe to call from code that might run twice (e.g. React Strict Mode, HMR).\n\n## Features\n\n### Floating button\n\n- Fixed in the bottom-right corner\n- Badge showing the number of captured prompts\n- Controls: click = open menu, Ctrl+click = toggle capture, Ctrl+Alt+click = toggle overlays\n\n### Main menu\n\n- **Capture** — enable capture mode (interactive overlay)\n- **Show Overlays** — display all detected elements\n- **Clear Prompts** — clear captured prompts\n- **Exit** — close the menu\n\n### Capture mode\n\n- Hover over elements to see their DOM structure\n- Click to capture a reference to the element\n- Escape to cancel\n\n### Show overlays mode\n\n- Displays all detected elements (wrappers, components, elements)\n- Hover elements to see details\n- Stays active until turned off\n\n### Prompt modal\n\n- Holds all captured prompts\n- Editable textarea for refinements\n- If a config exists: variant and theme pickers\n- \"Save\" button copies to clipboard in a ready-to-use format\n\n## Styling and Theming\n\nThe widget uses CSS custom properties for theming:\n\n```css\n.ia-fra-root {\n  /* Colors */\n  --ia-fra-bg: #ffffff;\n  --ia-fra-fg: #1f2937;\n  --ia-fra-border: #e5e7eb;\n  --ia-fra-accent: #3b82f6;\n  --ia-fra-danger: #ef4444;\n\n  /* Spacing */\n  --ia-fra-radius: 6px;\n  --ia-fra-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\n\n  /* Z-index */\n  --ia-fra-z-overlay: 2147482999;\n  --ia-fra-z-menu: 2147483000;\n}\n```\n\n`mountIaFrontRefAssistant()` injects its own `<style>` tag, appended to `document.head` the first time it runs. To override tokens, add your own rule for `.ia-fra-root` **after** calling `mountIaFrontRefAssistant()` (so it wins the cascade), or target it with higher specificity/`!important` if your override needs to load earlier:\n\n```css\n/* your-theme.css — loaded/injected after mountIaFrontRefAssistant() */\n.ia-fra-root {\n  --ia-fra-accent: #your-brand-color;\n  --ia-fra-bg: #your-bg;\n}\n```\n\n## Development Scripts\n\nRun these from `reactComponent/`:\n\n```bash\n# Build the library in watch mode\nnpm run dev\n\n# One-off build (for release)\nnpm run build\n\n# Run tests\nnpm test\n\n# Tests in watch mode\nnpm run test:watch\n\n# TypeScript typecheck\nnpm run typecheck\n\n# Runtime smoke test of the built dist/ output (zero react/react-dom installed)\nnpm run smoke\n\n# Example project\nnpm run example:install\nnpm run example:dev\n```\n\n## Full Example\n\nSee [reactComponent/example/](reactComponent/example/) for a working React app that uses the widget.\n\nTo run it:\n\n```bash\nnpm run example:install\nnpm run example:dev\n```\n\nThen open http://localhost:5173 in your browser.\n\n## Code Structure\n\n```\nreactComponent/src/\n├── lib/                    # Utilities\n│   ├── types.ts           # Base types (TargetType, AssistantConfig)\n│   ├── constants.ts       # Constants (attributes, timeouts)\n│   ├── position.ts        # Positioning math\n│   ├── dom.ts             # Element detection and tagging\n│   ├── storage.ts         # localStorage persistence\n│   └── promptFormat.ts    # Prompt formatting\n│\n├── config/                # Configuration\n│   ├── types.ts           # Config types (IaFraConfig)\n│   └── defineConfig.ts    # Type-inference helper\n│\n├── context/               # React Context\n│   ├── AssistantContext.tsx      # Context definition\n│   └── AssistantProvider.tsx     # Provider with state\n│\n├── hooks/                 # Custom hooks\n│   ├── useHoverCloseTimer.ts     # Auto-close timer\n│   └── useTrackedTargets.ts      # MutationObserver-based detection\n│\n├── components/            # UI components (internal — not part of the public API, see \"API Reference\")\n│   ├── FloatingButton.tsx        # Main floating button\n│   ├── BugIcon.tsx               # Bug SVG icon\n│   ├── Menu/                     # Dropdown menu\n│   │   ├── Menu.tsx\n│   │   ├── MenuItem.tsx\n│   │   ├── SubMenu.tsx\n│   │   ├── ToggleRow.tsx\n│   │   └── ActionRow.tsx\n│   ├── Overlay/                  # Visual overlays\n│   │   ├── CaptureOverlay.tsx   # Interactive capture mode\n│   │   ├── ShowOverlay.tsx      # Show-all-elements mode\n│   │   ├── FrameLabel.tsx       # Frame labels\n│   │   ├── useHoveredTarget.ts  # Hover-tracking hook\n│   │   └── useRect.ts           # DOMRect hook\n│   └── PromptModal/              # Prompt modal\n│       ├── PromptModal.tsx       # Main modal\n│       ├── VariantSizePicker.tsx # Variant picker\n│       └── ThemePicker.tsx       # Theme picker\n│\n├── styles/                # CSS\n│   ├── tokens.css         # Variables and base\n│   ├── button-menu.css    # Button and menu\n│   ├── overlays.css       # Overlays\n│   ├── modal.css          # Modal\n│   ├── pickers.css        # Pickers\n│   └── index.css          # Imports all partials\n│\n├── IaFrontRefAssistant.tsx  # Internal root component (used by mount.tsx only — see \"Why no <IaFrontRefAssistant> export\")\n└── mount.tsx                # mountIaFrontRefAssistant() — the public entry point\n\nia-skills/                  # Canonical skills plus Codex/Claude plugin manifests\n├── .codex-plugin/\n├── .claude-plugin/\n│   └── plugin.json         # Plugin manifest\n├── commands/\n│   └── init-aiui-assistant.md       # /init-aiui-assistant\n└── skills/\n    ├── aiui-config-mapper/\n    ├── aiui-frontend-data-tagging/\n    └── init-aiui-assistant/\n```\n\n## API Reference\n\n### Exported types\n\n```typescript\n// Configuration\nexport interface IaFraConfig {\n  active?: boolean;\n  components?: ComponentDefinition[];\n  theme?: ThemeTokenDefinition[];\n  prePrompt?: string;\n  referenceAttributes?: readonly AIUIReferenceAttribute[];\n  includeSemanticState?: boolean;\n}\n\nexport interface ComponentDefinition {\n  kind: string;\n  variants?: ConfigOption[];\n  sizes?: ConfigOption[];\n}\n\nexport interface ThemeTokenDefinition {\n  key: string;\n  label: string;\n  values?: ConfigOption[];\n}\n\nexport interface ConfigOption {\n  value: string;\n  label: string;\n}\n\nexport type AIUIReferenceAttribute = string;\n\nexport type TargetType = 'section' | 'wrapper' | 'component' | 'element';\n\nexport interface AssistantConfig {\n  active: boolean;\n  capture: { sections: boolean; wrappers: boolean; components: boolean; elements: boolean };\n  show: { sections: boolean; wrappers: boolean; components: boolean };\n}\n\nexport interface PromptEntry {\n  id: string;\n  targetId: string;\n  targetType: TargetType;\n  url: string;\n  text: string;\n  createdAt: number;\n}\n```\n\n### Exported functions\n\n```typescript\n// Type-safe configuration helper\nexport function defineConfig(config: IaFraConfig): IaFraConfig\n\n// Mounts the widget in its own render root and injects its own CSS —\n// see \"Basic Usage\" above.\nexport function mountIaFrontRefAssistant(\n  definitions?: IaFraConfig,\n  options?: { container?: HTMLElement }\n): { unmount: () => void }\n```\n\nA classic `<script>` global build is also published at `dist/aiui-assistant.global.js` for zero-bundler setups — it exposes the same two functions under `window.AIUIAssistant`. See [INTEGRATION.md](INTEGRATION.md#plain-html-no-bundler).\n\n### Why no `<IaFrontRefAssistant>` JSX component export\n\nEarlier versions exported a `<IaFrontRefAssistant>{children}</IaFrontRefAssistant>` component meant to wrap your app's JSX. That pattern is now internal-only: this package bundles [Preact](https://preactjs.com) instead of depending on `react`/`react-dom` (see \"Compatibility\"), and a real React reconciler in a host app cannot correctly render a component built against a different, bundled UI runtime as a child of its own tree — Preact's hooks need Preact's own reconciler to track their state, which a foreign React tree never provides. `mountIaFrontRefAssistant()` doesn't have this problem because it creates and manages its own isolated render root, so it's the one supported way to mount the widget, in React apps included.\n\n## Production metadata cleanup\n\nThe assistant's `data-*` attributes are useful while capturing references, but can be removed from production HTML. For Vite or Astro:\n\n```ts\nimport { AIUIReactAssistCleanup } from '@cristianmpx/aiui-assistant';\n\nexport default defineConfig({\n  plugins: [AIUIReactAssistCleanup()],\n});\n```\n\nThe plugin runs only during production builds, so it does not affect development or Vitest. For Next.js, wrap the config with `withAIUIReactAssistCleanup(nextConfig)`. The source files remain unchanged. If debugging metadata should remain available, pass `keepAttributes`:\n\n```ts\nAIUIReactAssistCleanup({\n  keepAttributes: ['data-route', 'data-source-file', 'data-source-line'],\n});\n```\n\n`referenceAttributes` controls what information is sent to the AI; `keepAttributes` controls which attributes remain in production HTML. They are independent settings. To exclude boolean semantic states from the reference:\n\n```ts\nincludeSemanticState: false\n```\n\nCopied references include only declared visual styles from inline CSS and matching stylesheet rules: display/flex alignment, dimensions, spacing, overflow, colors, font size/weight/line height, border and border radius. Browser-computed defaults are excluded.\n\n## Compatibility\n\n- **Browsers**: Chrome/Edge 90+, Firefox 88+, Safari 14+\n- **Frameworks**: none required — the package bundles [Preact](https://preactjs.com) internally (no `react`/`react-dom`/`@astrojs/react`/etc. to install), so `mountIaFrontRefAssistant()` works the same in React, Next.js, Astro, Angular, Vue, Svelte, or plain HTML with no build step at all (`dist/aiui-assistant.global.js` as a classic `<script>`). See [INTEGRATION.md](INTEGRATION.md) for per-framework call sites.\n- **SSR**: Supported (detects `typeof document === 'undefined'` and no-ops)\n\n## License\n\nMIT © 2026\n\n## Contributing\n\nContributions are welcome. Please:\n\n1. Fork the repository\n2. Create a branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -am 'Add amazing feature'`)\n4. Push the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## Support\n\nFor issues, questions, or suggestions, open an issue on GitHub.\n","readmeFilename":"README.md"}