feat(interface-design): add comprehensive interface design skill documentation and references

- Introduced SKILL.md outlining the principles and processes for effective interface design.
- Added critique.md for evaluating design outputs and ensuring craft over correctness.
- Created example.md to illustrate the application of subtle layering principles in design decisions.
- Developed principles.md detailing core craft principles for consistent design quality.
- Implemented validation.md for memory management and pattern reuse in the design system.
- Established system.md for the Playzer design system, defining direction, domain concepts, and design decisions.
- Added StatusBadge component for displaying booking statuses with appropriate styles and labels.
- Updated skills-lock.json to include the new interface-design skill.

apps/backend/test/complex/invite-complex-user.handler.test.ts

@@ -1,11 +1,9 @@
 import { beforeEach, expect, mock, test } from 'bun:test';
 
-import type { InviteComplexUserResponse } from '@repo/api-contract';
 import { createInviteComplexUserHandler } from '@/modules/complex/handlers/invite-complex-user.handler';
+import type { InviteComplexUserResponse } from '@repo/api-contract';
 
-const inviteComplexUserMock = mock(
-  async () => undefined as unknown as InviteComplexUserResponse
-);
+const inviteComplexUserMock = mock(async () => undefined as unknown as InviteComplexUserResponse);
 
 class MockComplexMembersError extends Error {
   status: 400 | 403 | 404 | 409;

apps/backend/test/complex/invite-complex-user.test.ts

@@ -1,10 +1,10 @@
 import { beforeEach, expect, mock, test } from 'bun:test';
 
-import { prismaMock, sendMailMock, transactionMock } from '../support/prisma.mock';
 import {
   ComplexMembersError,
   inviteComplexUser,
 } from '@/modules/complex/services/complex-members.service';
+import { prismaMock, sendMailMock, transactionMock } from '../support/prisma.mock';
 
 beforeEach(() => {
   prismaMock._reset();

apps/backend/test/support/prisma.mock.ts

@@ -5,14 +5,16 @@ import type { PrismaClient } from '@/generated/prisma/client';
 import type { PrismaClientMock } from 'bun-mock-prisma';
 
 export const prismaMock = createPrismaMock<PrismaClient>() as PrismaClientMock<PrismaClient>;
-export const sendMailMock = mock(async (_input: {
-  to: string;
-  subject: string;
-  html: string;
-  text: string;
-}) => undefined);
-export const transactionMock = mock(async <T>(fn: (tx: PrismaClientMock<PrismaClient>) => Promise<T>) =>
-  fn(prismaMock)
+export const sendMailMock = mock(
+  async (_input: {
+    to: string;
+    subject: string;
+    html: string;
+    text: string;
+  }) => undefined
+);
+export const transactionMock = mock(
+  async <T>(fn: (tx: PrismaClientMock<PrismaClient>) => Promise<T>) => fn(prismaMock)
 );
 export const dbMock = {
   complexUser: prismaMock.complexUser,