waitsec 0.4.5 → 0.5.0

package/skills/waitsec-pagemaker/references/about-me.md

@@ -0,0 +1,122 @@
+# About Me & Portfolio Blueprint (waitsec-pagemaker)
+
+Use this guide when creating a personal developer portfolio, founder bio, or engineer profile page. It ensures the page highlights real-world work and technical competence without cheesy resume clichés.
+
+---
+
+## Complete Page Anatomy & Responsive Flow
+
+### 1. Intro Snapshot (The Header)
+* **Desktop (1024px+):** Side-by-side layout. Profile photo or avatar on the left (80px to 96px), short 2-sentence bio on the right, followed by status badge (e.g. "Available for projects") and direct social links (GitHub, X, LinkedIn, Email).
+* **Mobile (<768px):** Stacks vertically. Avatar centered or left-aligned with clean text underneath. Keep intro under 50 words so visitors see projects without scrolling endlessly.
+
+### 2. Selected Projects Showcase
+* **Desktop:** 2-column grid (`md:grid-cols-2 gap-6`). Each card highlights 1 tangible problem solved, tech stack badges, live demo link, and GitHub repository link.
+* **Mobile:** 1-column vertical stack (`grid-cols-1 gap-6`). Full-width cards with large touch targets for external links.
+
+### 3. Career & Experience Timeline
+* **Desktop & Mobile:** Single vertical line aligned to the left edge with bullet dots. Never use an alternating left-and-right zigzag timeline that breaks on mobile.
+* Content per role: Company name, job title, start/end dates, and 2 concise bullet points detailing measurable engineering impact.
+
+### 4. Technical Skills & Tools
+* **Desktop & Mobile:** Simple, clean text pills organized by category (Languages, Frameworks, Cloud & Databases, Tooling).
+* Absolutely zero animated percentage bars or fake skill ratings.
+
+### 5. Direct Reachout Section
+* A clean footer box with a prominent email link (`mailto:your@email.com`) and location timezone.
+
+---
+
+## Detailed Pitfalls & The 5-Point Rule
+
+### 1. The Fake Skill Percentage Bars
+
+* **The Bad Habit:** Adding animated progress bars that claim "JavaScript: 95%", "Docker: 80%", "Teamwork: 90%".
+* **The Problem:** Percentage numbers on human skills mean literally nothing. What does 95% of JavaScript even mean? Does it mean you wrote the V8 engine?
+* **Why It Fails:** Senior hiring managers and engineering leads instantly recognize skill bars as amateur filler. It damages technical credibility.
+* **Clean Fix:** Group skills into clear categorical text badges, or list them alongside the real projects where you actually used them:
+  ```html
+  <div class="space-y-4">
+    <h3 class="text-sm font-semibold uppercase tracking-wider text-neutral-500">Core Technologies</h3>
+    <div class="flex flex-wrap gap-2">
+      <span class="px-3 py-1 bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300 text-xs rounded-md">TypeScript</span>
+      <span class="px-3 py-1 bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300 text-xs rounded-md">Next.js</span>
+      <span class="px-3 py-1 bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300 text-xs rounded-md">PostgreSQL</span>
+      <span class="px-3 py-1 bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300 text-xs rounded-md">Tailwind CSS</span>
+    </div>
+  </div>
+  ```
+* **The Waitsec Way:** Prove skills through projects and code, not through invented percentages.
+
+### 2. The Alternating Zigzag Timeline on Mobile
+
+* **The Bad Habit:** Creating a timeline where odd years are on the left of a center line and even years are on the right.
+* **The Problem:** On a 375px phone screen, dividing the screen in half leaves only 140px of width for text. Sentences wrap every 2 words.
+* **Why It Fails:** It looks like a tangled mess on phones, and dates collide with company names.
+* **Clean Fix:** Use a left-aligned timeline across all screen sizes. The timeline border sits strictly on the left margin:
+  ```html
+  <div class="relative border-l border-neutral-200 dark:border-neutral-800 ml-3 space-y-8">
+    <div class="relative pl-6">
+      <!-- Timeline Node Dot -->
+      <div class="absolute -left-1.5 top-1.5 w-3 h-3 bg-neutral-900 dark:bg-white rounded-full"></div>
+      <div class="text-xs text-neutral-400 font-medium">2024 - Present</div>
+      <h3 class="text-base font-bold text-neutral-900 dark:text-white mt-1">Lead Backend Engineer • Fastro</h3>
+      <p class="text-sm text-neutral-600 dark:text-neutral-400 mt-2">
+        Redesigned API gateway architecture, reducing response latency by 35%.
+      </p>
+    </div>
+  </div>
+  ```
+* **The Waitsec Way:** Keep mobile layouts simple. A single vertical line reads naturally from top to bottom on any device.
+
+### 3. Vague Project Cards With No Live Proof
+
+* **The Bad Habit:** Listing 8 generic project cards with titles like "E-Commerce App" and "Task Manager", with no live demo and no source code link.
+* **The Problem:** The visitor has no way to verify whether the project was actually built or just copied from a YouTube tutorial.
+* **Why It Fails:** Recruiters and clients want to see live code and architecture decisions. Dead links cause visitors to bounce.
+* **Clean Fix:** Showcase 3 or 4 high-quality projects. For each project, explain the technical problem it solved, provide a live link, and link the GitHub repository:
+  ```html
+  <div class="p-6 border border-neutral-200 dark:border-neutral-800 rounded-xl hover:border-neutral-400 transition-colors">
+    <div class="flex items-center justify-between">
+      <h3 class="text-lg font-bold text-neutral-900 dark:text-white">Waitsec CLI</h3>
+      <div class="flex items-center gap-3 text-sm">
+        <a href="https://github.com/..." class="text-neutral-500 hover:text-neutral-900">GitHub &rarr;</a>
+        <a href="https://waitsec.dev" class="text-neutral-900 dark:text-white font-medium">Live &rarr;</a>
+      </div>
+    </div>
+    <p class="text-sm text-neutral-600 dark:text-neutral-400 mt-2">
+      Lightweight engineering discipline tool for AI coding agents with zero external dependencies.
+    </p>
+    <div class="flex gap-2 mt-4 text-xs font-mono text-neutral-500">
+      <span>Node.js</span> • <span>ESM</span> • <span>CLI</span>
+    </div>
+  </div>
+  ```
+* **The Waitsec Way:** Fewer projects with real code beats twenty shallow placeholders.
+
+### 4. Hiding the Contact Email Behind a Wall
+
+* **The Bad Habit:** Hiding the contact option behind a broken third-party contact form with 8 mandatory fields.
+* **The Problem:** The user just wants to send a quick freelance inquiry or collaboration email, but the form errors out or sends into a void.
+* **Why It Fails:** Friction kills inbound opportunities. If people cannot easily email you, they will message someone else.
+* **Clean Fix:** Always provide a direct, visible email address with a clickable `mailto:` link:
+  ```html
+  <div class="p-8 bg-neutral-50 dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 text-center">
+    <h2 class="text-2xl font-bold">Let's build something together</h2>
+    <p class="text-neutral-600 dark:text-neutral-400 mt-2 text-sm">Currently open to select contract and advisory roles.</p>
+    <a href="mailto:hello@example.com" class="inline-block mt-4 px-6 py-3 bg-neutral-900 text-white dark:bg-white dark:text-neutral-900 font-medium rounded-lg">
+      hello@example.com
+    </a>
+  </div>
+  ```
+* **The Waitsec Way:** Remove barriers between you and your audience. Make reaching out as easy as clicking one button.
+
+---
+
+## Pre-Flight Checklist for About Me & Portfolio Pages
+
+- [ ] Are all fake animated skill percentage bars removed in favor of clean categorical tags?
+- [ ] Is the career timeline strictly left-aligned with zero alternating zigzag layouts?
+- [ ] Does every featured project have a working live link or public repository link?
+- [ ] Is there a direct, clickable `mailto:` link clearly visible on the page?
+- [ ] Do project cards collapse into a clean single vertical stack on mobile screens?

package/skills/waitsec-pagemaker/references/article-single.md

@@ -0,0 +1,104 @@
+# Single Article & Reading View Blueprint (waitsec-pagemaker)
+
+Use this guide when creating a single article view, blog post template, or markdown documentation page. It ensures readers can focus comfortably on long-form text without eye strain on any device.
+
+---
+
+## Complete Page Anatomy & Responsive Flow
+
+### 1. Top Navigation & Context
+* **Desktop & Mobile:** A clean back link at the top (for example: "← Back to all articles"). Keeps the reader oriented so they never feel lost in deep content.
+
+### 2. Article Header & Metadata
+* **Category Badge:** Small tag indicating the topic (e.g. "Tutorial" or "Architecture").
+* **Main Title (`<h1>`):** Bold, clear, and prominent. Use `text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight`.
+* **Author & Meta Row:** Author avatar, full name, publication date, and estimated reading time (e.g. "Sep 12, 2026 • 6 min read").
+
+### 3. Reading Container & Measure
+* **Desktop (1024px+):** Constrain the reading container to `max-w-prose` or `max-w-3xl mx-auto px-4`. Never allow lines of text to stretch wider than 70 to 75 characters per line.
+* **Mobile (<768px):** Full width with generous side padding (`px-4 sm:px-6`). Use comfortable 16px or 17px body text with relaxed line-height.
+
+### 4. Rich Media & Code Elements
+* **Code Blocks:** Dark background, syntax highlighting, monospace font, with an explicit `overflow-x-auto` wrapper so long lines of code scroll horizontally instead of blowing up the mobile page.
+* **Blockquotes:** Indented with a 3px solid neutral accent border on the left and slightly italicized text.
+* **Tables:** Always wrapped in a container with `overflow-x-auto` to allow smooth horizontal scrolling on phones.
+
+### 5. Article Footer & Engagement
+* **Author Card:** 2-sentence bio with direct links to GitHub or social profiles.
+* **Next / Previous Navigation:** 2-column cards at the bottom of the article linking to the next piece of content.
+
+---
+
+## Detailed Pitfalls & The 5-Point Rule
+
+### 1. The 1920px Full-Width Reading Nightmare
+
+* **The Bad Habit:** Letting article paragraphs stretch 100% across the full width of an ultrawide desktop monitor.
+* **The Problem:** Lines of text become 180 characters long. Readers have to physically turn their heads from left to right to finish a single sentence.
+* **Why It Fails:** Human eyes lose track of the next line when scanning sentences longer than 75 characters. Readers get disoriented, skip paragraphs, and leave out of fatigue.
+* **Clean Fix:** Strictly constrain the text wrapper using `max-w-3xl` or `max-w-prose` with centered margins:
+  ```html
+  <main class="w-full max-w-3xl mx-auto px-4 sm:px-6 py-12">
+    <article class="prose prose-neutral dark:prose-invert max-w-none">
+      <p class="text-base sm:text-lg leading-relaxed text-neutral-800">
+        Paragraph text stays comfortable and readable across any screen size.
+      </p>
+    </article>
+  </main>
+  ```
+* **The Waitsec Way:** Reading comfort is non-negotiable. Cap line length between 60 and 75 characters per line on all devices.
+
+### 2. Code Blocks That Break Mobile Viewports
+
+* **The Bad Habit:** Rendering `<pre><code>` blocks with default styling or `white-space: pre` without horizontal overflow protection.
+* **The Problem:** A single long line of code (like a long URL or terminal command) forces the entire mobile page to expand to 900px width.
+* **Why It Fails:** The entire website starts wobbling sideways on mobile phones. Users have to pinch-to-zoom just to recenter the text.
+* **Clean Fix:** Always wrap code blocks with `overflow-x-auto` and specify a clean monospace font stack:
+  ```html
+  <div class="my-6 rounded-xl bg-neutral-900 text-neutral-100 p-4 overflow-x-auto border border-neutral-800">
+    <pre class="font-mono text-sm leading-normal"><code>const response = await fetch("https://api.example.com/v1/data/endpoint/users");</code></pre>
+  </div>
+  ```
+* **The Waitsec Way:** Code snippets must adapt to the screen, not break the screen. Contain horizontal overflow strictly inside the code block.
+
+### 3. Markdown Tables Clipping Columns on Phones
+
+* **The Bad Habit:** Inserting a 5-column data table inside an article and expecting it to fit on a 375px phone screen.
+* **The Problem:** The rightmost 3 columns get permanently cut off, or the text inside table cells squishes into unreadable single-letter stacks.
+* **Why It Fails:** Tables cannot shrink below the width of their text. When table boundaries are locked, readers miss crucial data.
+* **Clean Fix:** Wrap every markdown table in an explicit scroll container with a visual scroll indicator:
+  ```html
+  <div class="my-6 w-full overflow-x-auto border border-neutral-200 rounded-lg">
+    <table class="w-full min-w-[500px] text-left text-sm">
+      <thead class="bg-neutral-50 border-b border-neutral-200">...</thead>
+      <tbody class="divide-y divide-neutral-200">...</tbody>
+    </table>
+  </div>
+  ```
+* **The Waitsec Way:** Tables are inherently wide. Always give them dedicated horizontal scroll containers so the main page stays rock solid.
+
+### 4. Header Crowding & Suffocating Line-Height
+
+* **The Bad Habit:** Using tight line-height (`leading-tight`) on body paragraphs and putting zero top margin above `<h2>` and `<h3>` subheadings.
+* **The Problem:** Subheadings look glued to the paragraph above them, and dense blocks of text look like intimidating walls of gray ink.
+* **Why It Fails:** Reading on a screen is tiring. Without generous breathing room, readers skim and bounce.
+* **Clean Fix:** Give subheadings double the margin above them (`mt-10 mb-4`), and use relaxed line height (`leading-relaxed` or `line-height: 1.75`) for body text:
+  ```html
+  <h2 class="text-2xl font-bold tracking-tight text-neutral-900 mt-12 mb-4">
+    Core Architectural Changes
+  </h2>
+  <p class="text-base sm:text-lg leading-relaxed text-neutral-700 mb-6">
+    Notice how the generous space above makes it instantly obvious that a new topic has begun.
+  </p>
+  ```
+* **The Waitsec Way:** Visual breathing room creates typographic rhythm. Generous spacing makes complex technical content easy to absorb.
+
+---
+
+## Pre-Flight Checklist for Single Article Pages
+
+- [ ] Is the article reading width capped at `max-w-3xl` or `65-75ch` to prevent eye strain?
+- [ ] Do all code blocks and tables have `overflow-x-auto` to prevent mobile viewport wobbling?
+- [ ] Is body paragraph line-height set to relaxed (`leading-relaxed` / 1.75)?
+- [ ] Are subheadings given generous top margin (`mt-10` to `mt-12`) to separate topics clearly?
+- [ ] Is there a clear back-navigation link at the top of the article?

package/skills/waitsec-pagemaker/references/blog-index.md

@@ -0,0 +1,121 @@
+# Blog & Article Index Blueprint (waitsec-pagemaker)
+
+Use this guide when creating a blog listing, article archive, or news feed. It ensures your readers can easily discover, browse, and filter articles across phones, tablets, and wide monitors.
+
+---
+
+## Complete Page Anatomy & Responsive Flow
+
+### 1. Header & Category Bar
+* **Desktop (1024px+):** Clean page heading (e.g. "Engineering Journal"), a 1-sentence descriptor, and a horizontal row of category pills (All, Architecture, Security, Tutorials).
+* **Mobile (<768px):** Category pills sit in a smooth horizontally scrollable row (`overflow-x-auto no-scrollbar`) with 44px touch targets. Never wrap 15 category tags into four messy vertical lines.
+
+### 2. Featured / Latest Story (Hero Card)
+* **Desktop:** Wide horizontal card (spans 2 columns or full width). High-resolution cover image on the left (50% width), title, category tag, 3-line excerpt, and author metadata on the right (50% width).
+* **Mobile:** Stacks vertically. Image on top (aspect-video), followed by title, date, reading time, and excerpt.
+
+### 3. Article Stream / Card Grid
+* **Desktop Grid Option:** 3-column card grid (`lg:grid-cols-3 gap-8`).
+* **Desktop Feed Option (Substack/Medium Style):** Single centered feed (`max-w-3xl mx-auto space-y-8`). Highly recommended for tech blogs.
+* **Tablet:** 2-column grid (`md:grid-cols-2 gap-6`).
+* **Mobile:** 1-column vertical stack (`grid-cols-1 gap-6`). Every card gets full screen width with generous tap target padding.
+
+### 4. Article Card Anatomy
+Every article preview card must contain:
+1. Category badge (e.g. "Security" or "CSS").
+2. Article title (`<h2>` or `<h3>`) with clear hover underline or color shift.
+3. Reading metadata: Publication date and estimated reading time (e.g. "Sep 12, 2026 • 5 min read").
+4. Short excerpt: strictly truncated to 2 or 3 lines (`line-clamp-2` or `line-clamp-3`).
+5. Author snapshot: small 28px avatar and author name.
+
+### 5. Pagination & Page Navigation
+* **Desktop & Mobile:** Explicit page numbers or simple "Previous Page" and "Next Page" buttons.
+* Avoid infinite scroll by default so users can reach the footer and search filters comfortably.
+
+---
+
+## Detailed Pitfalls & The 5-Point Rule
+
+### 1. The Giant Image Trap on Mobile
+
+* **The Bad Habit:** Placing massive 16:9 cover images with fixed 400px heights above every single article card.
+* **The Problem:** On a phone, one single article card fills the entire screen. The user has to scroll 3 full times just to see two article titles.
+* **Why It Fails:** People browse blog indexes to scan headlines quickly. Giant thumbnail images waste mobile vertical space and burn unnecessary cellular data.
+* **Clean Fix:** Use compact thumbnail aspect ratios on mobile, or switch to a clean text-first layout where thumbnails are small squares placed on the right side:
+  ```html
+  <article class="flex flex-col sm:flex-row items-start justify-between gap-4 py-6 border-b border-neutral-200">
+    <div class="flex-1">
+      <span class="text-xs font-semibold text-neutral-500 uppercase">Architecture</span>
+      <h2 class="text-xl font-bold mt-1 hover:text-neutral-600">
+        <a href="/blog/scaling-sqlite">How We Scaled SQLite to 100k Requests</a>
+      </h2>
+      <p class="text-sm text-neutral-600 mt-2 line-clamp-2">
+        A practical walkthrough of write-ahead logging and connection pooling.
+      </p>
+      <div class="text-xs text-neutral-400 mt-3">Sep 12, 2026 • 4 min read</div>
+    </div>
+    <!-- Small thumbnail on right (tablet/desktop), hidden or compact on mobile -->
+    <div class="w-full sm:w-32 h-32 bg-neutral-100 rounded-lg overflow-hidden shrink-0">...</div>
+  </article>
+  ```
+* **The Waitsec Way:** A blog index is an index for reading. Headlines and excerpts must always take priority over decorative stock images.
+
+### 2. The Wrapping Category Pill Explosion
+
+* **The Bad Habit:** Displaying 10 or 15 topic tags ("JavaScript", "Python", "Database", "Design", "DevOps") as inline flex pills that wrap into 4 uneven rows on mobile.
+* **The Problem:** The top third of the phone screen is consumed by a wall of colorful tag pills, pushing the actual articles out of view.
+* **Why It Fails:** It looks messy, creates visual clutter, and forces mobile users to scroll before they even see an article.
+* **Clean Fix:** Use a single horizontal scrolling row on mobile, or use a clean dropdown selector:
+  ```html
+  <div class="flex items-center gap-2 overflow-x-auto pb-2 -mx-4 px-4 sm:mx-0 sm:px-0 scrollbar-none">
+    <button class="px-4 py-2 text-xs font-semibold bg-neutral-900 text-white rounded-full shrink-0">All Posts</button>
+    <button class="px-4 py-2 text-xs font-semibold bg-neutral-100 text-neutral-700 rounded-full shrink-0 hover:bg-neutral-200">Security</button>
+    <button class="px-4 py-2 text-xs font-semibold bg-neutral-100 text-neutral-700 rounded-full shrink-0 hover:bg-neutral-200">Architecture</button>
+    <button class="px-4 py-2 text-xs font-semibold bg-neutral-100 text-neutral-700 rounded-full shrink-0 hover:bg-neutral-200">Frontend</button>
+  </div>
+  ```
+* **The Waitsec Way:** Protect vertical mobile screen space. Keep navigation filters on a single horizontal plane.
+
+### 3. The Uncontrollable Infinite Scroll
+
+* **The Bad Habit:** Loading 20 more articles automatically every time the user scrolls near the bottom of the page, with zero option to stop.
+* **The Problem:** The footer, contact links, copyright, and RSS feed links become completely unreachable because the page keeps jumping and inserting new items.
+* **Why It Fails:** Users get trapped in an endless scroll. If they want to find an older article or visit the privacy policy, they are blocked.
+* **Clean Fix:** Use clean, explicit pagination buttons or a manual "Load More Articles" button that only triggers when clicked:
+  ```html
+  <div class="flex items-center justify-between pt-10 border-t border-neutral-200">
+    <a href="?page=1" class="px-4 py-2 text-sm font-medium border border-neutral-300 rounded-lg hover:bg-neutral-50">
+      &larr; Newer Posts
+    </a>
+    <span class="text-xs text-neutral-500">Page 2 of 8</span>
+    <a href="?page=3" class="px-4 py-2 text-sm font-medium border border-neutral-300 rounded-lg hover:bg-neutral-50">
+      Older Posts &rarr;
+    </a>
+  </div>
+  ```
+* **The Waitsec Way:** Put the user in total control of their navigation. Never trap users with automatic background triggers.
+
+### 4. The Tiny Unreadable Date Stamp
+
+* **The Bad Habit:** Showing dates in 9px light gray text (`text-[9px] text-gray-300`), making it nearly invisible against white backgrounds.
+* **The Problem:** Readers have no idea whether an engineering tutorial was written yesterday or seven years ago.
+* **Why It Fails:** Outdated software tutorials waste hours of developer time. Freshness is one of the most critical decision factors for technical articles.
+* **Clean Fix:** Display dates and reading times in clear, readable 12px or 13px neutral text with proper contrast:
+  ```html
+  <div class="flex items-center gap-2 text-xs text-neutral-500 font-medium">
+    <time datetime="2026-09-12">Sep 12, 2026</time>
+    <span>•</span>
+    <span>4 min read</span>
+  </div>
+  ```
+* **The Waitsec Way:** Metadata gives context to content. Make publication dates and reading times clearly legible.
+
+---
+
+## Pre-Flight Checklist for Blog Index Pages
+
+- [ ] Do article cards stack into a clean single column on mobile without horizontal scrolling?
+- [ ] Are category filter pills contained in a single horizontal scrollable row on mobile?
+- [ ] Are article excerpts clamped to 2 or 3 lines so cards maintain a predictable height?
+- [ ] Can visitors comfortably reach the footer without being trapped by automatic infinite scroll?
+- [ ] Are publication dates and reading estimates clearly legible with strong contrast?

package/skills/waitsec-pagemaker/references/contact-page.md

@@ -0,0 +1,123 @@
+# Contact Page Blueprint (waitsec-pagemaker)
+
+Use this guide when creating a contact page, support inquiry form, or feedback screen. It ensures users can reach out smoothly on mobile and desktop without friction or broken form states.
+
+---
+
+## Complete Page Anatomy & Responsive Flow
+
+### 1. Header & Clear Expectations
+* **Desktop & Mobile:** Clear heading ("Get in Touch" or "Contact Us"), followed by an honest response estimate (e.g. "We typically respond within 24 business hours"). Setting expectations prevents users from sending repeat tickets.
+
+### 2. Form Layout & Alternative Channels (The Split)
+* **Desktop (1024px+):** 2-column layout (`grid grid-cols-1 lg:grid-cols-12 gap-12`).
+  - Left Side (7 cols): Clean form card with minimal inputs.
+  - Right Side (5 cols): Direct contact box with direct email, office address, timezone, and live status badge.
+* **Mobile (<768px):** Single vertical stack. The form appears first at the top. The direct contact details and social links appear below the form.
+
+### 3. Minimal Field Discipline
+Strictly limit input fields to what is necessary:
+1. Full Name (`<input type="text" required>`)
+2. Email Address (`<input type="email" required>`)
+3. Topic / Category (clean `<select>` dropdown or horizontal radio pills)
+4. Message (`<textarea rows="4" required>`)
+Never demand phone numbers, fax numbers, company size, or physical mailing address for a general contact form.
+
+### 4. Interactive States (Feedback Loop)
+* **Default State:** Clean borders with high contrast labels.
+* **Typing / Focus State:** High-contrast focus ring around active input (`focus-visible:ring-2 focus-visible:ring-neutral-900`).
+* **Submitting State:** The submit button disables immediately and shows a clean spinner with "Sending...".
+* **Success State:** The form disappears and displays an inline confirmation message: "Thank you! We received your message and will reply soon."
+* **Error State:** Specific field outlines turn red (`border-red-500`) with a clear error explanation directly below the field.
+
+---
+
+## Detailed Pitfalls & The 5-Point Rule
+
+### 1. The 10-Field Interrogation Form
+
+* **The Bad Habit:** Demanding full name, company name, company URL, job title, phone number, budget dropdown, industry, country, and message.
+* **The Problem:** The contact form looks like a government tax audit. On a phone, the user has to scroll through 4 screens just to find the submit button.
+* **Why It Fails:** Conversion drops by over 50% for every 2 extra fields added to a form. Mobile users will not type their corporate biography on a phone keyboard.
+* **Clean Fix:** Cut the form down to 3 essential fields: Name, Email, and Message. You can always ask follow-up questions in your reply email:
+  ```html
+  <form class="space-y-4 max-w-lg">
+    <div>
+      <label for="name" class="block text-sm font-medium text-neutral-700">Full Name</label>
+      <input type="text" id="name" required class="w-full mt-1 px-4 py-2.5 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-neutral-900 outline-none">
+    </div>
+    <div>
+      <label for="email" class="block text-sm font-medium text-neutral-700">Email Address</label>
+      <input type="email" id="email" required class="w-full mt-1 px-4 py-2.5 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-neutral-900 outline-none">
+    </div>
+    <div>
+      <label for="message" class="block text-sm font-medium text-neutral-700">Message</label>
+      <textarea id="message" rows="4" required class="w-full mt-1 px-4 py-2.5 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-neutral-900 outline-none"></textarea>
+    </div>
+    <button type="submit" class="w-full py-3 bg-neutral-900 text-white font-medium rounded-lg hover:bg-neutral-800 transition">
+      Send Message
+    </button>
+  </form>
+  ```
+* **The Waitsec Way:** Respect user time. Ask only for what you need to start the conversation.
+
+### 2. Stripping Input Focus Outlines
+
+* **The Bad Habit:** Setting `outline: none` on inputs without replacing it with a custom focus ring.
+* **The Problem:** When a user taps or tabs into an input box, the border looks completely unchanged.
+* **Why It Fails:** The user cannot tell which field is currently active. On mobile devices with virtual keyboards, it leads to typing into the wrong box.
+* **Clean Fix:** Always provide an unmistakable focus ring:
+  ```css
+  /* Tailwind standard focus */
+  input:focus {
+    outline: none;
+    border-color: #171717;
+    box-shadow: 0 0 0 2px #171717;
+  }
+  ```
+* **The Waitsec Way:** Focus indicators guide the user's attention. Never disable them without providing a better one.
+
+### 3. The Silent Ghost Submission
+
+* **The Bad Habit:** When the user clicks "Send Message", nothing happens for 4 seconds, then the page reloads back to an empty form with no message.
+* **The Problem:** The user has no idea whether the message went through or crashed. They click the button 5 more times in frustration.
+* **Why It Fails:** Software must always confirm state changes. Silent forms destroy confidence and generate duplicate tickets.
+* **Clean Fix:** Disable the submit button immediately on click, show a loading state, and render an unmistakable success card:
+  ```html
+  <!-- Button Loading State -->
+  <button disabled class="w-full py-3 bg-neutral-700 text-white font-medium rounded-lg cursor-not-allowed flex items-center justify-center gap-2">
+    <svg class="animate-spin h-4 w-4 text-white" viewBox="0 0 24 24">...</svg>
+    <span>Sending...</span>
+  </button>
+
+  <!-- Inline Success State -->
+  <div class="p-6 bg-green-50 border border-green-200 rounded-xl text-green-900">
+    <h3 class="font-bold">Message sent successfully!</h3>
+    <p class="text-sm mt-1 text-green-800">We received your note and will reply to your email within 24 hours.</p>
+  </div>
+  ```
+* **The Waitsec Way:** Never leave users guessing. Give immediate visual feedback for every user submission.
+
+### 4. The Trapped Mobile Keyboard Viewport Shift
+
+* **The Bad Habit:** Setting the contact container to fixed pixel height (`height: 600px`) or centering the form inside a strict `h-screen flex items-center`.
+* **The Problem:** When the virtual on-screen keyboard pops up on a phone, the viewport height shrinks by 50%. The input field gets pushed behind the keyboard, and the user cannot see what they are typing.
+* **Why It Fails:** Users cannot see their words, cannot review typos, and cannot reach the submit button.
+* **Clean Fix:** Allow the page to scroll naturally. Use `min-h-screen` instead of `h-screen`, and give the form bottom padding (`pb-24`) so the submit button easily clears the virtual keyboard:
+  ```html
+  <main class="min-h-screen py-12 px-4 sm:px-6 pb-32">
+    <div class="max-w-xl mx-auto">...</div>
+  </main>
+  ```
+* **The Waitsec Way:** Always account for virtual mobile keyboards. Content must scroll freely above the keyboard plane.
+
+---
+
+## Pre-Flight Checklist for Contact Pages
+
+- [ ] Is the form limited to 3 or 4 essential fields (Name, Email, Message)?
+- [ ] Does every input field have a visible label and high-contrast focus ring?
+- [ ] Is there an immediate loading spinner on the submit button to prevent double-submits?
+- [ ] Does the page display an unmistakable success banner after submission?
+- [ ] Is there a direct, visible email address (`mailto:`) provided as an alternative contact method?
+- [ ] Does the form have enough bottom padding to clear mobile virtual keyboards?

package/skills/waitsec-pagemaker/references/landing-page.md

@@ -0,0 +1,152 @@
+# Landing Page Blueprint (waitsec-pagemaker)
+
+Use this guide when creating a marketing page, product launch screen, or SaaS homepage. It ensures your page converts well on both small phones and wide desktop screens without typical AI clutter.
+
+---
+
+## Complete Page Anatomy & Responsive Flow
+
+### 1. Header & Navigation Bar
+* **Desktop (1024px+):** Horizontal layout. Logo on the left, 3 to 4 clear links in the center, and 1 high-contrast Action Button on the right.
+* **Mobile (<768px):** Clean bar with Logo on the left and a 44px by 44px hamburger menu icon or a single direct CTA button on the right. Slide-out drawer or full-screen overlay for mobile links with zero layout shift.
+
+### 2. Hero Section
+* **Desktop:** Clean centered layout or 2-column split (headline and CTA on the left, interactive product preview or screenshot on the right).
+* **Mobile:** Stacks vertically. Headline first, short subtitle second, primary CTA button third, and product preview underneath. Never push the CTA below the fold on phones.
+
+### 3. Problem & Solution Contrast
+* **Desktop:** 2-column comparison card (Current Painful Way on the left vs Your Product Solution on the right).
+* **Mobile:** Stacks into two vertical cards. Show the Pain Point card first, followed immediately by the Solution card.
+
+### 4. Core Features Grid
+* **Desktop:** 3-column grid (`lg:grid-cols-3 gap-8`). Equal card heights with consistent padding.
+* **Tablet:** 2-column grid (`md:grid-cols-2 gap-6`).
+* **Mobile:** 1-column stack (`grid-cols-1 gap-4`). Each card takes full width so text is easy to read.
+
+### 5. Social Proof & Verifiable Metrics
+* **Desktop:** Clean horizontal row of partner logos, GitHub star count, or verified customer quotes.
+* **Mobile:** 2-column logo grid or vertically stacked quote cards. Never use auto-sliding carousels that users cannot pause with a thumb.
+
+### 6. Pricing Tiers
+* **Desktop:** 3-column side-by-side cards. The recommended plan is slightly highlighted with a subtle border.
+* **Mobile:** Stacks vertically. Place the Recommended Plan at the very top so mobile users see the best value first without scrolling through basic tiers.
+
+### 7. Frequently Asked Questions (FAQ) & Footer
+* **Desktop & Mobile:** Simple vertical accordions (`<details>` and `<summary>`). Clicking opens the answer in place without jumping the page.
+* **Footer:** Clean multi-column layout on desktop, neatly stacked links on mobile with copyright, privacy, and social icons.
+
+---
+
+## Detailed Pitfalls & The 5-Point Rule
+
+### 1. The Multi-CTA Confusion Trap
+
+* **The Bad Habit:** Putting three different buttons in the hero section: "Start Free Trial", "Book a Demo", and "Read Whitepaper", all with bright background colors.
+* **The Problem:** The visitor has no idea which button is the primary action. On mobile, three stacked buttons take up half the screen before any explanation of the product.
+* **Why It Fails:** When people are given too many competing choices, they freeze and click nothing. Conversion rates drop sharply.
+* **Clean Fix:** Choose exactly 1 primary action button with your main brand color. If you need a second link, make it a plain text link or an outline button:
+  ```html
+  <div class="flex flex-col sm:flex-row items-center gap-3">
+    <a href="/signup" class="w-full sm:w-auto px-6 py-3 bg-neutral-900 text-white font-medium rounded-lg text-center">
+      Start Free Trial
+    </a>
+    <a href="#demo" class="w-full sm:w-auto px-6 py-3 text-neutral-600 hover:text-neutral-900 font-medium text-center">
+      View Live Demo &rarr;
+    </a>
+  </div>
+  ```
+* **The Waitsec Way:** Every marketing page has one main job. Make the single most important action obvious in less than 3 seconds.
+
+### 2. The Stretched Desktop Comparison Table
+
+* **The Bad Habit:** Building a wide 4-column comparison table comparing features against competitors, and letting it shrink directly into a mobile phone view.
+* **The Problem:** The columns squish down to 60px wide, table headers overlap, and checkmark icons clip outside cell borders.
+* **Why It Fails:** Users cannot read which feature belongs to which plan. Trying to pinch-to-zoom on a phone breaks page navigation.
+* **Clean Fix:** On desktop, use a clean responsive table. On mobile screens below 768px, hide the wide table and show stacked feature cards for each plan instead:
+  ```html
+  <!-- Desktop Table View -->
+  <div class="hidden md:block overflow-x-auto">
+    <table class="w-full text-left border-collapse">...</table>
+  </div>
+
+  <!-- Mobile Stacked Card View -->
+  <div class="block md:hidden space-y-4">
+    <div class="p-5 border border-neutral-200 rounded-xl">...</div>
+  </div>
+  ```
+* **The Waitsec Way:** Never force desktop tables into narrow phone viewports. Transform tables into vertical cards when the screen gets tight.
+
+### 3. Copy-Paste Feature Cards
+
+* **The Bad Habit:** Generating 6 identical cards, each with the exact same layout: a tiny blue icon, a vague headline like "Blazing Fast", and two lines of generic text.
+* **The Problem:** The features section looks like a placeholder template. High-value features and minor features look completely identical.
+* **Why It Fails:** Visitors scan pages quickly. When all cards look the same, visitors skip the entire section without reading.
+* **Clean Fix:** Give primary features more visual weight. Use a bento-grid style: 1 large card with an actual UI preview for your flagship feature, and smaller cards for supporting features:
+  ```html
+  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+    <!-- Flagship Feature (spans 2 columns on desktop) -->
+    <div class="md:col-span-2 p-6 bg-neutral-50 rounded-2xl border border-neutral-200">
+      <h3 class="text-xl font-semibold">Real-Time Sync Engine</h3>
+      <p class="text-neutral-600 mt-2">Syncs data across tabs in under 50ms.</p>
+      <!-- Real preview box -->
+      <div class="mt-4 bg-white p-4 rounded-xl border border-neutral-200 font-mono text-xs">...</div>
+    </div>
+
+    <!-- Secondary Feature -->
+    <div class="p-6 bg-neutral-50 rounded-2xl border border-neutral-200">
+      <h3 class="text-lg font-semibold">Offline Ready</h3>
+      <p class="text-neutral-600 mt-2">Queues changes until your connection returns.</p>
+    </div>
+  </div>
+  ```
+* **The Waitsec Way:** Design follows content importance. Give your biggest product advantage the biggest visual real estate.
+
+### 4. The 4-Column Pricing Overflow on Mobile
+
+* **The Bad Habit:** Putting 3 or 4 pricing plans in a rigid grid that stays horizontal on small screens, causing the page to stretch sideways.
+* **The Problem:** The mobile screen wobbles left and right, and the primary "Buy Now" buttons get clipped out of view.
+* **Why It Fails:** Buying should be effortless. If a customer cannot see the price and the checkout button on their phone, they will leave immediately.
+* **Clean Fix:** Stack pricing tiers vertically on mobile (`grid-cols-1`), switch to 2 columns on tablet (`md:grid-cols-2`), and 3 columns on desktop (`lg:grid-cols-3`). Always pin the Recommended plan at the top of the mobile stack:
+  ```html
+  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-5xl mx-auto">
+    <!-- Highlighted Plan: ordered first on mobile with order-1 -->
+    <div class="order-1 lg:order-2 p-6 border-2 border-neutral-900 rounded-2xl bg-white shadow-sm">
+      <span class="text-xs font-bold uppercase tracking-wider text-neutral-500">Most Popular</span>
+      <h3 class="text-2xl font-bold mt-1">Pro Team</h3>
+      <div class="text-4xl font-extrabold mt-3">$29<span class="text-sm font-normal text-neutral-500">/mo</span></div>
+      <a href="/checkout" class="block w-full py-3 mt-6 text-center bg-neutral-900 text-white font-medium rounded-lg">Get Started</a>
+    </div>
+
+    <!-- Basic Plan -->
+    <div class="order-2 lg:order-1 p-6 border border-neutral-200 rounded-2xl bg-white">...</div>
+
+    <!-- Enterprise Plan -->
+    <div class="order-3 lg:order-3 p-6 border border-neutral-200 rounded-2xl bg-white">...</div>
+  </div>
+  ```
+* **The Waitsec Way:** Make the purchase path obvious and thumb-friendly. Zero horizontal scrolling on checkout sections.
+
+### 5. The Jittery Full-Height Hero on Mobile
+
+* **The Bad Habit:** Forcing the hero section to `height: 100vh` on mobile phones.
+* **The Problem:** As the user scrolls down, the mobile browser URL bar shrinks or disappears. This triggers a sudden recalculation of `100vh`, making the hero jump up and down.
+* **Why It Fails:** Visual jumping disorients users and makes the website feel cheap and buggy.
+* **Clean Fix:** Use natural vertical padding (`py-16` or `py-20`), or use dynamic viewport units (`min-h-[100dvh]`):
+  ```html
+  <section class="min-h-[85vh] flex items-center justify-center py-16 px-4">
+    <div class="max-w-4xl mx-auto text-center">
+      <h1 class="text-3xl sm:text-5xl font-bold tracking-tight text-neutral-900">...</h1>
+    </div>
+  </section>
+  ```
+* **The Waitsec Way:** Respect the physical mechanics of phone browsers. Let content breathe naturally instead of locking screen height.
+
+---
+
+## Pre-Flight Checklist for Landing Pages
+
+- [ ] Does the hero section have exactly 1 high-contrast primary CTA button?
+- [ ] Do all pricing and comparison tables stack into vertical cards on screens narrower than 768px?
+- [ ] Are feature cards structured with varied visual weight (bento style) rather than copy-paste clones?
+- [ ] Is there zero horizontal page wobble when testing at 320px width?
+- [ ] Are all headlines scaled down comfortably on mobile to avoid breaking words into multiple lines?

package/skills/waitsec-quality/SKILL.md

@@ -5,7 +5,7 @@ description: "Quality and safety guardrails for AI coding agents. Enforces deep
 
 # waitsec-quality: Systemic Quality & Safety Guardrails
 
-You operate under the **waitsec-quality** engineering discipline. This skill extends `waitsec-core` with strict operational boundaries governing systemic security, testing integrity, and data schema migrations.
+You operate under the **waitsec-quality** engineering discipline. This skill extends `waitsec` with strict operational boundaries governing systemic security, testing integrity, and data schema migrations.
 
 ---
 

package/skills/waitsec-ui/SKILL.md

@@ -36,6 +36,7 @@ Activate this skill whenever:
 - **User Value Over Mechanism:** Never explain technical implementations to the user (e.g. "Data loaded via asynchronous API", "Infinite scroll - 40 items per request"). Users need product information, not architecture docs.
 - **Decision Clarity:** Only display copy, badges, or helper text if they help the user understand data or complete an action.
 - **Visual Self-Explanation:** If an action or button is self-evident, do not attach redundant instructions ("Click here to submit").
+- *Deep Dive & Triage:* Read [`skills/waitsec/references/write-info-analyzer.md`](../waitsec/references/write-info-analyzer.md).
 
 ---