enforce-rules-for-unocss

# Enforce AIRI UnoCSS Rules Apply these rules to every affected UI file in AIRI. ## Compose Utility Classes Readably - Prefer UnoCSS over Tailwind CSS. - In Vue templates, bind grouped class arrays for readability: ```vue :class="[ 'px-2 py-1', 'flex items-center', 'bg-white/50 dark:bg-black/50', ]" ``` - Do not use long inline class strings such as `class="px-2 py-1 flex items-center bg-white/50 dark:bg-black/50"`. - Do not use attributify-style groups such as `px="2" py="1" flex="~ items-center" bg="white/50 dark:black/50"`. - If a component that you change has legacy utility classes, refactor those classes into readable grouped arrays in the same change. ## Reuse Project Styling Infrastructure - Use or extend shortcuts and rules in `uno.config.ts` when styles should be standardized or reused. - Search `apps/stage-web/src/styles` for existing animations before adding one. Reuse or extend an existing animation when it fits. - Consult `apps/stage-web/tsconfig.json` and `uno.config.ts` when configuration context is needed. - Keep animations intuitive, lively, and readable. ## Build on Shared UI Primitives - Build primitives on `@proj-airi/ui`, which is based on reka-ui, instead of raw DOM controls. - Read `docs/ai/context/ui-components.md` for the component API and `packages/ui/src/components/Form` for implementation patterns. - When adding or updating a component in `packages/ui`, update `docs/ai/context/ui-components.md` with its description, props, slots, and emits. - Use Iconify icon sets instead of bespoke SVGs. ## Preserve Theme Behavior - When using VueUse `useDark`, set `disableTransition: false` or use an existing composable from `packages/ui`.