@tickernelz/paperclip-pro-skills-catalog 2026.925.0

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 (76) hide show
  1. package/LICENSE +22 -0
  2. package/catalog/bundled/docs/doc-maintenance/SKILL.md +75 -0
  3. package/catalog/bundled/paperclip-operations/issue-triage/SKILL.md +74 -0
  4. package/catalog/bundled/paperclip-operations/reflection-coach/SKILL.md +202 -0
  5. package/catalog/bundled/paperclip-operations/status-card-query/SKILL.md +137 -0
  6. package/catalog/bundled/paperclip-operations/summarize-status/SKILL.md +121 -0
  7. package/catalog/bundled/paperclip-operations/task-planning/SKILL.md +84 -0
  8. package/catalog/bundled/product/paperclip-capsules/SKILL.md +99 -0
  9. package/catalog/bundled/product/paperclip-capsules/references/generator-workflows.md +120 -0
  10. package/catalog/bundled/product/paperclip-capsules/references/hero-capsule-bank.md +189 -0
  11. package/catalog/bundled/product/paperclip-capsules/references/identicon-prototyper.md +213 -0
  12. package/catalog/bundled/product/paperclip-capsules/references/individual-status-capsules.md +113 -0
  13. package/catalog/bundled/product/wireframe/SKILL.md +193 -0
  14. package/catalog/bundled/product/wireframe/assets/site-template.html +356 -0
  15. package/catalog/bundled/product/wireframe/assets/template-mobile.svg +21 -0
  16. package/catalog/bundled/product/wireframe/assets/template.svg +24 -0
  17. package/catalog/bundled/product/wireframe/references/components.md +482 -0
  18. package/catalog/bundled/product/wireframe/references/examples.md +362 -0
  19. package/catalog/bundled/product/wireframe/references/grid-system.md +107 -0
  20. package/catalog/bundled/quality/qa-acceptance/SKILL.md +93 -0
  21. package/catalog/bundled/software-development/github-pr-workflow/SKILL.md +93 -0
  22. package/catalog/optional/browser/agent-browser/SKILL.md +93 -0
  23. package/catalog/optional/content/release-announcement/SKILL.md +218 -0
  24. package/catalog/optional/content/simplified-english/SKILL.md +40 -0
  25. package/catalog/optional/finance/ramp/SKILL.md +98 -0
  26. package/catalog/optional/product/design-critique/SKILL.md +121 -0
  27. package/catalog/optional/research/last30days/catalog-ref.json +44 -0
  28. package/catalog/optional/software-development/prepare-mcp-integration/SKILL.md +230 -0
  29. package/catalog/optional/software-development/prepare-mcp-integration/examples/notion-mcp-research-gate.md +43 -0
  30. package/dist/generated/catalog.json +1165 -0
  31. package/dist/scripts/build-catalog-manifest.d.ts +2 -0
  32. package/dist/scripts/build-catalog-manifest.d.ts.map +1 -0
  33. package/dist/scripts/build-catalog-manifest.js +15 -0
  34. package/dist/scripts/build-catalog-manifest.js.map +1 -0
  35. package/dist/scripts/validate-catalog.d.ts +2 -0
  36. package/dist/scripts/validate-catalog.d.ts.map +1 -0
  37. package/dist/scripts/validate-catalog.js +15 -0
  38. package/dist/scripts/validate-catalog.js.map +1 -0
  39. package/dist/src/catalog-builder.d.ts +16 -0
  40. package/dist/src/catalog-builder.d.ts.map +1 -0
  41. package/dist/src/catalog-builder.js +688 -0
  42. package/dist/src/catalog-builder.js.map +1 -0
  43. package/dist/src/catalog-builder.test.d.ts +2 -0
  44. package/dist/src/catalog-builder.test.d.ts.map +1 -0
  45. package/dist/src/catalog-builder.test.js +355 -0
  46. package/dist/src/catalog-builder.test.js.map +1 -0
  47. package/dist/src/frontmatter.d.ts +3 -0
  48. package/dist/src/frontmatter.d.ts.map +1 -0
  49. package/dist/src/frontmatter.js +3 -0
  50. package/dist/src/frontmatter.js.map +1 -0
  51. package/dist/src/frontmatter.test.d.ts +2 -0
  52. package/dist/src/frontmatter.test.d.ts.map +1 -0
  53. package/dist/src/frontmatter.test.js +31 -0
  54. package/dist/src/frontmatter.test.js.map +1 -0
  55. package/dist/src/index.d.ts +7 -0
  56. package/dist/src/index.d.ts.map +1 -0
  57. package/dist/src/index.js +21 -0
  58. package/dist/src/index.js.map +1 -0
  59. package/dist/src/packaged-artifacts.test.d.ts +2 -0
  60. package/dist/src/packaged-artifacts.test.d.ts.map +1 -0
  61. package/dist/src/packaged-artifacts.test.js +48 -0
  62. package/dist/src/packaged-artifacts.test.js.map +1 -0
  63. package/dist/src/release-content-cases-contract.test.d.ts +2 -0
  64. package/dist/src/release-content-cases-contract.test.d.ts.map +1 -0
  65. package/dist/src/release-content-cases-contract.test.js +37 -0
  66. package/dist/src/release-content-cases-contract.test.js.map +1 -0
  67. package/dist/src/shipped-catalog.test.d.ts +2 -0
  68. package/dist/src/shipped-catalog.test.d.ts.map +1 -0
  69. package/dist/src/shipped-catalog.test.js +179 -0
  70. package/dist/src/shipped-catalog.test.js.map +1 -0
  71. package/dist/src/types.d.ts +54 -0
  72. package/dist/src/types.d.ts.map +1 -0
  73. package/dist/src/types.js +2 -0
  74. package/dist/src/types.js.map +1 -0
  75. package/generated/catalog.json +1165 -0
  76. package/package.json +54 -0
package/catalog/bundled/product/wireframe/assets/site-template.html ADDED
@@ -0,0 +1,356 @@
1
+ <!doctype html>
2
+ <!--
3
+ Wireframe review viewer — copy to design/<task-slug>/index.html and fill in.
4
+ House style: monochrome, system font, 8px grid, sticky TOC, lightbox.
5
+ Replace TODO markers; duplicate <section class="screen"> per wireframe.
6
+ -->
7
+ <html lang="en">
8
+ <head>
9
+ <meta charset="utf-8" />
10
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
11
+ <title>TODO — review viewer title</title>
12
+ <style>
13
+ :root {
14
+ --bg: #fafaf8;
15
+ --panel: #ffffff;
16
+ --ink: #111111;
17
+ --muted: #666666;
18
+ --line: #e5e5e0;
19
+ --accent: #d33;
20
+ --maxw: 1200px;
21
+ }
22
+ * { box-sizing: border-box; }
23
+ html, body { margin: 0; padding: 0; }
24
+ body {
25
+ font: 15px/1.55 -apple-system, system-ui, "Segoe UI", sans-serif;
26
+ background: var(--bg);
27
+ color: var(--ink);
28
+ -webkit-font-smoothing: antialiased;
29
+ }
30
+ a { color: inherit; }
31
+
32
+ .shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
33
+
34
+ .toc {
35
+ position: sticky; top: 0; align-self: start;
36
+ height: 100vh; overflow: auto;
37
+ padding: 24px 16px 24px 24px;
38
+ border-right: 1px solid var(--line);
39
+ background: var(--panel);
40
+ font-size: 13px;
41
+ z-index: 20;
42
+ }
43
+ .toc h1 { font-size: 14px; margin: 0 0 4px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
44
+ .toc h2 { font-size: 12px; margin: 24px 0 6px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
45
+ .toc a { display: block; text-decoration: none; padding: 6px 8px; margin-left: -8px; border-radius: 4px; color: var(--ink); }
46
+ .toc a:hover { background: var(--bg); }
47
+ .toc .num { display: inline-block; width: 22px; color: var(--muted); }
48
+ .toc .toc-summary { display: none; }
49
+ .toc .toc-body { display: block; }
50
+
51
+ main { padding: 48px 56px 96px; max-width: 1300px; min-width: 0; }
52
+
53
+ header.hero { max-width: var(--maxw); margin-bottom: 64px; }
54
+ header.hero .crumb { color: var(--muted); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
55
+ header.hero h1 { font-size: 36px; line-height: 1.15; margin: 8px 0 16px; }
56
+ header.hero p { color: var(--muted); max-width: 720px; font-size: 16px; }
57
+ header.hero .pills { margin-top: 20px; display: flex; gap: 8px; flex-wrap: wrap; }
58
+ header.hero .pill { font-size: 12px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--muted); }
59
+
60
+ section { scroll-margin-top: 24px; max-width: var(--maxw); margin-bottom: 96px; }
61
+ section .lede { color: var(--muted); margin: 0 0 12px; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700; }
62
+ section h2 { font-size: 28px; line-height: 1.2; margin: 0 0 8px; }
63
+ section h2 .step-num { display: inline-block; width: 40px; color: var(--muted); }
64
+ section h3 { font-size: 16px; margin: 24px 0 8px; }
65
+ section .desc { color: var(--muted); margin: 0 0 24px; max-width: 760px; }
66
+
67
+ /* canvas: desktop wire (wide) on left, mobile wire (tall narrow) middle, notes right.
68
+ Mobile is a first-class deliverable — never tabbed, never stacked away. */
69
+ .grid {
70
+ display: grid; gap: 24px;
71
+ grid-template-columns: minmax(0, 1.4fr) 220px minmax(0, 0.9fr);
72
+ align-items: start;
73
+ }
74
+ @media (max-width: 1180px) {
75
+ .grid { grid-template-columns: minmax(0, 1fr) 200px; }
76
+ .grid > .notes-col { grid-column: 1 / -1; }
77
+ }
78
+ @media (max-width: 980px) { .grid { grid-template-columns: 1fr; } .grid > .mobile-col { max-width: 280px; } }
79
+
80
+ /* tablet */
81
+ @media (max-width: 900px) {
82
+ .shell { grid-template-columns: 1fr; }
83
+ .toc {
84
+ position: sticky; top: 0;
85
+ height: auto; max-height: 60vh;
86
+ padding: 12px 16px;
87
+ border-right: none;
88
+ border-bottom: 1px solid var(--line);
89
+ }
90
+ .toc .toc-summary {
91
+ display: flex;
92
+ justify-content: space-between;
93
+ align-items: center;
94
+ cursor: pointer;
95
+ list-style: none;
96
+ padding: 4px 0;
97
+ }
98
+ .toc .toc-summary::-webkit-details-marker { display: none; }
99
+ .toc .toc-summary .title { font-size: 13px; font-weight: 600; }
100
+ .toc .toc-summary .crumb { font-size: 11px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
101
+ .toc .toc-summary .chevron {
102
+ width: 10px; height: 10px;
103
+ border-right: 1.5px solid var(--ink);
104
+ border-bottom: 1.5px solid var(--ink);
105
+ transform: rotate(45deg);
106
+ transition: transform 120ms ease;
107
+ margin-right: 4px;
108
+ }
109
+ .toc[open] .toc-summary .chevron { transform: rotate(225deg) translate(-2px, -2px); }
110
+ .toc .toc-body { display: none; padding-top: 8px; border-top: 1px solid var(--line); margin-top: 8px; }
111
+ .toc[open] .toc-body { display: block; }
112
+ main { padding: 24px 20px 64px; }
113
+ header.hero { margin-bottom: 40px; }
114
+ header.hero h1 { font-size: 28px; }
115
+ header.hero p { font-size: 15px; }
116
+ section { margin-bottom: 64px; scroll-margin-top: 80px; }
117
+ section h2 { font-size: 24px; }
118
+ section h2 .step-num { width: 32px; }
119
+ .flow-section { padding: 20px; margin-bottom: 40px; scroll-margin-top: 80px; }
120
+ }
121
+
122
+ /* phone */
123
+ @media (max-width: 560px) {
124
+ main { padding: 16px 14px 56px; }
125
+ header.hero { margin-bottom: 32px; }
126
+ header.hero h1 { font-size: 24px; line-height: 1.2; }
127
+ header.hero p { font-size: 14px; }
128
+ section { margin-bottom: 48px; }
129
+ section h2 { font-size: 20px; line-height: 1.25; }
130
+ section h2 .step-num { width: 28px; }
131
+ section h3 { font-size: 15px; margin: 20px 0 6px; }
132
+ section .desc { font-size: 14px; }
133
+ .grid { gap: 16px; }
134
+ .flow-section { padding: 16px; border-radius: 8px; }
135
+ .wire .label { padding: 8px 10px; font-size: 11px; gap: 8px; }
136
+ body { font-size: 14px; }
137
+ }
138
+
139
+ .wire {
140
+ background: var(--panel);
141
+ border: 1px solid var(--line);
142
+ border-radius: 8px;
143
+ overflow: hidden;
144
+ cursor: zoom-in;
145
+ transition: transform 80ms ease, box-shadow 80ms ease;
146
+ }
147
+ .wire:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
148
+ .wire .label {
149
+ padding: 10px 14px;
150
+ font-size: 12px;
151
+ color: var(--muted);
152
+ border-bottom: 1px solid var(--line);
153
+ display: flex; justify-content: space-between; align-items: center;
154
+ }
155
+ .wire img { display: block; width: 100%; height: auto; background: #fff; }
156
+ /* mobile wire renders narrow inside its 220px column so it reads as a phone */
157
+ .wire.mobile-wire img { max-width: 220px; margin: 0 auto; }
158
+
159
+ .ref {
160
+ background: var(--panel);
161
+ border: 1px solid var(--line);
162
+ border-radius: 8px;
163
+ padding: 14px;
164
+ }
165
+ .ref .label { font-size: 12px; color: var(--muted); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: baseline; }
166
+ .ref img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 4px; cursor: zoom-in; }
167
+
168
+ .notes ul { padding-left: 20px; margin: 8px 0; }
169
+ .notes li { margin-bottom: 6px; }
170
+ .notes .why {
171
+ background: var(--panel);
172
+ border: 1px solid var(--line);
173
+ border-left: 3px solid var(--ink);
174
+ padding: 14px 18px;
175
+ border-radius: 4px;
176
+ margin-top: 12px;
177
+ font-size: 14px;
178
+ }
179
+
180
+ .flow-section { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 32px; margin-bottom: 64px; max-width: var(--maxw); }
181
+ .flow-section h2 { margin-top: 0; }
182
+ .flow-section .wire { margin-top: 16px; }
183
+
184
+ /* lightbox */
185
+ .lightbox {
186
+ position: fixed; inset: 0;
187
+ background: rgba(0,0,0,0.86);
188
+ display: none;
189
+ align-items: center; justify-content: center;
190
+ z-index: 100;
191
+ cursor: zoom-out;
192
+ padding: 32px;
193
+ }
194
+ .lightbox.open { display: flex; }
195
+ .lightbox img { max-width: 100%; max-height: 100%; background: #fff; box-shadow: 0 30px 80px rgba(0,0,0,0.4); border-radius: 4px; }
196
+ .lightbox .close { position: absolute; top: 16px; right: 24px; font-size: 28px; color: #fff; cursor: pointer; }
197
+ .lightbox .caption { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 13px; opacity: 0.9; }
198
+
199
+ /* mobile lightbox — must come after the desktop rules to win the cascade */
200
+ @media (max-width: 560px) {
201
+ .lightbox { padding: 12px; overflow: auto; touch-action: pinch-zoom; }
202
+ .lightbox.open { display: block; }
203
+ .lightbox img { display: block; width: 100%; max-width: none; max-height: none; height: auto; margin: 40px auto 56px; box-shadow: none; }
204
+ .lightbox .close { position: fixed; top: 8px; right: 12px; font-size: 32px; }
205
+ .lightbox .caption { position: fixed; left: 50%; transform: translateX(-50%); font-size: 12px; bottom: 12px; text-align: center; background: rgba(0,0,0,0.7); border-radius: 4px; padding: 6px 12px; }
206
+ }
207
+
208
+ .footer { color: var(--muted); font-size: 12px; max-width: var(--maxw); border-top: 1px solid var(--line); padding-top: 24px; }
209
+ </style>
210
+ </head>
211
+ <body>
212
+ <div class="shell">
213
+ <details class="toc">
214
+ <summary class="toc-summary">
215
+ <span>
216
+ <span class="crumb">TODO-ID · TODO short title</span><br>
217
+ <span class="title">Jump to a screen</span>
218
+ </span>
219
+ <span class="chevron" aria-hidden="true"></span>
220
+ </summary>
221
+ <nav class="toc-body" aria-label="Section navigation">
222
+ <h1>TODO-ID</h1>
223
+ <div style="font-size: 13px; color: var(--muted); margin-bottom: 16px;">TODO short title</div>
224
+
225
+ <h2>Flow</h2>
226
+ <a href="#flow"><span class="num">⤳</span>Flow diagram</a>
227
+
228
+ <h2>Screens</h2>
229
+ <a href="#s1"><span class="num">1</span>TODO screen 1 name</a>
230
+ <!-- duplicate per screen -->
231
+
232
+ <h2>Open questions</h2>
233
+ <a href="#open"><span class="num">?</span>For reviewer</a>
234
+ </nav>
235
+ </details>
236
+
237
+ <main>
238
+ <header class="hero">
239
+ <div class="crumb">TODO-ID · Wireframes</div>
240
+ <h1>TODO — long title</h1>
241
+ <p>TODO — one-paragraph summary of what this set covers and why.</p>
242
+ <div class="pills">
243
+ <span class="pill">TODO N screens</span>
244
+ <span class="pill">Desktop + mobile</span>
245
+ <span class="pill">Lo-fi · monochrome</span>
246
+ <span class="pill">Click any wireframe to zoom</span>
247
+ </div>
248
+ </header>
249
+
250
+ <!-- ========== Flow diagram (optional) ========== -->
251
+ <section id="flow" class="flow-section">
252
+ <div class="lede">Flow</div>
253
+ <h2>TODO — flow title</h2>
254
+ <p class="desc">TODO — describe arrow conventions (solid = happy path, dashed = branch).</p>
255
+ <div class="wire" data-zoom data-caption="Flow diagram">
256
+ <div class="label"><span>flow.svg</span><span>TODO WxH</span></div>
257
+ <img src="wireframes/flow.svg" alt="Flow diagram" />
258
+ </div>
259
+ </section>
260
+
261
+ <!-- ========== Screen template — duplicate per screen ==========
262
+ Three cells per row: desktop wire | mobile wire | notes-col.
263
+ Mobile is mandatory; only drop it when the user explicitly opted out. -->
264
+ <section id="s1">
265
+ <div class="lede">Step 1 · TODO group</div>
266
+ <h2><span class="step-num">1.</span>TODO screen name</h2>
267
+ <p class="desc">TODO — one-paragraph describing the screen's purpose.</p>
268
+ <div class="grid">
269
+ <div class="wire" data-zoom data-caption="01 · TODO screen name (desktop)">
270
+ <div class="label"><span>01-screen.svg</span><span>1280×800 · desktop</span></div>
271
+ <img src="wireframes/01-screen.svg" alt="TODO screen name (desktop) wireframe" />
272
+ </div>
273
+ <div class="wire mobile-wire mobile-col" data-zoom data-caption="01 · TODO screen name (mobile)">
274
+ <div class="label"><span>mobile</span><span>375×812</span></div>
275
+ <img src="wireframes/01-screen-mobile.svg" alt="TODO screen name (mobile) wireframe" />
276
+ </div>
277
+ <div class="notes-col">
278
+ <!-- Optional reference (real-world example we're modelling) -->
279
+ <div class="ref">
280
+ <div class="label"><span>Reference</span><span>TODO source</span></div>
281
+ <img src="screenshots/TODO-ref.png" alt="TODO reference" data-zoom />
282
+ </div>
283
+ <div class="notes">
284
+ <h3>Annotations</h3>
285
+ <ul>
286
+ <li><b>1</b> — TODO callout 1.</li>
287
+ <li><b>2</b> — TODO callout 2 (note where mobile diverges).</li>
288
+ </ul>
289
+ <div class="why"><b>Why this changes:</b> TODO rationale vs current state.</div>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ </section>
294
+
295
+ <!-- ========== Open questions ========== -->
296
+ <section id="open">
297
+ <div class="lede">For reviewer</div>
298
+ <h2>Open questions</h2>
299
+ <div class="notes">
300
+ <ul>
301
+ <li><b>TODO</b> — Open question 1.</li>
302
+ </ul>
303
+ </div>
304
+ </section>
305
+
306
+ <div class="footer">
307
+ Wireframes follow the in-tree <code>wireframe</code> skill house style — black on white, 1.5pt strokes, 8px grid, type sizes 12/14/20/28. Red dashed annotations are the call-out layer only and not part of the proposed UI.
308
+ </div>
309
+ </main>
310
+ </div>
311
+
312
+ <div class="lightbox" id="lb" aria-hidden="true">
313
+ <span class="close" id="lbClose">×</span>
314
+ <img id="lbImg" alt="" />
315
+ <div class="caption" id="lbCap"></div>
316
+ </div>
317
+
318
+ <script>
319
+ // Click-to-zoom: any element marked [data-zoom] OR any <img> inside [data-zoom]
320
+ const lb = document.getElementById('lb');
321
+ const lbImg = document.getElementById('lbImg');
322
+ const lbCap = document.getElementById('lbCap');
323
+ const lbClose = document.getElementById('lbClose');
324
+
325
+ document.querySelectorAll('[data-zoom]').forEach((el) => {
326
+ el.addEventListener('click', () => {
327
+ const target = el.tagName === 'IMG' ? el : el.querySelector('img');
328
+ if (!target) return;
329
+ lbImg.src = target.src;
330
+ lbImg.alt = target.alt;
331
+ lbCap.textContent = el.dataset.caption || target.alt || '';
332
+ lb.classList.add('open');
333
+ });
334
+ });
335
+
336
+ function close() { lb.classList.remove('open'); }
337
+ lb.addEventListener('click', close);
338
+ lbClose.addEventListener('click', close);
339
+ document.addEventListener('keydown', (e) => { if (e.key === 'Escape') close(); });
340
+
341
+ // TOC: open by default on desktop (<details> would otherwise hide body),
342
+ // closed by default on mobile so the long list doesn't dominate the viewport.
343
+ const toc = document.querySelector('details.toc');
344
+ if (toc) {
345
+ const mq = window.matchMedia('(max-width: 900px)');
346
+ const apply = () => { toc.open = !mq.matches; };
347
+ apply();
348
+ mq.addEventListener('change', apply);
349
+ // On mobile, collapse the TOC after the user taps a link.
350
+ toc.querySelectorAll('.toc-body a').forEach((a) => {
351
+ a.addEventListener('click', () => { if (mq.matches) toc.open = false; });
352
+ });
353
+ }
354
+ </script>
355
+ </body>
356
+ </html>
package/catalog/bundled/product/wireframe/assets/template-mobile.svg ADDED
@@ -0,0 +1,21 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="375" height="812" viewBox="0 0 375 812"
2
+ font-family="-apple-system, system-ui, sans-serif" fill="#fff" stroke="#000" stroke-width="1.5">
3
+ <!-- canvas -->
4
+ <rect x="0" y="0" width="375" height="812" />
5
+
6
+ <!-- 8px grid guides -->
7
+ <g data-region="grid" stroke="#e6e6e6" stroke-width="0.5" fill="none">
8
+ <path d="M 16 0 V 812" stroke="#d33" stroke-dasharray="2 4" />
9
+ <path d="M 359 0 V 812" stroke="#d33" stroke-dasharray="2 4" />
10
+ <!-- safe-area top (status bar 44px) and bottom (home indicator 34px) -->
11
+ <line x1="0" y1="44" x2="375" y2="44" />
12
+ <line x1="0" y1="778" x2="375" y2="778" />
13
+ </g>
14
+
15
+ <!-- replace this comment with your mobile wireframe primitives.
16
+ Mobile defaults:
17
+ - 16px outer margin (content width 343)
18
+ - 48px tap target minimum
19
+ - status-bar reserve 0-44, home-indicator reserve 778-812
20
+ -->
21
+ </svg>
package/catalog/bundled/product/wireframe/assets/template.svg ADDED
@@ -0,0 +1,24 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="1280" height="800" viewBox="0 0 1280 800"
2
+ font-family="-apple-system, system-ui, sans-serif" fill="#fff" stroke="#000" stroke-width="1.5">
3
+ <!-- canvas -->
4
+ <rect x="0" y="0" width="1280" height="800" />
5
+
6
+ <!-- 8px grid guides (toggle visibility by removing or commenting this group) -->
7
+ <g data-region="grid" stroke="#e6e6e6" stroke-width="0.5" fill="none">
8
+ <!-- vertical lines every 8px -->
9
+ <path d="M 8 0 V 800 M 16 0 V 800 M 24 0 V 800 M 32 0 V 800 M 40 0 V 800 M 48 0 V 800 M 56 0 V 800 M 64 0 V 800 M 72 0 V 800 M 80 0 V 800 M 88 0 V 800 M 96 0 V 800" />
10
+ <!-- column ruler at 24px outer margin + 12 columns of 88 with 8 gutter -->
11
+ <path d="M 48 0 V 800" stroke="#d33" stroke-dasharray="2 4" />
12
+ <path d="M 1232 0 V 800" stroke="#d33" stroke-dasharray="2 4" />
13
+ </g>
14
+
15
+ <!-- replace this comment block with your wireframe primitives.
16
+ Each primitive should be wrapped in its own <g transform="translate(x, y)"> with a numbered comment:
17
+ <!- - 1: navbar - ->
18
+ <g transform="translate(0, 0)" data-region="navbar"> ... </g>
19
+ Then in your reply, list:
20
+ 1 - navbar with global search
21
+ 2 - sidebar with primary nav
22
+ ...
23
+ -->
24
+ </svg>