Profile Card

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

.wm-card { --wm-radius: var(--wm-radius, 14px); display: grid; gap: 14px; max-width: 340px; padding: 16px; background: var(--wm-surface, #fff); border: 1px solid #e5e7eb; border-radius: var(--wm-radius, 14px); box-shadow: 0 10px 30px -18px rgba(17, 24, 39, .35); font-family: system-ui, sans-serif; transition: transform .2s, box-shadow .2s; }
.wm-card:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -20px rgba(17, 24, 39, .45); }
.wm-card__media { aspect-ratio: 16 / 10; border-radius: calc(var(--wm-radius, 14px) - 4px); background: linear-gradient(135deg, color-mix(in srgb, var(--wm-primary, #2563eb) 35%, white), var(--wm-primary, #2563eb)); }
.wm-card__avatar { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--wm-primary, #2563eb); color: var(--wm-on-primary, #fff); font-weight: 700; }
.wm-card__title { margin: 0 0 4px; font-size: 18px; }
.wm-card__meta, .wm-card__bio { margin: 0; color: #6b7280; font-size: 14px; }
.wm-card__price { margin: 8px 0 0; font-size: 20px; font-weight: 700; color: #111827; }
.wm-card__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.wm-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 16px; border: 1.5px solid transparent; border-radius: calc(var(--wm-radius, 14px) - 4px); font: 600 14px/1 system-ui, sans-serif; cursor: pointer; text-decoration: none; }
.wm-btn--primary { background: var(--wm-primary, #2563eb); color: var(--wm-on-primary, #fff); }
.wm-btn--outline { background: transparent; color: var(--wm-primary, #2563eb); border-color: var(--wm-primary, #2563eb); }

/* Contrato WebMCP */
[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-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-component="profile-card"] [data-context="profile-name"] { webmcp-context: "profileName"; webmcp-format: "text"; }
[data-component="profile-card"] [data-context="profile-role"] { webmcp-context: "profileRole"; webmcp-format: "text"; }

<article class="wm-card wm-card--profile" data-component="profile-card" data-user-id="u-1024">
  <div class="wm-card__avatar" aria-hidden="true">AR</div>
  <div class="wm-card__body">
    <h3 class="wm-card__title" data-context="profile-name">Ana Ruiz</h3>
    <p class="wm-card__meta" data-context="profile-role">Diseñadora de producto · Bogotá</p>
    <p class="wm-card__bio">Diseño sistemas de componentes accesibles y nativos para agentes.</p>
  </div>
  <div class="wm-card__actions">
    <button class="wm-btn wm-btn--primary" data-tool="followUser" type="button">Seguir</button>
    <a class="wm-btn wm-btn--outline" data-tool="viewProfile" href="#perfil/u-1024">Ver perfil</a>
  </div>
</article>

{
  "id": "core-profile-card",
  "name": "Profile Card",
  "category": "cards",
  "library": "core",
  "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",
    "core"
  ],
  "controls": [
    {
      "variable": "--wm-primary",
      "label": "Color primario",
      "type": "color",
      "default": "#2563eb"
    },
    {
      "variable": "--wm-on-primary",
      "label": "Texto sobre primario",
      "type": "color",
      "default": "#ffffff"
    },
    {
      "variable": "--wm-radius",
      "label": "Radio",
      "type": "range",
      "default": "10px",
      "min": 0,
      "max": 24,
      "step": 1,
      "unit": "px"
    },
    {
      "variable": "--wm-surface",
      "label": "Fondo de la superficie",
      "type": "color",
      "default": "#ffffff"
    }
  ],
  "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": [
    "tailwind-profile-card",
    "bootstrap-profile-card",
    "mui-profile-card",
    "shadcn-profile-card"
  ],
  "preview": "preview.css",
  "css": "profile-card.webmcp.css",
  "html": "profile-card.html"
}