longform-reader-ux-skilllisted

# Longform Reader UX Skill Engineered typography, readability ergonomics, and micro-interactions for technical blogs, hardware documentation, post-mortems, and engineering wikis. Eliminates horizontal viewport breakage, layout shift (CLS), and mobile reading fatigue without heavy JavaScript runtimes. Battle-tested in the **Megapass Intra Solusindo** SSR knowledge engine (`megapass.web.id/blog/`). --- ## 1. Two-Layer Responsive Table with Dynamic Gradient Scroll Cue ### The Physical Problem Standard HTML tables in markdown often exceed mobile screen width. Default `overflow-x: auto` provides no visual indication that columns exist off-screen, leading to hidden data and accidental page scrolling. ### The Circuit Solution A two-layer wrapper: outer container manages layout and pinned gradient shadow cue; inner container handles touch scrolling. The shadow cue automatically fades away when the user reaches the end of the table: ```html <!-- HTML Structure --> <div class="table-outer" id="tableWrapper"> <div class="table-inner"> <table> <thead> <tr> <th>Power Rail</th> <th>Nominal Voltage</th> <th>Standby Current</th> <th>Symptom on Short</th> </tr> </thead> <tbody> <tr> <td>VIN / BATT+</td> <td>19.0V - 19.5V</td> <td>10mA - 25mA</td> <td>Adapter shutoff / pulsing</td> </tr> <tr> <td>+3VALW / +5VALW</td> <td>3.3V