Profile Card

/* Componente: Profile Card */
/* Categoría: cards · Librería: shadcn · Versión: 1.0.0 */
/* Tarjeta de perfil IA-First: avatar, nombre, rol y biografía con acciones viewProfile / followUser (esta última con confirmación). */
/* Importar: npx webmcpcss components import shadcn-profile-card */

/* shadcn/ui: el HTML es el DOM que renderiza <Card …> (data-slot="card"); pasa data-* como props. */
/* Contrato WebMCP */
[data-slot="card"][data-component="profile-card"] [data-tool="viewProfile"] {
  webmcp-tool: "viewProfile";
  webmcp-description: "Abre el perfil completo de la persona";
  webmcp-param-userId: attr(data-user-id);
  webmcp-intent: "navigate";
  webmcp-confirmation: "none";
  webmcp-permissions: "read-only";
}
[data-slot="card"][data-component="profile-card"] [data-tool="followUser"] {
  webmcp-tool: "followUser";
  webmcp-description: "Sigue a la persona (acción social, requiere confirmación)";
  webmcp-param-userId: attr(data-user-id);
  webmcp-intent: "action";
  webmcp-confirmation: "needed";
  webmcp-permissions: "restricted";
}
[data-slot="card"][data-component="profile-card"] [data-context="profile-name"] { webmcp-context: "profileName"; webmcp-format: "text"; }
[data-slot="card"][data-component="profile-card"] [data-context="profile-role"] { webmcp-context: "profileRole"; webmcp-format: "text"; }

<div data-slot="card" data-component="profile-card" data-user-id="u-1024" class="flex w-full max-w-sm flex-col gap-4 rounded-xl border bg-card py-6 text-card-foreground shadow-sm">
  <div data-slot="card-header" class="flex items-center gap-4 px-6">
    <span data-slot="avatar" class="grid size-14 place-items-center rounded-full bg-primary font-semibold text-primary-foreground" aria-hidden="true">AR</span>
    <div>
      <h3 data-slot="card-title" class="font-semibold leading-none" data-context="profile-name">Ana Ruiz</h3>
      <p data-slot="card-description" class="mt-1.5 text-sm text-muted-foreground" data-context="profile-role">Diseñadora de producto · Bogotá</p>
    </div>
  </div>
  <div data-slot="card-content" class="px-6 text-sm">Diseño sistemas de componentes accesibles y nativos para agentes.</div>
  <div data-slot="card-footer" class="flex gap-2 px-6">
    <button data-slot="button" data-tool="followUser" type="button" class="inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground shadow-sm hover:opacity-90">Seguir</button>
    <a data-slot="button" data-variant="outline" data-tool="viewProfile" href="#perfil/u-1024" class="inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-4 text-sm font-medium shadow-sm hover:bg-accent">Ver perfil</a>
  </div>
</div>

<Card data-component="profile-card" data-user-id={user.id}>
  <CardHeader className="flex-row items-center gap-4">
    <Avatar><AvatarFallback>{user.initials}</AvatarFallback></Avatar>
    <div>
      <CardTitle data-context="profile-name">{user.name}</CardTitle>
      <CardDescription data-context="profile-role">{user.role}</CardDescription>
    </div>
  </CardHeader>
  <CardContent>{user.bio}</CardContent>
  <CardFooter className="gap-2">
    <Button data-tool="followUser">Seguir</Button>
    <Button variant="outline" asChild data-tool="viewProfile"><a href={user.url}>Ver perfil</a></Button>
  </CardFooter>
</Card>

{
  "id": "shadcn-profile-card",
  "name": "Profile Card",
  "category": "cards",
  "library": "shadcn",
  "version": "1.0.0",
  "description": "Tarjeta de perfil IA-First: avatar, nombre, rol y biografía con acciones viewProfile / followUser (esta última con confirmación).",
  "author": "WebMCPcss Team",
  "tags": [
    "card",
    "profile",
    "user",
    "social",
    "shadcn"
  ],
  "controls": [
    {
      "variable": "--primary",
      "label": "Color primario",
      "type": "color",
      "default": "#18181b"
    },
    {
      "variable": "--primary-foreground",
      "label": "Texto sobre primario",
      "type": "color",
      "default": "#fafafa"
    },
    {
      "variable": "--radius",
      "label": "Radio",
      "type": "range",
      "default": "0.625rem",
      "min": 0,
      "max": 1.5,
      "step": 0.125,
      "unit": "rem"
    }
  ],
  "promptExamples": [
    "cambia el nombre de la tarjeta de perfil a Ana Ruiz",
    "oculta el botón Seguir"
  ],
  "animateExamples": [
    "aplica fade-in a la tarjeta de perfil",
    "haz que el avatar pulse suavemente"
  ],
  "related": [
    "core-profile-card",
    "tailwind-profile-card",
    "bootstrap-profile-card",
    "mui-profile-card"
  ],
  "usage": {
    "framework": "react",
    "code": "<Card data-component=\"profile-card\" data-user-id={user.id}>\n  <CardHeader className=\"flex-row items-center gap-4\">\n    <Avatar><AvatarFallback>{user.initials}</AvatarFallback></Avatar>\n    <div>\n      <CardTitle data-context=\"profile-name\">{user.name}</CardTitle>\n      <CardDescription data-context=\"profile-role\">{user.role}</CardDescription>\n    </div>\n  </CardHeader>\n  <CardContent>{user.bio}</CardContent>\n  <CardFooter className=\"gap-2\">\n    <Button data-tool=\"followUser\">Seguir</Button>\n    <Button variant=\"outline\" asChild data-tool=\"viewProfile\"><a href={user.url}>Ver perfil</a></Button>\n  </CardFooter>\n</Card>"
  },
  "preview": "preview.css",
  "css": "profile-card.webmcp.css",
  "html": "profile-card.html"
}