44 lines
2.0 KiB
Markdown
44 lines
2.0 KiB
Markdown
---
|
|
name: enforce-rules-for-unocss
|
|
description: Enforce AIRI's UnoCSS, Vue styling, shared UI component, animation, icon, and color-mode practices. Use when creating, editing, refactoring, or reviewing Vue templates, component styles, utility classes, UnoCSS configuration, animations, icons, UI primitives, packages/ui components, or VueUse dark-mode behavior in the AIRI monorepo.
|
|
---
|
|
|
|
# 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"`.
|
|
- When touching legacy utility classes, progressively refactor them into readable grouped arrays.
|
|
|
|
## 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`.
|