---
name: namecard-engine
description: Engine for building premium digital namecards with lead capture and vCard integration.
skills: [frontend-design, ui-ux-pro-max, api-patterns]
---

# Namecard Engine 📇

> This skill provides the architectural blueprints for the `/namecard` workflow.

---

## 🎨 Design Tokens (Vibe Coding Standard)

| Token | Value |
|-------|-------|
| **Glass Background** | `rgba(255, 255, 255, 0.05)` |
| **Glass Border** | `rgba(255, 255, 255, 0.1)` |
| **Primary Glow** | `HSL(250, 100, 50)` |
| **Secondary Glow** | `HSL(330, 100, 50)` |
| **Blur** | `backdrop-filter: blur(20px)` |

---

## 🏗️ Lead Capture Pattern

To maximize conversions, the lead capture form should use **Progressive Elicitation**:

1.  **Field 1**: Name (Required)
2.  **Field 2**: Email (Required)
3.  **Field 3**: "How can I help you?" (Optional textarea)

### Storage Strategy
By default, store leads in `data/leads.json`. For production, suggest connecting to **Supabase** or **Stripe**.

---

## 📲 vCard Generator (Code Snippet)

```typescript
const generateVCard = (data: ProfileData) => {
  const vCard = [
    'BEGIN:VCARD',
    'VERSION:3.0',
    `FN:${data.name}`,
    `ORG:${data.company}`,
    `TITLE:${data.title}`,
    `NOTE:${data.bio}`,
    ...data.links.map(link => `URL:${link.url}`),
    'END:VCARD'
  ].join('\n');
  
  const blob = new Blob([vCard], { type: 'text/vcard' });
  // logic to download...
};
```

---

## 📂 Template: Mobile-First Layout

```tsx
// Priority: 390px (iPhone)
<div className="min-h-screen bg-black text-white p-6 font-sans">
  <div className="max-w-md mx-auto space-y-8">
     {/* Hero Section */}
     {/* Social Grid */}
     {/* Lead Form */}
  </div>
</div>
```
