// Guidelines for styling UI in this project — when to use TWC (react-twc) vs inline Tailwind classes, and which AKUI primitives to reach for. Use when building or reviewing UI components.
Use when facing 2+ independent tasks that can be worked on without shared state or sequential dependencies
Run, write, and debug Playwright E2E tests for this project. Use when running a single test file or a single named test, writing new E2E tests, working with Page Objects, or mocking songs. Covers test setup, page object initialization, and song fixture mocking.
Use when you have a written implementation plan to execute in a separate session with review checkpoints
Use when executing implementation plans with independent tasks in the current session
Use when you have a spec or requirements for a multi-step task, before touching code
Patterns and guidelines for writing Playwright E2E tests in this project — page object rules, assertion placement, and locator conventions. Use when writing new tests or reviewing existing ones.
| name | using-tailwind |
| description | Guidelines for styling UI in this project — when to use TWC (react-twc) vs inline Tailwind classes, and which AKUI primitives to reach for. Use when building or reviewing UI components. |
Use twc only when the component:
className)Otherwise inline the element with a plain className.
// ✅ TWC — appears at multiple call sites
const DateHeader = twc(Typography)`mt-6 mb-2 text-lg font-semibold opacity-70`;
// ✅ TWC — conditional classes via callback
const Card = twc.div((props: { 'data-focused'?: boolean }) => [
'cursor-pointer rounded-lg px-6 py-4 transition-transform',
props['data-focused'] && 'bg-active scale-[1.025]',
]);
// ✅ Inline — one-off wrapper, no conditionals
<div className="flex h-full flex-col gap-2 overflow-y-auto p-8">
// ✅ Inline with Typography — one-off heading
<Typography as="h1" className="mb-4 text-3xl font-bold">History</Typography>
Prefer components from src/modules/elements/AKUI/ over raw HTML + classes:
Typography (~/modules/elements/AKUI/Primitives/Typography) — for any text. Accepts as for element type (h1, h2, p, div…). Adds the typography CSS class automatically. Supports active prop for accent colour.Box (~/modules/elements/AKUI/Primitives/Box) — polymorphic container with flex flex-col items-center justify-center rounded-md bg-black/50. Override with className. Not suitable where those defaults are unwanted.Menu / Menu.Button / Menu.Header — for menu screens (main menu, settings).twc(Typography) or twc(Box) to create reusable AKUI-based TWC variants.