npm - @w3kits-com/plugin-opendesign - Versions diffs - 0.1.8 → 0.1.10 - Mend

@w3kits-com/plugin-opendesign 0.1.8 → 0.1.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1712) hide show

package/dist/__w3kits/assets/design-templates/waitlist-page/example.html ADDED Viewed

@@ -0,0 +1,400 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Meridian — Coming Soon</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:wght@400;500;600&display=swap" rel="stylesheet">
+  <style>
+    :root {
+      --bg: #FDE8DF;
+      --fg: #1A1410;
+      --color-ink: #1A1410;
+      --accent: #1A1410;
+      --deco: #E8835A;
+      --deco-logo: #E8522A;
+      --deco-stripe: #F5A623;
+      --input-border: rgba(196, 169, 154, 0.38);
+      --success: #2D6A4F;
+      --btn-label: #FDE8DF;
+      --ticker-bg: rgba(0, 0, 0, 0.9);
+      --ticker-fg: rgba(255, 255, 255, 0.9);
+      --deco-stroke: rgba(0, 0, 0, 0.12);
+      --logo-shadow: rgba(0, 0, 0, 0.08);
+      --font-body: 'DM Sans', sans-serif;
+      --font-display: 'Syne', sans-serif;
+    }
+    *, *::before, *::after {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+    html, body {
+      height: 100%;
+      overflow-x: hidden;
+    }
+    .logo {
+      position: absolute;
+      top: 20px;
+      left: 24px;
+      display: flex;
+      align-items: center;
+      gap: 14px;
+      z-index: 10;
+    }
+    .logo-container {
+      width: 48px;
+      height: 48px;
+      flex-shrink: 0;
+      border-radius: 50%;
+      background: linear-gradient(135deg, var(--deco-logo) 0%, var(--deco) 100%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      box-shadow: 0 2px 8px var(--logo-shadow);
+    }
+    .logo-svg {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      padding: 2px;
+    }
+    .logo-text {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex-shrink: 0;
+    }
+    .logo-name {
+      font-family: var(--font-display);
+      font-weight: 700;
+      font-size: 18px;
+      letter-spacing: -0.02em;
+      color: var(--color-ink);
+    }
+    .logo-dot {
+      font-size: 10px;
+      color: var(--deco-logo);
+      opacity: 0.6;
+    }
+    body {
+      font-family: var(--font-body);
+      background-color: var(--bg);
+      color: var(--fg);
+      display: flex;
+      flex-direction: column;
+      min-height: 100svh;
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+    .upper {
+      flex: 0 0 auto;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      padding: 60px 24px 40px;
+      position: relative;
+      z-index: 2;
+    }
+    .headline {
+      font-family: var(--font-display);
+      font-weight: 800;
+      font-size: clamp(56px, 8vw, 96px);
+      letter-spacing: -0.03em;
+      line-height: 1.0;
+      color: var(--fg);
+      text-align: center;
+      max-width: 900px;
+      margin: 0 auto 22px;
+    }
+    .subtext {
+      font-size: clamp(15px, 1.5vw, 18px);
+      font-weight: 400;
+      line-height: 1.6;
+      color: var(--fg);
+      max-width: 420px;
+      margin-bottom: 44px;
+    }
+    .form-row {
+      display: flex;
+      gap: 8px;
+      width: 100%;
+      max-width: 560px;
+      justify-content: center;
+    }
+    .form-row input {
+      flex: 1;
+      min-width: 0;
+      padding: 14px 18px;
+      font-family: var(--font-body);
+      font-size: 15px;
+      color: var(--color-ink);
+      background: transparent;
+      border: 1.5px solid var(--input-border);
+      border-radius: 4px;
+      outline: none;
+      transition: border-color 0.2s;
+    }
+    .form-row input::placeholder {
+      color: var(--input-border);
+    }
+    .form-row input:focus {
+      border-color: var(--fg);
+      outline: 2px solid var(--fg);
+      outline-offset: 2px;
+    }
+    .form-row button {
+      flex-shrink: 0;
+      padding: 14px 22px;
+      font-family: var(--font-body);
+      font-size: 15px;
+      font-weight: 500;
+      color: var(--btn-label);
+      background: var(--accent);
+      border: none;
+      border-radius: 2px;
+      cursor: pointer;
+      white-space: nowrap;
+      transition: opacity 0.15s, transform 0.1s;
+    }
+    .form-row button:hover {
+      opacity: 0.85;
+    }
+    .form-row button:active {
+      transform: scale(0.98);
+    }
+    .success-msg {
+      display: none;
+      margin-top: 18px;
+      font-size: 15px;
+      font-weight: 500;
+      color: var(--success);
+    }
+    .success-msg.visible {
+      display: block;
+    }
+    .deco-section {
+      flex: 1;
+      position: relative;
+      overflow: hidden;
+      min-height: 25vh;
+      display: flex;
+      flex-direction: column;
+    }
+    .coil-row {
+      display: block;
+      width: 100%;
+      height: 60px;
+      flex-shrink: 0;
+      background: var(--bg);
+    }
+    .stripe {
+      width: 100%;
+      height: 14px;
+      background: var(--deco-stripe);
+      flex-shrink: 0;
+    }
+    .grid-floor {
+      flex: 1;
+      position: relative;
+      background-color: var(--deco);
+      min-height: 80px;
+    }
+    .grid-svg {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+    }
+    .ticker-wrap {
+      width: 100%;
+      overflow: hidden;
+      background: var(--ticker-bg);
+      padding: 10px 0;
+      flex-shrink: 0;
+    }
+    .ticker-track {
+      display: flex;
+      gap: 24px;
+      white-space: nowrap;
+      animation: ticker-scroll 20s linear infinite;
+    }
+    .ticker-unit {
+      font-family: var(--font-body);
+      font-size: 11px;
+      font-weight: 600;
+      letter-spacing: 0.15em;
+      text-transform: uppercase;
+      color: var(--ticker-fg);
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-right: -12px;
+    }
+    .ticker-star {
+      color: var(--deco-stripe);
+      margin-right: 4px;
+    }
+    @keyframes ticker-scroll {
+      from { transform: translateX(0); }
+      to   { transform: translateX(-50%); }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .ticker-track {
+        animation: none;
+      }
+    }
+    @media (max-width: 600px) {
+      .logo {
+        left: 16px;
+        top: 16px;
+        gap: 10px;
+      }
+      .logo-container {
+        width: 40px;
+        height: 40px;
+      }
+      .logo-name {
+        font-size: 14px;
+      }
+      .upper {
+        padding: 30px 16px;
+        flex: 0 0 50vh;
+      }
+      .form-row {
+        flex-direction: column;
+        align-items: stretch;
+      }
+      .form-row input,
+      .form-row button {
+        width: 100%;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="logo">
+    <div class="logo-container">
+      <svg class="logo-svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="50" cy="50" r="48" fill="var(--deco-logo)"/>
+        <text x="50" y="60" font-family="'DM Sans', sans-serif" font-size="42" font-weight="700" text-anchor="middle" fill="var(--btn-label)" letter-spacing="-1">Md</text>
+      </svg>
+    </div>
+    <div class="logo-text">
+      <span class="logo-name">Meridian</span>
+      <span class="logo-dot">·</span>
+    </div>
+  </div>
+  <section class="upper">
+    <h1 class="headline">Meridian is<br>almost here</h1>
+    <p class="subtext">The workspace that connects your ideas before you've finished thinking them.</p>
+    <form class="form-row" id="waitlist-form">
+      <input type="text" name="firstname" placeholder="First name" autocomplete="given-name">
+      <input type="email" name="email" placeholder="Work email" autocomplete="email" required>
+      <button type="submit">Join the Waitlist</button>
+    </form>
+    <p class="success-msg" id="success-msg" role="status">You're on the list! We'll be in touch.</p>
+  </section>
+  <div class="deco-section">
+    <svg class="coil-row" viewBox="0 0 1440 60" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+      <g fill="none" style="stroke: var(--deco-stroke);" stroke-width="1.5">
+        <path d="M 9,60 A 41,30 0 0 1 91,60"/>
+        <path d="M 94,60 A 41,30 0 0 1 176,60"/>
+        <path d="M 179,60 A 41,30 0 0 1 261,60"/>
+        <path d="M 264,60 A 41,30 0 0 1 346,60"/>
+        <path d="M 349,60 A 41,30 0 0 1 431,60"/>
+        <path d="M 434,60 A 41,30 0 0 1 516,60"/>
+        <path d="M 519,60 A 41,30 0 0 1 601,60"/>
+        <path d="M 604,60 A 41,30 0 0 1 686,60"/>
+        <path d="M 689,60 A 41,30 0 0 1 771,60"/>
+        <path d="M 774,60 A 41,30 0 0 1 856,60"/>
+        <path d="M 859,60 A 41,30 0 0 1 941,60"/>
+        <path d="M 944,60 A 41,30 0 0 1 1026,60"/>
+        <path d="M 1029,60 A 41,30 0 0 1 1111,60"/>
+        <path d="M 1114,60 A 41,30 0 0 1 1196,60"/>
+        <path d="M 1199,60 A 41,30 0 0 1 1281,60"/>
+        <path d="M 1284,60 A 41,30 0 0 1 1366,60"/>
+        <path d="M 1369,60 A 41,30 0 0 1 1451,60"/>
+      </g>
+    </svg>
+    <div class="stripe"></div>
+    <div class="grid-floor">
+      <svg class="grid-svg" viewBox="0 0 1280 400" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+        <g style="stroke: var(--deco-stroke);" stroke-width="1" fill="none">
+          <line x1="640" y1="0" x2="0"    y2="400"/>
+          <line x1="640" y1="0" x2="128"  y2="400"/>
+          <line x1="640" y1="0" x2="256"  y2="400"/>
+          <line x1="640" y1="0" x2="384"  y2="400"/>
+          <line x1="640" y1="0" x2="512"  y2="400"/>
+          <line x1="640" y1="0" x2="640"  y2="400"/>
+          <line x1="640" y1="0" x2="768"  y2="400"/>
+          <line x1="640" y1="0" x2="896"  y2="400"/>
+          <line x1="640" y1="0" x2="1024" y2="400"/>
+          <line x1="640" y1="0" x2="1152" y2="400"/>
+          <line x1="640" y1="0" x2="1280" y2="400"/>
+          <line x1="0" y1="80"  x2="1280" y2="80"/>
+          <line x1="0" y1="160" x2="1280" y2="160"/>
+          <line x1="0" y1="240" x2="1280" y2="240"/>
+          <line x1="0" y1="320" x2="1280" y2="320"/>
+          <line x1="0" y1="390" x2="1280" y2="390"/>
+        </g>
+      </svg>
+    </div>
+  </div>
+  <div class="ticker-wrap" aria-hidden="true">
+    <div class="ticker-track">
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+      <span class="ticker-unit">COMING SOON <span class="ticker-star">✳</span></span>
+    </div>
+  </div>
+  <script>
+    document.getElementById('waitlist-form').addEventListener('submit', function(e) {
+      e.preventDefault();
+      if (!this.checkValidity()) {
+        this.reportValidity();
+        return;
+      }
+      this.style.display = 'none';
+      document.getElementById('success-msg').classList.add('visible');
+    });
+  </script>
+</body>
+</html>

package/dist/__w3kits/assets/design-templates/waitlist-page/references/checklist.md ADDED Viewed

@@ -0,0 +1,42 @@
+# Checklist — Waitlist Page
+## P0 — Must pass before emitting `<artifact>`
+- [ ] Page has exactly one primary CTA (the email field + submit button)
+- [ ] No hero gradient that spans more than 20% of the viewport height
+- [ ] Email input has a visible label or meaningful placeholder — not just "Email"
+- [ ] No invented social proof numbers (e.g., "10,000 people waiting")
+- [ ] **No countdown timer present** — countdown timers are an explicit anti-pattern for this skill (see SKILL.md §Quality gates)
+- [ ] No horizontal scroll at 375px viewport
+- [ ] No generic emoji icons used as decorative elements
+- [ ] Typography uses at most two font families (display + body)
+- [ ] First name field has no `required` attribute
+- [ ] Work email field has `type="email"` and `required`
+- [ ] Form does **not** use `novalidate`; JS guard calls `checkValidity()` before showing success state
+- [ ] Success message uses `role="status"` or `aria-live="polite"` so screen readers announce it
+- [ ] All color values derived from DESIGN.md; only allowed hardcoded exception is `#2D6A4F` for `--success`
+- [ ] All user-supplied text tokens are HTML-escaped; color tokens adhere to strict grammar (`#hex`, `rgb/hsl/oklch`, `color-mix()`) and contain no unsafe characters (`;`, `{}`, `<`, `>`, `/*`, `@`, `url(`); font name tokens are URL-encoded in the Google Fonts URL; `{{LOGO_MARK}}` is escaped text initials or strictly sanitized inline SVG (no scripts/events)
+## P1 — Should pass for quality submission
+- [ ] Hero section is visually distinct and above-the-fold
+- [ ] Email submit button has hover and active states
+- [ ] Form validation provides clear inline feedback on error (native `reportValidity()` is acceptable)
+- [ ] Page is scrollable (not clipped) at 375×667 and 390×844; CTA visible without scroll at those sizes
+- [ ] Ticker animation is paused or removed under `prefers-reduced-motion: reduce`
+- [ ] All interactive elements have visible focus styles (not just `outline: none`)
+- [ ] Keyboard: Tab reaches each form field and the submit button; Enter submits the form
+- [ ] Color contrast of body text on background meets WCAG AA (≥ 4.5:1)
+- [ ] Color contrast of button label on button background meets WCAG AA (≥ 4.5:1)
+- [ ] Color contrast of logo text/initials on logo container background meets WCAG AA (≥ 4.5:1)
+- [ ] Logo alt text or `aria-label` present if logo is an `<img>` or meaningful SVG
+- [ ] Ticker ribbon has `aria-hidden="true"` (decorative, not meaningful content)
+- [ ] `<html lang="">` attribute is set to the correct language code
+## P2 — Nice-to-have polish
+- [ ] Google Fonts loaded with `display=swap` to avoid FOIT
+- [ ] Form inputs have matching `autocomplete` attributes (`given-name`, `email`)
+- [ ] Subtle micro-animation on button hover (scale or opacity only — no layout shift)
+- [ ] Decoration zone does not cover or overlap the form at any viewport width
+- [ ] Page title is `{{PRODUCT_NAME}} — Coming Soon`, not a generic placeholder

package/dist/__w3kits/assets/design-templates/web-prototype/SKILL.md ADDED Viewed

@@ -0,0 +1,97 @@
+---
+name: web-prototype
+description: |
+  General-purpose desktop web prototype. Single self-contained HTML file built
+  by copying the seed `assets/template.html` and pasting section layouts from
+  `references/layouts.md`. Default for any landing / marketing / docs / SaaS
+  page when no more specific skill matches.
+triggers:
+  - "prototype"
+  - "mockup"
+  - "landing"
+  - "single page"
+  - "marketing page"
+  - "homepage"
+od:
+  mode: prototype
+  platform: desktop
+  scenario: design
+  preview:
+    type: html
+    entry: index.html
+  design_system:
+    requires: true
+    sections: [color, typography, layout, components]
+---
+# Web Prototype Skill
+Produce a single, self-contained HTML prototype using the bundled seed and layout library — **not** by writing CSS from scratch. The seed already encodes good defaults (typography, spacing, accent budget). Your job is to compose it.
+## Resource map
+```
+web-prototype/
+├── SKILL.md                ← you're reading this
+├── assets/
+│   └── template.html       ← seed: tokens + class system + chrome (READ FIRST)
+└── references/
+    ├── layouts.md          ← 8 paste-ready section skeletons
+    └── checklist.md        ← P0/P1/P2 self-review
+```
+## Workflow
+### Step 0 — Pre-flight (do this once before writing anything)
+1. **Read `assets/template.html` end-to-end** — at minimum through the `<style>` block. The class inventory at the top of `references/layouts.md` lists every class that must be defined there; if one is missing, add it to `<style>` rather than re-defining it inline on every section.
+2. **Read `references/layouts.md`** so you know which section skeletons exist. Don't write a section type that isn't covered — pick the closest layout and adapt.
+3. **Read the active DESIGN.md** (already injected into your system prompt). Map its colors to the six `:root` variables in the seed; don't introduce new tokens.
+### Step 1 — Copy the seed
+Copy `assets/template.html` to the project root as `index.html`. Replace the six `:root` variables with the active design system's tokens. Replace the page `<title>` and the topnav brand.
+### Step 2 — Plan the section list
+**Pick layouts before writing copy.** Default rhythms (from `layouts.md`):
+| Page kind | Default rhythm |
+|---|---|
+| Landing | 1 hero → 3 features → 4 stats *or* 5 quote → custom split → 6 cta |
+| Marketing / editorial | 1 hero-center → 7 log list → 6 cta |
+| Pricing | 1 hero-center → 8 comparison table → 6 cta |
+| Docs index | 1 hero-center → 7 log list (sections of docs) → 6 cta |
+State the chosen list in one sentence to the user *before* writing — they can redirect cheaply now and not after 200 lines of HTML.
+### Step 3 — Paste and fill
+For each chosen layout, copy the `<section>` block from `layouts.md` into `<main id="content">` of your `index.html`. Replace bracketed `[REPLACE]` strings with real, specific copy from the user's brief. **No filler** — if a slot is empty, the section is the wrong choice; pick a different layout.
+### Step 4 — Self-check
+Run through `references/checklist.md` top to bottom. Every P0 item must pass before you move on. P1 items should pass; P2 are bonus.
+### Step 5 — Emit the artifact
+Wrap `index.html` in `<artifact>` tags. One sentence before describing what's there. Stop after `</artifact>`.
+## Hard rules (the seed protects most of these — don't fight it)
+- **Single accent, used at most twice per screen.** Eyebrow + primary CTA is the default budget.
+- **Display font is serif** (Iowan Old Style / Charter / Georgia in the seed). Sans for body. Mono for numerics, captions, eyebrows.
+- **Image placeholders, not external URLs.** Use the `.ph-img` class — never link to a stock photo CDN.
+- **Mobile reflow already works** via the seed's media query at 920px. Don't break it by adding fixed widths.
+- **`data-od-id` on every `<section>`** so comment mode can target it.
+## Output contract
+```
+<artifact identifier="kebab-case-slug" type="text/html" title="Human Title">
+<!doctype html>
+<html>...</html>
+</artifact>
+```
+One sentence before the artifact. Nothing after.