@tickernelz/paperclip-pro-skills-catalog 2026.925.0

package/catalog/bundled/product/wireframe/references/examples.md

@@ -0,0 +1,362 @@
+# Worked examples
+
+Four complete wireframes you can copy and modify. Each one is a valid standalone SVG file. The annotation list under each example is what you should reproduce in your reply when emitting a wireframe.
+
+---
+
+## 1. Login screen (mobile, 375×812)
+
+```svg
+<svg xmlns="http://www.w3.org/2000/svg" width="375" height="812" viewBox="0 0 375 812"
+     font-family="-apple-system, system-ui, sans-serif" fill="#fff" stroke="#000" stroke-width="1.5">
+  <rect x="0" y="0" width="375" height="812" />
+
+  <!-- 1: status bar (placeholder) -->
+  <g transform="translate(16, 16)">
+    <text x="0" y="14" font-size="12" stroke="none" fill="#666">9:41</text>
+    <text x="343" y="14" font-size="12" text-anchor="end" stroke="none" fill="#666">100%</text>
+  </g>
+
+  <!-- 2: brand mark -->
+  <g transform="translate(159, 120)">
+    <rect width="56" height="56" rx="8" fill="#e6e6e6" />
+  </g>
+
+  <!-- 3: title -->
+  <text x="187" y="216" font-size="28" font-weight="700" text-anchor="middle" stroke="none" fill="#000">Welcome back</text>
+  <text x="187" y="248" font-size="14" text-anchor="middle" stroke="none" fill="#666">Sign in to continue</text>
+
+  <!-- 4: email field -->
+  <g transform="translate(16, 296)">
+    <text x="0" y="14" font-size="14" font-weight="600" stroke="none" fill="#000">Email</text>
+    <g transform="translate(0, 24)">
+      <rect width="343" height="48" rx="4" />
+      <text x="12" y="30" font-size="14" stroke="none" fill="#666">you@example.com</text>
+    </g>
+  </g>
+
+  <!-- 5: password field -->
+  <g transform="translate(16, 400)">
+    <text x="0" y="14" font-size="14" font-weight="600" stroke="none" fill="#000">Password</text>
+    <g transform="translate(0, 24)">
+      <rect width="343" height="48" rx="4" />
+      <text x="12" y="30" font-size="14" stroke="none" fill="#666">••••••••</text>
+      <text x="331" y="30" font-size="12" text-anchor="end" stroke="none" fill="#666">show</text>
+    </g>
+    <text x="343" y="92" font-size="12" text-anchor="end" stroke="none" fill="#666">Forgot password?</text>
+  </g>
+
+  <!-- 6: primary CTA -->
+  <g transform="translate(16, 528)">
+    <rect width="343" height="48" rx="4" fill="#000" />
+    <text x="171" y="30" font-size="14" font-weight="600" text-anchor="middle" stroke="none" fill="#fff">Sign in</text>
+  </g>
+
+  <!-- 7: divider -->
+  <g transform="translate(16, 600)">
+    <line x1="0" y1="8" x2="140" y2="8" stroke="#666" />
+    <text x="171" y="12" font-size="12" text-anchor="middle" stroke="none" fill="#666">or</text>
+    <line x1="203" y1="8" x2="343" y2="8" stroke="#666" />
+  </g>
+
+  <!-- 8: secondary CTA -->
+  <g transform="translate(16, 632)">
+    <rect width="343" height="48" rx="4" />
+    <text x="171" y="30" font-size="14" text-anchor="middle" stroke="none" fill="#000">Continue with SSO</text>
+  </g>
+
+  <!-- 9: footer -->
+  <text x="187" y="744" font-size="14" text-anchor="middle" stroke="none" fill="#000">New here? <tspan font-weight="600">Create an account</tspan></text>
+</svg>
+```
+
+**Annotations:**
+1. Status bar placeholder
+2. Brand mark
+3. Page title + subtitle
+4. Email input
+5. Password input + reveal control + forgot link
+6. Primary CTA (sign in)
+7. SSO divider
+8. Secondary CTA (SSO)
+9. Sign-up link
+
+---
+
+## 2. Admin dashboard (desktop, 1280×800)
+
+```svg
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="800" viewBox="0 0 1280 800"
+     font-family="-apple-system, system-ui, sans-serif" fill="#fff" stroke="#000" stroke-width="1.5">
+  <rect x="0" y="0" width="1280" height="800" />
+
+  <!-- 1: sidebar -->
+  <g transform="translate(0, 0)" data-region="sidebar">
+    <rect width="240" height="800" />
+    <text x="24" y="40" font-size="20" font-weight="600" stroke="none" fill="#000">Acme</text>
+    <rect x="0" y="80" width="240" height="40" fill="#e6e6e6" />
+    <text x="24" y="105" font-size="14" stroke="none" fill="#000">Dashboard</text>
+    <text x="24" y="153" font-size="14" stroke="none" fill="#666">Projects</text>
+    <text x="24" y="201" font-size="14" stroke="none" fill="#666">Reports</text>
+    <text x="24" y="249" font-size="14" stroke="none" fill="#666">Team</text>
+    <text x="24" y="297" font-size="14" stroke="none" fill="#666">Settings</text>
+  </g>
+
+  <!-- 2: top bar -->
+  <g transform="translate(240, 0)" data-region="topbar">
+    <rect width="1040" height="64" />
+    <g transform="translate(24, 12)">
+      <rect width="400" height="40" rx="20" />
+      <circle cx="20" cy="20" r="6" />
+      <line x1="24" y1="24" x2="30" y2="30" />
+      <text x="40" y="25" font-size="14" stroke="none" fill="#666">Search…</text>
+    </g>
+    <circle cx="1000" cy="32" r="16" fill="#e6e6e6" />
+  </g>
+
+  <!-- 3: page header -->
+  <g transform="translate(264, 96)" data-region="header">
+    <text x="0" y="28" font-size="28" font-weight="700" stroke="none" fill="#000">Dashboard</text>
+    <text x="0" y="56" font-size="14" stroke="none" fill="#666">Overview of activity for the last 7 days</text>
+    <g transform="translate(872, 0)">
+      <rect width="120" height="40" rx="4" fill="#000" />
+      <text x="60" y="25" font-size="14" font-weight="600" text-anchor="middle" stroke="none" fill="#fff">New project</text>
+    </g>
+  </g>
+
+  <!-- 4: metric tiles -->
+  <g transform="translate(264, 184)" data-region="metrics">
+    <g transform="translate(0, 0)">
+      <rect width="232" height="120" rx="6" />
+      <text x="24" y="40" font-size="12" stroke="none" fill="#666">Active users</text>
+      <text x="24" y="80" font-size="28" font-weight="700" stroke="none" fill="#000">1,284</text>
+      <text x="24" y="104" font-size="12" stroke="none" fill="#666">+12% vs last week</text>
+    </g>
+    <g transform="translate(256, 0)">
+      <rect width="232" height="120" rx="6" />
+      <text x="24" y="40" font-size="12" stroke="none" fill="#666">New signups</text>
+      <text x="24" y="80" font-size="28" font-weight="700" stroke="none" fill="#000">312</text>
+      <text x="24" y="104" font-size="12" stroke="none" fill="#666">+4%</text>
+    </g>
+    <g transform="translate(512, 0)">
+      <rect width="232" height="120" rx="6" />
+      <text x="24" y="40" font-size="12" stroke="none" fill="#666">Revenue</text>
+      <text x="24" y="80" font-size="28" font-weight="700" stroke="none" fill="#000">$24.1k</text>
+      <text x="24" y="104" font-size="12" stroke="none" fill="#666">+8%</text>
+    </g>
+    <g transform="translate(768, 0)">
+      <rect width="232" height="120" rx="6" />
+      <text x="24" y="40" font-size="12" stroke="none" fill="#666">Churn</text>
+      <text x="24" y="80" font-size="28" font-weight="700" stroke="none" fill="#000">1.4%</text>
+      <text x="24" y="104" font-size="12" stroke="none" fill="#666">−0.3%</text>
+    </g>
+  </g>
+
+  <!-- 5: chart placeholder -->
+  <g transform="translate(264, 328)" data-region="chart">
+    <rect width="640" height="320" rx="6" />
+    <text x="24" y="40" font-size="20" font-weight="600" stroke="none" fill="#000">Activity</text>
+    <rect x="24" y="64" width="592" height="232" fill="#e6e6e6" />
+    <line x1="24" y1="64" x2="616" y2="296" stroke="#666" />
+    <line x1="616" y1="64" x2="24" y2="296" stroke="#666" />
+  </g>
+
+  <!-- 6: recent items list -->
+  <g transform="translate(920, 328)" data-region="recent">
+    <rect width="336" height="320" rx="6" />
+    <text x="24" y="40" font-size="20" font-weight="600" stroke="none" fill="#000">Recent</text>
+    <g transform="translate(0, 64)">
+      <line x1="0" y1="0" x2="336" y2="0" stroke="#666" />
+      <circle cx="32" cy="28" r="12" fill="#e6e6e6" />
+      <text x="56" y="24" font-size="14" font-weight="600" stroke="none" fill="#000">Item one</text>
+      <text x="56" y="40" font-size="12" stroke="none" fill="#666">2h ago</text>
+    </g>
+    <g transform="translate(0, 120)">
+      <line x1="0" y1="0" x2="336" y2="0" stroke="#666" />
+      <circle cx="32" cy="28" r="12" fill="#e6e6e6" />
+      <text x="56" y="24" font-size="14" font-weight="600" stroke="none" fill="#000">Item two</text>
+      <text x="56" y="40" font-size="12" stroke="none" fill="#666">5h ago</text>
+    </g>
+    <g transform="translate(0, 176)">
+      <line x1="0" y1="0" x2="336" y2="0" stroke="#666" />
+      <circle cx="32" cy="28" r="12" fill="#e6e6e6" />
+      <text x="56" y="24" font-size="14" font-weight="600" stroke="none" fill="#000">Item three</text>
+      <text x="56" y="40" font-size="12" stroke="none" fill="#666">1d ago</text>
+    </g>
+  </g>
+</svg>
+```
+
+**Annotations:**
+1. Sidebar nav with active "Dashboard"
+2. Top bar with global search and account menu
+3. Page header with title, subtitle, and primary CTA
+4. Four KPI metric tiles
+5. Activity chart panel (chart area shown as placeholder)
+6. Recent items list (right rail)
+
+---
+
+## 3. Settings page with form (desktop, 1280×800)
+
+```svg
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="800" viewBox="0 0 1280 800"
+     font-family="-apple-system, system-ui, sans-serif" fill="#fff" stroke="#000" stroke-width="1.5">
+  <rect x="0" y="0" width="1280" height="800" />
+
+  <!-- 1: top bar -->
+  <g transform="translate(0, 0)">
+    <rect width="1280" height="64" />
+    <text x="24" y="40" font-size="20" font-weight="600" stroke="none" fill="#000">Settings</text>
+    <circle cx="1240" cy="32" r="16" fill="#e6e6e6" />
+  </g>
+
+  <!-- 2: settings nav (left rail) -->
+  <g transform="translate(24, 96)">
+    <text x="0" y="14" font-size="12" font-weight="600" stroke="none" fill="#666">PERSONAL</text>
+    <rect x="-8" y="32" width="216" height="32" fill="#e6e6e6" />
+    <text x="0" y="52" font-size="14" stroke="none" fill="#000">Account</text>
+    <text x="0" y="84" font-size="14" stroke="none" fill="#666">Notifications</text>
+    <text x="0" y="116" font-size="14" stroke="none" fill="#666">Sessions</text>
+    <text x="0" y="160" font-size="12" font-weight="600" stroke="none" fill="#666">WORKSPACE</text>
+    <text x="0" y="200" font-size="14" stroke="none" fill="#666">Members</text>
+    <text x="0" y="232" font-size="14" stroke="none" fill="#666">Billing</text>
+    <text x="0" y="264" font-size="14" stroke="none" fill="#666">Integrations</text>
+  </g>
+
+  <!-- 3: form content -->
+  <g transform="translate(264, 96)">
+    <text x="0" y="28" font-size="28" font-weight="700" stroke="none" fill="#000">Account</text>
+    <text x="0" y="56" font-size="14" stroke="none" fill="#666">Manage your personal account details.</text>
+
+    <!-- avatar field -->
+    <g transform="translate(0, 96)">
+      <text x="0" y="14" font-size="14" font-weight="600" stroke="none" fill="#000">Profile photo</text>
+      <g transform="translate(0, 24)">
+        <circle cx="32" cy="32" r="32" fill="#e6e6e6" />
+        <line x1="9" y1="9" x2="55" y2="55" stroke="#666" />
+        <line x1="55" y1="9" x2="9" y2="55" stroke="#666" />
+      </g>
+      <g transform="translate(80, 36)">
+        <rect width="120" height="40" rx="4" />
+        <text x="60" y="25" font-size="14" text-anchor="middle" stroke="none" fill="#000">Upload</text>
+      </g>
+    </g>
+
+    <!-- name field -->
+    <g transform="translate(0, 216)">
+      <text x="0" y="14" font-size="14" font-weight="600" stroke="none" fill="#000">Display name</text>
+      <g transform="translate(0, 24)">
+        <rect width="480" height="40" rx="4" />
+        <text x="12" y="25" font-size="14" stroke="none" fill="#000">Alex Morgan</text>
+      </g>
+    </g>
+
+    <!-- email field -->
+    <g transform="translate(0, 312)">
+      <text x="0" y="14" font-size="14" font-weight="600" stroke="none" fill="#000">Email</text>
+      <g transform="translate(0, 24)">
+        <rect width="480" height="40" rx="4" />
+        <text x="12" y="25" font-size="14" stroke="none" fill="#000">alex@acme.com</text>
+      </g>
+      <text x="0" y="84" font-size="12" stroke="none" fill="#666">Used for sign-in and notifications.</text>
+    </g>
+
+    <!-- role dropdown -->
+    <g transform="translate(0, 432)">
+      <text x="0" y="14" font-size="14" font-weight="600" stroke="none" fill="#000">Role</text>
+      <g transform="translate(0, 24)">
+        <rect width="200" height="40" rx="4" />
+        <text x="12" y="25" font-size="14" stroke="none" fill="#000">Admin</text>
+        <polyline points="180,17 188,25 180,33" fill="none" />
+      </g>
+    </g>
+
+    <!-- footer actions -->
+    <g transform="translate(0, 552)">
+      <line x1="0" y1="0" x2="800" y2="0" stroke="#666" />
+      <g transform="translate(560, 24)">
+        <rect width="120" height="40" rx="4" />
+        <text x="60" y="25" font-size="14" text-anchor="middle" stroke="none" fill="#000">Cancel</text>
+      </g>
+      <g transform="translate(688, 24)">
+        <rect width="112" height="40" rx="4" fill="#000" />
+        <text x="56" y="25" font-size="14" font-weight="600" text-anchor="middle" stroke="none" fill="#fff">Save</text>
+      </g>
+    </g>
+  </g>
+</svg>
+```
+
+**Annotations:**
+1. Top bar with section name
+2. Settings sub-nav (Personal / Workspace groups)
+3. Form: avatar with upload, display name, email + help text, role dropdown, save / cancel actions
+
+---
+
+## 4. Modal confirmation overlay (desktop, 1280×800)
+
+```svg
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="800" viewBox="0 0 1280 800"
+     font-family="-apple-system, system-ui, sans-serif" fill="#fff" stroke="#000" stroke-width="1.5">
+  <rect x="0" y="0" width="1280" height="800" />
+
+  <!-- underlying screen (faded) -->
+  <g transform="translate(0,0)" opacity="0.5">
+    <rect width="1280" height="64" />
+    <text x="24" y="40" font-size="20" font-weight="600" stroke="none" fill="#000">Projects</text>
+  </g>
+
+  <!-- 1: backdrop -->
+  <rect x="0" y="0" width="1280" height="800" fill="#000" fill-opacity="0.4" stroke="none" />
+
+  <!-- 2: modal -->
+  <g transform="translate(320, 240)" data-region="modal">
+    <rect width="640" height="320" rx="6" />
+    <text x="24" y="48" font-size="20" font-weight="600" stroke="none" fill="#000">Delete project?</text>
+    <line x1="0" y1="72" x2="640" y2="72" />
+
+    <text x="24" y="112" font-size="14" stroke="none" fill="#000">This permanently deletes the project and all its data.</text>
+    <text x="24" y="136" font-size="14" stroke="none" fill="#000">This action can't be undone.</text>
+
+    <!-- confirm input -->
+    <g transform="translate(24, 168)">
+      <text x="0" y="14" font-size="12" stroke="none" fill="#666">Type the project name to confirm</text>
+      <g transform="translate(0, 24)">
+        <rect width="592" height="40" rx="4" />
+        <text x="12" y="25" font-size="14" stroke="none" fill="#666">acme-prod</text>
+      </g>
+    </g>
+
+    <!-- footer -->
+    <line x1="0" y1="248" x2="640" y2="248" />
+    <g transform="translate(384, 268)">
+      <rect width="120" height="40" rx="4" />
+      <text x="60" y="25" font-size="14" text-anchor="middle" stroke="none" fill="#000">Cancel</text>
+    </g>
+    <g transform="translate(512, 268)">
+      <rect width="104" height="40" rx="4" fill="#000" />
+      <text x="52" y="25" font-size="14" font-weight="600" text-anchor="middle" stroke="none" fill="#fff">Delete</text>
+    </g>
+  </g>
+
+  <!-- 3: annotation -->
+  <g data-region="annotations">
+    <circle cx="976" cy="556" r="12" fill="#fff" stroke="#d33" stroke-dasharray="4 2" />
+    <text x="976" y="560" font-size="12" font-weight="700" text-anchor="middle" stroke="none" fill="#d33">1</text>
+    <text x="996" y="564" font-size="12" stroke="none" fill="#d33">Disable until input matches project name</text>
+  </g>
+</svg>
+```
+
+**Annotations:**
+1. Backdrop dims the underlying page
+2. Confirmation modal: title, body copy, type-to-confirm field, Cancel + destructive Confirm
+3. Reviewer note (red dashed): the destructive button must remain disabled until the typed input matches
+
+---
+
+## Multi-screen flow
+
+When emitting a flow, render each screen as its own `<g transform="translate(x,0)">` inside one SVG, separated by 80px gutters and connected with arrow primitives from `components.md`. Or emit one SVG per screen and a `flow.svg` summary that arranges thumbnails (scaled with `transform="scale(0.25)"`) left-to-right. Either is acceptable; pick whichever the reviewer can scan faster.

package/catalog/bundled/product/wireframe/references/grid-system.md

@@ -0,0 +1,107 @@
+# Grid, palette, and type scale
+
+These are the only values you may use. Do not introduce new colours, sizes, or grid units.
+
+## Canvas presets
+
+| Viewport | Width × Height | Use for                       |
+| -------- | -------------- | ----------------------------- |
+| Desktop  | 1280 × 800     | Default for web app screens   |
+| Wide     | 1440 × 900     | Marketing landing pages       |
+| Tablet   | 768 × 1024     | iPad-class screens            |
+| Mobile   | 375 × 812      | iPhone-class screens          |
+
+Always include `viewBox="0 0 W H"` matching the canvas so it scales when embedded.
+
+## Grid
+
+- Base unit: **8px**. All `x`, `y`, `width`, `height` values must be multiples of 8.
+- Outer page margin: **24px** on desktop/tablet, **16px** on mobile.
+- Column gutter: **24px** desktop, **16px** mobile.
+- Vertical rhythm: **24px** between sibling components.
+
+### Desktop 12-column grid
+
+- Total width: 1280
+- Outer margin (each side): 48
+- Inner content width: 1184
+- Column width: 88, gutter 8 → 12 × (88 + 8) − 8 = 1144 + 40 = 1184 ✓
+
+In practice, snap to common widths:
+- Sidebar: 240
+- Content max: 944 (after sidebar)
+- Card grid: 3 × 384 with 24 gutters or 4 × 280 with 24 gutters
+- Modal width: 480 (small), 640 (default), 800 (wide)
+
+### Mobile single column
+
+- Total width: 375
+- Outer margin: 16 each side → content 343
+- Tap targets: 44 minimum height (snap to 48)
+
+## Palette (the only colours allowed)
+
+| Name             | Hex        | Use                                                      |
+| ---------------- | ---------- | -------------------------------------------------------- |
+| Ink              | `#000`     | Strokes, primary text                                    |
+| Paper            | `#fff`     | Default fill                                             |
+| Mute text        | `#666`     | Placeholder text inside inputs, secondary labels         |
+| Placeholder grey | `#e6e6e6`  | Image/avatar/empty-state regions                         |
+| Subtle grey      | `#f4f4f4`  | Optional zebra rows in tables; nothing else              |
+| Annotation red   | `#d33`     | Annotation layer ONLY — dashed borders, callout numbers  |
+
+That's the entire palette. No hover states, no focus rings, no brand colours.
+
+## Type scale
+
+Single typeface: `font-family="-apple-system, system-ui, sans-serif"`.
+
+| Role     | Size | Weight | Use                              |
+| -------- | ---- | ------ | -------------------------------- |
+| Caption  | 12   | 400    | Help text, metadata, table footnotes |
+| Body     | 14   | 400    | Default text, button labels, list rows |
+| Heading  | 20   | 600    | Section headings, card titles    |
+| Title    | 28   | 700    | Page title (one per screen)      |
+
+Font-weight is the only typographic variation allowed beyond size. No italics, no underline (except links — see below).
+
+### Link convention
+
+For text links, render as body 14, with `text-decoration="underline"`. No colour change.
+
+### Strokes on text
+
+Always set `stroke="none"` on `<text>` elements. The wireframe SVG sets a default stroke at the `<svg>` root for boxes; text inherits it as an unwanted halo unless overridden.
+
+## Standard component sizes
+
+These appear so often you should memorise them.
+
+| Component         | Size (W × H) |
+| ----------------- | ------------ |
+| Button (default)  | 120 × 40     |
+| Button (small)    | 80 × 32      |
+| Button (icon)     | 40 × 40      |
+| Text input        | 320 × 40     |
+| Text input (full) | 100% × 40    |
+| Search input      | 480 × 40     |
+| Dropdown          | 200 × 40     |
+| Checkbox / radio  | 20 × 20      |
+| Avatar (small)    | 32 × 32 circle |
+| Avatar (medium)   | 48 × 48 circle |
+| Navbar            | 100% × 64    |
+| Tab               | (auto) × 48  |
+| List row          | 100% × 56    |
+| Table row         | 100% × 48    |
+| Card padding      | 24 inside    |
+| Modal             | 480 / 640 / 800 wide, height auto |
+
+## Coordinate conventions
+
+- Place every primitive inside a `<g transform="translate(x, y)">` so its internal coordinates start at `(0, 0)`. This makes primitives copy-pastable across screens.
+- Use comments above each primitive: `<!-- 1: nav -->`, `<!-- 2: search -->` matching the annotation list you write below the SVG.
+- Group related primitives under a parent `<g>` with a `data-region="..."` attribute for searchability.
+
+## Negative space
+
+Empty space is part of the design. Do not fill the canvas. A wireframe with one card centered in the viewport is a valid wireframe if that's the screen's intent.

package/catalog/bundled/quality/qa-acceptance/SKILL.md

@@ -0,0 +1,93 @@
+---
+name: qa-acceptance
+description: Produce QA acceptance criteria and a manual validation plan for a feature change — golden path, edge cases, error states, performance limits, and explicit pass/fail evidence.
+key: paperclipai/bundled/quality/qa-acceptance
+recommendedForRoles:
+  - qa
+  - engineer
+  - product
+tags:
+  - qa
+  - acceptance
+  - validation
+  - testing
+---
+
+# QA Acceptance
+
+Write acceptance criteria that a reviewer can run against the running app and decide pass or fail without asking the author. The criteria are the contract — automated tests cover correctness, QA covers feature-level behavior.
+
+## When to use
+
+- A feature change is heading to QA and needs a written validation plan.
+- A reviewer is asked to verify a PR that touches user-visible behavior.
+- An incident postmortem requires a regression check before reopen-prevention.
+- A release candidate needs a pre-cut smoke pass.
+
+## When not to use
+
+- The change is unit-test-only (utility refactor, internal naming). Acceptance criteria are unnecessary churn.
+- You are asked to write tests against API contracts. Use contract testing, not feature QA.
+
+## Acceptance criteria format
+
+Each criterion is a single, independently-verifiable statement:
+
+```md
+- **Given** <starting state>, **when** <action>, **then** <observable outcome>.
+```
+
+Example:
+
+```md
+- **Given** a CSV export with 0 rows, **when** the user clicks Export, **then** the file downloads with only the header row and the UI shows "Exported 0 rows".
+```
+
+Avoid criteria that combine multiple `when`s or `then`s. Split them.
+
+## What every plan must cover
+
+1. **Golden path.** The most common successful flow, end to end.
+2. **Empty and minimum states.** Zero items, one item, missing optional inputs.
+3. **Boundary inputs.** Max length strings, max numeric values, unicode, RTL text where applicable.
+4. **Error states.** Network failure, permission denied, validation failures, conflict (409), not found (404).
+5. **Concurrency and ordering.** Two users acting at once, race against background jobs, refresh during mutation.
+6. **Performance envelope.** The largest realistic input the change must handle without UI hangs or timeouts.
+7. **Backward compatibility.** Existing data, existing URLs, persisted user preferences continue to work.
+8. **Telemetry and audit.** Events, logs, or activity entries the change is supposed to emit.
+
+If a section is genuinely not applicable, write "N/A: <why>" — do not silently omit.
+
+## Evidence
+
+Each criterion needs evidence on the verification pass:
+
+- Screenshot or short clip for UI behavior.
+- Copied console / network output for API behavior.
+- Log snippet or activity row for telemetry.
+- Timing measurement for performance criteria.
+
+"Looks good to me" without evidence is not a pass.
+
+## Quarantine and follow-up
+
+- A failing criterion blocks acceptance unless explicitly waived by the owner with a tracked follow-up issue.
+- "Known issue" without a linked follow-up is not a waiver.
+- If you add a new criterion mid-pass, restart the pass — partial coverage hides regressions.
+
+## Handoff back to the author
+
+Return the validation plan with three sections:
+
+- **Pass.** Criteria that passed, with one-line evidence summaries.
+- **Fail.** Criteria that failed, with the exact reproduction.
+- **Blocked.** Criteria you could not run, with why.
+
+The author owns turning failures into either fixes or accepted deferrals.
+
+## Anti-patterns
+
+- Acceptance phrased as test plan ("write a Cypress test for X"). Acceptance is what is true after the change ships; tests are how you check.
+- Criteria that depend on inspecting implementation details (selectors, query plans). Stay observable.
+- Long checklists with no priority. Mark must-pass criteria distinctly from nice-to-have.
+- Validation reports that say "passed" with no evidence. Reviewers cannot audit those.

package/catalog/bundled/software-development/github-pr-workflow/SKILL.md

@@ -0,0 +1,93 @@
+---
+name: github-pr-workflow
+description: Prepare a GitHub pull request from a feature branch — branch hygiene, commit shape, title/body, verification notes, screenshots for UI work, and replies to review comments.
+key: paperclipai/bundled/software-development/github-pr-workflow
+recommendedForRoles:
+  - engineer
+tags:
+  - github
+  - pull-requests
+  - code-review
+  - release
+---
+
+# GitHub Pull Request Workflow
+
+Ship a PR a reviewer can land without follow-up clarifying questions. The aim is high signal in the title and body, evidence the change works, and clean replies when feedback comes in.
+
+## When to use
+
+- You are about to open a PR for a change that is functionally complete.
+- A reviewer left comments and you need to respond and push fixes.
+- A PR has been open more than a day and needs to be brought back into shape (stale conflicts, missing description, missing verification).
+
+## When not to use
+
+- The change is not yet functionally complete. Finish the work first; draft PRs that bounce on review are noise.
+- The repository uses a non-GitHub forge. Adjust to that forge's conventions; do not force GitHub-isms.
+
+## Branch hygiene before opening
+
+- Rebase or merge from the target base so the diff is current.
+- Squash WIP commits into reviewable units. Prefer one commit per logical change; do not force one-commit-per-PR if the work is genuinely multi-step.
+- Confirm tests, typecheck, and lint pass locally. Note any deliberate skips in the PR body.
+- Remove debug prints, commented-out code, and `TODO` markers that are not tracked.
+
+## PR title
+
+- Imperative mood, under 70 characters.
+- Lead with the user-visible change, not the file touched. `Allow CSV export from reports table` beats `Update reports.tsx`.
+- If the repo uses an issue prefix convention (`PAP-1234:`, `[security]`), follow it.
+- No trailing period.
+
+## PR body
+
+Use this structure:
+
+```md
+## Summary
+- 1–3 bullets describing what changed and why.
+
+## Implementation notes
+- Anything non-obvious in the diff: trade-offs, dropped alternatives, gotchas.
+- Migration or config implications.
+
+## Verification
+- The exact commands or steps you ran.
+- Screenshots or short clips for UI changes (required if pixels moved).
+- Edge cases you exercised by hand.
+
+## Risk and rollback
+- What breaks if this is reverted, and how to revert cleanly.
+```
+
+Skip the `Risk and rollback` section only for clearly trivial PRs (typos, docs).
+
+## Verification evidence
+
+- Tests passing in CI is necessary, not sufficient. Reviewers also need to know the change behaves correctly end to end.
+- For UI work, include screenshots of the golden path and one edge case. Tag dark and light mode if the project supports both.
+- For migrations, include a dry-run plan and reversal steps.
+- For performance changes, include a before/after measurement, not adjectives.
+
+## Replying to review comments
+
+- Reply on every comment, even with just "fixed in <commit-sha>" — silent fixes leave the reviewer guessing.
+- Push fixes as new commits while review is active; do not amend during review unless the reviewer agrees.
+- If you disagree with feedback, say so with one sentence of rationale and let the reviewer decide. Don't escalate over comments.
+- Re-request review explicitly after pushing changes.
+
+## Merge checklist
+
+- All required checks green.
+- All review comments resolved.
+- PR title/body still accurate (update if scope changed mid-review).
+- Linked issue moves to `in_review` or `done` per project convention.
+- Delete the branch after merge unless it is a long-lived integration branch.
+
+## Anti-patterns
+
+- PR description that says "see commits". Reviewers should not need to read the log.
+- Mixing refactor and behavior change in the same PR with no separation in the body.
+- "Address feedback" commits that bundle unrelated edits. One commit per round of feedback is fine; one commit for everything in flight is not.
+- Force-pushing during active review without telling the reviewer.