feat(patterns): tutorial system

frontend/src/components/patterns/recognition-signals.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+
+interface RecognitionSignalsProps {
+  signals: string[];
+}
+
+export function RecognitionSignals({ signals }: RecognitionSignalsProps) {
+  if (!signals.length) return null;
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Recognition Signals</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <p className="text-sm text-[var(--muted-foreground)] mb-4">
+          Look for these keywords and patterns in problem descriptions:
+        </p>
+        <div className="flex flex-wrap gap-2">
+          {signals.map((signal) => (
+            <Badge key={signal} variant="pattern">
+              {signal}
+            </Badge>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}