Initial skills documentation — 25 categories, all SKILL.md + references + scripts

2026-07-15 17:42:20 -04:00
commit 1b4fcd4427
976 changed files with 188344 additions and 0 deletions
@@ -0,0 +1,85 @@
+# Letter Queue — Payment Link & Anita Notification Pattern
+
+## Overview
+
+The DRE letter queue page (`/var/www/internal/letter-queue.html`) is an all-in-one HTML+JS internal tool for authoring, approving, and sending demand letters. This reference documents two cross-cutting additions applied to every letter template and the authoring workflow.
+
+## Payment Link Placement
+
+**Every letter template and mock letter must include** the payment URL before the FDCPA disclosure:
+
+```
+Payment can be made at: https://pay.debtrecoveryexperts.com
+```
+
+The line goes **immediately before** the FDCPA disclosure:
+
+```
+This communication is from a debt collector attempting to collect a debt.
+```
+
+### Templates affected (in `templateContent` map)
+- `formal-demand` — already had link
+- `lien-threat` — already had link
+- `escalation` — already had link
+- `legal-action` — **was missing**, added via patch
+
+### Mock letter data affected (in `letters` array)
+All 4 mock entries had the link appended during the 2026-07-08 update. The link lives inside the template content string so the composer textarea reflects it immediately when a user selects a letter.
+
+## Anita Notification Bar
+
+When a new draft is created via the **"+ New Letter" modal** (i.e., `selectTemplate()` fires), show an amber alert bar below the nav bar:
+
+### HTML structure
+```html
+<div id="anitaNotification" class="anita-notification hidden" role="alert">
+  <span>✏️ Anita — a new letter draft is ready for your review and authoring.</span>
+  <button class="close-btn" id="anitaNotifClose" aria-label="Dismiss">&times;</button>
+</div>
+```
+
+### CSS
+```css
+.anita-notification {
+  display: flex; align-items: center; gap: 0.75rem;
+  background: #fbbf24; color: #1a1a1a;
+  padding: 10px 24px; font-size: 0.875rem; font-weight: 500;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+}
+.anita-notification .close-btn { margin-left: auto; background: none; border: none; color: #1a1a1a; cursor: pointer; font-size: 1.25rem; opacity: 0.6; padding: 0 4px; line-height: 1; }
+.anita-notification .close-btn:hover { opacity: 1; }
+.anita-notification.fade-out { opacity: 0; transition: opacity 0.5s ease-out; }
+```
+
+### JS function
+```js
+let anitaNotifTimer = null;
+
+function showAnitaNotification() {
+  if (!anitaNotification) return;
+  if (anitaNotifTimer) { clearTimeout(anitaNotifTimer); anitaNotifTimer = null; }
+  anitaNotification.classList.remove('hidden', 'fade-out');
+  anitaNotifTimer = setTimeout(() => {
+    anitaNotification.classList.add('fade-out');
+    setTimeout(() => {
+      anitaNotification.classList.add('hidden');
+      anitaNotification.classList.remove('fade-out');
+    }, 500);
+  }, 15000);
+}
+anitaNotifClose.addEventListener('click', () => {
+  if (anitaNotifTimer) { clearTimeout(anitaNotifTimer); anitaNotifTimer = null; }
+  anitaNotification.classList.add('hidden');
+});
+```
+
+### Hook point
+In `selectTemplate()` (inside the New Letter modal flow), call `showAnitaNotification()` right after the new letter object is pushed to the `letters` array — before `selectLetter(newId)`.
+
+## Re-applying these patterns
+
+When duplicating the letter queue page or adding new mock data / templates:
+1. Every `templateContent` entry **must** end with `\n\nPayment can be made at: https://pay.debtrecoveryexperts.com\n\nThis communication is from a debt collector attempting to collect a debt...`
+2. The Anita notification bar element must exist below `<nav>` but above `<main>`.
+3. `showAnitaNotification()` must be called in `selectTemplate()` after creating a new letter entry.