Product Card

/* Componente: Product Card */
/* Categoría: cards · Librería: shadcn · Versión: 1.0.0 */
/* Tarjeta de producto IA-First: imagen, nombre, precio y acciones addToCart / viewDetails; expone nombre y precio como contexto para agentes. */
/* Importar: npx webmcpcss components import shadcn-product-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="product-card"] [data-tool="addToCart"] {
  webmcp-tool: "addToCart";
  webmcp-description: "Añade el producto de la tarjeta al carrito";
  webmcp-param-productId: attr(data-product-id);
  webmcp-intent: "action";
  webmcp-confirmation: "none";
  webmcp-permissions: "restricted";
  webmcp-doc-productId: "Identificador del producto (data-product-id de la tarjeta)";
}
[data-slot="card"][data-component="product-card"] [data-tool="viewDetails"] {
  webmcp-tool: "viewDetails";
  webmcp-description: "Abre la página de detalle del producto";
  webmcp-param-productId: attr(data-product-id);
  webmcp-intent: "navigate";
  webmcp-confirmation: "none";
  webmcp-permissions: "read-only";
}
[data-slot="card"][data-component="product-card"] [data-context="product-name"] { webmcp-context: "productName"; webmcp-format: "text"; }
[data-slot="card"][data-component="product-card"] [data-context="product-price"] { webmcp-context: "productPrice"; webmcp-format: "currency"; }

<div data-slot="card" data-component="product-card" data-product-id="SKU-42" class="flex w-full max-w-sm flex-col gap-4 overflow-hidden rounded-xl border bg-card py-0 text-card-foreground shadow-sm">
  <div class="aspect-[16/10] w-full bg-gradient-to-br from-zinc-300 to-primary" role="img" aria-label="Zapatillas Runner Pro"></div>
  <div data-slot="card-content" class="px-6">
    <h3 data-slot="card-title" class="font-semibold leading-none" data-context="product-name">Zapatillas Runner Pro</h3>
    <p data-slot="card-description" class="mt-1.5 text-sm text-muted-foreground">Talla 42 · Rojo · Envío 24 h</p>
    <p class="mt-3 text-xl font-bold" data-context="product-price">89,90 €</p>
  </div>
  <div data-slot="card-footer" class="flex gap-2 px-6 pb-6">
    <button data-slot="button" data-tool="addToCart" 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">Añadir al carrito</button>
    <a data-slot="button" data-variant="outline" data-tool="viewDetails" href="#producto/SKU-42" 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 detalles</a>
  </div>
</div>

<Card data-component="product-card" data-product-id={product.id}>
  <img src={product.image} alt={product.name} className="aspect-[16/10] w-full object-cover" />
  <CardContent>
    <CardTitle data-context="product-name">{product.name}</CardTitle>
    <CardDescription>{product.meta}</CardDescription>
    <p className="mt-3 text-xl font-bold" data-context="product-price">{product.price}</p>
  </CardContent>
  <CardFooter className="gap-2">
    <Button data-tool="addToCart">Añadir al carrito</Button>
    <Button variant="outline" asChild data-tool="viewDetails"><a href={product.url}>Ver detalles</a></Button>
  </CardFooter>
</Card>

{
  "id": "shadcn-product-card",
  "name": "Product Card",
  "category": "cards",
  "library": "shadcn",
  "version": "1.0.0",
  "description": "Tarjeta de producto IA-First: imagen, nombre, precio y acciones addToCart / viewDetails; expone nombre y precio como contexto para agentes.",
  "author": "WebMCPcss Team",
  "tags": [
    "card",
    "product",
    "ecommerce",
    "cart",
    "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 precio de la tarjeta a 39,90 €",
    "pon el botón Añadir al carrito en verde"
  ],
  "animateExamples": [
    "haz que la tarjeta de producto aparezca con slide-up",
    "añade una elevación al pasar el ratón por la tarjeta"
  ],
  "related": [
    "core-product-card",
    "tailwind-product-card",
    "bootstrap-product-card",
    "mui-product-card"
  ],
  "usage": {
    "framework": "react",
    "code": "<Card data-component=\"product-card\" data-product-id={product.id}>\n  <img src={product.image} alt={product.name} className=\"aspect-[16/10] w-full object-cover\" />\n  <CardContent>\n    <CardTitle data-context=\"product-name\">{product.name}</CardTitle>\n    <CardDescription>{product.meta}</CardDescription>\n    <p className=\"mt-3 text-xl font-bold\" data-context=\"product-price\">{product.price}</p>\n  </CardContent>\n  <CardFooter className=\"gap-2\">\n    <Button data-tool=\"addToCart\">Añadir al carrito</Button>\n    <Button variant=\"outline\" asChild data-tool=\"viewDetails\"><a href={product.url}>Ver detalles</a></Button>\n  </CardFooter>\n</Card>"
  },
  "preview": "preview.css",
  "css": "product-card.webmcp.css",
  "html": "product-card.html"
}