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/frontend/src/components/ui/status-badge.tsx

@@ -0,0 +1,49 @@
+import { cn } from '@/lib/utils';
+import { type LucideIcon } from 'lucide-react';
+
+type StatusType = 'CONFIRMED' | 'PENDING' | 'CANCELLED' | 'NO_SHOW' | 'COMPLETED';
+
+type StatusBadgeProps = {
+  status: StatusType;
+  label: string;
+  icon?: LucideIcon;
+  className?: string;
+};
+
+const statusStyles: Record<StatusType, string> = {
+  CONFIRMED: 'bg-status-confirmed-bg border-status-confirmed-border text-status-confirmed-text',
+  PENDING: 'bg-status-pending-bg border-status-pending-border text-status-pending-text',
+  CANCELLED: 'bg-status-cancelled-bg border-status-cancelled-border text-status-cancelled-text',
+  NO_SHOW: 'bg-status-noshow-bg border-status-noshow-border text-status-noshow-text',
+  COMPLETED: 'bg-status-completed-bg border-status-completed-border text-status-completed-text',
+};
+
+export function StatusBadge({ status, label, icon: Icon, className }: StatusBadgeProps) {
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-xs font-medium',
+        statusStyles[status],
+        className
+      )}
+    >
+      {Icon && <Icon className="size-3" />}
+      {label}
+    </span>
+  );
+}
+
+export function effectiveStatusClassName(
+  status: 'CONFIRMED' | 'CANCELLED' | 'COMPLETED' | 'NO_SHOW'
+): string {
+  return statusStyles[status];
+}
+
+export function effectiveStatusLabel(
+  status: 'CONFIRMED' | 'CANCELLED' | 'COMPLETED' | 'NO_SHOW'
+): string {
+  if (status === 'NO_SHOW') return 'No show';
+  if (status === 'COMPLETED') return 'Cumplida';
+  if (status === 'CANCELLED') return 'Cancelada';
+  return 'Confirmada';
+}