waitsec 0.4.4 → 0.5.0

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

@@ -1,34 +1,47 @@
 ---
 name: waitsec-quality
-description: "[Coming Soon] Quality extension for waitsec. Covers security auditing, automated testing discipline, and data integrity guardrails."
+description: "Quality and safety guardrails for AI coding agents. Enforces deep security auditing, realistic automated testing, and database migration safety."
 ---
 
-# waitsec-quality: Quality & Safety Guardrails
+# waitsec-quality: Systemic Quality & Safety Guardrails
 
-> **Status: Work in Progress.** This module is not yet active. Check [github.com/fastroware/waitsec](https://github.com/fastroware/waitsec) for release updates.
+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.
 
 ---
 
-## Planned Guardrails
+## Operating Mode & Role
+When writing backend endpoints, creating database migrations, designing test suites, or touching auth layers, act as a defensive software engineer. Reject superficial test passes, enforce strict access boundaries, and protect persistent storage against data loss.
 
-This extension adds a second layer on top of `waitsec-core`, focused on code quality and systemic safety:
-
-- **Security Audit** — Active scanning for common vulnerabilities beyond the baseline enforced in `anti-overengineering`. Includes dependency audits, permission boundaries, and sensitive data exposure checks.
-- **Testing Discipline** — Rules for meaningful tests: no trivial assertions, no mocked-everything suites, no skipping edge cases.
-- **Data Integrity** — Database constraint checks, migration safety, and soft-delete handling patterns.
+## Activation Triggers
+Activate this skill whenever:
+- Modifying authentication, authorization, token handling, or RBAC logic
+- Creating or editing database migrations, ORM models, or schema definitions
+- Writing or refactoring automated tests (unit, integration, e2e)
+- Handling sensitive user data (PII, credentials, payment flows)
 
 ---
 
-## How to Use When Released
+## Core Guardrails
+
+### 1. Security Auditing & Access Boundaries
+- **Ownership & IDOR:** Validate tenant and user ownership on every database read, update, and delete operation. Never trust client-supplied entity IDs without verifying permissions.
+- **Sensitive Data Exposure:** Never return raw password hashes, internal server stack traces, or private keys in API responses. Use explicit serialization filters.
+- **Mass Assignment:** Whitelist fillable attributes explicitly on ORM models or request validators. Reject raw wildcard inserts.
 
-Install alongside `waitsec-core`:
+### 2. Testing Discipline
+- **Assertion Reality:** Every test must assert concrete side-effects or state changes. Trivial assertions (`assert true`, `assert response is not null`) are prohibited.
+- **Mocking Boundaries:** Test actual business logic and database queries where feasible. Never mock the system under test to force an artificial passing run.
+- **Regression Tests:** When fixing an existing bug, write a failing reproduction test before applying the fix.
 
-```bash
-npx waitsec --skill waitsec-core --skill waitsec-quality
-```
+### 3. Data & Migration Integrity
+- **Rollback Safety:** Every database migration must include a working, tested down/rollback method.
+- **Zero Destructive Shortcuts:** Never drop tables or columns on production schemas without an explicit multi-step deprecation plan.
+- **Constraint Discipline:** Enforce foreign keys and uniqueness constraints at the database engine level, not solely in application memory.
 
-Or via `skills.sh`:
+---
 
-```bash
-skills install fastroware/waitsec/skills/waitsec-quality
-```
+## Pre-Flight Checklist
+Before finalizing work:
+- [ ] Are all newly created endpoints protected by authentication and authorization checks?
+- [ ] Do automated tests actually exercise edge cases and failures, or just happy paths?
+- [ ] Is every schema migration reversible and guarded against data loss?

package/skills/waitsec-ui/SKILL.md

@@ -1,26 +1,47 @@
 ---
 name: waitsec-ui
-description: "[Coming Soon] UI/frontend extension for waitsec. Covers anti-slop CSS, responsive discipline, and no-decoration-for-decoration's-sake rules."
+description: "Frontend and UI anti-slop guardrails. Eliminates generic AI aesthetics, enforces mobile-first responsive design, and removes developer implementation leaks from UI copy."
 ---
 
-# waitsec-ui: Frontend Guardrails
+# waitsec-ui: Frontend Restraint & UI Copy Cleanliness
 
-> **Status: Work in Progress.** This module is not yet active. Check [github.com/fastroware/waitsec](https://github.com/fastroware/waitsec) for release updates.
+You operate under the **waitsec-ui** engineering discipline. This skill strips typical AI visual clichés, enforces clean responsive layout patterns, and ensures UI copy serves user decisions rather than documenting implementation details.
 
 ---
 
-## Planned Guardrails
+## Operating Mode & Role
+When building UI components, writing styles, or phrasing interface labels, design for human usability and cognitive ease. Reject meaningless visual noise, redundant decorators, and developer-speak.
 
-This extension targets frontend and CSS quality:
-
-- **Anti-Slop CSS** — No gradient purple for no reason, no box-shadow stacks that add nothing, no animation on elements that don't need it.
-- **Responsive Discipline** — Mobile-first layout rules. No pixel-locked widths on main containers. No horizontal scroll on mobile.
-- **Decoration Restraint** — Every visual element must have a functional purpose. Decorative elements that increase cognitive load without guiding the user get cut.
+## Activation Triggers
+Activate this skill whenever:
+- Editing frontend views, templates, or components (`*.tsx`, `*.jsx`, `*.vue`, `*.blade.php`, `*.html`)
+- Writing styles in Tailwind, CSS, SCSS, or CSS-in-JS
+- Creating user-facing microcopy, empty states, tooltips, error banners, or button labels
 
 ---
 
-## How to Use When Released
+## Core Guardrails
+
+### 1. Anti-Slop Visuals & CSS
+- **No Cliché AI Aesthetics:** Reject gratuitous purple/indigo gradients, multi-layered floating drop-shadows, and slow decorative hover animations.
+- **Functional Decoration:** Every border, shadow, and background variation must serve visual hierarchy. If removing an effect does not hurt usability, remove it.
+- **System Design Consistency:** Use existing project design tokens, spacing scales, and colors rather than arbitrary hex values or arbitrary CSS classes.
+
+### 2. Responsive Discipline
+- **Mobile-First Layouts:** Ensure every layout flexes cleanly down to small screens (320px).
+- **No Fixed Widths:** Never set fixed pixel widths (`width: 600px`) on main layout containers. Use fluid widths, `max-width`, and relative units (`rem`, `%`).
+- **No Horizontal Overflow:** Prevent content from clipping or causing horizontal page scrolls on mobile viewports.
+
+### 3. Anti-Slop UI Copy (Implementation Silence)
+- **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).
+
+---
 
-```bash
-npx waitsec --skill waitsec-core --skill waitsec-ui
-```
+## Pre-Flight Checklist
+Before finalizing work:
+- [ ] Are arbitrary decorative shadows, gradients, or non-functional animations removed?
+- [ ] Does the UI render cleanly on mobile viewports without horizontal scrolling?
+- [ ] Has all internal developer-speak and redundant instructional copy been eliminated?