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

@w3kits-com/plugin-opendesign 0.1.8 → 0.1.9

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 (1706) hide show

package/dist/__w3kits/assets/skills/imagen/SKILL.md ADDED Viewed

@@ -0,0 +1,43 @@
+---
+name: imagen
+description: |
+  Generate images using Google Gemini's image generation API for UI mockups, icons, illustrations, and visual assets.
+triggers:
+  - "gemini image"
+  - "imagen"
+  - "google image gen"
+  - "illustration"
+  - "icon"
+od:
+  mode: image
+  category: image-generation
+  upstream: "https://github.com/sanjay3290/imagen"
+---
+# imagen
+> Curated from @sanjay3290.
+## What it does
+Generate images using Google Gemini's image generation API for UI mockups, icons, illustrations, and visual assets.
+## Source
+- Upstream: https://github.com/sanjay3290/imagen
+- Category: `image-generation`
+## How to use
+This catalogue entry advertises the skill in Open Design so the agent
+discovers it during planning. To run the full upstream workflow with
+its original assets, scripts, and references, install the upstream
+bundle into your active agent's skills directory:
+```bash
+# Inspect the upstream README for exact paths
+open https://github.com/sanjay3290/imagen
+```
+Then ask the agent to invoke this skill by name (`imagen`) or with
+one of the trigger phrases listed in this skill's frontmatter.

package/dist/__w3kits/assets/skills/login-flow/SKILL.md ADDED Viewed

@@ -0,0 +1,48 @@
+---
+name: login-flow
+description: Mobile login and authentication flow screens
+od:
+  mode: prototype
+  platform: mobile
+triggers:
+  - login
+  - sign in
+  - 注册登录
+  - 登录注册
+  - 手机号登录
+  - 验证码登录
+  - 密码登录
+---
+# Login Flow Skill
+A skill for generating mobile-first login and authentication screens. Use this when the user wants a sign-in experience for a mobile app, including phone + SMS verification, password-based login, and social SSO options.
+## Workflow
+1. **Read reference files first** (see below)
+2. **Clarify auth method**: phone/SMS, password, or social SSO
+3. **Checklist gate** — verify P0 items before emitting `<artifact>`
+4. **Build the HTML prototype** with proper states (default, loading, error)
+5. **Wrap in `<artifact>` tag** referencing the output file
+## Side Files
+- `references/checklist.md` — P0/P1 acceptance criteria
+## Output
+A single standalone HTML file implementing the login screen with:
+- Labels above inputs (never placeholder-only)
+- Password field with show/hide toggle
+- Social SSO buttons with SVG icons
+- Error states below fields
+- Loading spinner in primary CTA
+- Touch targets minimum 44px
+## Mobile-First Constraints
+- Viewport: 375px wide (iPhone standard)
+- No horizontal scroll
+- Safe area insets for notched devices
+- Input keyboards: `tel` for phone, `password` for password fields

package/dist/__w3kits/assets/skills/login-flow/example.html ADDED Viewed

@@ -0,0 +1,362 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Nova · Login</title>
+<style>
+  :root {
+    --bg: #F7F8FA;
+    --surface: #FFFFFF;
+    --ink: #1A1A2E;
+    --muted: #6B7280;
+    --border: #E5E7EB;
+    --brand: #4F46E5;
+    --brand-hover: #4338CA;
+    --error: #DC2626;
+    --success: #059669;
+  }
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: var(--bg);
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+  }
+  .phone {
+    width: 375px;
+    background: var(--surface);
+    border-radius: 40px;
+    overflow: hidden;
+    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15);
+    display: flex;
+    flex-direction: column;
+  }
+  .statusbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 24px 4px;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--ink);
+  }
+  .statusbar .right {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+  }
+  .status-icon {
+    width: 16px;
+    height: 10px;
+    background: var(--ink);
+    border-radius: 2px;
+    position: relative;
+  }
+  .status-icon::after {
+    content: '';
+    position: absolute;
+    right: -3px;
+    top: 2px;
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background: var(--ink);
+  }
+  .content {
+    flex: 1;
+    padding: 32px 28px;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+  }
+  .logo-area {
+    text-align: center;
+    padding: 8px 0 4px;
+  }
+  .logo {
+    width: 56px;
+    height: 56px;
+    background: var(--brand);
+    border-radius: 14px;
+    margin: 0 auto 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .logo svg { width: 32px; height: 32px; fill: white; }
+  .app-name {
+    font-size: 20px;
+    font-weight: 700;
+    color: var(--ink);
+    letter-spacing: -0.02em;
+  }
+  .header { text-align: center; }
+  .header h1 {
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--ink);
+    margin-bottom: 8px;
+    letter-spacing: -0.02em;
+  }
+  .header p {
+    font-size: 14px;
+    color: var(--muted);
+    line-height: 1.5;
+  }
+  .form { display: flex; flex-direction: column; gap: 16px; }
+  .field { display: flex; flex-direction: column; gap: 6px; }
+  .field label {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--ink);
+  }
+  .input-wrap {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .input-wrap input {
+    width: 100%;
+    height: 48px;
+    padding: 0 16px;
+    border: 1.5px solid var(--border);
+    border-radius: 12px;
+    font-size: 16px;
+    color: var(--ink);
+    background: var(--surface);
+    transition: border-color 0.2s;
+  }
+  .input-wrap input:focus {
+    outline: none;
+    border-color: var(--brand);
+  }
+  .input-wrap input::placeholder { color: var(--muted); }
+  .input-wrap .toggle {
+    position: absolute;
+    right: 14px;
+    width: 24px;
+    height: 24px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--muted);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .input-wrap .toggle:hover { color: var(--ink); }
+  .phone-input { display: flex; gap: 8px; }
+  .phone-input .country {
+    width: 90px;
+    height: 48px;
+    padding: 0 12px;
+    border: 1.5px solid var(--border);
+    border-radius: 12px;
+    font-size: 16px;
+    color: var(--ink);
+    background: var(--surface);
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
+  }
+  .phone-input .country .flag { font-size: 18px; }
+  .phone-input input { flex: 1; }
+  .row { display: flex; justify-content: flex-end; }
+  .forgot {
+    font-size: 13px;
+    color: var(--brand);
+    text-decoration: none;
+    font-weight: 500;
+  }
+  .forgot:hover { text-decoration: underline; }
+  .btn-primary {
+    width: 100%;
+    height: 52px;
+    background: var(--brand);
+    color: white;
+    border: none;
+    border-radius: 12px;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    transition: background-color 0.2s;
+  }
+  .btn-primary:hover { background: var(--brand-hover); }
+  .btn-primary:disabled {
+    background: #A5B4FC;
+    cursor: not-allowed;
+  }
+  .btn-primary .spinner {
+    width: 18px;
+    height: 18px;
+    border: 2px solid rgba(255,255,255,0.3);
+    border-top-color: white;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
+  @keyframes spin { to { transform: rotate(360deg); } }
+  .divider {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    color: var(--muted);
+    font-size: 13px;
+  }
+  .divider::before,
+  .divider::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: var(--border);
+  }
+  .social { display: flex; gap: 12px; }
+  .social-btn {
+    flex: 1;
+    height: 48px;
+    border: 1.5px solid var(--border);
+    border-radius: 12px;
+    background: var(--surface);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--ink);
+    transition: background-color 0.2s;
+  }
+  .social-btn:hover { background: var(--bg); }
+  .social-btn svg { width: 20px; height: 20px; }
+  .footer {
+    text-align: center;
+    font-size: 14px;
+    color: var(--muted);
+    padding-top: 8px;
+  }
+  .footer a {
+    color: var(--brand);
+    text-decoration: none;
+    font-weight: 500;
+  }
+  .footer a:hover { text-decoration: underline; }
+  .error-msg {
+    font-size: 12px;
+    color: var(--error);
+    margin-top: 4px;
+    display: none;
+  }
+  .field.has-error input { border-color: var(--error); }
+  .field.has-error .error-msg { display: block; }
+</style>
+</head>
+<body>
+<div class="phone">
+  <div class="statusbar">
+    <span>9:41</span>
+    <div class="right">
+      <span>5G</span>
+      <span class="status-icon"></span>
+    </div>
+  </div>
+  <div class="content">
+    <div class="logo-area">
+      <div class="logo">
+        <svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+      </div>
+      <div class="app-name">Nova</div>
+    </div>
+    <div class="header">
+      <h1>Welcome back</h1>
+      <p>Sign in to continue to your account</p>
+    </div>
+    <form class="form" onsubmit="return false;">
+      <div class="field">
+        <label for="phone">Phone number</label>
+        <div class="phone-input">
+          <div class="country">
+            <span class="flag">+86</span>
+            <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor"><path d="M3 5l3 3 3-3"/></svg>
+          </div>
+          <input type="tel" id="phone" placeholder="123 4567 8900" />
+        </div>
+        <span class="error-msg">Please enter a valid phone number</span>
+      </div>
+      <div class="field">
+        <label for="password">Password</label>
+        <div class="input-wrap">
+          <input type="password" id="password" placeholder="Enter your password" />
+          <button type="button" class="toggle" aria-label="Show password">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+              <circle cx="12" cy="12" r="3"/>
+            </svg>
+          </button>
+        </div>
+        <span class="error-msg">Password is required</span>
+      </div>
+      <div class="row">
+        <a href="#" class="forgot">Forgot password?</a>
+      </div>
+      <button type="submit" class="btn-primary">
+        <span class="btn-text">Sign in</span>
+      </button>
+      <div class="divider">or continue with</div>
+      <div class="social">
+        <button type="button" class="social-btn">
+          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.025-1.632 2.815-.181.79-.065 1.62.116 2.43.143.4.367.78.666 1.106.315.345.69.647 1.114.918.927.568 2.013.858 3.183.955 1.18.098 2.063-.018 2.94-.123 1.05-.126 1.92-.78 2.528-1.54 1.12-1.38 1.62-3.24 1.337-4.6z"/></svg>
+          Apple
+        </button>
+        <button type="button" class="social-btn">
+          <svg viewBox="0 0 24 24"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
+          Google
+        </button>
+      </div>
+    </form>
+    <div class="footer">
+      Don't have an account? <a href="#">Sign up</a>
+    </div>
+  </div>
+</div>
+</body>
+<script>
+  const toggleBtn = document.querySelector('.toggle');
+  const passwordInput = document.getElementById('password');
+  if (toggleBtn && passwordInput) {
+    toggleBtn.addEventListener('click', function () {
+      const isPassword = passwordInput.type === 'password';
+      passwordInput.type = isPassword ? 'text' : 'password';
+      toggleBtn.setAttribute('aria-label', isPassword ? 'Hide password' : 'Show password');
+    });
+  }
+</script>
+</html>

package/dist/__w3kits/assets/skills/login-flow/references/checklist.md ADDED Viewed

@@ -0,0 +1,19 @@
+# Login Flow Checklist
+P0 (must pass before emitting artifact):
+- [ ] Labels above inputs, never placeholder-only
+- [ ] Password field has show/hide toggle
+- [ ] Social buttons use SVG icons, not emoji
+- [ ] Touch targets are minimum 44px
+- [ ] Error states show red text below the field
+- [ ] Primary CTA button has hover/active states
+- [ ] No placeholder text like "example@email.com" without indication
+P1 (should pass):
+- [ ] Loading spinner in button during submission
+- [ ] "Forgot password" link present
+- [ ] "Don't have an account" link present
+- [ ] Country picker for phone input (if phone auth)
+- [ ] Input focus state uses brand color

package/dist/__w3kits/assets/skills/marketing-psychology/SKILL.md ADDED Viewed

@@ -0,0 +1,43 @@
+---
+name: marketing-psychology
+description: |
+  Apply psychological principles and behavioral science to copy and design. Useful for tightening hooks, framing, and pricing presentation.
+triggers:
+  - "marketing psychology"
+  - "behavioral copy"
+  - "persuasion"
+  - "framing"
+  - "cognitive bias"
+od:
+  mode: design-system
+  category: marketing-creative
+  upstream: "https://github.com/coreyhaines31/marketingskills"
+---
+# marketing-psychology
+> Curated from Corey Haines.
+## What it does
+Apply psychological principles and behavioral science to copy and design. Useful for tightening hooks, framing, and pricing presentation.
+## Source
+- Upstream: https://github.com/coreyhaines31/marketingskills
+- Category: `marketing-creative`
+## How to use
+This catalogue entry advertises the skill in Open Design so the agent
+discovers it during planning. To run the full upstream workflow with
+its original assets, scripts, and references, install the upstream
+bundle into your active agent's skills directory:
+```bash
+# Inspect the upstream README for exact paths
+open https://github.com/coreyhaines31/marketingskills
+```
+Then ask the agent to invoke this skill by name (`marketing-psychology`) or with
+one of the trigger phrases listed in this skill's frontmatter.

package/dist/__w3kits/assets/skills/minimax-docx/SKILL.md ADDED Viewed

@@ -0,0 +1,43 @@
+---
+name: minimax-docx
+description: |
+  Professional DOCX document creation and editing using OpenXML SDK. Useful for branded reports, polished proposals, and template-based authoring.
+triggers:
+  - "minimax docx"
+  - "openxml docx"
+  - "branded report"
+  - "proposal doc"
+  - "template authoring"
+od:
+  mode: prototype
+  category: documents
+  upstream: "https://github.com/MiniMax-AI/skills"
+---
+# minimax-docx
+> Curated from the MiniMax AI team.
+## What it does
+Professional DOCX document creation and editing using OpenXML SDK. Useful for branded reports, polished proposals, and template-based authoring.
+## Source
+- Upstream: https://github.com/MiniMax-AI/skills
+- Category: `documents`
+## How to use
+This catalogue entry advertises the skill in Open Design so the agent
+discovers it during planning. To run the full upstream workflow with
+its original assets, scripts, and references, install the upstream
+bundle into your active agent's skills directory:
+```bash
+# Inspect the upstream README for exact paths
+open https://github.com/MiniMax-AI/skills
+```
+Then ask the agent to invoke this skill by name (`minimax-docx`) or with
+one of the trigger phrases listed in this skill's frontmatter.

package/dist/__w3kits/assets/skills/minimax-pdf/SKILL.md ADDED Viewed

@@ -0,0 +1,43 @@
+---
+name: minimax-pdf
+description: |
+  Generate, fill, and reformat PDFs with a token-based design system and 15 cover styles. Useful for branded PDFs, e-guides, and reports.
+triggers:
+  - "minimax pdf"
+  - "branded pdf"
+  - "cover style pdf"
+  - "e-guide pdf"
+  - "design system pdf"
+od:
+  mode: prototype
+  category: documents
+  upstream: "https://github.com/MiniMax-AI/skills"
+---
+# minimax-pdf
+> Curated from the MiniMax AI team.
+## What it does
+Generate, fill, and reformat PDFs with a token-based design system and 15 cover styles. Useful for branded PDFs, e-guides, and reports.
+## Source
+- Upstream: https://github.com/MiniMax-AI/skills
+- Category: `documents`
+## How to use
+This catalogue entry advertises the skill in Open Design so the agent
+discovers it during planning. To run the full upstream workflow with
+its original assets, scripts, and references, install the upstream
+bundle into your active agent's skills directory:
+```bash
+# Inspect the upstream README for exact paths
+open https://github.com/MiniMax-AI/skills
+```
+Then ask the agent to invoke this skill by name (`minimax-pdf`) or with
+one of the trigger phrases listed in this skill's frontmatter.

package/dist/__w3kits/assets/skills/nanobanana-ppt/SKILL.md ADDED Viewed

@@ -0,0 +1,43 @@
+---
+name: nanobanana-ppt
+description: |
+  AI-powered PPT generation with document analysis and styled images via the NanoBanana stack. Combines image generation with structured deck output.
+triggers:
+  - "nanobanana ppt"
+  - "ai ppt"
+  - "styled ppt"
+  - "document to ppt"
+  - "banana ppt"
+od:
+  mode: deck
+  category: image-generation
+  upstream: "https://github.com/op7418/NanoBanana-PPT-Skills"
+---
+# nanobanana-ppt
+> Curated from @op7418.
+## What it does
+AI-powered PPT generation with document analysis and styled images via the NanoBanana stack. Combines image generation with structured deck output.
+## Source
+- Upstream: https://github.com/op7418/NanoBanana-PPT-Skills
+- Category: `image-generation`
+## How to use
+This catalogue entry advertises the skill in Open Design so the agent
+discovers it during planning. To run the full upstream workflow with
+its original assets, scripts, and references, install the upstream
+bundle into your active agent's skills directory:
+```bash
+# Inspect the upstream README for exact paths
+open https://github.com/op7418/NanoBanana-PPT-Skills
+```
+Then ask the agent to invoke this skill by name (`nanobanana-ppt`) or with
+one of the trigger phrases listed in this skill's frontmatter.

package/dist/__w3kits/assets/skills/paywall-upgrade-cro/SKILL.md ADDED Viewed

@@ -0,0 +1,43 @@
+---
+name: paywall-upgrade-cro
+description: |
+  Design and optimize upgrade screens, paywalls, and upsell modals. Useful for SaaS conversion design and pricing-page experiments.
+triggers:
+  - "paywall"
+  - "upgrade screen"
+  - "cro paywall"
+  - "upsell modal"
+  - "pricing screen"
+od:
+  mode: design-system
+  category: marketing-creative
+  upstream: "https://github.com/coreyhaines31/marketingskills"
+---
+# paywall-upgrade-cro
+> Curated from Corey Haines.
+## What it does
+Design and optimize upgrade screens, paywalls, and upsell modals. Useful for SaaS conversion design and pricing-page experiments.
+## Source
+- Upstream: https://github.com/coreyhaines31/marketingskills
+- Category: `marketing-creative`
+## How to use
+This catalogue entry advertises the skill in Open Design so the agent
+discovers it during planning. To run the full upstream workflow with
+its original assets, scripts, and references, install the upstream
+bundle into your active agent's skills directory:
+```bash
+# Inspect the upstream README for exact paths
+open https://github.com/coreyhaines31/marketingskills
+```
+Then ask the agent to invoke this skill by name (`paywall-upgrade-cro`) or with
+one of the trigger phrases listed in this skill's frontmatter.