From 5237f59366bc1ea84baa5e142f03f5dc5fc14e64 Mon Sep 17 00:00:00 2001
From: Replit Agent <agent@replit.com>
Date: Thu, 11 Jun 2026 07:48:57 +0000
Subject: [PATCH] Restore public-page education/awareness content
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

User request: the earlier public-page variant had awareness content
("Was sind Skills?", "Was sind die Risiken?", how the rule-set / security
checkpoints work). The current Catalog public page is fine, but that
information was gone. Bring it back onto the public page.

Changes (artifacts/skillguard):
- New components/public-education.tsx: reusable awareness block with three
  sections — "Was ist ein Skill?" (new, 3 explainer cards), "Worin liegt das
  Risiko?" (6 risk cards) and "Das Prüfregelwerk" (live useListRules, split
  into Datenschutz / IT-Sicherheit with per-rule risk explanations; loading,
  error and empty states intact).
- pages/catalog.tsx: render <PublicEducation /> below the catalog listing so
  the approved catalog stays primary and the awareness content follows.
- Deleted pages/landing.tsx: unrouted dead code that held the original
  content and linked to the removed /dashboard route; its content now lives
  in the reusable component.

GET /api/rules is public, so anonymous visitors load the rule set without
auth. Both typechecks (libs + skillguard) pass; verified visually; architect
review PASS.
---
 .../public-education.tsx}                     | 89 +++++++++++--------
 artifacts/skillguard/src/pages/catalog.tsx    |  3 +
 2 files changed, 57 insertions(+), 35 deletions(-)
 rename artifacts/skillguard/src/{pages/landing.tsx => components/public-education.tsx} (81%)

diff --git a/artifacts/skillguard/src/pages/landing.tsx b/artifacts/skillguard/src/components/public-education.tsx
similarity index 81%
rename from artifacts/skillguard/src/pages/landing.tsx
rename to artifacts/skillguard/src/components/public-education.tsx
index 9ed8024..f0469df 100644
--- a/artifacts/skillguard/src/pages/landing.tsx
+++ b/artifacts/skillguard/src/components/public-education.tsx
@@ -1,23 +1,39 @@
 import { useListRules, type Rule } from "@workspace/api-client-react";
-import { Link } from "wouter";
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
-import { Button } from "@/components/ui/button";
 import { AxisBadge, SeverityBadge } from "@/components/ui-helpers";
 import {
   Shield,
-  ShieldCheck,
-  Search,
-  LayoutDashboard,
+  ShieldAlert,
   EyeOff,
   Syringe,
   Upload,
   KeyRound,
   FileWarning,
   Lock,
-  ShieldAlert,
+  FileText,
+  Terminal,
+  Bot,
 } from "lucide-react";
 
+const SKILL_FACTS = [
+  {
+    icon: FileText,
+    title: "Ein Paket aus Anweisungen und Code",
+    text: "Ein Skill bündelt Anleitungen und ausführbaren Code, die ein KI-Agent bei Bedarf lädt, um eine neue Aufgabe zu übernehmen.",
+  },
+  {
+    icon: Terminal,
+    title: "Mit echtem Zugriff auf Ihr System",
+    text: "Damit ein Skill nützlich sein kann, darf es Dateien lesen, Programme starten und mit dem Internet kommunizieren – im Rahmen der Rechte Ihres Agenten.",
+  },
+  {
+    icon: Bot,
+    title: "Es steuert das Verhalten des Agenten",
+    text: "Skills geben vor, wie ein Agent denkt und antwortet. Genau das macht sie mächtig – und ein fremdes Skill im Zweifel gefährlich.",
+  },
+];
+
 const RISK_EXPLANATIONS: Record<string, string> = {
   "SEC-REVERSE-SHELL":
     "Eine Reverse-Shell öffnet Angreifern eine Fernsteuerung Ihres Rechners – sie könnten dann beliebige Befehle ausführen, als säßen sie selbst davor.",
@@ -152,42 +168,45 @@ function RuleGroup({
   );
 }
 
-export default function Landing() {
+/**
+ * Public awareness & education block for the catalog landing page: explains
+ * what an agent skill is, which risks an unchecked skill carries, and the live
+ * rule set every scan is measured against.
+ */
+export function PublicEducation() {
   const { data, isLoading, error } = useListRules();
   const activeRules = (data ?? []).filter((r) => r.enabled);
 
   return (
-    <div className="mx-auto max-w-6xl px-4 py-12 sm:px-6">
-      <section className="flex flex-col items-start gap-6 pb-16">
-        <div className="inline-flex items-center gap-2 rounded-full border border-border bg-muted/50 px-3 py-1 text-xs font-medium text-muted-foreground">
-          <ShieldCheck className="h-3.5 w-3.5 text-sidebar-primary" />
-          Sicherheits- & Datenschutzprüfung für KI-Agent-Skills
+    <div className="space-y-16 border-t border-border pt-12">
+      <section className="space-y-6">
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center gap-3">
+            <Shield className="h-6 w-6 text-sidebar-primary" />
+            <h2 className="text-3xl font-bold tracking-tight">Was ist ein Skill?</h2>
+          </div>
+          <p className="max-w-3xl text-muted-foreground">
+            Skills sind Erweiterungen für KI-Agenten. Sie geben einem Agenten neue Fähigkeiten – und laufen dabei mit
+            denselben Rechten wie der Agent selbst. Genau deshalb lohnt sich ein prüfender Blick, bevor Sie einem
+            fremden Skill vertrauen.
+          </p>
         </div>
-        <h1 className="max-w-3xl text-4xl font-bold leading-tight tracking-tight sm:text-5xl">
-          Prüfen Sie fremde Skills, bevor Sie ihnen vertrauen.
-        </h1>
-        <p className="max-w-2xl text-lg leading-relaxed text-muted-foreground">
-          SkillGuard untersucht öffentliche und fremde KI-Agent-Skills auf versteckte Anweisungen, Prompt-Injektion,
-          Datenabfluss und gefährlichen Code – und erklärt verständlich, wo das Risiko liegt. So entscheiden Sie auf
-          einer fundierten Grundlage, statt blind zu vertrauen.
-        </p>
-        <div className="flex flex-wrap items-center gap-3">
-          <Button asChild size="lg">
-            <Link href="/pruefen">
-              <Search className="mr-2 h-4 w-4" />
-              Skill prüfen
-            </Link>
-          </Button>
-          <Button asChild size="lg" variant="outline">
-            <Link href="/dashboard">
-              <LayoutDashboard className="mr-2 h-4 w-4" />
-              Zum Dashboard
-            </Link>
-          </Button>
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+          {SKILL_FACTS.map((f) => (
+            <Card key={f.title} className="h-full">
+              <CardHeader className="pb-2">
+                <f.icon className="h-7 w-7 text-sidebar-primary" />
+                <CardTitle className="pt-2 text-lg">{f.title}</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm leading-relaxed text-muted-foreground">{f.text}</p>
+              </CardContent>
+            </Card>
+          ))}
         </div>
       </section>
 
-      <section className="space-y-6 pb-16">
+      <section className="space-y-6">
         <div className="flex flex-col gap-2">
           <div className="flex items-center gap-3">
             <ShieldAlert className="h-6 w-6 text-sidebar-primary" />
diff --git a/artifacts/skillguard/src/pages/catalog.tsx b/artifacts/skillguard/src/pages/catalog.tsx
index a288d2a..ca8a17a 100644
--- a/artifacts/skillguard/src/pages/catalog.tsx
+++ b/artifacts/skillguard/src/pages/catalog.tsx
@@ -8,6 +8,7 @@ import { Input } from "@/components/ui/input";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { VerdictBadge } from "@/components/ui-helpers";
+import { PublicEducation } from "@/components/public-education";
 import { formatDate } from "@/lib/format";
 import { Shield, Search, Download, ArrowRight, FileSearch, ShieldCheck } from "lucide-react";
 
@@ -165,6 +166,8 @@ export default function Catalog() {
           </div>
         )}
       </section>
+
+      <PublicEducation />
     </div>
   );
 }