designkit-ai 1.0.0

package/components/web/toggles/toggle-group.html

@@ -0,0 +1,38 @@
+<!--
+  @name: Toggle Group — Notification Settings
+  @kit: web
+  @width: 440
+  @height: 220
+  @tags: toggle, group, settings, notifications, list
+-->
+<div data-component="Toggle Group — Notification Settings" style="width:100%;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);box-sizing:border-box;font-family:var(--kit-font, Inter, system-ui, sans-serif);overflow:hidden">
+  <!-- Row 1: Notifications -->
+  <div style="display:flex;align-items:center;gap:14px;padding:18px 20px">
+    <div style="width:36px;height:36px;border-radius:var(--kit-radius, 8px);background:var(--kit-surface, #F8FAFC);display:flex;align-items:center;justify-content:center;flex-shrink:0"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-2, #475569)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg></div>
+    <div style="flex:1;min-width:0">
+      <div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A)">Push Notifications</div>
+      <div style="font-size:12px;color:var(--kit-text-3, #94A3B8);margin-top:1px">Alerts for new activity</div>
+    </div>
+    <div style="width:48px;height:24px;border-radius:var(--kit-radius-full, 9999px);background:var(--kit-primary, #6366F1);padding:2px;box-sizing:border-box;cursor:pointer;flex-shrink:0"><div style="width:20px;height:20px;border-radius:var(--kit-radius-full, 9999px);background:#FFFFFF;margin-left:auto;box-shadow:0 1px 3px rgba(0,0,0,0.1)"></div></div>
+  </div>
+  <div style="height:1px;background:var(--kit-border, #E2E8F0);margin:0 20px"></div>
+  <!-- Row 2: Email -->
+  <div style="display:flex;align-items:center;gap:14px;padding:18px 20px">
+    <div style="width:36px;height:36px;border-radius:var(--kit-radius, 8px);background:var(--kit-surface, #F8FAFC);display:flex;align-items:center;justify-content:center;flex-shrink:0"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-2, #475569)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg></div>
+    <div style="flex:1;min-width:0">
+      <div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A)">Email Digest</div>
+      <div style="font-size:12px;color:var(--kit-text-3, #94A3B8);margin-top:1px">Weekly summary emails</div>
+    </div>
+    <div style="width:48px;height:24px;border-radius:var(--kit-radius-full, 9999px);background:var(--kit-border, #E2E8F0);padding:2px;box-sizing:border-box;cursor:pointer;flex-shrink:0"><div style="width:20px;height:20px;border-radius:var(--kit-radius-full, 9999px);background:#FFFFFF;box-shadow:0 1px 3px rgba(0,0,0,0.1)"></div></div>
+  </div>
+  <div style="height:1px;background:var(--kit-border, #E2E8F0);margin:0 20px"></div>
+  <!-- Row 3: Security -->
+  <div style="display:flex;align-items:center;gap:14px;padding:18px 20px">
+    <div style="width:36px;height:36px;border-radius:var(--kit-radius, 8px);background:var(--kit-surface, #F8FAFC);display:flex;align-items:center;justify-content:center;flex-shrink:0"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-2, #475569)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></div>
+    <div style="flex:1;min-width:0">
+      <div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A)">Two-Factor Auth</div>
+      <div style="font-size:12px;color:var(--kit-text-3, #94A3B8);margin-top:1px">Extra security layer</div>
+    </div>
+    <div style="width:48px;height:24px;border-radius:var(--kit-radius-full, 9999px);background:var(--kit-primary, #6366F1);padding:2px;box-sizing:border-box;cursor:pointer;flex-shrink:0"><div style="width:20px;height:20px;border-radius:var(--kit-radius-full, 9999px);background:#FFFFFF;margin-left:auto;box-shadow:0 1px 3px rgba(0,0,0,0.1)"></div></div>
+  </div>
+</div>

package/components/web/toggles/toggle-switch.html

@@ -0,0 +1,14 @@
+<!--
+  @name: Toggle Switch — Settings Row
+  @kit: web
+  @width: 360
+  @height: 64
+  @tags: toggle, switch, setting, row, label, description
+-->
+<div data-component="Toggle Switch — Settings Row" style="width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);box-sizing:border-box;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <div style="display:flex;flex-direction:column;gap:2px">
+    <div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A)">Push Notifications</div>
+    <div style="font-size:12px;color:var(--kit-text-2, #475569)">Receive alerts on your device</div>
+  </div>
+  <div style="width:48px;height:24px;border-radius:var(--kit-radius-full, 9999px);background:var(--kit-primary, #6366F1);padding:2px;box-sizing:border-box;cursor:pointer;flex-shrink:0"><div style="width:20px;height:20px;border-radius:var(--kit-radius-full, 9999px);background:#FFFFFF;margin-left:auto;box-shadow:0 1px 3px rgba(0,0,0,0.1)"></div></div>
+</div>

package/components/web/widgets/api-key-row.html

@@ -0,0 +1,16 @@
+<!--
+  @name: API Key Row
+  @kit: web
+  @width: 640
+  @height: 56
+  @tags: api, key, token, developer, saas
+-->
+<div data-component="API Key Row" style="display:flex;align-items:center;width:100%;padding:12px 16px;border:1px solid var(--kit-border, #E2E8F0);border-radius:8px;gap:12px;font-family:var(--kit-font, Inter, system-ui, sans-serif);box-sizing:border-box">
+  <div style="width:8px;height:8px;border-radius:4px;background:var(--kit-success, #22C55E);flex-shrink:0"></div>
+  <div style="flex:1;min-width:0"><div style="font-size:14px;font-weight:500;color:var(--kit-text, #0F172A)">Production</div><div style="font-size:12px;color:var(--kit-text-3, #94A3B8);font-family:ui-monospace, monospace;margin-top:1px">sk_live_••••••••••••4f2b</div></div>
+  <div style="font-size:12px;color:var(--kit-text-3, #94A3B8)">Created Mar 15</div>
+  <div style="display:flex;gap:4px">
+    <div style="height:28px;padding:0 10px;border:1px solid var(--kit-border, #E2E8F0);border-radius:6px;display:flex;align-items:center;font-size:12px;color:var(--kit-text-2, #475569);cursor:pointer">Copy</div>
+    <div style="height:28px;padding:0 10px;border:1px solid var(--kit-border, #E2E8F0);border-radius:6px;display:flex;align-items:center;font-size:12px;color:var(--kit-danger, #EF4444);cursor:pointer">Revoke</div>
+  </div>
+</div>

package/components/web/widgets/billing-card.html

@@ -0,0 +1,14 @@
+<!--
+  @name: Billing Card — Current Plan
+  @kit: web
+  @width: 400
+  @height: 160
+  @tags: billing, plan, subscription, payment, saas
+-->
+<div data-component="Billing Card — Current Plan" style="width:100%;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:12px;padding:20px;box-sizing:border-box;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px">
+    <div><div style="font-size:16px;font-weight:600;color:var(--kit-text, #0F172A)">Pro Plan</div><div style="font-size:13px;color:var(--kit-text-2, #475569);margin-top:2px">$29/month · Renews Apr 15</div></div>
+    <span style="background:var(--kit-success-bg, #F0FDF4);color:var(--kit-success, #22C55E);padding:3px 10px;border-radius:12px;font-size:12px;font-weight:500">Active</span>
+  </div>
+  <div style="display:flex;gap:8px"><div style="height:32px;padding:0 14px;background:var(--kit-primary, #6366F1);color:#fff;border-radius:6px;display:flex;align-items:center;font-size:13px;font-weight:500;cursor:pointer">Upgrade</div><div style="height:32px;padding:0 14px;border:1px solid var(--kit-border, #E2E8F0);border-radius:6px;display:flex;align-items:center;font-size:13px;color:var(--kit-text-2, #475569);cursor:pointer">Manage</div><div style="height:32px;padding:0 14px;border:1px solid var(--kit-border, #E2E8F0);border-radius:6px;display:flex;align-items:center;font-size:13px;color:var(--kit-text-3, #94A3B8);cursor:pointer">Cancel</div></div>
+</div>

package/components/web/widgets/changelog-item.html

@@ -0,0 +1,15 @@
+<!--
+  @name: Changelog Item — Version Update
+  @kit: web
+  @width: 640
+  @height: 120
+  @tags: changelog, update, version, release, saas
+-->
+<div data-component="Changelog Item — Version Update" style="display:flex;gap:16px;width:100%;font-family:var(--kit-font, Inter, system-ui, sans-serif);padding:16px 0;border-bottom:1px solid var(--kit-border, #E2E8F0)">
+  <div style="display:flex;flex-direction:column;align-items:center;width:20px;flex-shrink:0;padding-top:4px"><div style="width:10px;height:10px;border-radius:5px;background:var(--kit-primary, #6366F1)"></div><div style="width:2px;flex:1;background:var(--kit-border, #E2E8F0);margin-top:4px"></div></div>
+  <div style="flex:1">
+    <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px"><span style="font-size:14px;font-weight:600;color:var(--kit-text, #0F172A)">v2.4.0</span><span style="background:var(--kit-success-bg, #F0FDF4);color:var(--kit-success, #22C55E);font-size:11px;font-weight:600;padding:2px 8px;border-radius:4px">New</span><span style="font-size:12px;color:var(--kit-text-3, #94A3B8)">Mar 20, 2026</span></div>
+    <div style="font-size:14px;color:var(--kit-text, #0F172A);font-weight:500;margin-bottom:4px">Real-time collaboration</div>
+    <div style="font-size:13px;color:var(--kit-text-2, #475569);line-height:1.5">Multiple team members can now edit the same project simultaneously with live cursor tracking.</div>
+  </div>
+</div>

package/components/web/widgets/integration-card.html

@@ -0,0 +1,15 @@
+<!--
+  @name: Integration Card — Connected App
+  @kit: web
+  @width: 320
+  @height: 120
+  @tags: integration, app, connected, saas, api
+-->
+<div data-component="Integration Card — Connected App" style="width:100%;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:12px;padding:16px;box-sizing:border-box;font-family:var(--kit-font, Inter, system-ui, sans-serif);display:flex;gap:14px;align-items:flex-start">
+  <div style="width:44px;height:44px;border-radius:10px;background:var(--kit-surface-2, #F1F5F9);display:flex;align-items:center;justify-content:center;flex-shrink:0"><svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" style="color:var(--kit-text-2, #475569)"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.5 11.5 0 0 1 12 5.803a11.5 11.5 0 0 1 3.003.404c2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.565 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/></svg></div>
+  <div style="flex:1;min-width:0">
+    <div style="display:flex;align-items:center;gap:8px;margin-bottom:4px"><span style="font-size:15px;font-weight:600;color:var(--kit-text, #0F172A)">GitHub</span><span style="width:6px;height:6px;border-radius:3px;background:var(--kit-success, #22C55E)"></span></div>
+    <div style="font-size:13px;color:var(--kit-text-2, #475569);margin-bottom:8px">Auto-deploy on push to main</div>
+    <div style="display:flex;gap:8px"><span style="font-size:12px;color:var(--kit-primary, #6366F1);cursor:pointer;font-weight:500">Configure</span><span style="font-size:12px;color:var(--kit-text-3, #94A3B8)">·</span><span style="font-size:12px;color:var(--kit-danger, #EF4444);cursor:pointer">Disconnect</span></div>
+  </div>
+</div>

package/components/web/widgets/onboarding-checklist.html

@@ -0,0 +1,18 @@
+<!--
+  @name: Onboarding Checklist
+  @kit: web
+  @width: 360
+  @height: 280
+  @tags: onboarding, checklist, getting-started, progress, saas
+-->
+<div data-component="Onboarding Checklist" style="width:100%;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:12px;padding:20px;box-sizing:border-box;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px"><span style="font-size:16px;font-weight:600;color:var(--kit-text, #0F172A)">Getting Started</span><span style="font-size:13px;color:var(--kit-primary, #6366F1);font-weight:500">3/5</span></div>
+  <div style="width:100%;height:6px;background:var(--kit-surface-2, #F1F5F9);border-radius:3px;overflow:hidden;margin-bottom:16px"><div style="width:60%;height:100%;background:var(--kit-primary, #6366F1);border-radius:3px"></div></div>
+  <div style="display:flex;flex-direction:column;gap:10px">
+    <div style="display:flex;align-items:center;gap:10px"><div style="width:20px;height:20px;border-radius:10px;background:var(--kit-primary, #6366F1);display:flex;align-items:center;justify-content:center;flex-shrink:0"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div><span style="font-size:14px;color:var(--kit-text-3, #94A3B8);text-decoration:line-through">Create account</span></div>
+    <div style="display:flex;align-items:center;gap:10px"><div style="width:20px;height:20px;border-radius:10px;background:var(--kit-primary, #6366F1);display:flex;align-items:center;justify-content:center;flex-shrink:0"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div><span style="font-size:14px;color:var(--kit-text-3, #94A3B8);text-decoration:line-through">Set up workspace</span></div>
+    <div style="display:flex;align-items:center;gap:10px"><div style="width:20px;height:20px;border-radius:10px;background:var(--kit-primary, #6366F1);display:flex;align-items:center;justify-content:center;flex-shrink:0"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div><span style="font-size:14px;color:var(--kit-text-3, #94A3B8);text-decoration:line-through">Invite team members</span></div>
+    <div style="display:flex;align-items:center;gap:10px"><div style="width:20px;height:20px;border-radius:10px;border:2px solid var(--kit-primary, #6366F1);box-sizing:border-box;flex-shrink:0"></div><span style="font-size:14px;font-weight:500;color:var(--kit-primary, #6366F1)">Create first project</span></div>
+    <div style="display:flex;align-items:center;gap:10px"><div style="width:20px;height:20px;border-radius:10px;border:2px solid var(--kit-border, #E2E8F0);box-sizing:border-box;flex-shrink:0"></div><span style="font-size:14px;color:var(--kit-text, #0F172A)">Connect integration</span></div>
+  </div>
+</div>

package/components/web/widgets/pricing-toggle.html

@@ -0,0 +1,13 @@
+<!--
+  @name: Pricing Toggle — Monthly / Yearly
+  @kit: web
+  @width: 280
+  @height: 40
+  @tags: pricing, toggle, monthly, yearly, billing, saas
+-->
+<div data-component="Pricing Toggle — Monthly / Yearly" style="display:inline-flex;align-items:center;gap:12px;font-family:var(--kit-font, Inter, system-ui, sans-serif);font-size:14px">
+  <span style="color:var(--kit-text, #0F172A);font-weight:500">Monthly</span>
+  <div style="width:48px;height:26px;border-radius:13px;background:var(--kit-primary, #6366F1);padding:3px;box-sizing:border-box;cursor:pointer"><div style="width:20px;height:20px;border-radius:10px;background:#FFFFFF;margin-left:auto;box-shadow:0 1px 2px rgba(0,0,0,0.1)"></div></div>
+  <span style="color:var(--kit-text, #0F172A);font-weight:500">Yearly</span>
+  <span style="background:var(--kit-success-bg, #F0FDF4);color:var(--kit-success, #22C55E);font-size:12px;font-weight:600;padding:3px 8px;border-radius:6px">Save 20%</span>
+</div>

package/components/web/widgets/team-member-row.html

@@ -0,0 +1,13 @@
+<!--
+  @name: Team Member Row — with Role
+  @kit: web
+  @width: 640
+  @height: 56
+  @tags: team, member, user, role, saas, admin
+-->
+<div data-component="Team Member Row — with Role" style="display:flex;align-items:center;width:100%;padding:10px 16px;gap:12px;font-family:var(--kit-font, Inter, system-ui, sans-serif);border-bottom:1px solid var(--kit-border, #E2E8F0)">
+  <div style="width:36px;height:36px;border-radius:18px;background:var(--kit-primary, #6366F1);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;flex-shrink:0">SC</div>
+  <div style="flex:1;min-width:0"><div style="font-size:14px;font-weight:500;color:var(--kit-text, #0F172A)">Sarah Chen</div><div style="font-size:12px;color:var(--kit-text-3, #94A3B8)">sarah@company.com</div></div>
+  <div style="height:24px;padding:0 10px;border-radius:12px;background:rgba(99,102,241,0.08);color:var(--kit-primary, #6366F1);font-size:12px;font-weight:500;display:flex;align-items:center">Admin</div>
+  <div style="cursor:pointer;color:var(--kit-text-3, #94A3B8)"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg></div>
+</div>

package/components/web/widgets/usage-meter.html

@@ -0,0 +1,12 @@
+<!--
+  @name: Usage Meter — Storage / API
+  @kit: web
+  @width: 360
+  @height: 100
+  @tags: usage, meter, storage, api, quota, saas
+-->
+<div data-component="Usage Meter — Storage / API" style="width:100%;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:12px;padding:16px;box-sizing:border-box;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <div style="display:flex;justify-content:space-between;margin-bottom:8px"><span style="font-size:14px;font-weight:500;color:var(--kit-text, #0F172A)">Storage</span><span style="font-size:13px;color:var(--kit-text-2, #475569)">7.2 GB / 10 GB</span></div>
+  <div style="width:100%;height:8px;background:var(--kit-surface-2, #F1F5F9);border-radius:4px;overflow:hidden;margin-bottom:8px"><div style="width:72%;height:100%;background:var(--kit-warning, #F59E0B);border-radius:4px"></div></div>
+  <div style="font-size:12px;color:var(--kit-text-3, #94A3B8)">72% used · <span style="color:var(--kit-primary, #6366F1);cursor:pointer;font-weight:500">Upgrade plan</span></div>
+</div>

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "designkit-ai",
+  "version": "1.0.0",
+  "description": "502 HTML UI components + AI skills for designing and building web and mobile apps",
+  "keywords": [
+    "design-system",
+    "ui-components",
+    "html",
+    "ai",
+    "claude",
+    "cursor",
+    "vibe-coding",
+    "react",
+    "nextjs",
+    "vue",
+    "flutter",
+    "swiftui"
+  ],
+  "homepage": "https://github.com/pixeliro-sys/designkit-source-for-ai",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pixeliro-sys/designkit-source-for-ai.git"
+  },
+  "license": "MIT",
+  "type": "module",
+  "bin": {
+    "designkit": "./bin/designkit.js"
+  },
+  "files": [
+    "bin",
+    "src",
+    "components",
+    "skills",
+    "AI-AGENT.md"
+  ],
+  "scripts": {
+    "test": "node bin/designkit.js list"
+  },
+  "dependencies": {
+    "@anthropic-ai/sdk": "^0.87.0",
+    "commander": "^12.1.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

package/skills/README.md

@@ -0,0 +1,35 @@
+# DesignKit Skills
+
+Each skill tells an AI agent how to **design, build, or convert** UI using a specific framework.
+
+Not just convert — you can go directly from idea to working code:
+
+```bash
+# Design a screen as HTML first, then convert
+"Read skills/design.md, then design: a SaaS dashboard. Output to output/dashboard.html"
+"Read skills/react.md, then convert output/dashboard.html to React components"
+
+# Or go directly to the framework in one shot
+"Read AI-AGENT.md and skills/nextjs.md, then build:
+a SaaS dashboard with sidebar, KPI row, data table.
+Output to src/app/dashboard/page.tsx"
+
+# Or build a full feature
+"Read skills/react-native.md, then build a complete auth flow:
+Splash → Onboarding → Login → Home. Use React Navigation."
+```
+
+## Available Skills
+
+| Skill | File | Output |
+|-------|------|--------|
+| Design | [design.md](design.md) | Single-file `.html` — pixel-perfect screen |
+| Contribute | [contribute.md](contribute.md) | Create a valid component or validate an existing one |
+| React | [react.md](react.md) | `.tsx` component with hooks |
+| Next.js | [nextjs.md](nextjs.md) | App Router page + components |
+| Vue 3 | [vue.md](vue.md) | `<script setup>` SFC |
+| Svelte | [svelte.md](svelte.md) | `.svelte` component |
+| Tailwind CSS | [tailwind.md](tailwind.md) | HTML with Tailwind utility classes |
+| Flutter | [flutter.md](flutter.md) | Dart Widget tree |
+| SwiftUI | [swiftui.md](swiftui.md) | SwiftUI View |
+| React Native | [react-native.md](react-native.md) | RN StyleSheet component |

package/skills/contribute.md

@@ -0,0 +1,267 @@
+# Skill: Contribute — Generate a DesignKit Component
+
+You are a DesignKit component author.
+When asked to create a new component, output a valid `.html` file
+that meets every rule below. No exceptions.
+
+---
+
+## Step 1 — Determine placement
+
+Ask yourself (or infer from the request):
+
+| Question | Answer → |
+|----------|----------|
+| Is it for mobile app (iOS/Android)? | `components/app-mobile/{category}/` |
+| Is it for web/desktop? | `components/web/{category}/` |
+| Is it reusable across both (icon, illustration, mockup)? | `components/common/{category}/` |
+
+**Existing categories — use these, don't invent new ones:**
+
+```
+app-mobile:  navbars, buttons, cards, inputs, lists, chips, feedback, tabs,
+             toggles, menus, dialogs, surfaces, sliders, badges, dividers,
+             native, patterns, charts, data-display, forms, ecommerce,
+             finance, fitness, food, healthcare, education, social, travel,
+             job, media, navigation, logistics
+
+web:         navbars, buttons, cards, inputs, heroes, features, cta, pricing,
+             social-proof, layout, tables, modals, feedback, charts, widgets,
+             patterns, products, cart, account, tabs, forms, ecommerce,
+             marketing, content, media, saas, job, real-estate, metrics,
+             data-display, badges, dividers, navigation, surfaces, menus,
+             toggles, logos, screenshots, social, social-media, presentation,
+             promotions, print
+
+common:      ui-icons, illustrations, decorations, mockup-elements
+```
+
+If none fit, pick the closest one.
+
+---
+
+## Step 2 — Write the file header
+
+Every component file starts with this comment. Fill in all fields.
+
+```html
+<!--
+  @name: {Title Case Name}
+  @kit: {web | app-mobile | common}
+  @category: {category folder name}
+  @width: {intended render width in px, number only}
+  @height: {intended render height in px, number only}
+  @tags: {comma, separated, lowercase, keywords}
+-->
+```
+
+Example:
+```html
+<!--
+  @name: Pricing Card Pro
+  @kit: web
+  @category: pricing
+  @width: 320
+  @height: 480
+  @tags: pricing, card, pro, tier, subscription, saas
+-->
+```
+
+---
+
+## Step 3 — Wrap with font root
+
+The outer wrapper must set the font family so the component renders correctly
+when opened standalone:
+
+```html
+<div data-component="{Name}" style="font-family:var(--kit-font,Inter,system-ui,sans-serif)">
+  <!-- component content here -->
+</div>
+```
+
+---
+
+## Step 4 — Build with tokens
+
+**Every** color, size, radius, shadow, and spacing value must use a `var(--kit-*)` with a hardcoded fallback.
+
+### Token reference
+
+```css
+/* Colors */
+var(--kit-primary,       #6366F1)
+var(--kit-primary-text,  #FFFFFF)
+var(--kit-secondary,     #64748B)
+var(--kit-accent,        #F59E0B)
+var(--kit-bg,            #FFFFFF)
+var(--kit-surface,       #F8FAFC)
+var(--kit-surface-2,     #F1F5F9)
+var(--kit-text,          #0F172A)
+var(--kit-text-2,        #475569)
+var(--kit-text-3,        #94A3B8)
+var(--kit-text-inverse,  #FFFFFF)
+var(--kit-border,        #E2E8F0)
+var(--kit-border-strong, #CBD5E1)
+var(--kit-success,       #22C55E)
+var(--kit-error,         #EF4444)
+var(--kit-warning,       #F59E0B)
+var(--kit-info,          #3B82F6)
+
+/* Typography */
+var(--kit-font,     'Inter',system-ui,sans-serif)
+var(--kit-text-xs,  11px)
+var(--kit-text-sm,  13px)
+var(--kit-text-md,  15px)
+var(--kit-text-lg,  17px)
+var(--kit-text-xl,  20px)
+var(--kit-text-2xl, 24px)
+var(--kit-text-3xl, 32px)
+var(--kit-text-4xl, 48px)
+
+/* Spacing */
+var(--kit-space-1,  4px)
+var(--kit-space-2,  8px)
+var(--kit-space-3,  12px)
+var(--kit-space-4,  16px)
+var(--kit-space-5,  20px)
+var(--kit-space-6,  24px)
+var(--kit-space-8,  32px)
+var(--kit-space-10, 40px)
+
+/* Border radius */
+var(--kit-radius-sm,   6px)
+var(--kit-radius,      10px)
+var(--kit-radius-lg,   14px)
+var(--kit-radius-xl,   20px)
+var(--kit-radius-full, 9999px)
+
+/* Shadows */
+var(--kit-shadow-sm, 0 1px 3px rgba(0,0,0,0.08))
+var(--kit-shadow,    0 4px 12px rgba(0,0,0,0.10))
+var(--kit-shadow-lg, 0 8px 32px rgba(0,0,0,0.12))
+var(--kit-shadow-xl, 0 20px 60px rgba(0,0,0,0.15))
+```
+
+### ❌ Never do this
+```html
+<div style="background:#6366F1; border-radius:10px; color:#fff">
+```
+
+### ✅ Always do this
+```html
+<div style="background:var(--kit-primary,#6366F1); border-radius:var(--kit-radius,10px); color:var(--kit-primary-text,#FFF)">
+```
+
+---
+
+## Step 5 — Use semantic HTML
+
+| Purpose | Use |
+|---------|-----|
+| Clickable action | `<button type="button">` |
+| Navigation link | `<a href="#">` |
+| Navigation group | `<nav>` |
+| Page/section header | `<header>` |
+| Main content | `<main>` |
+| List of items | `<ul><li>` |
+| Form field | `<input>`, `<label>`, `<textarea>`, `<select>` |
+| Headings | `<h1>`–`<h6>` |
+| Paragraph | `<p>` |
+
+**Never use `<div>` for interactive elements.**
+
+---
+
+## Step 6 — No JavaScript
+
+- No `<script>` tags
+- No `onclick`, `onchange`, `oninput` attributes
+- No CSS animations that require JS triggers
+- Static design preview only — interactions are implied visually
+
+---
+
+## Step 7 — Images
+
+Always use placeholder URLs. Never embed base64 or reference local files.
+
+```html
+<img src="https://placehold.jp/400x300.png" alt="product image" style="width:100%;border-radius:var(--kit-radius,10px);display:block;" />
+```
+
+Common sizes:
+```
+320x200   card image
+400x300   product image
+80x80     avatar
+40x40     icon / thumbnail
+1440x600  hero background
+390x844   full mobile screen
+```
+
+---
+
+## Full output format
+
+```html
+<!--
+  @name: {Name}
+  @kit: {web|app-mobile|common}
+  @category: {category}
+  @width: {W}
+  @height: {H}
+  @tags: {tag1, tag2, tag3}
+-->
+<div data-component="{Name}" style="font-family:var(--kit-font,Inter,system-ui,sans-serif)">
+
+  <!-- component HTML here — inline styles, tokens, semantic elements -->
+
+</div>
+```
+
+---
+
+## Validation checklist
+
+Before outputting, verify every item:
+
+- [ ] File header present with all 6 fields
+- [ ] Outer `data-component` wrapper with `font-family`
+- [ ] Every color uses `var(--kit-*, fallback)`
+- [ ] Every radius, shadow, spacing uses `var(--kit-*, fallback)`
+- [ ] No hardcoded hex in component HTML
+- [ ] Semantic HTML — no div-soup for interactive elements
+- [ ] No `<script>` tags or JS event attributes
+- [ ] Placeholder images via `placehold.jp`
+- [ ] File path matches: `components/{kit}/{category}/{name}.html`
+
+---
+
+## Example prompts
+
+**Create one component:**
+```
+Read skills/contribute.md, then create a new component:
+A mobile "Story Row" — horizontal scrollable row of circular avatar stories
+with an "Add story" button at the left.
+
+Output to components/app-mobile/patterns/story-row-scrollable.html
+```
+
+**Create a set of related components:**
+```
+Read skills/contribute.md, then create 3 pricing card variants for web:
+- card-pricing-starter.html  (basic tier, outlined)
+- card-pricing-pro.html      (highlighted, filled primary)
+- card-pricing-enterprise.html (dark, custom)
+
+Output to components/web/pricing/
+```
+
+**Validate an existing component:**
+```
+Read skills/contribute.md, then review components/web/cards/card-basic.html
+and check if it meets all contribution rules.
+Report any violations.
+```