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,48 @@
+# Portal Login Page Design
+
+## Two-Audience Layout
+
+The portal login page serves two distinct users side by side:
+
+### Left: Existing Customer Login
+- Blue accent theme
+- Email + password fields
+- Remember me checkbox
+- Forgot password link
+- Google SSO button
+- Purpose: "Access your dashboard, view services, manage your account"
+
+### Right: New Customer Lead Capture
+- Green accent theme (differentiation)
+- **First name + Last name fields** (separate, 2-column grid — NOT "Full name" single field)
+- Email + Company fields
+- Service interest checkboxes (grid 2-column layout with 8 options):
+  - Internet / WISP
+  - Business VoIP
+  - DNS / Domain
+  - Email Hosting
+  - Web Hosting
+  - Network Setup
+  - Backup / DR
+  - Other
+- **Cloudflare Turnstile** shield icon + "Protected by Cloudflare Turnstile" text above submit button
+- Submit labeled "Submit Inquiry" with caption "We'll review your request and contact you within 1 business day."
+- Purpose: "Tell us what you need and we'll reach out with a custom solution"
+
+## Captcha Protection
+
+Public-facing forms require bot protection. Options ranked:
+
+| Option | UX | Best for |
+|---|---|---|
+| **Cloudflare Turnstile** ✅ | Invisible — no checkbox | Privacy-focused, free, simple |
+| reCAPTCHA v3 (invisible) | No click, score-based | Fine, but Google-owned |
+| reCAPTCHA v2 checkbox | "I'm not a robot" click | Works, but dated UX |
+| Honeypot field | Hidden field, zero UX impact | Good 2nd layer, not enough alone |
+
+**Turnstile is the recommended choice** — free, no Google tracking required, invisible to users, one line of JS + one widget key.
+
+## Responsive Breakpoints
+- Mobile (< 640px): Single column, panels stack vertically, service checkboxes collapse to single column
+- Tablet (640-1024px): 2-column grid, reduced padding
+- Desktop (> 1024px): Side-by-side panels with full padding