Profile Card

/* Componente: Profile Card */
/* Categoría: cards · Librería: bootstrap · 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 bootstrap-profile-card */

/* Bootstrap 5.3: .card en el HTML; este archivo es el contrato para agentes. */
/* Contrato WebMCP */
.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";
}
.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";
}
.card[data-component="profile-card"] [data-context="profile-name"] { webmcp-context: "profileName"; webmcp-format: "text"; }
.card[data-component="profile-card"] [data-context="profile-role"] { webmcp-context: "profileRole"; webmcp-format: "text"; }

<div class="card shadow-sm" style="max-width: 22rem" data-component="profile-card" data-user-id="u-1024">
  <div class="card-body">
    <div class="d-flex align-items-center gap-3 mb-3">
      <div class="rounded-circle bg-primary text-white fw-bold d-flex align-items-center justify-content-center" style="width: 4rem; height: 4rem" aria-hidden="true">AR</div>
      <div>
        <h5 class="card-title mb-0" data-context="profile-name">Ana Ruiz</h5>
        <p class="text-body-secondary small mb-0" data-context="profile-role">Diseñadora de producto · Bogotá</p>
      </div>
    </div>
    <p class="card-text">Diseño sistemas de componentes accesibles y nativos para agentes.</p>
    <div class="d-flex gap-2">
      <button type="button" class="btn btn-primary" data-tool="followUser">Seguir</button>
      <a href="#perfil/u-1024" class="btn btn-outline-primary" data-tool="viewProfile">Ver perfil</a>
    </div>
  </div>
</div>

{
  "id": "bootstrap-profile-card",
  "name": "Profile Card",
  "category": "cards",
  "library": "bootstrap",
  "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",
    "bootstrap"
  ],
  "controls": [
    {
      "variable": "--wm-primary",
      "label": "Color primario",
      "type": "color",
      "default": "#0d6efd"
    },
    {
      "variable": "--wm-radius",
      "label": "Radio",
      "type": "range",
      "default": ".375rem",
      "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",
    "mui-profile-card",
    "shadcn-profile-card"
  ],
  "preview": "preview.css",
  "css": "profile-card.webmcp.css",
  "html": "profile-card.html"
}