What problem does it solve? Tool sections on documentation sites often ship broken: they open with prose instead of a working demo, make claims the tool no longer keeps, contain stale screenshots, have tab links that all open the same panel, or sprawl across dozens of viewports. This Skill provides six enforceable rules to build or repair a tool's section so it shows the tool working first and never lies about what the tool does. ## Core Features & Use Cases - Demo-first structure: Enforces a tab layout where the "In action" panel opens by default, with the value proposition visible in the page header on every panel. - Truth verification: Requires every claim to match the tool's current behavior, with numbers pulled from the tool's own measured state rather than typed into templates. - Measured one-viewport rule: Mandates scrollHeight checks at 1280x800 and 390x844 for both language editions, with before/after numbers in the commit message. - Scripted screenshots: Frames are captured by a committed script running the tagged release, with text output kept beside each frame for search and accessibility. - Use Case: A Hugo documentation site has a tool page whose screenshots are a year old and whose tab links all open the first panel. Apply this Skill to re-shoot frames from the released build, fix the tab-addressing contract, and verify every panel link in a browser. ## Quick Start Use the tool-section-page skill to audit and rebuild the documentation section for my CLI tool so it opens with a real demo and fits one viewport.
