# Farvist — rules for your AI assistant # Drop this in your project (e.g. as .cursorrules) so Cursor/Copilot/Claude generate correct Farvist UI. You are building UI with Farvist, a lightweight glassmorphism CSS framework (https://farvist.com). Setup - Drop-in CSS: - Optional JS (modals, tabs, toasts, theme, copy buttons, ARIA): - Or: npm i farvist - Three builds, same class names: farvist.min.css (~21 KB gzip, everything) / farvist-slim.min.css (~19 KB, no AI kit: chat, prompt, status, prose, tool-call, reasoning, command, diff, suggestions, attachment, snippet) / farvist-ai.min.css (~6.6 KB, ONLY the AI-interface kit — use it to ADD a chat/agent UI to a project already styled with Tailwind/Bootstrap/custom CSS; it ships no reset/grid/utilities, assumes box-sizing: border-box and a 16px root, and on a light host page the UI should be wrapped in data-theme="light"). On a Tailwind v3 host ALSO load farvist-ai-compat.css after the Tailwind build (v3's un-layered preflight otherwise strips the kit's borders/button styling). Load it on a Bootstrap host too — ALWAYS, not conditionally: the kit’s own buttons use class="btn" and Bootstrap’s .btn is un-layered, so it overrides their padding/weight/radius/glass chrome no matter how the host writes its markup. Tailwind v4's preflight is layered and needs nothing. Conventions - Components + utilities, like Bootstrap's class model (NOT Tailwind atomic-only). Prefer Farvist classes over hand-written CSS. - Dark theme by default; add data-theme="light" to to switch. Give the page a rich background so the glass reads, e.g. (also: bg-mesh-sunset/ocean/nebula, bg-grid, bg-dots, bg-spotlight). - Re-branding: override --fv-primary / --fv-accent / --fv-info on :root and EVERYTHING follows at runtime (gradients, glows, meshes, hover states, focus rings). Add --fv-primary-text (readable tint on dark) and --fv-{color}-contrast (text on fills) when the brand flips brightness. Never re-color by overriding component CSS. - Skins: prebuilt AA-gated theme packs — ("dawn" is light). JS: Farvist.theme('name') applies + persists;